@extends('root')
@section('title', $invoice->invoice_number)

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

    <div class="row mb-3">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Detail invoice</strong>
                    <div>
                        @if(!$invoice->isCancelled())
                            <a href="{{ route('admin.manual-invoices.edit', $invoice) }}" class="btn btn-sm btn-primary">Edit</a>
                        @endif
                        @if($invoice->isDraft() && $invoice->payments->isEmpty())
                            <button type="button" class="btn btn-sm btn-outline-danger" id="btn-delete-draft">Hapus</button>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Client</div>
                        <div class="col-md-8">{{ $invoice->client_name }} <small class="text-muted">(#{{ $invoice->client_id }})</small></div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">WhatsApp / telp</div>
                        <div class="col-md-8">{{ $invoice->client_phone ?? '—' }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Email</div>
                        <div class="col-md-8">{{ $invoice->client_email ?? '—' }}</div>
                    </div>
                    @if($invoice->branch_label)
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Cabang / lokasi</div>
                        <div class="col-md-8">{{ $invoice->branch_label }}</div>
                    </div>
                    @endif
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Tanggal</div>
                        <div class="col-md-8">{{ $invoice->invoice_date->format('d/m/Y') }} @if($invoice->due_date) — jatuh tempo {{ $invoice->due_date->format('d/m/Y') }} @endif</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Status</div>
                        <div class="col-md-8">
                            <span class="badge bg-secondary">{{ $invoice->status }}</span>
                            <button type="button" class="btn btn-sm btn-link" data-bs-toggle="modal" data-bs-target="#modal-status">Ubah status</button>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Dibuat oleh</div>
                        <div class="col-md-8">{{ $invoice->creator?->name ?? '—' }}</div>
                    </div>
                    @if($invoice->notes_admin)
                    <div class="row mb-2">
                        <div class="col-md-4 text-muted">Catatan admin</div>
                        <div class="col-md-8">{{ $invoice->notes_admin }}</div>
                    </div>
                    @endif
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header"><strong>Item</strong></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>Nama</th>
                                    <th>Deskripsi</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Harga</th>
                                    <th class="text-end">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoice->items as $it)
                                <tr>
                                    <td>{{ $it->name }}</td>
                                    <td>{{ $it->description ?: '—' }}</td>
                                    <td class="text-end">{{ $it->qty }}</td>
                                    <td class="text-end">Rp {{ number_format((float)$it->unit_price, 0, ',', '.') }}</td>
                                    <td class="text-end">Rp {{ number_format((float)$it->line_subtotal, 0, ',', '.') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header"><strong>Ringkasan</strong></div>
                <div class="card-body">
                    <div class="d-flex justify-content-between"><span>Subtotal</span><span>Rp {{ number_format((float)$invoice->subtotal, 0, ',', '.') }}</span></div>
                    <div class="d-flex justify-content-between"><span>Diskon</span><span>- Rp {{ number_format((float)$invoice->discount_amount, 0, ',', '.') }}</span></div>
                    <div class="d-flex justify-content-between"><span>Pajak</span><span>Rp {{ number_format((float)$invoice->tax_amount, 0, ',', '.') }}</span></div>
                    <div class="d-flex justify-content-between"><span>Biaya tambahan</span><span>Rp {{ number_format((float)$invoice->additional_fee, 0, ',', '.') }}</span></div>
                    <hr>
                    <div class="d-flex justify-content-between fs-5"><strong>Grand total</strong><strong>Rp {{ number_format((float)$invoice->grand_total, 0, ',', '.') }}</strong></div>
                    <hr>
                    <div class="d-flex justify-content-between"><span>Terpakai bayar</span><span>Rp {{ number_format($paidSum, 0, ',', '.') }}</span></div>
                    <div class="d-flex justify-content-between"><span>Sisa</span><span>Rp {{ number_format($remaining, 0, ',', '.') }}</span></div>
                </div>
            </div>

            @if(!$invoice->isDraft() && !$invoice->isCancelled())
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Pembayaran</strong>
                    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modal-payment">+ Catat</button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0 table-sm">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Jumlah</th>
                                    <th>Metode</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($invoice->payments as $p)
                                <tr>
                                    <td>{{ $p->paid_at->format('d/m/Y H:i') }}</td>
                                    <td>Rp {{ number_format((float)$p->amount, 0, ',', '.') }}</td>
                                    <td><small>{{ $p->payment_method }}</small></td>
                                    <td>
                                        <button type="button" class="btn btn-link btn-sm p-0 btn-edit-pay"
                                            data-id="{{ $p->id }}"
                                            data-amount="{{ $p->amount }}"
                                            data-paid-at="{{ $p->paid_at->format('Y-m-d\TH:i') }}"
                                            data-method="{{ $p->payment_method }}"
                                            data-status="{{ $p->payment_status }}"
                                            data-reference="{{ $p->reference ? e($p->reference) : '' }}"
                                            data-notes="{{ $p->payment_notes ? e(\Illuminate\Support\Str::limit($p->payment_notes, 500)) : '' }}">Edit</button>
                                        <button type="button" class="btn btn-link btn-sm text-danger p-0 btn-del-pay" data-id="{{ $p->id }}">Hapus</button>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="4" class="text-center text-muted py-3">Belum ada pembayaran</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            <div class="card">
                <div class="card-header"><strong>Histori status</strong></div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($invoice->statusHistories as $h)
                        <li class="list-group-item small">
                            <div>{{ $h->created_at->format('d/m/Y H:i') }} — <span class="badge bg-light text-dark">{{ $h->source }}</span></div>
                            <div>{{ $h->from_status ?? '—' }} → <strong>{{ $h->to_status }}</strong>
                                @if($h->user) ({{ $h->user->name }}) @endif
                            </div>
                            @if($h->note)<div class="text-muted">{{ $h->note }}</div>@endif
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal status --}}
<div class="modal fade" id="modal-status" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ubah status manual</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label">Status</label>
                    <select id="patch-status" class="form-select">
                        @foreach(\App\Models\Invoice::STATUSES as $st)
                            <option value="{{ $st }}" @selected($invoice->status === $st)>{{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label">Catatan (opsional)</label>
                    <textarea id="patch-status-note" class="form-control" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="btn-patch-status">Simpan</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal payment --}}
<div class="modal fade" id="modal-payment" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="payment-modal-title">Catat pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="pay-id" value="">
                <div class="mb-2">
                    <label class="form-label">Jumlah</label>
                    <input type="number" id="pay-amount" class="form-control" min="0.01" step="0.01" required>
                </div>
                <div class="mb-2">
                    <label class="form-label">Tanggal bayar</label>
                    <input type="datetime-local" id="pay-at" class="form-control" required>
                </div>
                <div class="mb-2">
                    <label class="form-label">Metode</label>
                    <select id="pay-method" class="form-select">
                        @foreach($paymentMethodOptions as $opt)
                            <option value="{{ $opt['value'] }}">{{ $opt['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label">Status pembayaran</label>
                    <select id="pay-status" class="form-select">
                        <option value="{{ \App\Models\InvoicePayment::STATUS_COMPLETED }}">completed</option>
                        <option value="{{ \App\Models\InvoicePayment::STATUS_PENDING }}">pending</option>
                        <option value="{{ \App\Models\InvoicePayment::STATUS_FAILED }}">failed</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label">Referensi</label>
                    <input type="text" id="pay-ref" class="form-control" maxlength="191">
                </div>
                <div class="mb-2">
                    <label class="form-label">Catatan</label>
                    <textarea id="pay-notes" class="form-control" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="btn-save-pay">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const invoiceId = {{ $invoice->id }};

    document.getElementById('btn-delete-draft')?.addEventListener('click', function () {
        if (!confirm('Hapus invoice draft ini?')) return;
        fetch('{{ route('admin.manual-invoices.destroy', $invoice) }}', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(r => r.json()).then(res => {
            if (res.redirect) window.location.href = res.redirect;
            else window.location.href = '{{ route('admin.manual-invoices.index') }}';
        }).catch(() => alert('Gagal menghapus'));
    });

    document.getElementById('btn-patch-status').addEventListener('click', function () {
        fetch('{{ route('admin.manual-invoices.patch-status', $invoice) }}', {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                status: document.getElementById('patch-status').value,
                note: document.getElementById('patch-status-note').value || null
            })
        }).then(r => r.json()).then(res => {
            if (res.success) location.reload();
            else alert(res.message || 'Gagal');
        }).catch(() => alert('Gagal'));
    });

    function openPaymentModal(p) {
        document.getElementById('payment-modal-title').textContent = p ? 'Edit pembayaran' : 'Catat pembayaran';
        document.getElementById('pay-id').value = p ? p.id : '';
        document.getElementById('pay-amount').value = p ? p.amount : '';
        if (p && p.paid_at) {
            document.getElementById('pay-at').value = p.paid_at;
        } else {
            const n = new Date();
            const pad = x => String(x).padStart(2,'0');
            document.getElementById('pay-at').value = n.getFullYear()+'-'+pad(n.getMonth()+1)+'-'+pad(n.getDate())+'T'+pad(n.getHours())+':'+pad(n.getMinutes());
        }
        document.getElementById('pay-method').value = p ? p.method : 'manual';
        document.getElementById('pay-status').value = p ? p.status : '{{ \App\Models\InvoicePayment::STATUS_COMPLETED }}';
        document.getElementById('pay-ref').value = p && p.reference ? p.reference : '';
        document.getElementById('pay-notes').value = p && p.notes ? p.notes : '';
    }

    document.getElementById('modal-payment').addEventListener('show.bs.modal', function () {
        if (!document.getElementById('pay-id').value) openPaymentModal(null);
    });

    document.querySelectorAll('.btn-edit-pay').forEach(function (btn) {
        btn.addEventListener('click', function () {
            openPaymentModal({
                id: this.getAttribute('data-id'),
                amount: this.getAttribute('data-amount'),
                paid_at: this.getAttribute('data-paid-at'),
                method: this.getAttribute('data-method'),
                status: this.getAttribute('data-status'),
                reference: this.getAttribute('data-reference') || '',
                notes: this.getAttribute('data-notes') || ''
            });
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                new bootstrap.Modal(document.getElementById('modal-payment')).show();
            }
        });
    });

    document.getElementById('btn-save-pay').addEventListener('click', function () {
        const pid = document.getElementById('pay-id').value;
        const payload = {
            amount: document.getElementById('pay-amount').value,
            paid_at: document.getElementById('pay-at').value,
            payment_method: document.getElementById('pay-method').value,
            payment_status: document.getElementById('pay-status').value,
            reference: document.getElementById('pay-ref').value || null,
            payment_notes: document.getElementById('pay-notes').value || null
        };
        const base = '{{ url('/admin/manual-invoices/'.$invoice->id.'/payments') }}';
        let url = base;
        let method = 'POST';
        if (pid) {
            url = base + '/' + pid;
            method = 'PUT';
        }
        fetch(url, {
            method: method,
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        }).then(r => r.json()).then(res => {
            if (res.success) location.reload();
            else alert(res.message || 'Gagal');
        }).catch(() => alert('Gagal'));
    });

    document.querySelectorAll('.btn-del-pay').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            if (!confirm('Hapus pembayaran ini?')) return;
            fetch('{{ url('/admin/manual-invoices/'.$invoice->id.'/payments') }}/' + id, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }).then(r => r.json()).then(res => {
                if (res.success) location.reload();
                else alert(res.message || 'Gagal');
            });
        });
    });
})();
</script>
@endpush