@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 id="loadingOverlay"
        style="
     display:none;
     position:fixed;
     inset:0;
     background:rgba(255,255,255,0.8);
     z-index:9999;
     align-items:center;
     justify-content:center;
     flex-direction:column;
 ">
        <div class="spinner-border text-primary" style="width:3rem;height:3rem;"></div>
        <p class="mt-3" id="loadingText">Sedang memproses, mohon tunggu...</p>
    </div>

    <!-- Modal Upload DRM -->
    <div class="modal fade" id="uploadDRMModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload DRM</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="dropZone"
                        style="border: 2px dashed #5f7ca3; padding: 30px; text-align:center; cursor:pointer;">
                        <p>Drag & Drop<br>or Click to browse the file</p>
                        <input type="file" id="uploadDRMInput" accept="application/pdf" style="display:none;">
                    </div>
                    <div id="fileInfo" class="mt-3 text-muted" style="display:none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="uploadDRMSubmit" class="btn btn-primary" disabled>Upload</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal View DRM -->
    <div class="modal fade" id="viewDRMModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">View DRM PDF</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="height: 80vh; padding:0;">
                    <iframe id="drmViewer" src="" style="width:100%;height:100%;border:none;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <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">DRM List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableDrm">
                <thead>
                    <tr>
                        <th></th>
                        <th>No</th>
                        <th>Name</th>
                        <th>Country</th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </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>
        let selectedFile = null;
        let selectedUserId = null;

        $(document).on('click', '.upload', function() {
            selectedUserId = $(this).data('id');
            selectedFile = null;
            $("#fileInfo").hide().text('');
            $("#uploadDRMSubmit").prop('disabled', true);
            $("#uploadDRMModal").modal('show');
        });

        // klik area → open file dialog
        $("#dropZone").on('click', function() {
            document.getElementById("uploadDRMInput").click();
        });

        // file via browse
        $("#uploadDRMInput").on('change', function(e) {
            handleFile(e.target.files[0]);
        });

        // drag & drop
        $("#dropZone").on("dragover", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css("background", "#eef3f9");
        });
        $("#dropZone").on("dragleave", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css("background", "");
        });
        $("#dropZone").on("drop", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css("background", "");
            if (e.originalEvent.dataTransfer.files.length > 0) {
                handleFile(e.originalEvent.dataTransfer.files[0]);
            }
        });

        function handleFile(file) {
            if (!file || file.type !== "application/pdf") {
                alert("File harus PDF!");
                return;
            }
            selectedFile = file;
            $("#fileInfo").show().text(`Dipilih: ${file.name} (${Math.round(file.size/1024)} KB)`);
            $("#uploadDRMSubmit").prop('disabled', false);
        }

        // submit upload
        $("#uploadDRMSubmit").on('click', function() {
            if (!selectedFile || !selectedUserId) return;

            let formData = new FormData();
            formData.append("file", selectedFile);

            $.ajax({
                url: "{{ route('accreditation.delegationRegistration-upload', '') }}/" + selectedUserId,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    showLoading("Uploading DRM...");
                    $("#uploadDRMModal").modal('hide');
                },
                success: function(res) {
                    hideLoading();
                    Swal.fire({
                        icon: "success",
                        title: "Success",
                        text: res.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(err) {
                    hideLoading();
                    Swal.fire({
                        icon: "error",
                        title: "Upload gagal",
                        text: err.responseJSON?.message ?? "Unknown error"
                    });
                }
            });
        });
    </script>
    <script>
        function showLoading(msg = "Sedang memproses...") {
            $("#loadingText").text(msg);
            $("#loadingOverlay").css("display", "flex");
        }

        function hideLoading() {
            $("#loadingOverlay").hide();
        }

        $(document).on('click', '.btn-list, .btn-template', async function(e) {
            e.preventDefault();
            let url = $(this).attr('href');
            showLoading();

            try {
                let response = await fetch(url, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    }
                });

                let blob = await response.blob();

                let disposition = response.headers.get("Content-Disposition");
                let filename = "download.pdf";

                if (disposition && disposition.indexOf("filename=") !== -1) {
                    let matches = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                    if (matches != null && matches[1]) {
                        filename = matches[1].replace(/['"]/g, '');
                    }
                }

                let link = document.createElement("a");
                link.href = URL.createObjectURL(blob);
                link.download = filename;
                link.click();
                URL.revokeObjectURL(link.href);
            } catch (err) {
                console.error(err);
                alert("Gagal download file");
            }

            hideLoading();
        });


        // Tombol view PDF
        $(document).on('click', '.view-drm', function() {
            const fileUrl = $(this).data('url');
            if (!fileUrl) {
                Swal.fire({
                    icon: "warning",
                    title: "File tidak ditemukan",
                    text: "Pastikan file sudah diupload."
                });
                return;
            }
            $("#drmViewer").attr('src', fileUrl);
            $("#viewDRMModal").modal('show');
        });

        const CompactUrls = {
            _datatable: "{{ route('accreditation.delegationRegistration-datatable') }}",
        }

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

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

            let table = $('#datatableDrm').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,
                    },
                    {
                        data: 'users.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'countries.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'template',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'upload',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'accre-list',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection