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

@section('actions')
    <a href="{{ route('invoices.print', $invoice) }}" target="_blank" class="bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-3 py-2 rounded-lg">🖨️ Cetak</a>
    <a href="{{ route('invoices.pdf', $invoice) }}" class="bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold px-3 py-2 rounded-lg">📄 PDF</a>
    <a href="{{ route('invoices.edit', $invoice) }}" class="bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold px-3 py-2 rounded-lg">✏️ Edit</a>
    <a href="{{ route('invoices.payment.edit', $invoice) }}" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-3 py-2 rounded-lg">💵 Pembayaran</a>
@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="lg:col-span-2 space-y-4">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <div class="text-xs text-slate-500 uppercase">Nomor Invoice</div>
                    <h2 class="text-xl font-bold text-slate-800">{{ $invoice->nomor_invoice }}</h2>
                </div>
                <span class="px-3 py-1 rounded-full text-xs font-bold border {{ $invoice->status_badge }}">{{ $invoice->status }}</span>
            </div>

            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <div class="text-slate-500 text-xs">Customer</div>
                    <div class="font-semibold">{{ $invoice->customer->nama ?? '-' }}</div>
                    <div class="text-xs text-slate-500">{{ $invoice->customer->no_hp ?? '-' }}</div>
                </div>
                <div>
                    <div class="text-slate-500 text-xs">Tanggal Invoice</div>
                    <div class="font-semibold">{{ $invoice->tanggal_invoice->format('d/m/Y') }}</div>
                </div>
                <div>
                    <div class="text-slate-500 text-xs">Jenis Sablon</div>
                    <div>{{ $invoice->jenis_sablon ?? '-' }}</div>
                </div>
                <div>
                    <div class="text-slate-500 text-xs">Bahan</div>
                    <div>{{ $invoice->bahan ?? '-' }}</div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="p-4 border-b border-slate-200 font-bold">Detail Item</div>
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-xs uppercase text-slate-600">
                    <tr>
                        <th class="px-4 py-2 text-left">#</th>
                        <th class="px-4 py-2 text-left">Spesifikasi</th>
                        <th class="px-4 py-2 text-center">Ukuran</th>
                        <th class="px-4 py-2 text-center">Qty</th>
                        <th class="px-4 py-2 text-right">Harga</th>
                        <th class="px-4 py-2 text-right">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($invoice->items as $i => $item)
                        <tr>
                            <td class="px-4 py-2">{{ $i + 1 }}</td>
                            <td class="px-4 py-2 font-semibold">{{ $item->spesifikasi }}</td>
                            <td class="px-4 py-2 text-center">{{ $item->ukuran ?? '-' }}</td>
                            <td class="px-4 py-2 text-center">{{ $item->qty }}</td>
                            <td class="px-4 py-2 text-right">Rp {{ number_format($item->harga_satuan, 0, ',', '.') }}</td>
                            <td class="px-4 py-2 text-right font-semibold">Rp {{ number_format($item->total_harga, 0, ',', '.') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($invoice->images->count())
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
                <div class="font-bold mb-2">Mockup</div>
                <div class="flex flex-wrap gap-2">
                    @foreach($invoice->images as $img)
                        <a href="{{ $img->url }}" target="_blank"><img src="{{ $img->url }}" class="h-32 rounded border"></a>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Riwayat --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
            <div class="font-bold mb-3">Riwayat Perubahan</div>
            <div class="space-y-2 max-h-72 overflow-y-auto">
                @forelse($invoice->histories as $h)
                    <div class="p-2 rounded border border-slate-100 text-xs">
                        <div class="flex justify-between">
                            <span class="font-semibold">{{ $h->aksi }}</span>
                            <span class="text-slate-500">{{ $h->created_at->format('d/m/Y H:i') }}</span>
                        </div>
                        <div class="text-slate-600">{{ $h->keterangan }}</div>
                        <div class="text-slate-400">oleh {{ $h->user_name }}</div>
                    </div>
                @empty
                    <div class="text-slate-500 text-sm">Belum ada riwayat.</div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Summary Sidebar --}}
    <div class="space-y-4">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span>Subtotal</span><span class="font-semibold">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span></div>
                <div class="flex justify-between"><span>Diskon</span><span>Rp {{ number_format($invoice->diskon, 0, ',', '.') }}</span></div>
                <div class="flex justify-between text-lg font-bold border-t border-slate-200 pt-2">
                    <span>Total</span><span>Rp {{ number_format($invoice->total_akhir, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between text-green-700"><span>Dibayar</span><span>Rp {{ number_format($invoice->total_dibayar, 0, ',', '.') }}</span></div>
                <div class="flex justify-between text-red-600 font-bold"><span>Kekurangan</span><span>Rp {{ number_format($invoice->sisa_pembayaran, 0, ',', '.') }}</span></div>
                <div class="flex justify-between pt-2 border-t border-slate-200 text-xs text-slate-500">
                    <span>Total Qty</span><span>{{ $invoice->total_qty }} pcs</span>
                </div>
            </div>

            <div class="mt-4 pt-4 border-t border-slate-200 space-y-2">
                @if($invoice->status !== 'LUNAS')
                    <form action="{{ route('invoices.payment.lunas', $invoice) }}" method="POST" onsubmit="return confirm('Tandai invoice ini LUNAS?')">
                        @csrf
                        <button class="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-semibold py-2 rounded-lg">✅ Tandai LUNAS</button>
                    </form>
                @endif
                @if($invoice->total_dibayar > 0)
                    <form action="{{ route('invoices.payment.reset', $invoice) }}" method="POST" onsubmit="return confirm('Reset semua pembayaran?')">
                        @csrf
                        <button class="w-full bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm font-semibold py-2 rounded-lg">🔄 Reset Pembayaran</button>
                    </form>
                @endif
            </div>
        </div>

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