@extends('layout.main')
@section('body_main')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">Data Terakhir</h4>
                     <button type="button" class="btn btn-success" data-bs-target="#modalCreateFile" data-bs-toggle="modal">Tambah File</button>
                </div>
                <div class="card-body p-2">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <input type="text" onchange="searchData(this)" class="form-control" placeholder="Search">
                        <button type="button" class="btn btn-primary">Cari</button>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>File Folder</th>
                                <th>Tanggal Modifikasi</th>
                            </tr>
                        </thead>
                        <tbody id="tableFolderLastUpdated">
                            <!-- data dari fetch masuk sini -->
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    @include('dashboardV2.modal.create')
    @include('dashboardV2.modal.view')
    <script>
        const katDok = @json($katDok);
        const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
        const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]->sub_unit_kerja);
        const mappingUnitKerjaPegawai = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);

        function fetchData(){
            fetch(`/last-document`)
            .then(response => response.json())
            .then(data => {
                    const tbody = document.getElementById('tableFolderLastUpdated');
                    const resData = data?.data || [];

                    if (resData.length === 0) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    Tidak ada data
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    tbody.innerHTML = resData.map(item => {
                    const fullPath = item.file;
                    console.log(item);

                    const parts = fullPath.split('/');

                    const fileName = parts.pop();          // ambil paling belakang
                    const folderPath = parts.join('/');    // gabung sisanya

                    return `
                        <tr>
                            <td>📄<a href="#" class="file-link"
                                data-file="${item.file}"
                                data-fileName="${fileName || '-'}"
                                data-id="${item.file_directory_id}"
                                data-no_dokumen="${item.no_dokumen || '-'}"
                                data-tanggal_terbit="${item.tanggal_terbit || '-'}" data-permission_file="${item.permission_file || '-'}">${fileName}</a></td>
                            <td>${folderPath}</td>
                            <td>${formatTanggal(item.entry_at)}</td>
                        </tr>
                    `;
                }).join('');


                })
                .catch(error => console.error('Error : ', error))
        }

        function formatTanggal(dateString) {
            const d = new Date(dateString);

            return d.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
        fetchData()

        let colCount = 1;
        $(document).ready(function() {
            $('.unit_kerja').select2({
                placeholder: '--- Pilih Unit Kerja ---',
                allowClear: true,
                width: '100%',
                ajax: {
                    url : '/select-unit-kerja',
                    dataType: 'json',
                    delay: 250,
                    data: function(params){
                        let q = '';
                        if(allAkses){
                            q = params.term;
                        }else{
                            q = authUnitKerja?.name ?? '';
                        }

                        return { q };
                    },
                    processResults: function(data){
                        let results = data?.data.map(item => ({
                            id: item.id,
                            text: item.name
                        }));
                        return { results };
                    },
                    cache: true,
                },
                minimumInputLength: 0,
            });

            $('.sub_unit_kerja').select2({
                placeholder: '-- Pilih Sub Unit Kerja --',
                allowClear: true,
                width: '100%',
            });

            // --- isi default unit kerja ---
            if(authUnitKerja){
                let option = new Option(authUnitKerja.name, authUnitKerja.id, true, true);
                $('.unit_kerja').append(option).trigger('change');
            }

            let initialUnit = $('.unit_kerja').val();
            if(initialUnit){
                loadSubUnitKerja(initialUnit);
            }

            // jalankan setiap kali unit_kerja berubah
            $('.unit_kerja').on('change', function(){
                let idUnit = $(this).val();
                if(idUnit){
                    loadSubUnitKerja(idUnit);
                }
            });

            selectOptionUnitKerjaV1(0);
        });

        function loadSubUnitKerja(unitId){
            $('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');

            $.ajax({
                url: `/select-sub-unit-kerja/${unitId}`,
                method: 'GET',
                success: function(response) {
                    if (response?.data) {
                        response.data.forEach(unit => {
                            let selected = (authSubUnitKerja && unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk);
                            const option = new Option(unit.name, unit.id, false, selected);
                            $('.sub_unit_kerja').append(option);
                        });
                        $('.sub_unit_kerja').trigger('change');
                    }
                }
            });
        }


        function addFormV2(){
            let col = $("#col_add_fileV2");
            let html = '';

                html += `
                <div class="row g-3 align-items-start" id="col-${colCount}">
                    <hr class="my-3" />
                        <div class="col-12 d-flex justify-content-end">
                            <button type="button"
                                    class="btn btn-sm btn-danger"
                                    onclick="removeCol(${colCount})">
                                <i class="fa-solid fa-trash"></i> Hapus
                            </button>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
                            <select class="form-select"
                                    name="data[${colCount}][id_unit_kerja]"
                                    id="select_id_unit_kerja_${colCount}"
                                    required>
                                <option value="" disabled selected>Pilih Unit</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></label>
                            <select class="form-select"
                                    name="data[${colCount}][id_sub_unit_kerja]"
                                    id="select_id_sub_unit_kerja_${colCount}"
                                    required>
                                <option value="" disabled selected>Pilih Sub Unit</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kategori Dokumen <span class="text-danger">*</span></label>
                            <select class="form-select"
                                    name="data[${colCount}][master_kategori_directory_id]"
                                    id="select_kategori_${colCount}"
                                    required>
                                <option value="" disabled selected>Pilih Kategori</option>
                                @foreach ($katDok as $kat)
                                <option value="{{ $kat->master_kategori_directory_id }}/{{ $kat->nama_kategori_directory }}">
                                    {{ $kat->nama_kategori_directory }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Nomor Dokumen</label>
                            <div class="input-group">
                                <span class="input-group-text">#</span>
                                <input type="text"
                                    class="form-control"
                                    name="data[${colCount}][no_dokumen]"
                                    placeholder="Contoh: 001/RS/IT/I/2026">
                            </div>
                            <div class="form-text text-muted">Opsional, isi jika ada nomor resmi dokumen.</div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Tanggal Terbit</label>
                            <input class="form-control"
                                    type="date"
                                    name="data[${colCount}][date_active]"
                                    required>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>

                            <div class="border rounded-3 p-2 bg-light">
                                    <div class="form-check">
                                    <input class="form-check-input"
                                            type="radio"
                                            name="data[${colCount}][is_permission]"
                                            id="perm_yes_${colCount}"
                                            value="1"
                                            required>
                                    <label class="form-check-label" for="perm_yes_${colCount}">Iya</label>
                                    </div>

                                    <div class="form-check mt-1">
                                    <input class="form-check-input"
                                            type="radio"
                                            name="data[${colCount}][is_permission]"
                                            id="perm_no_${colCount}"
                                            value="2"
                                            required>
                                    <label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
                                    </div>
                            </div>

                        </div>

                        <div class="col-md-12">
                            <label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>

                            <div class="border rounded-3 p-3 bg-white shadow-sm">
                                <input class="form-control"
                                    type="file"
                                    id="fileUpload_${colCount}"
                                    accept=".pdf"
                                    name="data[${colCount}][file]">
                                <div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
                            </div>

                            <div class="form-text text-muted">
                                Format yang didukung: <b>PDF</b>.
                            </div>
                        </div>

                    </div>
                    `;
                col.append(html)
                selectOptionUnitKerjaV1(colCount)
                colCount++;
        }

        function removeCol(count){
            $(`#col-${count}`).remove()
        }

        function selectOptionUnitKerjaV1(colCount) {
            let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
            let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);

            // inisialisasi select2 untuk Unit Kerja
            selectUnit.select2({
                placeholder: '-- Pilih Unit Kerja --',
                allowClear:true,
                width: '100%',
                dropdownParent: selectUnit.parent(),
                ajax:{
                    url : '/select-unit-kerja',
                    dataType: 'json',
                    delay: 250,
                    data: function(params){
                        return { q: params.term }
                    },
                    processResults: function(data){
                        return {
                            results : data?.data.map(item => ({
                                id: item.id+'/'+item.name,
                                text: item.name,
                                sub_units: item.sub_unit_kerja // kirim ke front
                            }))
                        }
                    },
                    cache: true,
                },
                minimumInputLength: 1,
            });

            selectSubUnit.select2({
                    placeholder: '-- Pilih Sub Unit Kerja --',
                    allowClear: true,
                    width: '100%',
                    dropdownParent: selectSubUnit.parent()
                });

            // event ketika unit kerja dipilih
            selectUnit.on('select2:select', function (e) {
                let data = e.params.data; // data unit kerja terpilih
                selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');

                if (data.sub_units && data.sub_units.length > 0) {
                    data.sub_units.forEach(sub => {
                        selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
                    });
                }

                // aktifkan select2 untuk sub unit

            });
        }

        let currentFile = null;
        let idDirectory = null;
        document.addEventListener('click', function(e){
            if(e.target.matches('.file-link')){
                e.preventDefault();
                let fileUrl = e.target.getAttribute('data-file');
                let noDokumen = e.target.getAttribute('data-no_dokumen')
                let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit')
                let permissionFile = e.target.getAttribute('data-permission_file')
                let fileName = e.target.getAttribute('data-fileName')
                currentFile = fileUrl;
                idDirectory = e.target.getAttribute('data-id');


                const titleEl = document.getElementById('confirm_preview_file');
                if (titleEl) titleEl.textContent = fileName;

                // set footer info
                const noEl = document.getElementById('confirm-upload-dokumen');
                if (noEl) noEl.textContent = noDokumen;

                const tglEl = document.getElementById('confirm-time-dokumen');

                if (tglEl) tglEl.textContent = tanggalTerbit;

                const permEl = document.getElementById('confirm-permission');
                if (permEl) {
                    // contoh label permission biar enak dibaca
                    const isPublic = (permissionFile === 'true' || permissionFile.toLowerCase() === 'iya');
                    permEl.textContent = isPublic ? 'Bisa dilihat unit lain' : 'Hanya unit ini';
                    permEl.className = 'badge ' + (isPublic ? 'bg-success' : 'bg-secondary');
                }
                let previewBox = document.getElementById('file-preview');
                previewBox.innerHTML = `<iframe src="/file-preview/${idDirectory}" width="100%" height="500px" style="border:none;"></iframe>`;
                $("#previewModal").modal('show')
            }

            if(e.target.id === 'delete-file'){
                if(!currentFile){
                    Swal.fire({
                        text: "Tidak ada file yang dipilih!",
                        icon: "warning",
                        confirmButtonText: "OK"
                    });
                    return;
                }
                Swal.fire({
                    title: 'Yakin ingin menghapus file ini?',
                    text: "File akan dihapus",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if(result.isConfirmed){
                        fetch(`/delete-file/${idDirectory}`, {
                            method: 'DELETE',
                            headers: {
                                'Content-Type' : 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            },
                            body: JSON.stringify({ file: currentFile })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if(data.success){
                                Swal.fire({
                                    text: 'File berhasil dihapus',
                                    icon: 'success',
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                                $("#previewModal").modal("hide");
                                fetchData()
                                currentFile = null;
                                idDirectory = null;
                            }else{
                                Swal.fire({
                                    text: 'Gagal menghapus file',
                                    icon: 'error'
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err);
                            Swal.fire({
                                text: 'Terjadi error saat menghapus file ',
                                icon: 'error'
                            });
                        });
                    }
                })
            }

            if(e.target.matches('#btn-view-full')){
                window.open(`/file-preview/${idDirectory}`, '_blank');
            }
        })
    </script>
@endsection