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

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Tagihan Manual Client',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Tagihan Manual'
    ])

    <div class="card card-body mb-3">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Status</label>
                <select class="form-select" id="filter-status">
                    <option value="">Semua</option>
                    <option value="draft">Draft</option>
                    <option value="unpaid">Unpaid</option>
                    <option value="partial">Partial</option>
                    <option value="paid">Paid</option>
                    <option value="cancel">Cancel</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Dari</label>
                <input type="date" class="form-control" id="filter-date-from">
            </div>
            <div class="col-md-2">
                <label class="form-label">Sampai</label>
                <input type="date" class="form-control" id="filter-date-to">
            </div>
            <div class="col-md-3">
                <label class="form-label">Cari</label>
                <input type="text" class="form-control" id="filter-q" placeholder="No invoice / nama client">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary w-100" id="btn-filter"><i class="ti ti-filter me-1"></i> Filter</button>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="ti ti-file-invoice me-2"></i>Daftar Invoice</h5>
            <a href="{{ route('admin.manual-invoices.create') }}" class="btn btn-success">
                <i class="ti ti-plus me-1"></i> Buat Invoice
            </a>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead>
                        <tr>
                            <th>No. Invoice</th>
                            <th>Tanggal</th>
                            <th>Client</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Dibuat oleh</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="invoice-tbody">
                        <tr><td colspan="7" class="text-center text-muted py-4">Memuat...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function badgeClass(st) {
        const m = {
            draft: 'bg-secondary',
            unpaid: 'bg-warning text-dark',
            partial: 'bg-info text-dark',
            paid: 'bg-success',
            cancel: 'bg-danger'
        };
        return m[st] || 'bg-secondary';
    }

    function loadData() {
        const p = new URLSearchParams();
        const st = document.getElementById('filter-status').value;
        const df = document.getElementById('filter-date-from').value;
        const dt = document.getElementById('filter-date-to').value;
        const q = document.getElementById('filter-q').value;
        if (st) p.set('status', st);
        if (df) p.set('date_from', df);
        if (dt) p.set('date_to', dt);
        if (q) p.set('q', q);

        fetch('{{ route('admin.manual-invoices.data') }}?' + p.toString(), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(res => {
            const tbody = document.getElementById('invoice-tbody');
            if (!res.success || !Array.isArray(res.data)) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">Gagal memuat data</td></tr>';
                return;
            }
            if (res.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">Belum ada invoice</td></tr>';
                return;
            }
            tbody.innerHTML = res.data.map(row => `
                <tr>
                    <td><strong>${escapeHtml(row.invoice_number)}</strong></td>
                    <td>${escapeHtml(row.invoice_date)}</td>
                    <td>${escapeHtml(row.client_name)}</td>
                    <td>${escapeHtml(row.grand_total_fmt)}</td>
                    <td><span class="badge ${badgeClass(row.status)}">${escapeHtml(row.status)}</span></td>
                    <td>${escapeHtml(row.creator_name)}</td>
                    <td>
                        <a href="${row.show_url}" class="btn btn-sm btn-outline-primary">Detail</a>
                        <a href="${row.edit_url}" class="btn btn-sm btn-outline-secondary">Edit</a>
                    </td>
                </tr>
            `).join('');
        })
        .catch(() => {
            document.getElementById('invoice-tbody').innerHTML = '<tr><td colspan="7" class="text-center text-danger">Gagal memuat data</td></tr>';
        });
    }

    function escapeHtml(s) {
        if (!s) return '';
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    document.getElementById('btn-filter').addEventListener('click', loadData);
    document.addEventListener('DOMContentLoaded', loadData);
})();
</script>
@endpush