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

@section('actions')
    <a href="{{ route('reports.export', ['dari' => $dari, 'sampai' => $sampai]) }}" class="bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold px-3 py-2 rounded-lg">⬇ Export CSV</a>
@endsection

@section('content')
<form class="mb-4 grid grid-cols-1 sm:grid-cols-4 gap-2 bg-white rounded-xl shadow-sm border border-slate-200 p-4">
    <div>
        <label class="text-xs text-slate-500">Dari</label>
        <input type="date" name="dari" value="{{ $dari }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
    </div>
    <div>
        <label class="text-xs text-slate-500">Sampai</label>
        <input type="date" name="sampai" value="{{ $sampai }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
    </div>
    <div>
        <label class="text-xs text-slate-500">Status</label>
        <select name="status" class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
            <option value="">Semua</option>
            @foreach(['BELUM BAYAR','DP','LUNAS'] as $s)
                <option value="{{ $s }}" @selected($status===$s)>{{ $s }}</option>
            @endforeach
        </select>
    </div>
    <div class="flex items-end">
        <button class="w-full bg-slate-700 hover:bg-slate-800 text-white px-4 py-2 rounded-lg text-sm">Terapkan</button>
    </div>
</form>

<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
    <div class="bg-white rounded-lg border border-slate-200 p-4">
        <div class="text-xs text-slate-500">Total Invoice</div>
        <div class="text-xl font-bold">{{ number_format($summary['total_invoice'], 0, ',', '.') }}</div>
    </div>
    <div class="bg-white rounded-lg border border-slate-200 p-4">
        <div class="text-xs text-slate-500">Total Nilai</div>
        <div class="text-xl font-bold text-[#1e6fbf]">Rp {{ number_format($summary['total_nilai'], 0, ',', '.') }}</div>
    </div>
    <div class="bg-white rounded-lg border border-slate-200 p-4">
        <div class="text-xs text-slate-500">Total Dibayar</div>
        <div class="text-xl font-bold text-green-700">Rp {{ number_format($summary['total_dibayar'], 0, ',', '.') }}</div>
    </div>
    <div class="bg-white rounded-lg border border-slate-200 p-4">
        <div class="text-xs text-slate-500">Total Piutang</div>
        <div class="text-xl font-bold text-red-600">Rp {{ number_format($summary['total_piutang'], 0, ',', '.') }}</div>
    </div>
    <div class="bg-white rounded-lg border border-slate-200 p-4">
        <div class="text-xs text-slate-500">Total Qty</div>
        <div class="text-xl font-bold">{{ number_format($summary['total_qty'], 0, ',', '.') }} pcs</div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
    @foreach($perStatus as $ps)
        <div class="bg-white rounded-lg border border-slate-200 p-4">
            <div class="flex justify-between items-center mb-1">
                <span class="text-xs uppercase text-slate-500">{{ $ps->status }}</span>
                <span class="px-2 py-0.5 text-xs rounded-full border
                    @if($ps->status === 'LUNAS') bg-green-50 text-green-700 border-green-200
                    @elseif($ps->status === 'DP') bg-yellow-50 text-yellow-700 border-yellow-200
                    @else bg-red-50 text-red-700 border-red-200 @endif">
                    {{ $ps->total }} invoice
                </span>
            </div>
            <div class="text-lg font-bold">Rp {{ number_format($ps->nilai, 0, ',', '.') }}</div>
        </div>
    @endforeach
</div>

<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    <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">Dibayar</th>
                <th class="px-4 py-3 text-right">Sisa</th>
                <th class="px-4 py-3 text-center">Status</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-2 font-mono text-xs"><a href="{{ route('invoices.show', $inv) }}" class="text-[#1e6fbf] hover:underline">{{ $inv->nomor_invoice }}</a></td>
                    <td class="px-4 py-2">{{ $inv->tanggal_invoice->format('d/m/Y') }}</td>
                    <td class="px-4 py-2">{{ $inv->customer->nama ?? '-' }}</td>
                    <td class="px-4 py-2 text-center">{{ $inv->total_qty }}</td>
                    <td class="px-4 py-2 text-right">Rp {{ number_format($inv->total_akhir, 0, ',', '.') }}</td>
                    <td class="px-4 py-2 text-right text-green-700">Rp {{ number_format($inv->total_dibayar, 0, ',', '.') }}</td>
                    <td class="px-4 py-2 text-right text-red-600">Rp {{ number_format($inv->sisa_pembayaran, 0, ',', '.') }}</td>
                    <td class="px-4 py-2 text-center"><span class="text-[10px] px-1.5 py-0.5 rounded border {{ $inv->status_badge }}">{{ $inv->status }}</span></td>
                </tr>
            @empty
                <tr><td colspan="8" class="text-center py-8 text-slate-500">Tidak ada invoice pada periode ini.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="p-3 border-t border-slate-200">{{ $invoices->links() }}</div>
</div>
@endsection