@extends('root')
@section('title', 'Buat 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' => 'Buat Tagihan Manual',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.manual-invoices.index'), 'label' => 'Tagihan Manual'],
        ],
        'current' => 'Buat'
    ])

    <form id="invoice-form" class="invoice-form-compact">
        @csrf
        <input type="hidden" name="invoice_type" value="manual">

        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                <div class="row g-3">
                    {{-- Kolom utama --}}
                    <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>Data tagihan</h5>

                                <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>
                                        <option value="">Cari & pilih client</option>
                                        @foreach($clients as $c)
                                            <option value="{{ $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>

                                <div class="row g-2 mb-3">
                                    <div class="col-sm-4">
                                        <label class="form-label">Tanggal <span class="text-danger">*</span></label>
                                        <input type="date" name="invoice_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label">Jatuh tempo</label>
                                        <input type="date" name="due_date" class="form-control">
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form-label">Status</label>
                                        <select name="status" class="form-select" required>
                                            <option value="draft">Draft</option>
                                            <option value="unpaid" selected>Unpaid</option>
                                            <option value="partial">Partial</option>
                                            <option value="paid">Paid</option>
                                            <option value="cancel">Cancel</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">No. invoice <small class="text-muted fw-normal">(kosong = otomatis)</small></label>
                                    <input type="text" name="invoice_number" class="form-control" placeholder="INV-…">
                                </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">
                                            @include('pages.admin.manual-invoices.partials.item-row-compact', ['index' => 0])
                                        </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" 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" placeholder="Hanya terlihat di admin"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Ringkasan & pajak --}}
                    <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">Rp</option>
                                                <option value="percent">%</option>
                                            </select>
                                            <input type="number" name="discount_value" id="discount_value" class="form-control" value="0" 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" 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="0" 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="0" 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
                                </button>
                                <a href="{{ route('admin.manual-invoices.index') }}" class="btn btn-outline-secondary w-100 mt-2">Batal</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 () {
    let rowIndex = 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();
        }
    });

    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 () {
            const cid = jQuery(this).val();
            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 || '');
                    sel.appendChild(o);
                });
            });
        });
    }

    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.store') }}', {
            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 if (res.data && res.data.redirect) {
                window.location.href = res.data.redirect;
            } else {
                window.location.href = '{{ route('admin.manual-invoices.index') }}';
            }
        })
        .catch(err => {
            alert(err.message || 'Gagal menyimpan');
            btn.disabled = false;
        });
    });

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