@extends('layouts.adminlte')

@section('title', 'CRM HANDOVER TASK')
@section('page_title', 'CRM HANDOVER TASK')

@push('styles')
    <style>
        .crm-task-page { display:flex; flex-direction:column; gap:12px; }
        .crm-task-head { border-radius:10px; background:#111827; color:#fff; padding:14px 16px; }
        .crm-task-head h3 { margin:0; font-size:20px; font-weight:900; }
        .crm-task-head div { color:#cbd5e1; font-size:12px; font-weight:700; margin-top:3px; }
        .crm-task-toolbar { display:grid; grid-template-columns:180px 160px 1fr auto; gap:8px; padding:12px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; }
        .crm-module-tabs { display:flex; flex-wrap:wrap; gap:6px; }
        .crm-module-tab { border:1px solid #dbe3ee; background:#eef2f7; color:#334155; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:900; }
        .crm-module-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; }
        .crm-task-kpi { display:grid; grid-template-columns:repeat(5, minmax(120px, 1fr)); gap:8px; }
        .crm-task-kpi div { border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; padding:9px 10px; }
        .crm-task-kpi span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; }
        .crm-task-kpi strong { display:block; color:#0f172a; font-size:18px; line-height:1.15; }
        .crm-task-list { display:grid; gap:10px; }
        .crm-work-card { border:1px solid #dbe3ee; border-radius:10px; background:#fff; padding:12px; box-shadow:0 10px 24px rgba(15,23,42,.04); }
        .crm-work-card.is-done { background:#f0fdf4; }
        .crm-work-card.is-revision { background:#fffbeb; }
        .crm-work-top { display:grid; grid-template-columns:1fr 180px 150px 160px; 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-title { font-size:14px; font-weight:900; color:#0f172a; margin-top:4px; }
        .crm-muted { color:#64748b; font-size:12px; }
        .crm-checklist { display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:8px; margin-top:10px; }
        .crm-checkitem { display:flex; gap:8px; align-items:flex-start; border:1px solid #e5e7eb; background:#f8fafc; border-radius:8px; padding:8px; font-size:11px; font-weight:800; }
        .crm-file-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:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .crm-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
        .crm-actions .btn { width:34px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
        @media (max-width: 992px) {
            .crm-task-toolbar,.crm-work-top,.crm-checklist,.crm-task-kpi { grid-template-columns:1fr; }
            .crm-actions { justify-content:flex-start; }
        }
    </style>
@endpush

@section('content')
    <div class="crm-task-page">
        <div class="crm-task-head">
            <h3>CRM Handover Task</h3>
            <div>Halaman kerja departemen untuk task tender, dokumen checklist, revisi, preview, dan status pengerjaan.</div>
        </div>

        <div class="crm-module-tabs">
            <button type="button" class="crm-module-tab active" data-module="all"><i class="fas fa-list-check me-1"></i>Semua Task</button>
            <button type="button" class="crm-module-tab" data-module="rab"><i class="fas fa-calculator me-1"></i>RAB / BOQ</button>
            <button type="button" class="crm-module-tab" data-module="quotation"><i class="fas fa-file-signature me-1"></i>Quotation</button>
            <a class="crm-module-tab text-decoration-none" href="{{ route('lead_client.index') }}"><i class="fas fa-bullhorn me-1"></i>Lead Client</a>
            <a class="crm-module-tab text-decoration-none" href="{{ route('crm_quotation.index') }}"><i class="fas fa-file-signature me-1"></i>CRM Quotation</a>
            <a class="crm-module-tab text-decoration-none" href="{{ route('crm_follow_up.index') }}"><i class="fas fa-phone-volume me-1"></i>Follow Up</a>
            <a class="crm-module-tab text-decoration-none" href="{{ route('crm_contract.index') }}"><i class="fas fa-file-contract me-1"></i>Contract</a>
        </div>

        <div class="crm-task-toolbar">
            <select class="form-select form-select-sm" id="filterDepartment">
                <option value="">Semua Departemen</option>
                @foreach ($departments as $department)
                    <option value="{{ $department }}">{{ ucwords($department) }}</option>
                @endforeach
            </select>
            <select class="form-select form-select-sm" id="filterStatus">
                <option value="">Semua Status</option>
                @foreach ($statuses as $status)
                    <option value="{{ $status }}">{{ ucwords($status) }}</option>
                @endforeach
            </select>
            <input type="search" class="form-control form-control-sm" id="filterSearch" placeholder="Cari project, client, task, dokumen, PIC">
            <button type="button" class="btn btn-primary btn-sm" id="btnReload"><i class="fas fa-sync me-1"></i>Load</button>
        </div>

        <div class="crm-task-kpi" id="taskKpi"></div>
        <div class="crm-task-list" id="taskList"></div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            let documentDownloadPasswordRequired = @json(trim((string) ($leadSettings['document_download_password'] ?? '')) !== '');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            let rows = [];
            let moduleType = 'all';
            const esc = (value) => $('<div>').text(value ?? '-').html();
            const checklist = (task) => Array.isArray(task.checklist) ? task.checklist : [];
            const itemFiles = (task, idx) => (Array.isArray(task.attachments) ? task.attachments : []).filter((file) => Number(file.checklist_item_index) === Number(idx));
            const renderFiles = (task, idx) => {
                const files = itemFiles(task, idx);
                if (!files.length) return '<span class="crm-muted">belum ada file</span>';
                return files.map((file) => `
                    <a class="crm-file-chip crm-file-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-file-chip crm-download-protected" href="${esc(file.download_url)}" target="_blank"><i class="fas fa-download"></i></a>
                `).join('');
            };
            const renderChecklist = (task) => {
                const items = checklist(task);
                if (!items.length) return '<div class="crm-muted mt-2">Checklist belum tersedia.</div>';
                return `<div class="crm-checklist">${items.map((item, idx) => `
                    <div class="crm-checkitem">
                        <label class="d-inline-flex align-items-center gap-1 mb-0" style="min-width:140px;">
                            <input type="checkbox" class="check-toggle" data-id="${task.id}" data-idx="${idx}" ${item.done ? 'checked' : ''}>
                            <span>${esc(item.label || '-')}</span>
                        </label>
                        <span class="d-inline-flex align-items-center gap-1 flex-wrap flex-fill">${renderFiles(task, idx)}</span>
                        <button class="btn btn-xs btn-primary upload-doc" data-id="${task.id}" data-idx="${idx}" data-label="${esc(item.label || '')}" title="Upload"><i class="fas fa-upload"></i></button>
                    </div>
                `).join('')}</div>`;
            };
            const render = (meta = {}) => {
                const visibleRows = rows.filter((task) => {
                    if (moduleType === 'all') return true;
                    const text = [task.department, task.document_no, task.task_title, task.notes, ...checklist(task).map((item) => item.label || '')].join(' ').toLowerCase();
                    const keywords = moduleType === 'rab' ? ['rab', 'boq', 'bom', 'estimasi'] : ['quotation', 'penawaran', 'proposal', 'submit'];
                    return keywords.some((keyword) => text.includes(keyword));
                });
                $('#taskKpi').html([
                    ['Total', visibleRows.length],
                    ['Waiting', visibleRows.filter((row) => row.status === 'waiting').length],
                    ['Progress', visibleRows.filter((row) => row.status === 'progress').length],
                    ['Revision', visibleRows.filter((row) => row.status === 'revision').length],
                    ['Done', visibleRows.filter((row) => row.status === 'done').length],
                ].map(([label, value]) => `<div><span>${label}</span><strong>${value}</strong></div>`).join(''));

                $('#taskList').html(visibleRows.length ? visibleRows.map((task) => `
                    <div class="crm-work-card is-${esc(task.status || 'waiting')}">
                        <div class="crm-work-top">
                            <div>
                                <span class="crm-docno">${esc(task.document_no || '-')}</span>
                                <div class="crm-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>
                                <div><strong>Due:</strong> ${esc(task.due_date || task.lead_deadline_date || '-')}</div>
                                <div class="crm-muted">Submit: ${esc(task.submitted_at || '-')}</div>
                                <div class="crm-muted">Selesai: ${esc(task.completed_at || '-')}</div>
                            </div>
                            <div>
                                <select class="form-select form-select-sm status-select" data-id="${task.id}">
                                    ${@json($statuses).map((status) => `<option value="${status}" ${status === task.status ? 'selected' : ''}>${status}</option>`).join('')}
                                </select>
                                <div class="crm-actions mt-2">
                                    <button class="btn btn-sm btn-primary upload-doc" data-id="${task.id}" title="Upload umum"><i class="fas fa-upload"></i></button>
                                    <a class="btn btn-sm btn-success crm-download-protected" href="${esc(task.zip_url)}" target="_blank" title="ZIP"><i class="fas fa-file-archive"></i></a>
                                    <a class="btn btn-sm btn-secondary" href="{{ url('/lead-client') }}?open=${esc(task.lead_client_id)}" title="Lead"><i class="fas fa-arrow-up-right-from-square"></i></a>
                                </div>
                            </div>
                        </div>
                        ${renderChecklist(task)}
                    </div>
                `).join('') : '<div class="crm-work-card text-center crm-muted">Belum ada task.</div>');
            };
            const loadData = () => {
                $('#taskList').html('<div class="crm-work-card text-center crm-muted">Loading...</div>');
                $.getJSON('{{ route('crm_handover_task.data') }}', {
                    department: $('#filterDepartment').val(),
                    status: $('#filterStatus').val(),
                    q: $('#filterSearch').val(),
                }).done((resp) => {
                    rows = resp.data || [];
                    render(resp.meta || {});
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load task', 'error'));
            };
            const updateTask = (task, patch) => $.ajax({
                url: `{{ url('/lead-client/tasks') }}/${task.id}`,
                type: 'PUT',
                data: {
                    department: task.department,
                    pic_user_id: task.pic_user_id || '',
                    pic_name: task.pic_name || '',
                    document_no: task.document_no || '',
                    task_title: task.task_title || '',
                    due_date: task.due_date || '',
                    status: patch.status || task.status,
                    notes: task.notes || '',
                    checklist_json: JSON.stringify(patch.checklist || checklist(task)),
                },
            });
            $('#btnReload,#filterDepartment,#filterStatus').on('click change', loadData);
            $('.crm-module-tab[data-module]').on('click', function () {
                moduleType = String($(this).data('module') || 'all');
                $('.crm-module-tab').removeClass('active');
                $(this).addClass('active');
                render();
            });
            $('#filterSearch').on('keydown', (e) => { if (e.key === 'Enter') loadData(); });
            $(document).on('change', '.status-select', function () {
                const task = rows.find((row) => Number(row.id) === Number($(this).data('id')));
                if (!task) return;
                updateTask(task, { status: $(this).val() }).done(loadData).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update status', 'error'));
            });
            $(document).on('change', '.check-toggle', function () {
                const task = rows.find((row) => Number(row.id) === Number($(this).data('id')));
                if (!task) return;
                const items = checklist(task);
                const idx = Number($(this).data('idx'));
                if (items[idx]) items[idx].done = $(this).is(':checked');
                updateTask(task, { checklist: items }).done(loadData).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update checklist', 'error'));
            });
            $(document).on('click', '.upload-doc', function () {
                const taskId = Number($(this).data('id'));
                const task = rows.find((row) => Number(row.id) === taskId);
                if (!task) return;
                const idxRaw = $(this).data('idx');
                const selectedIdx = idxRaw === undefined ? '' : String(idxRaw);
                const options = checklist(task).map((item, idx) => `<option value="${idx}" ${String(idx) === selectedIdx ? 'selected' : ''}>${esc(item.label || '-')}</option>`).join('');
                Swal.fire({
                    title: 'Upload Dokumen',
                    html: `<div class="text-start">
                        <label class="form-label small fw-bold">Group Checklist</label>
                        <select id="uploadChecklistGroup" class="form-select mb-2"><option value="">File umum task</option>${options}</select>
                        <label class="form-label small fw-bold">Revisi</label>
                        <input id="uploadRevisionNo" type="number" min="1" class="form-control mb-2" value="${esc(task.next_revision_no || 1)}">
                        <input id="uploadFiles" type="file" class="form-control" accept=".pdf,.doc,.docx,.jpg,.jpeg" multiple>
                    </div>`,
                    showCancelButton: true,
                    confirmButtonText: 'Upload',
                    preConfirm: () => (document.getElementById('uploadFiles')?.files || []).length ? true : Swal.showValidationMessage('File wajib dipilih'),
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    const fd = new FormData();
                    fd.append('revision_no', $('#uploadRevisionNo').val() || task.next_revision_no || 1);
                    fd.append('status', 'progress');
                    const idx = $('#uploadChecklistGroup').val();
                    if (idx !== '') {
                        fd.append('checklist_item_index', idx);
                        fd.append('checklist_item_label', checklist(task)[Number(idx)]?.label || '');
                    }
                    Array.from(document.getElementById('uploadFiles')?.files || []).forEach((file) => fd.append('attachments[]', file));
                    $.ajax({ url: `{{ url('/lead-client/tasks') }}/${taskId}/attachments`, type: 'POST', data: fd, processData: false, contentType: false })
                        .done(loadData)
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal upload', 'error'));
                });
            });
            $(document).on('click', '.crm-file-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-protected', 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