@extends('layouts.panel.app', ['title' => 'Data Surat'])

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Surat Rekomendasi PPDS</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data surat di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Data Surat</h4>
                    <div class="card-header-action">
                        <div style="display: flex;">
                            <form action="{{ route('admin.letter-ppds', ['param' => request()->query('filter')]) }}" method="GET" style="display: flex;">
                                <input type="text" name="filter" class="form-control m-2" placeholder="nama atau nomor" value="{{ request()->query('filter') }}">
                                <button type="submit" class="btn btn-info m-2">Filter</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr>
                                    <th>DATA SURAT</th>
                                    <th>DATA DOKTER</th>
                                    <th>DATA PPDS</th>
                                    <th>STATUS</th>
                                    <th style="text-align:center">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        {{ $item->title }}
                                        <br>
                                        <label class="text-info">{{ $item->no }}</label>
                                        <br>
                                        <p class="text-success">Berlaku sampai {{ date('d F Y', strtotime($item->letter_periode)) }}</p>
                                    </td>
                                    <td>
                                        <i class="fas fa-user"></i>
                                        {{ $item->name }}
                                        <br>
                                        {{ $item->place }}, {{ date('d F Y', strtotime($item->birth_date)) }}
                                        <br>
                                        <i class="fas fa-map-marker-alt"></i>
                                        {{ $item->address }}
                                        <br>
                                        <strong>{{ $item->npa_idi }}</strong> /
                                        {{ $item->npac }}
                                        <br>
                                        <label class="text-primary">{{ $item->competency }}</label>
                                    </td>
                                    <td>
                                        <i class="fas fa-building"></i>
                                        {{ $item->work_position }}
                                        <br>
                                        {{ $item->work_phone }}
                                        <br>
                                        <i class="fas fa-map-marker-alt"></i>
                                        {{ $item->work_address }}
                                        <br>
                                        <label class="text-primary"><strong>{{$item->specialist_type == 'SPESIALIS' ? 'Spesialis' : 'Sub Spesialis'}} {{ ucwords($item->specialist_education) }}</strong></label>
                                    </td>
                                    <td>
                                        @if ($item->is_active == "Y")
                                        <div class="badge badge-success mt-2">Aktif</div>
                                        @else
                                        <div class="badge badge-danger mt-2">Tidak Aktif</div>
                                        @endif
                                        <br>

                                    </td>
                                    <td>
                                        <div class="row justify-content-md-center">
                                            @if ($item->is_active == "Y")
                                            <a href="{{ route('admin.letter-ppds.edit', $item->id) }}" class="btn btn-primary btn-action m-1" data-toggle="tooltip" title="Ubah"><i class="fas fa-pencil-alt"></i></a>
                                            @else
                                            <a href="#" class="btn btn-light btn-action mt-1 expairedBtn" data-date="{{$item->letter_periode}}" data-toggle="tooltip" title="Kadaluarsa"><i class="fas fa-window-close"></i></a>
                                            @endif
                                            <a target="_blank" href="{{ route('admin.letter-ppds.cetak', $item->id) }}" class="btn btn-dark btn-action print-letter m-1" data-id="{{ $item->id }}" data-toggle="tooltip" title="Cetak"><i class="fas fa-print"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <div class="alert alert-danger">
                                    Data surat belum tersedia.
                                </div>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-felx justify-content-center">
                    <div class="card-footer text-right">
                        {{ $data->links('vendor.pagination.bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function() {
            function formatDateIndonesia(date) {
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    weekday: 'long',
                };
                return new Date(date).toLocaleDateString('id-ID', options);
            }

            $(".expairedBtn").click(function() {
                date = $(this).data('date');
                swal("Informasi",
                    "Surat ini telah kadaluarsa pada \n" + formatDateIndonesia(date) + " .",
                    "warning");
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all "delete-letter" buttons
            $('.delete-letter').click(function() {
                var id = $(this).data('id');

                // Pilih form berdasarkan id
                const submitBtn = document.querySelector('#delete-letter-' + id);

                // Jika form valid, tampilkan loading spinner pada tombol submit
                showLoading();
                disableButton();

                // Show confirmation dialog using SweetAlert
                swal({
                    title: "Yakin Hapus Data " + id + " Ini ?",
                    text: "Cek Data dan konfirmasi Jika sudah sesuai !",
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Hapus",
                    cancelButtonText: "Batal",
                    cancelButtonColor: "#FA2A21",
                    confirmButtonColor: "#1AA13E",
                    reverseButtons: !0
                }).then(function(e) {
                    if (e.value === true) {
                        // Send form data
                        $('#delete-letter-' + id).closest('form').submit();
                    } else {
                        e.dismiss;
                        // Hilangkan loading spinner pada tombol submit
                        hideLoading();
                        enableButton();
                    }
                }, function(dismiss) {
                    return false;
                    // Hilangkan loading spinner pada tombol submit
                    hideLoading();
                    enableButton();
                });


                // Fungsi untuk menampilkan loading spinner pada tombol submit
                function showLoading() {
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Proses...';
                    submitBtn.disabled = true;
                }

                // Fungsi untuk menghilangkan loading spinner pada tombol submit
                function hideLoading() {
                    submitBtn.innerHTML = '<i class="fas fa-trash"></i>';
                }

                // Fungsi untuk menonaktifkan tombol submit
                function disableButton() {
                    submitBtn.disabled = true;
                }

                // Fungsi untuk mengaktifkan tombol submit
                function enableButton() {
                    submitBtn.disabled = false;
                }

            });

        });
    </script>

</section>
@endsection