{{--
    Partial: project_files_section.blade.php
    Reusable file attachment section for 3 levels:
      - Level modul: pass $modul (string)
      - Level baris RAB / transaksi: pass $fileableType + $fileableId
    Required vars: $project, $files (Collection of ProjectFile)
--}}
@php
    $sectionTitle = $sectionTitle ?? 'File Lampiran';
@endphp

<div class="card mt-4 no-print">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold">
            <i class="bx bx-paperclip me-2 text-secondary"></i>{{ $sectionTitle }}
        </h6>
        <span class="badge bg-label-secondary">{{ $files->count() }} file</span>
    </div>
    <div class="card-body">

        {{-- Flash message upload --}}
        @if(session('file_success'))
            <div class="alert alert-success alert-dismissible py-2 mb-3" role="alert">
                <i class="bx bx-check-circle me-1"></i>{{ session('file_success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('file_error'))
            <div class="alert alert-danger alert-dismissible py-2 mb-3" role="alert">
                <i class="bx bx-x-circle me-1"></i>{{ session('file_error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Form Upload --}}
        <form action="{{ route('admin.files.store', $project) }}" method="POST" enctype="multipart/form-data" class="mb-4">
            @csrf
            @isset($modul)
                <input type="hidden" name="modul" value="{{ $modul }}">
            @endisset
            @isset($fileableType)
                <input type="hidden" name="fileable_type" value="{{ $fileableType }}">
                <input type="hidden" name="fileable_id"   value="{{ $fileableId }}">
            @endisset

            <div class="row g-2 align-items-end">
                <div class="col-md-7">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">
                        Pilih File <span class="text-muted fw-normal">(PDF, JPG, PNG — maks. 10MB)</span>
                    </label>
                    <input type="file" name="file" class="form-control @error('file') is-invalid @enderror"
                           accept=".pdf,.jpg,.jpeg,.png" required onchange="this.form.querySelector('button[type=submit]').disabled = !this.files.length">
                    @error('file') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-outline-primary btn-sm w-100" disabled>
                        <i class="bx bx-upload me-1"></i>Upload Lampiran
                    </button>
                </div>
            </div>
        </form>

        {{-- Daftar File --}}
        @if($files->isEmpty())
            <div class="text-center text-muted py-3" style="font-size:0.85rem;">
                <i class="bx bx-folder-open" style="font-size:2rem; color:#d1d5db;"></i>
                <p class="mt-1 mb-0">Belum ada file yang dilampirkan.</p>
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:32px;"></th>
                            <th>Nama File</th>
                            <th style="width:90px;" class="text-end">Ukuran</th>
                            <th style="width:130px;">Upload Oleh</th>
                            <th style="width:120px;">Tanggal</th>
                            <th style="width:100px;" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($files as $f)
                        <tr>
                            <td class="text-center">
                                <i class="bx {{ $f->icon_class }} {{ $f->icon_color }}" style="font-size:1.3rem;"></i>
                            </td>
                            <td>
                                <a href="{{ route('admin.files.preview', [$project, $f]) }}"
                                   onclick="openFilePreviewModal('{{ addslashes($f->nama_asli) }}', '{{ route('admin.files.preview', [$project, $f]) }}', '{{ route('admin.files.download', [$project, $f]) }}', '{{ $f->mime_type }}'); return false;"
                                   class="fw-semibold text-primary text-decoration-none" style="font-size:0.85rem;" title="Klik untuk lihat preview">
                                    {{ $f->nama_asli }} <i class="bx bx-show-alt text-muted" style="font-size:0.8rem;"></i>
                                </a>
                                <br><small class="text-muted">{{ strtoupper(pathinfo($f->nama_asli, PATHINFO_EXTENSION)) }}</small>
                            </td>
                            <td class="text-end text-muted" style="font-size:0.82rem;">{{ $f->ukuran_readable }}</td>
                            <td style="font-size:0.82rem;">{{ $f->uploader->name ?? '-' }}</td>
                            <td style="font-size:0.82rem;">{{ $f->created_at->format('d/m/Y H:i') }}</td>
                            <td class="text-center">
                                <button type="button"
                                        onclick="openFilePreviewModal('{{ addslashes($f->nama_asli) }}', '{{ route('admin.files.preview', [$project, $f]) }}', '{{ route('admin.files.download', [$project, $f]) }}', '{{ $f->mime_type }}')"
                                        class="btn btn-xs btn-outline-info me-1"
                                        style="font-size:0.72rem; padding:2px 6px;" title="Lihat / Preview">
                                    <i class="bx bx-show"></i>
                                </button>
                                <a href="{{ route('admin.files.download', [$project, $f]) }}"
                                   class="btn btn-xs btn-outline-success me-1"
                                   style="font-size:0.72rem; padding:2px 6px;" title="Download">
                                    <i class="bx bx-download"></i>
                                </a>
                                <form action="{{ route('admin.files.destroy', [$project, $f]) }}" method="POST"
                                      class="d-inline" onsubmit="return confirm('Hapus file {{ addslashes($f->nama_asli) }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-xs btn-outline-danger"
                                            style="font-size:0.72rem; padding:2px 6px;" title="Hapus">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

{{-- Global Modal Preview File (Dapat dipakai di semua halaman) --}}
@once
<div class="modal fade" id="modalGlobalFilePreview" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-bold" id="globalFilePreviewTitle">
                    <i class="bx bx-show me-2 text-info"></i>Preview File Lampiran
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0 bg-dark d-flex align-items-center justify-content-center" style="min-height:400px; max-height:80vh; overflow:hidden;" id="globalFilePreviewContainer">
                {{-- Preview content dynamically populated --}}
            </div>
            <div class="modal-footer py-2 justify-content-between">
                <a href="#" id="globalFileOpenTabBtn" target="_blank" class="btn btn-sm btn-outline-secondary">
                    <i class="bx bx-export me-1"></i>Buka di Tab Baru
                </a>
                <div>
                    <a href="#" id="globalFileDownloadBtn" class="btn btn-sm btn-success me-1">
                        <i class="bx bx-download me-1"></i>Download
                    </a>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function openFilePreviewModal(title, previewUrl, downloadUrl, mimeType = '') {
    const titleEl    = document.getElementById('globalFilePreviewTitle');
    const container  = document.getElementById('globalFilePreviewContainer');
    const openTabBtn = document.getElementById('globalFileOpenTabBtn');
    const dlBtn      = document.getElementById('globalFileDownloadBtn');

    if (titleEl) titleEl.innerHTML = '<i class="bx bx-show me-2 text-info"></i>' + title;
    if (openTabBtn) openTabBtn.href = previewUrl;
    if (dlBtn) dlBtn.href = downloadUrl;

    const ext = title.split('.').pop().toLowerCase();
    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext) || mimeType.includes('image');
    const isPdf = ext === 'pdf' || mimeType.includes('pdf');

    if (container) {
        if (isImage) {
            container.innerHTML = `<img src="${previewUrl}" class="img-fluid p-2" style="max-height:78vh; object-fit:contain;" alt="${title}">`;
        } else if (isPdf) {
            container.innerHTML = `<iframe src="${previewUrl}" style="width:100%; height:78vh; border:none;"></iframe>`;
        } else {
            container.innerHTML = `
                <div class="text-center text-white py-5">
                    <i class="bx bx-file" style="font-size:3.5rem; color:#9ca3af;"></i>
                    <p class="mt-2 mb-3">Preview tidak tersedia untuk format file ini (<code>.${ext}</code>).</p>
                    <a href="${downloadUrl}" class="btn btn-sm btn-success"><i class="bx bx-download me-1"></i>Download File</a>
                </div>`;
        }
    }

    const modalEl = document.getElementById('modalGlobalFilePreview');
    if (modalEl) {
        const bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);
        bsModal.show();
    }
}
</script>
@endonce