@extends('layouts.adminlte')

@section('title', $title)
@section('page_title', $title)

@push('styles')
<style>
    .crm-doc-shell { display:flex; flex-direction:column; gap:12px; }
    .crm-doc-head { border-radius:10px; background:#111827; color:#fff; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
    .crm-doc-head h3 { margin:0; font-size:20px; font-weight:900; }
    .crm-doc-head div { color:#cbd5e1; font-size:12px; font-weight:700; margin-top:3px; }
    .crm-doc-tabs { display:flex; flex-wrap:wrap; gap:6px; }
    .crm-doc-tab { border:1px solid #dbe3ee; background:#eef2f7; color:#334155; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:900; text-decoration:none; }
    .crm-doc-toolbar { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; }
    .crm-doc-kpi { display:grid; grid-template-columns:repeat(4, minmax(130px, 1fr)); gap:8px; }
    .crm-doc-kpi div { border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; padding:9px 10px; }
    .crm-doc-kpi span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; }
    .crm-doc-kpi strong { display:block; color:#0f172a; font-size:18px; }
    .crm-doc-list { display:grid; gap:10px; }
    .crm-doc-card { border:1px solid #dbe3ee; border-radius:10px; background:#fff; padding:12px; box-shadow:0 10px 24px rgba(15,23,42,.04); }
    .crm-doc-card.is-done { background:#f0fdf4; }
    .crm-doc-card.is-revision { background:#fffbeb; }
    .crm-doc-grid { display:grid; grid-template-columns:1fr 150px 130px; gap:10px; align-items:start; }
    .crm-docno { display:inline-flex; border-radius:999px; background:#eef2ff; color:#3730a3; padding:2px 8px; font-size:11px; font-weight:900; }
    .crm-doc-title { font-size:14px; font-weight:900; color:#0f172a; margin-top:4px; }
    .crm-muted { color:#64748b; font-size:12px; }
    .crm-doc-files { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
    .crm-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid #dbe3ee; background:#fff; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; text-decoration:none; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    @media (max-width: 992px) { .crm-doc-toolbar,.crm-doc-kpi,.crm-doc-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="crm-doc-shell">
    <div class="crm-doc-head">
        <div>
            <h3>{{ $heading }}</h3>
            <div>{{ $subtitle }}</div>
        </div>
        <a class="btn btn-light btn-sm" href="{{ route('crm_handover_task.index') }}"><i class="fas fa-list-check me-1"></i>Handover Task</a>
    </div>
    <div class="crm-doc-tabs">
        <a class="crm-doc-tab" href="{{ route('lead_client.index') }}"><i class="fas fa-bullhorn me-1"></i>Lead Client</a>
        <a class="crm-doc-tab" href="{{ route('crm_handover_task.index') }}"><i class="fas fa-list-check me-1"></i>Handover Task</a>
        <a class="crm-doc-tab" href="{{ route('crm_rab.index') }}"><i class="fas fa-calculator me-1"></i>RAB / BOQ</a>
        <a class="crm-doc-tab" href="{{ route('crm_quotation.index') }}"><i class="fas fa-file-signature me-1"></i>Quotation</a>
        <a class="crm-doc-tab" href="{{ route('crm_follow_up.index') }}"><i class="fas fa-phone-volume me-1"></i>Follow Up</a>
        <a class="crm-doc-tab" href="{{ route('crm_contract.index') }}"><i class="fas fa-file-contract me-1"></i>Contract</a>
    </div>
    <div class="crm-doc-toolbar">
        <input type="search" class="form-control form-control-sm" id="searchBox" placeholder="Cari lead, client, project, dokumen">
        <button type="button" class="btn btn-primary btn-sm" id="btnLoad"><i class="fas fa-sync me-1"></i>Load</button>
    </div>
    <div class="crm-doc-kpi" id="docKpi"></div>
    <div class="crm-doc-list" id="docList"></div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    let documentDownloadPasswordRequired = @json(trim((string) ($leadSettings['document_download_password'] ?? '')) !== '');
    const dataUrl = @json($dataRoute);
    const esc = (value) => $('<div>').text(value ?? '-').html();
    const render = (rows, meta) => {
        $('#docKpi').html([
            ['Task', meta.total || 0],
            ['File', meta.file_count || 0],
            ['Open', meta.open || 0],
            ['Done', meta.done || 0],
        ].map(([label, value]) => `<div><span>${label}</span><strong>${value}</strong></div>`).join(''));
        $('#docList').html(rows.length ? rows.map((task) => {
            const files = Array.isArray(task.attachments) ? task.attachments : [];
            return `<div class="crm-doc-card is-${esc(task.status || 'waiting')}">
                <div class="crm-doc-grid">
                    <div>
                        <span class="crm-docno">${esc(task.document_no || '-')}</span>
                        <div class="crm-doc-title">${esc(task.task_title || '-')}</div>
                        <div class="crm-muted">${esc(task.lead_no || '-')} | ${esc(task.client_name || '-')} | ${esc(task.project_name || '-')}</div>
                        <div class="crm-muted">${esc(task.notes || '')}</div>
                    </div>
                    <div><strong>${esc(task.department || '-')}</strong><div class="crm-muted">${esc(task.pic_name || '-')}</div></div>
                    <div><strong>Status</strong><div>${esc(task.status || '-')}</div><div class="crm-muted">Due: ${esc(task.due_date || task.lead_deadline_date || '-')}</div></div>
                </div>
                <div class="crm-doc-files">${files.length ? files.map((file) => `
                    <a class="crm-chip crm-preview" href="${esc(file.preview_url)}" data-name="${esc(file.name || 'Dokumen')}" target="_blank"><i class="fas fa-eye"></i>${esc(file.name || 'File')}</a>
                    <a class="crm-chip crm-download" href="${esc(file.download_url)}" target="_blank"><i class="fas fa-download"></i></a>
                `).join('') : '<span class="crm-muted">Belum ada file.</span>'}</div>
            </div>`;
        }).join('') : '<div class="crm-doc-card text-center crm-muted">Belum ada data.</div>');
    };
    const loadData = () => {
        $('#docList').html('<div class="crm-doc-card text-center crm-muted">Loading...</div>');
        $.getJSON(dataUrl, { q: $('#searchBox').val() })
            .done((resp) => render(resp.data || [], resp.meta || {}))
            .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data', 'error'));
    };
    $('#btnLoad').on('click', loadData);
    $('#searchBox').on('keydown', (e) => { if (e.key === 'Enter') loadData(); });
    $(document).on('click', '.crm-preview', function (e) {
        e.preventDefault();
        Swal.fire({ title: esc($(this).data('name') || 'Preview'), html: `<iframe src="${esc(this.href)}" style="width:100%;height:72vh;border:1px solid #dbe3ee;border-radius:8px;background:#fff"></iframe>`, width: '92vw', showConfirmButton: false, showCloseButton: true });
    });
    $(document).on('click', '.crm-download', function (e) {
        if (!documentDownloadPasswordRequired) return;
        e.preventDefault();
        const url = new URL(this.href, window.location.origin);
        Swal.fire({ title: 'Password download', input: 'password', showCancelButton: true, confirmButtonText: 'Download' }).then((result) => {
            if (!result.isConfirmed) return;
            url.searchParams.set('password', result.value || '');
            window.open(url.toString(), '_blank');
        });
    });
    loadData();
});
</script>
@endpush