@extends('layout.main')
<style>
    .file-tree-ul {
        list-style: none;
        padding-left: 20px;
        position: relative;
    }

    /* Garis vertikal */
    .file-tree-ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        border-left: 1px solid #ccc;
    }

    .file-tree-li {
        margin: 4px 0;
        padding-left: 20px;
        position: relative;
    }

    /* Garis horizontal */
    .file-tree-li::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        width: 20px;
        border-top: 1px solid #ccc;
    }

    /* Hilangkan garis di root */
    .file-tree-ul > .file-tree-li::before {
        border-top: none;
    }

    .folder > span {
        cursor: pointer;
        user-select: none;
    }

    .collapsed > .file-tree-ul {
        display: none;
    }

    .add-file-btn {
        margin-left: 8px;
        font-size: 12px;
        color: blue;
        cursor: pointer;
    }
</style>
@section('body_main')
    <div class="row">
    <div class="col-md-12">
        <div class="card w-100">
          <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Data</h4>
            </div>
            {{-- @dd($allAkses) --}}
            <div class="card-body p-3">
                <div class="row mb-3 mt-3">
                    <!-- Unit Kerja -->
                    <div class="col-md-2">
                        <label for="unit_kerja" class="form-label">Unit Kerja</label>
                        <select class="form-control unit_kerja" id="unit_kerja"{{ ($allAkses && ($allAkses->all_akses || $allAkses->unit_akses)) ? '' : 'disabled' }}>
                        </select>
                    </div>

                    <!-- Sub Unit Kerja -->
                    <div class="col-md-2">
                        <label for="sub_unit_kerja" class="form-label">Sub Unit Kerja</label>
                        <select class="form-control sub_unit_kerja" id="sub_unit_kerja" @if($allAkses && ($allAkses->all_akses || $allAkses->unit_akses))  multiple="multiple" @else disabled @endif>
                        </select>
                    </div>

                    <!-- Kategori Dokumen -->
                    <div class="col-md-2">
                        <label for="kategori_dok" class="form-label">Kategori Dok.</label>
                        <select class="form-control kategori_dok" id="kategori_dok" multiple="multiple" placeholder="--Pilih kategori dokumen--">
                            <option value="" disabled>Select Choose</option>
                            @foreach ($katDok as $kat)
                                <option value="{{ $kat->master_kategori_directory_id }}">{{ $kat->nama_kategori_directory }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Klasifikasi Dokumen -->
                    <div class="col-md-2">
                        <label for="klasifikasi_dok" class="form-label">Klasifikasi Dok.</label>
                        <select class="form-control klasifikasi_dok" id="klasifikasi_dok" multiple="multiple" placeholder="--Pilih klasifikasi dokumen--">
                            <option value="" disabled>Select Choose</option>
                            @foreach ($klasifikasiDok as $kla)
                                <option value="{{ $kla->master_klasifikasi_directory_id }}">{{ $kla->nama_klasifikasi_directory }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Button Cari -->
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-primary w-100" onclick="searchData()">Cari</button>
                    </div>

                    <!-- Button Tambah File -->
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-success w-100" data-bs-target="#modalCreateFile" data-bs-toggle="modal">
                            <i data-feather="plus" class="me-1"></i>
                            Tambah File</button>
                    </div>
                </div>
                <div class="row">
                    <div id="tree-wrapper" class="col-md-12 mb-3">
                         <div class="d-flex gap-2 mb-3 flex-wrap">
                            <button class="btn btn-sm btn-primary" onclick="referesh()">
                                <i class="fas fa-sync-alt"></i> Refresh
                            </button>
                            <button type="button" id="btn-download-multi" class="btn btn-sm btn-primary" onclick="downloadMultiple()" disabled>
                                <i class="fas fa-download"></i> Download Multiple  (<span id="multi-count">0</span>)
                            </button>
                            <input type="text" id="search_file" oninput="searchFile(this)" class="form-control form-control-sm" placeholder="Search" style="max-width:220px;">
                        </div>
                        <div id="file_tree"></div>
                    </div>
                   <div id="preview-wrapper" class="col-md-6 d-none">
                        <div class="card shadow-sm h-100">

                            <!-- Header -->
                            <div class="card-header d-flex justify-content-between align-items-center py-2">
                                <h6 class="mb-0">
                                    📄 Preview <strong id="confirm_preview_file"></strong>
                                </h6>
                                <button class="btn btn-sm btn-outline-danger" id="close-preview" title="Tutup Preview">✕</button>
                            </div>

                            <!-- Body -->
                            <div class="card-body p-2" style="min-height:250px; max-height:70vh; overflow:auto;">
                                <div class="d-flex justify-content-end align-items-center" style="position: sticky; top: 0; background: #ffffff; z-index: 10;">
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="download-file">⬇ Download</button>
                                </div>
                                <div id="file-preview"
                                    class="text-center text-muted d-flex justify-content-center align-items-center"
                                    style="height:100%;">
                                    <p>📂 Pilih file untuk melihat preview</p>
                                </div>
                            </div>

                            <!-- Footer -->
                            <div class="card-footer p-2 ">
                                <div class="text-black">Klasifikasi Dokumen <strong id="confirm-upload-klasifikasi"></strong></div>
                                <div class="mt-2 text-muted fst-italic small text-black">
                                    Ditambahkan oleh <strong id="confirm-upload-dokumen"></strong> pada <span id="confirm-time-dokumen"></span>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="button" class="btn btn-sm btn-outline-danger" id="delete-file">
                                        🗑 Hapus
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>


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

    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 fileName = e.target.getAttribute('data-name_file');
            let upload = e.target.getAttribute('data-upload');
            let time = e.target.getAttribute('data-time');
            let klasifikasiView = e.target.getAttribute('data-klasifikasi');
            $("#confirm-upload-dokumen").html(upload)
            $("#confirm-time-dokumen").html(time)
            $("#confirm-upload-klasifikasi").html(klasifikasiView)
            currentFile = fileUrl
            idDirectory = e.target.getAttribute('data-id');
            let ext = fileUrl.split('.').pop().toLowerCase();
            $("#confirm_preview_file").html(fileName)
            // ubah layout
            document.getElementById('tree-wrapper').classList.remove('col-md-12');
            document.getElementById('tree-wrapper').classList.add('col-md-6');
            document.getElementById('preview-wrapper').classList.remove('d-none');
            let previewBox = document.getElementById('file-preview');

            if (['jpg','jpeg','png','gif','webp'].includes(ext)) {
                previewBox.innerHTML = `
                <img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" width="100%" height="450px" alt="preview">
                `;
            } else if (ext === 'pdf') {
                previewBox.innerHTML = `
                <iframe src="/file/${fileUrl}" width="100%" height="500px" style="border:none;"></iframe>

                `;
            } else {
                previewBox.innerHTML = `
                    <p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
                    <a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
                `;
            }
        }

        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
                            });
                            const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
                              if (fileLink) {
                                    const li = fileLink.closest('li.file-tree-li');
                                    li?.remove();
                                }
                            // reset preview
                            document.getElementById('file-preview').innerHTML =
                            `<p>📂 Pilih file untuk melihat preview</p>`;

                            document.getElementById('preview-wrapper').classList.add('d-none');
                            document.getElementById('tree-wrapper').classList.remove('col-md-6');
                            document.getElementById('tree-wrapper').classList.add('col-12');
                            currentFile = null; // reset
                        } else {
                            Swal.fire({
                                text: 'Gagal menghapus file',
                                icon: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        Swal.fire({
                            text: 'Terjadi error saat menghapus file',
                            icon: 'error'
                        });
                        console.error(err);
                    });
                }
            });

        }

        $("#download-file").off('click').on('click', function(){
            if(currentFile){
                let link = document.createElement('a');
                link.href = 'file/' + currentFile;                 // alamat file
                link.download = currentFile.split('/').pop();      // nama file otomatis
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }else{
                console.error('error');

            }
        })
    });

        // tombol close
    document.getElementById('close-preview').addEventListener('click', function() {
        document.getElementById('tree-wrapper').classList.remove('col-md-6');
        document.getElementById('tree-wrapper').classList.add('col-md-12');
        document.getElementById('preview-wrapper').classList.add('d-none');
    });

</script>
<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
<script src="{{ ver('/js/dashboard/action.js') }}"></script>
@endsection