@extends('layouts.app')
@section('title', 'Invoice')

@section('actions')
    <a href="{{ route('invoices.create') }}" class="inline-flex items-center gap-2 bg-[#1e6fbf] hover:bg-[#14538f] text-white text-sm font-semibold px-3 py-2 rounded-lg">+ Invoice Baru</a>
@endsection

@section('content')
<form class="mb-4 grid grid-cols-1 sm:grid-cols-5 gap-2">
    <input type="text" name="q" value="{{ request('q') }}" placeholder="Cari nomor / customer..."
           class="rounded-lg border-slate-300 px-3 py-2 border text-sm sm:col-span-2">
    <select name="status" class="rounded-lg border-slate-300 px-3 py-2 border text-sm">
        <option value="">Semua Status</option>
        @foreach(['BELUM BAYAR','DP','LUNAS'] as $s)
            <option value="{{ $s }}" @selected(request('status')===$s)>{{ $s }}</option>
        @endforeach
    </select>
    <input type="date" name="dari" value="{{ request('dari') }}" class="rounded-lg border-slate-300 px-3 py-2 border text-sm">
    <input type="date" name="sampai" value="{{ request('sampai') }}" class="rounded-lg border-slate-300 px-3 py-2 border text-sm">
    <button class="bg-slate-700 hover:bg-slate-800 text-white px-4 py-2 rounded-lg text-sm sm:col-span-1">Cari</button>
</form>

<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead class="bg-slate-50 text-xs uppercase text-slate-600">
                <tr>
                    <th class="px-4 py-3 text-left">Nomor</th>
                    <th class="px-4 py-3 text-left">Tanggal</th>
                    <th class="px-4 py-3 text-left">Customer</th>
                    <th class="px-4 py-3 text-center">Qty</th>
                    <th class="px-4 py-3 text-right">Total</th>
                    <th class="px-4 py-3 text-right">Sisa</th>
                    <th class="px-4 py-3 text-center">Status</th>
                    <th class="px-4 py-3 text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($invoices as $inv)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 font-mono text-xs">{{ $inv->nomor_invoice }}</td>
                        <td class="px-4 py-3">{{ $inv->tanggal_invoice->format('d/m/Y') }}</td>
                        <td class="px-4 py-3 font-semibold">{{ $inv->customer->nama ?? '-' }}</td>
                        <td class="px-4 py-3 text-center">{{ $inv->total_qty }}</td>
                        <td class="px-4 py-3 text-right">Rp {{ number_format($inv->total_akhir, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-red-600">Rp {{ number_format($inv->sisa_pembayaran, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-center">
                            <span class="text-[10px] px-2 py-0.5 rounded border {{ $inv->status_badge }}">{{ $inv->status }}</span>
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap space-x-1">
                            <a href="{{ route('invoices.show', $inv) }}" class="text-blue-600 hover:underline text-xs">Lihat</a>
                            <a href="{{ route('invoices.print', $inv) }}" target="_blank" class="text-green-600 hover:underline text-xs">Cetak</a>
                            <a href="{{ route('invoices.pdf', $inv) }}" class="text-purple-600 hover:underline text-xs">PDF</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-center py-8 text-slate-500">Belum ada invoice.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-3 border-t border-slate-200">{{ $invoices->links() }}</div>
</div>
@endsection