{{--
    Lead Attachments Tab (Phase 6 - G-30)
    Usage: @include('admin.leads.partials.attachments_tab', ['leadId' => $leadId])
--}}
<div id="lead-attachments-panel" data-lead-id="{{ $leadId ?? 0 }}">

    {{-- Upload Form --}}
    <div class="card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="bx bx-upload me-1"></i> Upload Attachment</h6>
        </div>
        <div class="card-body">
            <form id="attachmentUploadForm" enctype="multipart/form-data">
                @csrf
                <div class="row g-2">
                    <div class="col-md-12">
                        <div id="attachDropZone" class="border border-dashed rounded p-4 text-center position-relative" style="cursor:pointer; border-style:dashed!important;">
                            <i class="bx bx-cloud-upload" style="font-size:2rem; color:#6c757d;"></i>
                            <p class="mb-1 text-muted">Drag &amp; drop files here, or click to browse</p>
                            <small class="text-muted">Max 20 MB per file</small>
                            <input type="file" id="attachFileInput" name="file" class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor:pointer;">
                        </div>
                        <div id="attachSelectedFile" class="mt-1 text-sm text-muted d-none"></div>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="label" id="attachLabel" class="form-control form-control-sm" placeholder="Label (optional)" maxlength="100">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="notes" id="attachNotes" class="form-control form-control-sm" placeholder="Notes (optional)" maxlength="1000">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="green-btn-inner waves-effect btn-sm w-100" id="attachUploadBtn">
                            <i class="bx bx-upload me-1"></i> Upload
                        </button>
                    </div>
                </div>
                <div class="progress mt-2 d-none" id="attachProgress" style="height:4px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%"></div>
                </div>
            </form>
        </div>
    </div>

    {{-- Attachments List --}}
    <div id="attachmentsListWrap">
        <div class="text-center py-4 text-muted" id="attachLoadingState">
            <div class="spinner-border spinner-border-sm" role="status"></div> Loading...
        </div>
        <div id="attachmentsListContainer"></div>
        <div class="text-center py-4 text-muted d-none" id="attachEmptyState">
            <i class="bx bx-file" style="font-size:2rem;"></i>
            <p class="mb-0 mt-1">No attachments yet.</p>
        </div>
    </div>
</div>

