@extends('layouts.adminlte')

@section('title', 'CRM FOLLOW UP')
@section('page_title', 'CRM FOLLOW UP')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}">
<style>
    .fu-shell { display:flex; flex-direction:column; gap:12px; }
    .fu-head { border-radius:10px; background:#111827; color:#fff; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
    .fu-head h3 { margin:0; font-size:20px; font-weight:900; }
    .fu-head div { color:#cbd5e1; font-size:12px; font-weight:700; margin-top:3px; }
    .fu-tabs { display:flex; flex-wrap:wrap; gap:6px; }
    .fu-tab { border:1px solid #dbe3ee; background:#eef2f7; color:#334155; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:900; text-decoration:none; }
    .fu-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; }
    .fu-toolbar { display:grid; grid-template-columns:160px 1fr auto auto; gap:8px; padding:12px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; }
    .fu-kpi { display:grid; grid-template-columns:repeat(4, minmax(130px, 1fr)); gap:8px; }
    .fu-kpi div { border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; padding:9px 10px; }
    .fu-kpi span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; }
    .fu-kpi strong { display:block; color:#0f172a; font-size:18px; }
    .fu-list { display:grid; gap:10px; }
    .fu-card { border:1px solid #dbe3ee; border-radius:10px; background:#fff; padding:12px; box-shadow:0 10px 24px rgba(15,23,42,.04); }
    .fu-card.is-done { background:#f0fdf4; }
    .fu-card.is-waiting_client { background:#fffbeb; }
    .fu-grid { display:grid; grid-template-columns:1fr 170px 160px 90px; gap:10px; align-items:start; }
    .fu-lead { display:inline-flex; border-radius:999px; background:#eef2ff; color:#3730a3; padding:2px 8px; font-size:11px; font-weight:900; }
    .fu-title { font-size:14px; font-weight:900; color:#0f172a; margin-top:4px; }
    .fu-muted { color:#64748b; font-size:12px; }
    @media (max-width: 992px) { .fu-toolbar,.fu-kpi,.fu-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="fu-shell">
    <div class="fu-head">
        <div>
            <h3>CRM Follow Up</h3>
            <div>Log call, meeting, email, WhatsApp, next action, dan reminder tender.</div>
        </div>
        <button class="btn btn-light btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Follow Up</button>
    </div>
    <div class="fu-tabs">
        <a class="fu-tab" href="{{ route('lead_client.index') }}"><i class="fas fa-bullhorn me-1"></i>Lead Client</a>
        <a class="fu-tab" href="{{ route('crm_handover_task.index') }}"><i class="fas fa-list-check me-1"></i>Handover Task</a>
        <a class="fu-tab" href="{{ route('crm_rab.index') }}"><i class="fas fa-calculator me-1"></i>RAB / BOQ</a>
        <a class="fu-tab" href="{{ route('crm_quotation.index') }}"><i class="fas fa-file-signature me-1"></i>Quotation</a>
        <a class="fu-tab active" href="{{ route('crm_follow_up.index') }}"><i class="fas fa-phone-volume me-1"></i>Follow Up</a>
        <a class="fu-tab" href="{{ route('crm_contract.index') }}"><i class="fas fa-file-contract me-1"></i>Contract</a>
    </div>
    <div class="fu-toolbar">
        <select id="statusFilter" class="form-select form-select-sm">
            <option value="">Semua Status</option>
            <option value="open">Open</option>
            <option value="waiting_client">Waiting Client</option>
            <option value="done">Done</option>
            <option value="cancelled">Cancelled</option>
        </select>
        <input id="searchBox" type="search" class="form-control form-control-sm" placeholder="Cari lead, client, project, notes, next action">
        <button class="btn btn-primary btn-sm" id="btnLoad"><i class="fas fa-sync me-1"></i>Load</button>
        <button class="btn btn-success btn-sm" id="btnAdd2"><i class="fas fa-plus me-1"></i>Add</button>
    </div>
    <div class="fu-kpi" id="fuKpi"></div>
    <div class="fu-list" id="fuList"></div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function () {
    const esc = (value) => $('<div>').text(value ?? '-').html();
    let rows = [];
    const render = (meta = {}) => {
        $('#fuKpi').html([
            ['Total', meta.total || rows.length],
            ['Open', meta.open || 0],
            ['Waiting Client', meta.waiting_client || 0],
            ['Done', meta.done || 0],
        ].map(([label, value]) => `<div><span>${label}</span><strong>${value}</strong></div>`).join(''));
        $('#fuList').html(rows.length ? rows.map((row) => `
            <div class="fu-card is-${esc(row.status)}">
                <div class="fu-grid">
                    <div>
                        <span class="fu-lead">${esc(row.lead_no || '-')}</span>
                        <div class="fu-title">${esc(row.client_name || '-')} | ${esc(row.project_name || '-')}</div>
                        <div class="fu-muted">${esc(row.notes || '-')}</div>
                        <div class="mt-1"><strong>Next:</strong> ${esc(row.next_action || '-')}</div>
                    </div>
                    <div><strong>${esc(row.channel)}</strong><div class="fu-muted">${esc(row.pic_name || '-')}</div><div class="fu-muted">${esc(row.follow_up_at || '-')}</div></div>
                    <div><strong>Reminder</strong><div>${esc(row.reminder_at || '-')}</div><div class="fu-muted">Lead: ${esc(row.lead_status || '-')}</div></div>
                    <div class="d-flex gap-1 justify-content-end">
                        <button class="btn btn-sm btn-warning btn-edit" data-id="${row.id}"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-sm btn-danger btn-delete" data-id="${row.id}"><i class="fas fa-times"></i></button>
                    </div>
                </div>
            </div>
        `).join('') : '<div class="fu-card text-center fu-muted">Belum ada follow up.</div>');
    };
    const loadData = () => {
        $('#fuList').html('<div class="fu-card text-center fu-muted">Loading...</div>');
        $.getJSON('{{ route('crm_follow_up.data') }}', { status: $('#statusFilter').val(), q: $('#searchBox').val() })
            .done((resp) => { rows = resp.data || []; render(resp.meta || {}); })
            .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load follow up', 'error'));
    };
    const openForm = (row = null) => {
        Swal.fire({
            title: row ? 'Edit Follow Up' : 'Tambah Follow Up',
            html: `<div class="text-start">
                <label class="form-label small fw-bold">Lead</label>
                <select id="fuLead" class="form-select mb-2" style="width:100%"></select>
                <label class="form-label small fw-bold">Tanggal Follow Up</label>
                <input id="fuAt" type="datetime-local" class="form-control mb-2" value="${esc(String(row?.follow_up_at || '').replace(' ', 'T').slice(0, 16))}">
                <div class="row g-2">
                    <div class="col-md-6"><label class="form-label small fw-bold">Channel</label><select id="fuChannel" class="form-select mb-2">${['call','meeting','email','whatsapp','visit','other'].map((v) => `<option value="${v}" ${v === row?.channel ? 'selected' : ''}>${v}</option>`).join('')}</select></div>
                    <div class="col-md-6"><label class="form-label small fw-bold">Status</label><select id="fuStatus" class="form-select mb-2">${['open','waiting_client','done','cancelled'].map((v) => `<option value="${v}" ${v === row?.status ? 'selected' : ''}>${v}</option>`).join('')}</select></div>
                </div>
                <label class="form-label small fw-bold">PIC</label>
                <input id="fuPic" class="form-control mb-2" value="${esc(row?.pic_name || '')}">
                <label class="form-label small fw-bold">Catatan</label>
                <textarea id="fuNotes" class="form-control mb-2" rows="3">${esc(row?.notes || '')}</textarea>
                <label class="form-label small fw-bold">Next Action</label>
                <textarea id="fuNext" class="form-control mb-2" rows="2">${esc(row?.next_action || '')}</textarea>
                <label class="form-label small fw-bold">Reminder</label>
                <input id="fuReminder" type="datetime-local" class="form-control" value="${esc(String(row?.reminder_at || '').replace(' ', 'T').slice(0, 16))}">
            </div>`,
            width: 760,
            showCancelButton: true,
            confirmButtonText: 'Simpan',
            didOpen: () => {
                $('#fuLead').select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('.swal2-popup'),
                    ajax: { url: '{{ route('crm_follow_up.leads') }}', dataType: 'json', delay: 250, data: (params) => ({ q: params.term || '' }), processResults: (resp) => ({ results: resp.data || [] }) },
                });
                if (row) $('#fuLead').append(new Option(`${row.lead_no} | ${row.client_name} | ${row.project_name}`, row.lead_client_id, true, true)).trigger('change');
            },
            preConfirm: () => {
                if (!$('#fuLead').val()) { Swal.showValidationMessage('Lead wajib dipilih'); return false; }
                return true;
            },
        }).then((result) => {
            if (!result.isConfirmed) return;
            const payload = {
                lead_client_id: $('#fuLead').val(),
                follow_up_at: $('#fuAt').val(),
                channel: $('#fuChannel').val(),
                pic_name: $('#fuPic').val(),
                notes: $('#fuNotes').val(),
                next_action: $('#fuNext').val(),
                reminder_at: $('#fuReminder').val(),
                status: $('#fuStatus').val(),
            };
            $.ajax({ url: row ? `{{ url('/crm-follow-up') }}/${row.id}` : '{{ route('crm_follow_up.store') }}', type: row ? 'PUT' : 'POST', data: payload })
                .done(() => { Swal.fire('OK', 'Follow up tersimpan', 'success'); loadData(); })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan follow up', 'error'));
        });
    };
    $('#btnLoad,#statusFilter').on('click change', loadData);
    $('#searchBox').on('keydown', (e) => { if (e.key === 'Enter') loadData(); });
    $('#btnAdd,#btnAdd2').on('click', () => openForm());
    $(document).on('click', '.btn-edit', function () { openForm(rows.find((row) => Number(row.id) === Number($(this).data('id')))); });
    $(document).on('click', '.btn-delete', function () {
        const id = Number($(this).data('id'));
        Swal.fire({ title: 'Hapus follow up?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Hapus' }).then((result) => {
            if (!result.isConfirmed) return;
            $.ajax({ url: `{{ url('/crm-follow-up') }}/${id}`, type: 'DELETE' }).done(loadData).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus', 'error'));
        });
    });
    loadData();
});
</script>
@endpush