{{--
    Document vault manager.
    Variables: $property (Property model), $documentTypes (Collection)
--}}
@php
    $documents = $property->documents()->with(['documentType', 'uploadedBy'])->get();
@endphp

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-semibold">Document Vault</h6>
        <span class="badge bg-secondary bg-opacity-10 text-secondary small" id="doc-count-badge">
            {{ $documents->count() }} {{ Str::plural('document', $documents->count()) }}
        </span>
    </div>
    <div class="card-body pb-0">

        {{-- Upload row --}}
        <div class="row g-2 align-items-end mb-3">
            <div class="col-md-4">
                <label class="form-label fw-medium small mb-1">Document Type <span class="text-danger">*</span></label>
                <select id="doc-type-select" class="form-select form-select-sm">
                    <option value="">— Select Type —</option>
                    @foreach($documentTypes as $type)
                        <option value="{{ $type->id }}">{{ $type->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label fw-medium small mb-1">File</label>
                <input type="file" id="doc-file-input" class="form-control form-control-sm"
                       accept=".pdf,.jpg,.jpeg,.png,.docx">
            </div>
            <div class="col-md-3">
                <button type="button" id="doc-upload-btn" class="btn btn-primary btn-sm w-100">
                    <span id="doc-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>
                    <i class="bi bi-upload me-1" id="doc-upload-icon"></i>Upload
                </button>
            </div>
        </div>

        <div id="doc-error" class="alert alert-danger alert-dismissible border-0 py-2 small d-none mb-3">
            <span id="doc-error-msg"></span>
            <button type="button" class="btn-close btn-close-sm" onclick="this.closest('.alert').classList.add('d-none')"></button>
        </div>

        <p class="text-muted small mb-1">PDF, JPG, PNG, DOCX · max 20 MB</p>

    </div>

    {{-- Document list --}}
    <div class="table-responsive">
        <table class="table table-sm mb-0 small" id="doc-table">
            <thead class="table-light">
                <tr>
                    <th>Type</th>
                    <th>File</th>
                    <th>Size</th>
                    <th>Uploaded By</th>
                    <th>Date</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody id="doc-table-body">
                @forelse($documents as $doc)
                    <tr id="doc-row-{{ $doc->id }}">
                        <td>{{ $doc->documentType ? $doc->documentType->name : '—' }}</td>
                        <td class="text-truncate" style="max-width:180px" title="{{ $doc->original_name }}">
                            {{ $doc->original_name }}
                        </td>
                        <td class="text-muted text-nowrap">
                            @php
                                $size = $doc->size;
                                echo $size >= 1048576 ? round($size/1048576, 1) . ' MB' : round($size/1024, 1) . ' KB';
                            @endphp
                        </td>
                        <td>{{ $doc->uploadedBy ? $doc->uploadedBy->name : '—' }}</td>
                        <td class="text-muted text-nowrap">{{ $doc->created_at->format('d M Y') }}</td>
                        <td class="text-end text-nowrap">
                            <a href="{{ route('admin.property.documents.download', [$property, $doc]) }}"
                               class="btn btn-sm btn-light" title="Download">
                                <i class="bi bi-download"></i>
                            </a>
                            @if(auth()->user()->isAdmin())
                                <button type="button"
                                        class="btn btn-sm btn-light text-danger ms-1 delete-doc-btn"
                                        data-id="{{ $doc->id }}"
                                        title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr id="doc-empty-row">
                        <td colspan="6" class="text-center text-muted py-4">
                            <i class="bi bi-folder2 d-block mb-1 fs-4 opacity-25"></i>
                            No documents uploaded yet.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var csrfToken  = document.querySelector('meta[name="csrf-token"]').content;
    var typeSelect = document.getElementById('doc-type-select');
    var fileInput  = document.getElementById('doc-file-input');
    var uploadBtn  = document.getElementById('doc-upload-btn');
    var spinner    = document.getElementById('doc-spinner');
    var uploadIcon = document.getElementById('doc-upload-icon');
    var errorBox   = document.getElementById('doc-error');
    var errorMsg   = document.getElementById('doc-error-msg');
    var tbody      = document.getElementById('doc-table-body');
    var countBadge = document.getElementById('doc-count-badge');
    var isAdmin    = {{ auth()->user()->isAdmin() ? 'true' : 'false' }};

    var uploadUrl  = '{{ route('admin.property.documents.store', $property) }}';
    var deleteBase = '{{ url('admin/properties/' . $property->id . '/documents') }}';

    function showError(msg) { errorMsg.textContent = msg; errorBox.classList.remove('d-none'); }
    function hideError() { errorBox.classList.add('d-none'); }

    function updateCount() {
        var n = tbody.querySelectorAll('tr[id^="doc-row-"]').length;
        countBadge.textContent = n + ' ' + (n === 1 ? 'document' : 'documents');
    }

    uploadBtn.addEventListener('click', function () {
        hideError();
        var typeId = typeSelect.value;
        var file   = fileInput.files[0];

        if (! typeId) { showError('Please select a document type.'); return; }
        if (! file)   { showError('Please choose a file.'); return; }

        uploadBtn.disabled = true;
        spinner.classList.remove('d-none');
        uploadIcon.classList.add('d-none');

        var fd = new FormData();
        fd.append('document_type_id', typeId);
        fd.append('file', file);
        fd.append('_token', csrfToken);

        fetch(uploadUrl, { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (! res.ok) {
                    var msg = res.data.errors
                        ? Object.values(res.data.errors).flat()[0]
                        : (res.data.message || 'Upload failed.');
                    showError(msg);
                } else {
                    prependDocRow(res.data);
                    typeSelect.value = '';
                    fileInput.value  = '';
                    updateCount();
                }
            })
            .catch(function () { showError('Network error. Please try again.'); })
            .finally(function () {
                uploadBtn.disabled = false;
                spinner.classList.add('d-none');
                uploadIcon.classList.remove('d-none');
            });
    });

    function prependDocRow(doc) {
        var emptyRow = document.getElementById('doc-empty-row');
        if (emptyRow) emptyRow.remove();

        var deleteBtn = isAdmin
            ? '<button type="button" class="btn btn-sm btn-light text-danger ms-1 delete-doc-btn" data-id="' + doc.id + '" title="Delete"><i class="bi bi-trash"></i></button>'
            : '';

        var tr = document.createElement('tr');
        tr.id = 'doc-row-' + doc.id;
        tr.innerHTML =
            '<td>' + escHtml(doc.document_type) + '</td>' +
            '<td class="text-truncate" style="max-width:180px" title="' + escHtml(doc.original_name) + '">' + escHtml(doc.original_name) + '</td>' +
            '<td class="text-muted text-nowrap">' + escHtml(doc.size) + '</td>' +
            '<td>' + escHtml(doc.uploaded_by) + '</td>' +
            '<td class="text-muted text-nowrap">' + escHtml(doc.created_at) + '</td>' +
            '<td class="text-end text-nowrap">' +
                '<a href="' + escHtml(doc.download_url) + '" class="btn btn-sm btn-light" title="Download"><i class="bi bi-download"></i></a>' +
                deleteBtn +
            '</td>';
        tbody.insertBefore(tr, tbody.firstChild);
    }

    // Delete handler
    tbody.addEventListener('click', function (e) {
        var btn = e.target.closest('.delete-doc-btn');
        if (! btn) return;
        var docId = btn.dataset.id;
        Swal.fire({
            title: 'Delete document?',
            text: 'This cannot be undone.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
        }).then(function (result) {
            if (! result.isConfirmed) return;
            fetch(deleteBase + '/' + docId, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                if (res.ok) {
                    var row = document.getElementById('doc-row-' + docId);
                    if (row) row.remove();
                    updateCount();
                }
            });
        });
    });

    function escHtml(str) {
        if (str === null || str === undefined) return '';
        return String(str)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
}());
</script>
@endpush