{{-- Email Attachment Modal --}}
<div class="modal fade" id="emailAttachModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bx bx-envelope me-1"></i> Email Attachment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label">To Email <span class="text-danger">*</span></label>
                    <input type="email" id="emailAttachTo" class="form-control form-control-sm" placeholder="recipient@example.com">
                </div>
                <div class="mb-2">
                    <label class="form-label">Subject</label>
                    <input type="text" id="emailAttachSubject" class="form-control form-control-sm" maxlength="200">
                </div>
                <div class="mb-2">
                    <label class="form-label">Message</label>
                    <textarea id="emailAttachMessage" class="form-control form-control-sm" rows="3" maxlength="2000"></textarea>
                </div>
                <input type="hidden" id="emailAttachUrl">
            </div>
            <div class="modal-footer">
                <button type="button" class="black-btn-inner waves-effect btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="green-btn-inner waves-effect btn-sm" id="emailAttachSendBtn">
                    <i class="bx bx-send me-1"></i> Send Email
                </button>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function () {
    const leadId     = document.getElementById('lead-attachments-panel').dataset.leadId;
    const indexUrl   = '{{ route('leads.attachments.index', ['lead' => '__L__']) }}'.replace('__L__', leadId);
    const storeUrl   = '{{ route('leads.attachments.store', ['lead' => '__L__']) }}'.replace('__L__', leadId);
    const CSRF       = '{{ csrf_token() }}';

    const ICONS = {
        'image': 'bx bx-image',
        'pdf':   'bx bx-file-pdf',
        'word':  'bx bx-file-doc',
        'excel': 'bx bx-file-blank',
        'default':'bx bx-file',
    };

    function getIcon(mime) {
        if (!mime) return ICONS.default;
        if (mime.startsWith('image/')) return ICONS.image;
        if (mime === 'application/pdf') return ICONS.pdf;
        if (mime.includes('word') || mime.includes('document')) return ICONS.word;
        if (mime.includes('excel') || mime.includes('spreadsheet')) return ICONS.excel;
        return ICONS.default;
    }

    // Drag-and-drop
    const dropZone = document.getElementById('attachDropZone');
    const fileInput = document.getElementById('attachFileInput');
    ['dragover','dragenter'].forEach(ev => {
        dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.add('border-primary'); });
    });
    ['dragleave','drop'].forEach(ev => {
        dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.remove('border-primary'); });
    });
    dropZone.addEventListener('drop', e => {
        const files = e.dataTransfer.files;
        if (files.length) { fileInput.files = files; updateSelectedFile(files[0].name); }
    });
    fileInput.addEventListener('change', () => {
        if (fileInput.files[0]) updateSelectedFile(fileInput.files[0].name);
    });
    function updateSelectedFile(name) {
        const el = document.getElementById('attachSelectedFile');
        el.textContent = 'Selected: ' + name;
        el.classList.remove('d-none');
    }

    // Upload
    document.getElementById('attachmentUploadForm').addEventListener('submit', function (e) {
        e.preventDefault();
        if (!fileInput.files[0]) { alert('Please select a file.'); return; }
        const fd = new FormData(this);
        document.getElementById('attachProgress').classList.remove('d-none');
        document.getElementById('attachUploadBtn').disabled = true;

        fetch(storeUrl, { method: 'POST', headers: { 'X-CSRF-TOKEN': CSRF }, body: fd })
            .then(r => r.json())
            .then(json => {
                document.getElementById('attachProgress').classList.add('d-none');
                document.getElementById('attachUploadBtn').disabled = false;
                if (json.status === 200) {
                    prependAttachment(json.data);
                    this.reset();
                    document.getElementById('attachSelectedFile').classList.add('d-none');
                    document.getElementById('attachEmptyState').classList.add('d-none');
                } else {
                    alert(json.message || 'Upload failed.');
                }
            })
            .catch(err => {
                console.error(err);
                document.getElementById('attachProgress').classList.add('d-none');
                document.getElementById('attachUploadBtn').disabled = false;
                alert('Upload failed.');
            });
    });

    // Load attachments
    function loadAttachments() {
        document.getElementById('attachLoadingState').classList.remove('d-none');
        document.getElementById('attachEmptyState').classList.add('d-none');
        document.getElementById('attachmentsListContainer').innerHTML = '';

        fetch(indexUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(json => {
                document.getElementById('attachLoadingState').classList.add('d-none');
                const items = json.data || [];
                if (!items.length) {
                    document.getElementById('attachEmptyState').classList.remove('d-none');
                    return;
                }
                items.forEach(a => prependAttachment(a, false));
            })
            .catch(err => {
                console.error(err);
                document.getElementById('attachLoadingState').classList.add('d-none');
            });
    }

    function prependAttachment(a, prepend = true) {
        const container = document.getElementById('attachmentsListContainer');
        const card = document.createElement('div');
        card.className = 'card mb-2 attachment-card';
        card.dataset.id = a.id;
        const icon = getIcon(a.mime_type);
        card.innerHTML = `
            <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
                <i class="${icon}" style="font-size:1.8rem; color:#6c757d; flex-shrink:0;"></i>
                <div class="flex-grow-1 overflow-hidden">
                    <div class="fw-semibold text-truncate">${escHtml(a.file_name)}</div>
                    <small class="text-muted">
                        ${escHtml(a.human_size)}
                        ${a.label ? ' &bull; <span class="badge bg-secondary">' + escHtml(a.label) + '</span>' : ''}
                        &bull; Uploaded by ${escHtml(a.uploaded_by)} on ${escHtml(a.created_at)}
                    </small>
                    ${a.notes ? '<div class="text-muted small mt-1">' + escHtml(a.notes) + '</div>' : ''}
                </div>
                <div class="d-flex gap-1 flex-shrink-0">
                    <a href="${a.download_url}" class="btn btn-sm btn-outline-primary" title="Download">
                        <i class="bx bx-download"></i>
                    </a>
                    <button type="button" class="btn btn-sm btn-outline-info email-attach-btn" title="Email"
                        data-url="${a.email_url}" data-name="${escHtml(a.file_name)}">
                        <i class="bx bx-envelope"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger delete-attach-btn" title="Delete"
                        data-url="${a.delete_url}" data-id="${a.id}">
                        <i class="bx bx-trash"></i>
                    </button>
                </div>
            </div>`;

        // Bind delete
        card.querySelector('.delete-attach-btn').addEventListener('click', handleDelete);
        card.querySelector('.email-attach-btn').addEventListener('click', handleEmailOpen);

        if (prepend) container.prepend(card);
        else container.appendChild(card);
    }

    function handleDelete() {
        if (!confirm('Delete this attachment? This cannot be undone.')) return;
        const btn = this;
        const card = btn.closest('.attachment-card');
        btn.disabled = true;
        fetch(btn.dataset.url, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' }
        })
        .then(r => r.json())
        .then(json => {
            if (json.status === 200) {
                card.remove();
                if (!document.querySelectorAll('.attachment-card').length) {
                    document.getElementById('attachEmptyState').classList.remove('d-none');
                }
            } else {
                alert(json.message || 'Delete failed.');
                btn.disabled = false;
            }
        })
        .catch(() => { btn.disabled = false; });
    }

    function handleEmailOpen() {
        document.getElementById('emailAttachUrl').value = this.dataset.url;
        document.getElementById('emailAttachSubject').value = 'Document: ' + this.dataset.name;
        document.getElementById('emailAttachMessage').value = '';
        document.getElementById('emailAttachTo').value = '';
        new bootstrap.Modal(document.getElementById('emailAttachModal')).show();
    }

    document.getElementById('emailAttachSendBtn').addEventListener('click', function () {
        const toEmail = document.getElementById('emailAttachTo').value.trim();
        if (!toEmail) { alert('Please enter a recipient email.'); return; }
        const url     = document.getElementById('emailAttachUrl').value;
        const subject = document.getElementById('emailAttachSubject').value;
        const message = document.getElementById('emailAttachMessage').value;
        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending...';
        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': CSRF },
            body: new URLSearchParams({ _token: CSRF, to_email: toEmail, subject, message })
        })
        .then(r => r.json())
        .then(json => {
            this.disabled = false;
            this.innerHTML = '<i class="bx bx-send me-1"></i> Send Email';
            if (json.status === 200) {
                bootstrap.Modal.getInstance(document.getElementById('emailAttachModal')).hide();
                alert('Email sent successfully.');
            } else {
                alert(json.message || 'Failed to send email.');
            }
        })
        .catch(() => {
            this.disabled = false;
            this.innerHTML = '<i class="bx bx-send me-1"></i> Send Email';
            alert('Failed to send email.');
        });
    });

    function escHtml(str) {
        const d = document.createElement('div');
        d.appendChild(document.createTextNode(String(str)));
        return d.innerHTML;
    }

    // Load on init
    loadAttachments();
})();
</script>
@endpush