@extends('layouts.adminlte')

@section('title', 'INVOICE PAYMENT PROGRESS')
@section('page_title', 'INVOICE PAYMENT PROGRESS')

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Progress Schedule</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_project.index') }}" class="btn btn-outline-secondary btn-sm">Master Project</a>
                <button class="btn btn-outline-primary btn-sm" id="btnScheduleNew">Tambah Schedule</button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3 d-none" id="scheduleFormWrap">
                <input type="hidden" id="scheduleId">
                <div class="col-md-3"><select class="form-select" id="scheduleProjectId"></select></div>
                <div class="col-md-2"><input class="form-control" id="scheduleCode" placeholder="Kode"></div>
                <div class="col-md-3"><input class="form-control" id="scheduleName" placeholder="Nama aktivitas"></div>
                <div class="col-md-2"><input type="date" class="form-control" id="scheduleStart"></div>
                <div class="col-md-2"><input type="date" class="form-control" id="scheduleEnd"></div>
                <div class="col-md-2"><input type="number" class="form-control" id="scheduleTarget" placeholder="Target %" min="0" max="100" step="0.001"></div>
                <div class="col-md-2"><input type="number" class="form-control" id="scheduleActual" placeholder="Actual %" min="0" max="100" step="0.001"></div>
                <div class="col-md-2"><input type="number" class="form-control" id="scheduleBillable" placeholder="Billable %" min="0" max="100" step="0.001"></div>
                <div class="col-md-2"><select class="form-select" id="scheduleStatus"><option value="planned">Planned</option><option value="on_going">On Going</option><option value="done">Done</option><option value="hold">Hold</option></select></div>
                <div class="col-md-2"><button class="btn btn-primary w-100" id="btnScheduleSave">Simpan</button></div>
                <div class="col-md-2"><button class="btn btn-outline-secondary w-100" id="btnScheduleCancel">Batal</button></div>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle">
                    <thead><tr><th>#</th><th>Project</th><th>Aktivitas</th><th>Tanggal</th><th>Target%</th><th>Actual%</th><th>Billable%</th><th>Status</th><th>Aksi</th></tr></thead>
                    <tbody id="scheduleTbody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Invoice Payment Progress</h3>
            <div class="d-flex gap-2 align-items-center">
                <span class="badge text-bg-secondary" id="invReminderSummary">Reminder: -</span>
                <button class="btn btn-primary btn-sm" id="btnInvoiceNew">Tambah Invoice</button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3 d-none" id="invoiceFormWrap">
                <input type="hidden" id="invoiceId">
                <div class="col-md-3"><select class="form-select" id="invoiceProjectId"></select></div>
                <div class="col-md-3"><select class="form-select" id="invoiceScheduleId"><option value="">- Tanpa schedule -</option></select></div>
                <div class="col-md-2"><input class="form-control" id="invoiceNumber" placeholder="No Invoice System"></div>
                <div class="col-md-2"><input class="form-control" id="invoiceSupplierNumber" placeholder="No Invoice Supplier"></div>
                <div class="col-md-2"><input class="form-control" id="invoiceTaxNumber" placeholder="No Faktur Pajak"></div>
                <div class="col-md-2"><input type="date" class="form-control" id="invoiceDate"></div>
                <div class="col-md-2"><input type="date" class="form-control" id="invoiceDue"></div>
                <div class="col-md-2"><input type="number" class="form-control" id="invoiceProgress" placeholder="Progress %" min="0" max="100" step="0.001"></div>
                <div class="col-md-2"><select class="form-select" id="invoiceCurrency"><option>IDR</option><option>USD</option><option>EUR</option><option>SGD</option><option>JPY</option></select></div>
                <div class="col-md-2"><input type="number" class="form-control" id="invoiceRate" value="1" min="0.000001" step="0.000001" placeholder="Rate"></div>
                <div class="col-md-2"><input type="number" class="form-control" id="invoiceAmount" placeholder="Amount" min="0" step="0.01"></div>
                <div class="col-md-2"><select class="form-select" id="invoiceStatus"><option value="draft">Draft</option><option value="submitted">Submitted</option><option value="approved">Approved</option><option value="paid">Paid</option><option value="cancelled">Cancelled</option></select></div>
                <div class="col-md-2"><button class="btn btn-primary w-100" id="btnInvoiceSave">Simpan</button></div>
                <div class="col-md-2"><button class="btn btn-outline-secondary w-100" id="btnInvoiceCancel">Batal</button></div>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-striped table-bordered align-middle">
                    <thead><tr><th>Tgl. Invoice</th><th>No. Invoice System</th><th>No. Invoice Suplier</th><th>No. WO</th><th>No. Quotation</th><th>Jatuh Tempo</th><th>Reminder</th><th>No. Faktur Pajak</th><th>Nama Customer</th><th>Total (Rp.)</th><th>Status</th><th>Cetak</th><th>Aksi</th></tr></thead>
                    <tbody id="invoiceTbody"></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
    const fmt = (v) => Number(v || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    let projects = [], schedules = [], invoices = [];

    function billingProjects() { return projects.filter(p => ['approved_client','on_going','closed'].includes((p.project_status || '').toString())); }
    function projectText(p) { return `${p.code_project || p.code || '-'} - ${p.project_name || p.name || '-'}`; }
    function statusBadge(s){ const m={planned:'secondary',on_going:'primary',done:'success',hold:'warning',draft:'secondary',submitted:'primary',approved:'info',paid:'success',cancelled:'danger'}; return `<span class="badge text-bg-${m[s]||'secondary'}">${s||'-'}</span>`; }

    function fillProjectSelect(sel, value = '') {
        const opts = billingProjects().map(p => `<option value="${p.id}">${projectText(p)}</option>`);
        $(sel).html(opts.join('')).val(value || (billingProjects()[0]?.id || ''));
    }

    function fillScheduleSelect(projectId, value = '') {
        const opts = ['<option value="">- Tanpa schedule -</option>'];
        schedules.filter(s => Number(s.project_id) === Number(projectId)).forEach(s => opts.push(`<option value="${s.id}">${(s.activity_code||'-')} - ${(s.activity_name||'-')}</option>`));
        $('#invoiceScheduleId').html(opts.join('')).val(value || '');
    }

    function renderSchedules() {
        const html = schedules.map((r, i) => `<tr>
            <td>${i + 1}</td><td>${r.project_code || '-'} - ${r.project_name || '-'}</td>
            <td>${r.activity_code || '-'} ${r.activity_name || '-'}</td>
            <td>${r.start_date || '-'} s/d ${r.end_date || '-'}</td>
            <td>${r.target_progress_percent || 0}</td><td>${r.actual_progress_percent || 0}</td><td>${r.billable_progress_percent || 0}</td>
            <td>${statusBadge(r.status)}</td>
            <td><button class="btn btn-sm btn-outline-primary btn-sch-edit" data-id="${r.id}">Edit</button> <button class="btn btn-sm btn-outline-danger btn-sch-del" data-id="${r.id}">Delete</button></td>
        </tr>`).join('');
        $('#scheduleTbody').html(html || '<tr><td colspan="9" class="text-center text-muted">Belum ada data</td></tr>');
    }

    function renderInvoices() {
        const reminderRank = (r) => {
            const lvl = (r?.reminder?.level || '').toString();
            if (lvl === 'overdue') return 0;
            if (lvl === 'due_today') return 1;
            if (lvl === 'due_1') return 2;
            if (lvl === 'due_3') return 3;
            if (lvl === 'due_7') return 4;
            if (lvl === 'missing_due_date') return 5;
            return 99;
        };
        const reminderBadge = (r) => {
            const rem = r?.reminder || null;
            if (!rem) return `<span class="badge text-bg-light border">-</span>`;
            const lvl = (rem.level || '').toString();
            if (lvl === 'overdue') return `<span class="badge text-bg-danger">Overdue ${Number(rem.days || 0)} hari</span>`;
            if (lvl === 'due_today') return `<span class="badge text-bg-danger">Jatuh tempo hari ini</span>`;
            if (lvl === 'due_1') return `<span class="badge text-bg-warning">H-${Number(rem.days || 1)}</span>`;
            if (lvl === 'due_3') return `<span class="badge text-bg-warning">H-${Number(rem.days || 3)}</span>`;
            if (lvl === 'due_7') return `<span class="badge text-bg-info">H-${Number(rem.days || 7)}</span>`;
            if (lvl === 'missing_due_date') return `<span class="badge text-bg-secondary">Set due date</span>`;
            return `<span class="badge text-bg-light border">${rem.label || '-'}</span>`;
        };

        const list = invoices.slice().sort((a, b) =>
            reminderRank(a) - reminderRank(b)
            || String(a.due_date || '').localeCompare(String(b.due_date || ''))
            || String(a.invoice_date || '').localeCompare(String(b.invoice_date || ''))
            || String(a.invoice_number || '').localeCompare(String(b.invoice_number || ''))
        );

        const counts = { overdue: 0, dueSoon: 0, needDue: 0 };
        list.forEach((r) => {
            const lvl = (r?.reminder?.level || '').toString();
            if (lvl === 'overdue' || lvl === 'due_today') counts.overdue += 1;
            else if (['due_1', 'due_3', 'due_7'].includes(lvl)) counts.dueSoon += 1;
            else if (lvl === 'missing_due_date') counts.needDue += 1;
        });
        const sumEl = $('#invReminderSummary');
        sumEl.text(`Reminder: Overdue/Due Today ${counts.overdue} | Due Soon ${counts.dueSoon} | Need Due ${counts.needDue}`);
        sumEl.removeClass('text-bg-secondary text-bg-success text-bg-warning text-bg-danger');
        if (counts.overdue > 0) sumEl.addClass('text-bg-danger');
        else if (counts.dueSoon > 0) sumEl.addClass('text-bg-warning');
        else sumEl.addClass('text-bg-success');

        const html = list.map((r) => `<tr>
            <td>${r.invoice_date || '-'}</td>
            <td>${r.invoice_number || '-'}</td>
            <td>${r.supplier_invoice_number || '-'}</td>
            <td>${r.no_wo || '-'}</td>
            <td>${r.quotation_number || '-'}</td>
            <td>${r.due_date || '-'}</td>
            <td>${reminderBadge(r)}</td>
            <td>${r.tax_invoice_number || '-'}</td>
            <td>${r.customer_name || '-'}</td>
            <td>${fmt(r.amount_idr)}</td>
            <td>${statusBadge(r.status)}</td>
            <td><button class="btn btn-sm btn-outline-dark btn-inv-print" data-id="${r.id}">Cetak</button></td>
            <td><button class="btn btn-sm btn-outline-primary btn-inv-edit" data-id="${r.id}">Edit</button> <button class="btn btn-sm btn-outline-danger btn-inv-del" data-id="${r.id}">Delete</button></td>
        </tr>`).join('');
        $('#invoiceTbody').html(html || '<tr><td colspan="13" class="text-center text-muted">Belum ada data</td></tr>');
    }

    function reload() {
        return $.when(
            $.getJSON('{{ route('master_project.projects.data') }}'),
            $.getJSON('{{ route('master_project.progress_schedules.data') }}'),
            $.getJSON('{{ route('master_project.invoice_progress.data') }}')
        ).done((p, s, i) => {
            projects = p[0]?.data || []; schedules = s[0]?.data || []; invoices = i[0]?.data || [];
            renderSchedules(); renderInvoices();
        }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load data gagal', 'error'));
    }

    function scheduleFormReset() {
        $('#scheduleId').val(''); fillProjectSelect('#scheduleProjectId'); $('#scheduleCode,#scheduleName,#scheduleStart,#scheduleEnd').val('');
        $('#scheduleTarget,#scheduleActual,#scheduleBillable').val('0'); $('#scheduleStatus').val('planned');
    }
    function invoiceFormReset() {
        $('#invoiceId').val(''); fillProjectSelect('#invoiceProjectId'); fillScheduleSelect($('#invoiceProjectId').val(), '');
        $('#invoiceNumber,#invoiceSupplierNumber,#invoiceTaxNumber,#invoiceDate,#invoiceDue').val(''); $('#invoiceProgress').val('0'); $('#invoiceCurrency').val('IDR');
        $('#invoiceRate').val('1'); $('#invoiceAmount').val('0'); $('#invoiceStatus').val('draft');
    }

    $('#btnScheduleNew').on('click', () => { scheduleFormReset(); $('#scheduleFormWrap').removeClass('d-none'); });
    $('#btnInvoiceNew').on('click', () => { invoiceFormReset(); $('#invoiceFormWrap').removeClass('d-none'); });
    $('#btnScheduleCancel').on('click', () => $('#scheduleFormWrap').addClass('d-none'));
    $('#btnInvoiceCancel').on('click', () => $('#invoiceFormWrap').addClass('d-none'));
    $('#invoiceProjectId').on('change', function(){ fillScheduleSelect($(this).val(), ''); });

    $('#btnScheduleSave').on('click', function () {
        const id = $('#scheduleId').val();
        const payload = {
            project_id: $('#scheduleProjectId').val(), activity_code: ($('#scheduleCode').val() || '').toString().trim(),
            activity_name: ($('#scheduleName').val() || '').toString().trim(), start_date: $('#scheduleStart').val(), end_date: $('#scheduleEnd').val(),
            target_progress_percent: $('#scheduleTarget').val() || 0, actual_progress_percent: $('#scheduleActual').val() || 0,
            billable_progress_percent: $('#scheduleBillable').val() || 0, status: $('#scheduleStatus').val()
        };
        if (!payload.project_id || !payload.activity_name || !payload.start_date || !payload.end_date) return Swal.fire('Warning', 'Project, aktivitas, start, end wajib diisi', 'warning');
        $.ajax({ url: id ? `{{ url('/master-project/progress-schedules') }}/${id}` : '{{ route('master_project.progress_schedules.store') }}', type: id ? 'PUT' : 'POST', data: payload })
            .done((r) => { $('#scheduleFormWrap').addClass('d-none'); reload(); Swal.fire('Success', r?.message || 'Saved', 'success'); })
            .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Save gagal', 'error'));
    });

    $('#btnInvoiceSave').on('click', function () {
        const id = $('#invoiceId').val();
        const payload = {
            project_id: $('#invoiceProjectId').val(), progress_schedule_id: $('#invoiceScheduleId').val(), invoice_number: ($('#invoiceNumber').val() || '').toString().trim(),
            supplier_invoice_number: ($('#invoiceSupplierNumber').val() || '').toString().trim(),
            tax_invoice_number: ($('#invoiceTaxNumber').val() || '').toString().trim(),
            invoice_date: $('#invoiceDate').val(), due_date: $('#invoiceDue').val(), progress_percent: $('#invoiceProgress').val() || 0,
            currency_code: $('#invoiceCurrency').val(), exchange_rate_to_idr: $('#invoiceRate').val() || 1, amount: $('#invoiceAmount').val() || 0, status: $('#invoiceStatus').val()
        };
        if (!payload.project_id || !payload.invoice_number) return Swal.fire('Warning', 'Project dan nomor invoice wajib diisi', 'warning');
        $.ajax({ url: id ? `{{ url('/master-project/invoice-progress') }}/${id}` : '{{ route('master_project.invoice_progress.store') }}', type: id ? 'PUT' : 'POST', data: payload })
            .done((r) => { $('#invoiceFormWrap').addClass('d-none'); reload(); Swal.fire('Success', r?.message || 'Saved', 'success'); })
            .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Save gagal', 'error'));
    });

    $('#scheduleTbody').on('click', '.btn-sch-edit', function () {
        const row = schedules.find(x => Number(x.id) === Number($(this).data('id'))); if (!row) return;
        $('#scheduleFormWrap').removeClass('d-none'); $('#scheduleId').val(row.id); fillProjectSelect('#scheduleProjectId', row.project_id);
        $('#scheduleCode').val(row.activity_code || ''); $('#scheduleName').val(row.activity_name || ''); $('#scheduleStart').val(row.start_date || '');
        $('#scheduleEnd').val(row.end_date || ''); $('#scheduleTarget').val(row.target_progress_percent || 0); $('#scheduleActual').val(row.actual_progress_percent || 0);
        $('#scheduleBillable').val(row.billable_progress_percent || 0); $('#scheduleStatus').val(row.status || 'planned');
    });
    $('#invoiceTbody').on('click', '.btn-inv-edit', function () {
        const row = invoices.find(x => Number(x.id) === Number($(this).data('id'))); if (!row) return;
        $('#invoiceFormWrap').removeClass('d-none'); $('#invoiceId').val(row.id); fillProjectSelect('#invoiceProjectId', row.project_id);
        fillScheduleSelect(row.project_id, row.progress_schedule_id || ''); $('#invoiceNumber').val(row.invoice_number || ''); $('#invoiceDate').val(row.invoice_date || '');
        $('#invoiceSupplierNumber').val(row.supplier_invoice_number || ''); $('#invoiceTaxNumber').val(row.tax_invoice_number || '');
        $('#invoiceDue').val(row.due_date || ''); $('#invoiceProgress').val(row.progress_percent || 0); $('#invoiceCurrency').val((row.currency_code || 'IDR').toUpperCase());
        $('#invoiceRate').val(row.exchange_rate_to_idr || 1); $('#invoiceAmount').val(row.amount || 0); $('#invoiceStatus').val(row.status || 'draft');
    });
    $('#invoiceTbody').on('click', '.btn-inv-print', function () {
        const row = invoices.find(x => Number(x.id) === Number($(this).data('id'))); if (!row) return;
        const w = window.open('', '_blank');
        if (!w) return;
        w.document.write(`<html><head><title>Cetak Invoice ${row.invoice_number || ''}</title></head><body>
            <h3>Invoice Progress</h3>
            <table border="1" cellpadding="6" cellspacing="0">
            <tr><td>Tgl Invoice</td><td>${row.invoice_date || '-'}</td></tr>
            <tr><td>No Invoice System</td><td>${row.invoice_number || '-'}</td></tr>
            <tr><td>No Invoice Supplier</td><td>${row.supplier_invoice_number || '-'}</td></tr>
            <tr><td>No WO</td><td>${row.no_wo || '-'}</td></tr>
            <tr><td>No Quotation</td><td>${row.quotation_number || '-'}</td></tr>
            <tr><td>Jatuh Tempo</td><td>${row.due_date || '-'}</td></tr>
            <tr><td>No Faktur Pajak</td><td>${row.tax_invoice_number || '-'}</td></tr>
            <tr><td>Nama Customer</td><td>${row.customer_name || '-'}</td></tr>
            <tr><td>Total (Rp.)</td><td>${fmt(row.amount_idr)}</td></tr>
            <tr><td>Status</td><td>${row.status || '-'}</td></tr>
            </table></body></html>`);
        w.document.close();
        w.focus();
        w.print();
    });
    $('#scheduleTbody').on('click', '.btn-sch-del', function () {
        const id = Number($(this).data('id'));
        Swal.fire({ title: 'Hapus schedule?', icon: 'warning', showCancelButton: true }).then((ok) => {
            if (!ok.isConfirmed) return;
            $.ajax({ url: `{{ url('/master-project/progress-schedules') }}/${id}`, type: 'DELETE' })
                .done((r) => { reload(); Swal.fire('Deleted', r?.message || 'Deleted', 'success'); })
                .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Delete gagal', 'error'));
        });
    });
    $('#invoiceTbody').on('click', '.btn-inv-del', function () {
        const id = Number($(this).data('id'));
        Swal.fire({ title: 'Hapus invoice?', icon: 'warning', showCancelButton: true }).then((ok) => {
            if (!ok.isConfirmed) return;
            $.ajax({ url: `{{ url('/master-project/invoice-progress') }}/${id}`, type: 'DELETE' })
                .done((r) => { reload(); Swal.fire('Deleted', r?.message || 'Deleted', 'success'); })
                .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Delete gagal', 'error'));
        });
    });

    reload();
});
</script>
@endpush