@extends('layout.base')

@section('content')
    <style>
        .modal-backdrop.show {
            opacity: 0.5 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .modal-content {
            background-color: #fff !important;
            z-index: 1055;
            /* pastikan di atas backdrop */
        }

        .select2-container--default .select2-selection--single {
            background-color: #ffffff !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
            height: 38px !important;
            border-radius: 4px !important;
        }

        /* Style teks yang ditampilkan */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #212529 !important;
            background-color: transparent !important;
            line-height: 36px !important;
        }

        /* Panah dropdown */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        /* Style dropdown saat terbuka */
        .select2-container--open .select2-dropdown {
            background-color: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #ced4da !important;
            z-index: 9999 !important;
        }
    </style>
    <!-- Modal Import -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Certificate List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableCertificate">
                <thead>
                    <tr>
                        <th></th>
                        <th>No</th>
                        <th></th>
                        <th>Name</th>
                        <th>Country</th>
                        <th>Total accreditation</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modalPrint" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Print E-Certification</h5>
                </div>
                <div class="modal-body" id="certificateContent">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-rounded btn-sm"
                        data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-rounded btn-sm">Print</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const printBtn = document.querySelector("#modalPrint .btn-primary");

            printBtn.addEventListener("click", async function() {
                const content = document.getElementById("certificate-body-print");
                if (!content) {
                    alert("Certificate body belum ditemukan!");
                    return;
                }

                const {
                    jsPDF
                } = window.jspdf;
                const canvas = await html2canvas(content, {
                    scale: 2,
                    useCORS: true, // biar bisa load image dari asset/public
                    allowTaint: true
                });

                const imgData = canvas.toDataURL("image/png");

                // Buat PDF ukuran A4
                const pdf = new jsPDF("p", "mm", "a4");
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();

                // Biar pas ukuran A4, langsung fit ke width & height
                pdf.addImage(imgData, "PNG", 0, 0, pageWidth, pageHeight);

                pdf.save("certificate.pdf");
            });
        });
    </script>
    <script>
        const CompactUrls = {
            _datatable: "{{ route('certificate.datatable') }}",
        }


        window.APP_URL = "{{ env('APP_URL') }}";

        $(function() {
            let selectedCountry = $('#countryFilter').val();

            let table = $('#datatableCertificate').DataTable({
                scrollY: true,
                scrollX: true,
                scrollCollapse: true,
                serverSide: true,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        defaultContent: '',
                    },
                    {
                        data: 'DT_RowIndex',
                        className: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        searchable: false,
                        defaultContent: '',
                    },
                    {
                        data: 'users.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'countries.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'total_accreditation',
                        className: "text-center",
                        searchable: false,
                        defaultContent: '0'
                    }
                ]
            });

            function formatChild(data, id) {
                let html = `<table class="table table-sm table-striped child-table">
                                <thead class="bg-secondary">
                                    <tr>
                                        <th></th>
                                        <th>No</th>
                                        <th class="p-4">Full Name</th>
                                        <th class="p-4">Function</th>
                                        <th class="p-4">Nationality</th>
                                        <th class="p-4">E-Certificate</th>
                                    </tr>
                                </thead>
                                <tbody>`;

                data.data.forEach((item, index) => {
                    html += `
                        <tr>
                            <td></td>
                            <td>${index + 1}</td>
                            <td>${item.full_name || '-'}</td>
                            <td>${item.function_name || '-'}</td>
                            <td>${item.nationality || '-'}</td>
                            <td>${item.certificate || '-'}</td>
                        </tr>`;
                });

                html += `</tbody></table>`;
                return html;
            }

            $('#datatableCertificate tbody').on('click', 'td.dt-control', function() {
                let tr = $(this).closest('tr');
                let row = table.row(tr);
                let icon = $(this).find('i');

                if (row.child.isShown()) {
                    row.child.hide();
                    icon.removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
                } else {
                    let id = row.data().id;
                    $.get("{{ route('certificate.datatable.child', ':id') }}".replace(':id', id), function(
                        res) {
                        row.child(
                                `<div class="child-container-wrapper">${formatChild(res, id)}</div>`
                            )
                            .show();
                        icon.removeClass('fa-plus-circle text-primary').addClass(
                            'fa-minus-circle text-danger');
                    });
                }
            });

            $(document).on('click', '.certificate-btn', function() {
                let id = $(this).data('id');

                $.ajax({
                    url: `certificate/fetch/${id}`,
                    type: 'GET',
                    success: function(response) {
                        $('#certificateContent').html(response);
                        $('#modalPrint').modal('show');
                    },
                    error: function(xhr) {
                        let message = "An error occurred.";

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        } else if (xhr.status === 404) {
                            message = "No certificates available.";
                        }

                        Swal.fire({
                            text: message,
                            icon: "error",
                            confirmButtonText: "Ok, got it!"
                        });
                    }
                });

            });
        });
    </script>
@endsection