@extends('layouts.app')
@section('title', 'Pembayaran ' . $invoice->nomor_invoice)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="font-bold text-slate-800 mb-4">Tambah Pembayaran</h3>
        <form action="{{ route('invoices.payment.update', $invoice) }}" method="POST" class="space-y-4">
            @csrf @method('PUT')
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Tanggal *</label>
                <input type="date" name="tanggal" value="{{ now()->toDateString() }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Jumlah *</label>
                <input type="number" step="0.01" min="0.01" name="jumlah" value="{{ $invoice->sisa_pembayaran }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                <p class="text-xs text-slate-500 mt-1">Sisa: Rp {{ number_format($invoice->sisa_pembayaran, 0, ',', '.') }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Metode *</label>
                <select name="metode" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                    <option value="TRANSFER">Transfer</option>
                    <option value="CASH">Cash</option>
                    <option value="QRIS">QRIS</option>
                    <option value="EWALLET">E-Wallet</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Keterangan</label>
                <input type="text" name="keterangan" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <button class="bg-[#1e6fbf] hover:bg-[#14538f] text-white font-semibold px-4 py-2 rounded-lg">Simpan Pembayaran</button>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="font-bold text-slate-800 mb-4">Riwayat Pembayaran</h3>
        <div class="space-y-2">
            @forelse($invoice->payments as $p)
                <div class="flex justify-between p-3 rounded-lg border border-slate-100 bg-slate-50">
                    <div>
                        <div class="font-semibold">Rp {{ number_format($p->jumlah, 0, ',', '.') }}</div>
                        <div class="text-xs text-slate-500">{{ $p->tanggal->format('d/m/Y') }} · {{ $p->metode }}</div>
                        @if($p->keterangan)<div class="text-xs text-slate-500">{{ $p->keterangan }}</div>@endif
                    </div>
                    <form action="{{ route('invoices.payment.destroy', [$invoice, $p]) }}" method="POST" onsubmit="return confirm('Hapus?')">
                        @csrf @method('DELETE')
                        <button class="text-red-500 text-xs">Hapus</button>
                    </form>
                </div>
            @empty
                <div class="text-slate-500 text-sm text-center py-6">Belum ada pembayaran.</div>
            @endforelse
        </div>

        <div class="mt-4 pt-4 border-t border-slate-200 text-sm space-y-1">
            <div class="flex justify-between"><span>Total Invoice</span><strong>Rp {{ number_format($invoice->total_akhir, 0, ',', '.') }}</strong></div>
            <div class="flex justify-between text-green-700"><span>Total Dibayar</span><strong>Rp {{ number_format($invoice->total_dibayar, 0, ',', '.') }}</strong></div>
            <div class="flex justify-between text-red-600"><span>Sisa</span><strong>Rp {{ number_format($invoice->sisa_pembayaran, 0, ',', '.') }}</strong></div>
        </div>

        <a href="{{ route('invoices.show', $invoice) }}" class="mt-4 inline-block text-[#1e6fbf] text-sm hover:underline">← Kembali ke invoice</a>
    </div>
</div>
@endsection