@extends('root')
@section('title', 'Edit Tagihan Manual')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .invoice-form-compact .form-label { font-size: 0.875rem; margin-bottom: 0.25rem; }
    .invoice-form-compact .card-body { padding: 1.25rem; }
    @media (min-width: 992px) {
        .invoice-sidebar-sticky { position: sticky; top: 1rem; }
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-2">
    @include('components.breadcrumb', [
        'title' => 'Edit Tagihan Manual',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.manual-invoices.index'), 'label' => 'Tagihan Manual'],
            ['url' => route('admin.manual-invoices.show', $invoice), 'label' => $invoice->invoice_number],
        ],
        'current' => 'Edit'
    ])

    <form id="invoice-form" class="invoice-form-compact">
        @csrf
        @method('PUT')
        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                <div class="row g-3">
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="mb-3"><i class="ti ti-file-invoice me-2 text-primary"></i>Edit tagihan</h5>

                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">No. invoice</label>
                                        <input type="text" name="invoice_number" class="form-control" value="{{ $invoice->invoice_number }}">
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <label class="form-label">Tanggal <span class="text-danger">*</span></label>
                                        <input type="date" name="invoice_date" class="form-control" value="{{ $invoice->invoice_date->format('Y-m-d') }}" required>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <label class="form-label">Jatuh tempo</label>
                                        <input type="date" name="due_date" class="form-control" value="{{ $invoice->due_date?->format('Y-m-d') }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Status <span class="text-danger">*</span></label>
                                        <select name="status" class="form-select" required>
                                            @foreach(['draft'=>'Draft','unpaid'=>'Unpaid','partial'=>'Partial','paid'=>'Paid','cancel'=>'Cancel'] as $v=>$l)
                                                <option value="{{ $v }}" @selected($invoice->status === $v)>{{ $l }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Jenis <span class="text-danger">*</span></label>
                                        <select name="invoice_type" class="form-select" required>
                                            <option value="manual" @selected($invoice->invoice_type === 'manual')>Manual</option>
                                            <option value="recurring" @selected($invoice->invoice_type === 'recurring')>Recurring</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Client <span class="text-danger">*</span></label>
                                    <select name="client_id" id="client_id" class="form-select select2-client" required>
                                        @foreach($clients as $c)
                                            <option value="{{ $c->id }}"
                                                @selected($invoice->client_id === $c->id)
                                                data-name="{{ $c->name }}"
                                                data-phone="{{ $c->phone }}"
                                                data-email="{{ $c->email }}">
                                                {{ $c->name }}{{ $c->account_name ? ' — '.$c->account_name : '' }}{{ $c->email ? ' · '.$c->email : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <hr class="my-3">

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0">Item tagihan</h6>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-item"><i class="ti ti-plus"></i> Tambah baris</button>
                                </div>

                                <div class="table-responsive border rounded">
                                    <table class="table table-sm table-hover mb-0 align-middle" id="items-table">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Item</th>
                                                <th style="width:88px">Qty</th>
                                                <th style="width:120px">Harga</th>
                                                <th style="width:110px" class="text-end">Subtotal</th>
                                                <th style="width:40px"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="items-body">
                                            @foreach($invoice->items as $idx => $it)
                                                @include('pages.admin.manual-invoices.partials.item-row-filled', ['index' => $idx, 'item' => $it])
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <details class="mt-3 border rounded p-3 bg-light">
                                    <summary class="fw-semibold text-secondary cursor-pointer user-select-none">Opsional: kontak CRM & cabang</summary>
                                    <div class="row g-2 mt-2">
                                        <div class="col-md-6">
                                            <label class="form-label small">Kontak CRM</label>
                                            <select name="contact_id" id="contact_id" class="form-select form-select-sm">
                                                <option value="">—</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small">Cabang / lokasi</label>
                                            <input type="text" name="branch_label" class="form-control form-control-sm" value="{{ $invoice->branch_label }}" maxlength="255" placeholder="Opsional">
                                        </div>
                                    </div>
                                </details>

                                <div class="mt-3">
                                    <label class="form-label small text-muted">Catatan internal</label>
                                    <textarea name="notes_admin" class="form-control form-control-sm" rows="2">{{ $invoice->notes_admin }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="card border-0 shadow-sm invoice-sidebar-sticky">
                            <div class="card-body">
                                <h6 class="text-muted mb-3">Ringkasan</h6>
                                <div class="d-flex justify-content-between mb-2 small">
                                    <span>Subtotal item</span>
                                    <strong id="disp-subtotal">Rp 0</strong>
                                </div>

                                <details class="mb-3 border-top pt-2">
                                    <summary class="small fw-semibold text-secondary">Diskon, pajak & biaya</summary>
                                    <div class="mt-2">
                                        <label class="form-label small">Diskon</label>
                                        <div class="input-group input-group-sm">
                                            <select name="discount_type" id="discount_type" class="form-select" style="max-width:100px">
                                                <option value="nominal" @selected($invoice->discount_type === 'nominal')>Rp</option>
                                                <option value="percent" @selected($invoice->discount_type === 'percent')>%</option>
                                            </select>
                                            <input type="number" name="discount_value" id="discount_value" class="form-control" value="{{ $invoice->discount_value }}" min="0" step="0.01">
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <label class="form-label small">Pajak % <span class="text-muted">(opsional)</span></label>
                                        <input type="number" name="tax_percent" id="tax_percent" class="form-control form-control-sm" min="0" max="100" step="0.01"
                                               value="{{ $invoice->tax_percent !== null ? $invoice->tax_percent : '' }}" placeholder="Kosong jika pakai nominal">
                                    </div>
                                    <div class="mt-2">
                                        <label class="form-label small">Pajak nominal</label>
                                        <input type="number" name="tax_amount" id="tax_amount_input" class="form-control form-control-sm" value="{{ $invoice->tax_amount }}" min="0" step="0.01">
                                    </div>
                                    <div class="mt-2">
                                        <label class="form-label small">Biaya tambahan</label>
                                        <input type="number" name="additional_fee" id="additional_fee" class="form-control form-control-sm" value="{{ $invoice->additional_fee }}" min="0" step="0.01">
                                    </div>
                                </details>

                                <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                    <span class="fw-semibold">Total</span>
                                    <span class="fs-5 text-primary fw-bold" id="disp-grand">Rp 0</span>
                                </div>

                                <button type="submit" class="btn btn-primary w-100 mt-3" id="btn-save">
                                    <i class="ti ti-device-floppy me-1"></i> Simpan perubahan
                                </button>
                                <a href="{{ route('admin.manual-invoices.show', $invoice) }}" class="btn btn-outline-secondary w-100 mt-2">Kembali</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<template id="tpl-item-row">@include('pages.admin.manual-invoices.partials.item-row-compact', ['index' => '__INDEX__'])</template>
@endsection

@push('scripts')
<script>
(function () {
    const initialContactId = @json($invoice->contact_id);
    let rowIndex = {{ max($invoice->items->count(), 1) }};

    function parseNum(v) {
        const n = parseFloat(String(v).replace(',', '.'));
        return isNaN(n) ? 0 : n;
    }

    function moneyFmt(n) {
        return 'Rp ' + Math.round(n).toLocaleString('id-ID');
    }

    function recalc() {
        let subtotal = 0;
        document.querySelectorAll('#items-body tr').forEach(function (tr) {
            const qty = parseNum(tr.querySelector('.inp-qty').value);
            const price = parseNum(tr.querySelector('.inp-price').value);
            const line = qty * price;
            subtotal += line;
            const subEl = tr.querySelector('.line-subtotal');
            if (subEl) subEl.textContent = moneyFmt(line);
        });

        const dt = document.getElementById('discount_type').value;
        const dv = parseNum(document.getElementById('discount_value').value);
        let disc = 0;
        if (dt === 'percent') {
            disc = Math.min(subtotal * (dv / 100), subtotal);
        } else {
            disc = Math.min(dv, subtotal);
        }
        const basis = Math.max(0, subtotal - disc);
        const tp = document.getElementById('tax_percent').value;
        let tax = 0;
        if (tp !== '' && parseNum(tp) > 0) {
            tax = basis * (parseNum(tp) / 100);
        } else {
            tax = parseNum(document.getElementById('tax_amount_input').value);
        }
        const add = parseNum(document.getElementById('additional_fee').value);
        const grand = basis + tax + add;

        document.getElementById('disp-subtotal').textContent = moneyFmt(subtotal);
        document.getElementById('disp-grand').textContent = moneyFmt(grand);
    }

    document.getElementById('items-body').addEventListener('input', function (e) {
        if (e.target.matches('.inp-qty, .inp-price')) recalc();
    });
    document.getElementById('discount_type').addEventListener('change', recalc);
    document.getElementById('discount_value').addEventListener('input', recalc);
    document.getElementById('tax_percent').addEventListener('input', recalc);
    document.getElementById('tax_amount_input').addEventListener('input', recalc);
    document.getElementById('additional_fee').addEventListener('input', recalc);

    document.getElementById('btn-add-item').addEventListener('click', function () {
        const tpl = document.getElementById('tpl-item-row').innerHTML.replace(/__INDEX__/g, rowIndex++);
        document.getElementById('items-body').insertAdjacentHTML('beforeend', tpl);
        recalc();
    });

    document.getElementById('items-body').addEventListener('click', function (e) {
        if (e.target.closest('.btn-remove-item')) {
            const tr = e.target.closest('tr');
            if (document.querySelectorAll('#items-body tr').length <= 1) return;
            tr.remove();
            recalc();
        }
    });

    function loadContacts(selectedId) {
        const cid = document.getElementById('client_id').value;
        const sel = document.getElementById('contact_id');
        sel.innerHTML = '<option value="">—</option>';
        if (!cid) return;

        fetch('{{ url('/admin/manual-invoices/clients') }}/' + cid + '/contacts', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(res => {
            if (!res.success || !Array.isArray(res.data)) return;
            res.data.forEach(function (c) {
                const o = document.createElement('option');
                o.value = c.id;
                o.textContent = c.name + ' — ' + (c.phone_number || '');
                if (selectedId && String(selectedId) === String(c.id)) o.selected = true;
                sel.appendChild(o);
            });
        });
    }

    if (typeof jQuery !== 'undefined' && jQuery.fn.select2) {
        jQuery('#client_id').select2({
            theme: 'bootstrap-5',
            placeholder: 'Cari & pilih client',
            allowClear: true,
            width: '100%',
            language: {
                noResults: function () { return 'Tidak ada client yang cocok'; }
            }
        });
        jQuery('#client_id').on('change', function () {
            loadContacts(null);
        });
    }

    loadContacts(initialContactId);

    document.getElementById('invoice-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const btn = document.getElementById('btn-save');
        btn.disabled = true;

        const fd = new FormData(this);

        fetch('{{ route('admin.manual-invoices.update', $invoice) }}', {
            method: 'POST',
            body: fd,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(async r => {
            const j = await r.json().catch(() => ({}));
            if (!r.ok) {
                let msg = j.message || 'Gagal menyimpan';
                if (j.errors) {
                    msg = Object.values(j.errors).flat().join('\n');
                }
                throw new Error(msg);
            }
            return j;
        })
        .then(res => {
            if (res.redirect) {
                window.location.href = res.redirect;
            } else {
                window.location.href = '{{ route('admin.manual-invoices.show', $invoice) }}';
            }
        })
        .catch(err => {
            alert(err.message || 'Gagal menyimpan');
            btn.disabled = false;
        });
    });

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