@extends('layouts.landing')

@section('title')
    {{ __('message.Alat Kesehatan') }}
@endsection

@section('content')
    <section class="wrapper bg-light position-relative">
        <div class="container pt-20 pt-md-20 pb-15 pb-md-17">
            <div class="row pt-5">
                <div class="col-xl-10 mx-auto">
                    <form class="filter-form mb-10" method="GET">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <div class="form-control-wrapper">
                                    <input type="search" name="keyword" value="{{ request('keyword') }}"
                                        class="form-control" placeholder="{{ __('message.Cari') }}...">
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="form-select-wrapper">
                                    <select class="form-select" name="categorySearch" aria-label="">
                                        <option value="">{{ __('message.Kategori Pencarian') }}</option>
                                        <option value="license_number"
                                            {{ request('categorySearch') === 'license_number' ? 'selected' : null }}>
                                            Nomor Izin Edar
                                        </option>
                                        <option value="product_name"
                                            {{ request('categorySearch') === 'product_name' ? 'selected' : null }}>
                                            Nama Produk
                                        </option>
                                        <option value="user_id"
                                            {{ request('categorySearch') === 'user_id' ? 'selected' : null }}>
                                            Pendaftar
                                        </option>
                                        <option value="type"
                                            {{ request('categorySearch') === 'type' ? 'selected' : null }}>
                                            Tipe
                                        </option>
                                        <option value="manufacturer"
                                            {{ request('categorySearch') === 'manufacturer' ? 'selected' : null }}>
                                            Produsen
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1 mb-3 btn-group">
                                <button type="submit" class="btn btn-primary">{{ __('message.Cari') }}</button>
                            </div>
                        </div>
                    </form>
                    <div class="container mb-6">
                        <div class="pt-2 g-gs">
                            <table class="table table-bordered table-responsive">
                                <thead class="text-center">
                                    <tr>
                                        <th scope="col">{{ __('message.No') }}</th>
                                        <th scope="col">{{ __('message.Data') }}</th>
                                        <th scope="col">{{ __('message.Aksi') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($model as $key => $value)
                                        <tr>
                                            <td class="text-center">{{ $loop->index + 1 }}</td>
                                            <td>
                                                <p>
                                                    <b class="sub-text">
                                                        {{ $value->user->registration[0]->company_name ?? '-' }}
                                                    </b>
                                                    <span class="px-1">-</span>
                                                    <span class="bg-info text-white py-1 px-2 rounded">
                                                        {{ __('message.Alat Kesehatan') }}
                                                    </span>
                                                    <span class="px-1">-</span>
                                                    <span class="bg-success text-white py-1 px-2 rounded">
                                                        {{ $value::getStatusText($value->status) }}
                                                    </span>
                                                </p>
                                                <p>
                                                    <span>{{ $value->license_number }}</span>
                                                    <span class="px-1">-</span>
                                                    <span>{{ $value->product_name }}</span>
                                                </p>
                                            </td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                <a href="javascript:void(0)" class="details"
                                                    data-id="{{ Crypt::encryptString($value->id) }}">{{ __('message.Detail') }}</a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center">
                                                <h6>{{ __('message.Tidak ada data') }}</h6>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            @if ($model->hasPages())
                                <div class="row">
                                    <div class="col">
                                        {{ $model->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <div class="modal fade" role="dialog" id="detail">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <a href="#" class="close text-white" data-bs-dismiss="modal"
                    style="position: absolute; right: 15px; font-size: 20px;">x</a>
                <div class="modal-header px-3 pt-2 pb-0 bg-primary">
                    <h5 class="text-white">{{ __('message.Detail Data Permohonan') }}</h5>
                </div>
                <div class="modal-body p-0">
                    <div class="row m-3">
                        <table class="col-6 m-3">
                            <tbody>
                                <tr>
                                    <td>{{ __('message.Nama Perusahaan') }}</td>
                                    <td>:</td>
                                    <td id="nama_perusahaan">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Alamat Perusahaan') }}</td>
                                    <td>:</td>
                                    <td id="alamat_perusahaan">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Nama Produk') }}</td>
                                    <td>:</td>
                                    <td id="nama_produk">-</td>
                                </tr>
                                <tr>
                                    <td>Tipe</td>
                                    <td>:</td>
                                    <td id="tipe">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Kelompok Produk') }}</td>
                                    <td>:</td>
                                    <td id="kelompok_produk">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Kategori') }}</td>
                                    <td>:</td>
                                    <td id="kategori">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Jenis Produk') }}</td>
                                    <td>:</td>
                                    <td id="jenis_produk">-</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="col-5 m-3">
                            <tbody>
                                <tr>
                                    <td>{{ __('message.Pabrik') }}</td>
                                    <td>:</td>
                                    <td id="pabrik">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Negara Pabrik') }}</td>
                                    <td>:</td>
                                    <td id="negara_pabrik">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Nomor Izin Edar') }}</td>
                                    <td>:</td>
                                    <td id="nomor_izin_edar">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Tanggal Terbit') }}</td>
                                    <td>:</td>
                                    <td id="tanggal_terbit">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Tanggal Expired') }}</td>
                                    <td>:</td>
                                    <td id="tanggal_expired">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Kelas') }}</td>
                                    <td>:</td>
                                    <td id="kelas">-</td>
                                </tr>
                                <tr>
                                    <td>{{ __('message.Jenis Izin') }}</td>
                                    <td>:</td>
                                    <td id="jenis_izin">
                                        <span class="bg-success text-white py-1 px-2 rounded">
                                            {{ __('message.Alat Kesehatan') }}
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $(document).ready(function() {
            $('.details').on('click', function(e) {
                e.preventDefault();
                var slug = $(this).attr('data-id');
                $.ajax({
                    type: 'GET',
                    url: '/medical-device/show/' + slug,
                    success: function(res) {
                        console.log(res);
                        $('#nama_perusahaan').text(res.nama_perusahaan);
                        $('#alamat_perusahaan').text(res.alamat_perusahaan);
                        $('#nama_produk').text(res.nama_produk);
                        $('#tipe').text(res.tipe);
                        $('#kelompok_produk').text(res.kelompok_produk);
                        $('#kategori').text(res.kategori);
                        $('#jenis_produk').text(res.jenis_produk);

                        $('#pabrik').text(res.pabrik);
                        $('#negara_pabrik').text(res.negara_pabrik);
                        $('#nomor_izin_edar').text(res.nomor_izin_edar);
                        $('#tanggal_terbit').text(res.tanggal_terbit);
                        $('#tanggal_expired').text(res.tanggal_expired);
                        $('#kelas').text(res.class + ' - ' + res.risk_class);
                        $('#detail').modal('show');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message ||
                                'Terjadi kesalahan saat memuat data.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });
        });
    </script>
@endsection