@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.invoices.index') }}" class="hover:text-text-primary transition-colors">Tagihan</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Detail Tagihan</span>
@endsection

@section('content')
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-text-primary">Invoice #{{ $invoice->invoice_number }}</h1>
            <p class="text-text-secondary">Informasi lengkap rincian biaya penagihan.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('owner.invoices.download-pdf', $invoice) }}" target="_blank" class="px-5 py-2.5 bg-white border border-border rounded-xl text-sm font-bold text-text-primary hover:bg-surface transition-all flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                Cetak PDF
            </a>
            <a href="{{ route('owner.invoices.edit', $invoice) }}" class="px-5 py-2.5 bg-white border border-border rounded-xl text-sm font-bold text-text-primary hover:bg-surface transition-all flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                Edit Rincian
            </a>
            @if($invoice->status === 'pending_verification')
                <button class="px-5 py-2.5 bg-primary-500 text-white rounded-xl text-sm font-bold hover:bg-primary-600 shadow-lg shadow-primary-500/20 active:scale-[0.98] transition-all">Verifikasi Pembayaran</button>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Invoice Sheet -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-3xl border border-border shadow-sm overflow-hidden flex flex-col min-h-[600px]">
                <!-- Header -->
                <div class="p-8 bg-surface/30 border-b border-border flex justify-between items-start">
                    <div>
                        <div class="w-12 h-12 bg-primary-500 rounded-2xl flex items-center justify-center text-white font-black text-xl mb-4">R</div>
                        <h2 class="text-xl font-bold text-text-primary">{{ $invoice->lease->room->property->name }}</h2>
                        <p class="text-sm text-text-secondary">{{ $invoice->lease->room->property->address }}</p>
                    </div>
                    <div class="text-right">
                        <x-badge-status :status="$invoice->status" />
                        <p class="mt-4 text-xs font-bold text-text-muted uppercase tracking-widest">Diterbitkan Pada</p>
                        <p class="text-sm font-bold text-text-primary">{{ $invoice->created_at->translatedFormat('d M Y') }}</p>
                    </div>
                </div>

                <!-- Info Grid -->
                <div class="p-8 grid grid-cols-2 gap-8 border-b border-border">
                    <div>
                        <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-2">Ditagihkan Kepada</p>
                        <p class="font-bold text-text-primary">{{ $invoice->resident->user->name }}</p>
                        <p class="text-sm text-text-secondary">Unit {{ $invoice->lease->room->room_number }}</p>
                        <p class="text-sm text-text-secondary">{{ $invoice->resident->user->phone }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-2">Batas Waktu Pembayaran</p>
                        <p class="font-bold {{ $invoice->due_date->isPast() && $invoice->status === 'unpaid' ? 'text-red-600' : 'text-text-primary' }}">
                            {{ $invoice->due_date->translatedFormat('d M Y') }}
                        </p>
                        <p class="text-xs text-text-muted mt-1">Periode {{ \Carbon\Carbon::create()->month($invoice->period_month)->translatedFormat('F') }} {{ $invoice->period_year }}</p>
                    </div>
                </div>

                <!-- Items Table -->
                <div class="p-8 flex-1">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left text-[10px] font-bold text-text-muted uppercase tracking-widest border-b border-border">
                                <th class="pb-4">Deskripsi Biaya</th>
                                <th class="pb-4 text-right">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border/50 text-text-primary">
                            <tr>
                                <td class="py-4">
                                    <p class="font-bold">Sewa Kamar</p>
                                    <p class="text-xs text-text-secondary">Tagihan dasar hunian</p>
                                </td>
                                <td class="py-4 text-right font-bold">Rp {{ number_format($invoice->rent_amount, 0, ',', '.') }}</td>
                            </tr>
                            @if($invoice->electricity_amount > 0)
                                <tr>
                                    <td class="py-4">
                                        <p class="font-bold">Pemakaian Listrik</p>
                                        <p class="text-xs text-text-secondary">{{ $invoice->electricity_end - $invoice->electricity_start }} kWh ({{ $invoice->electricity_start }} - {{ $invoice->electricity_end }}) x Rp {{ number_format($invoice->electricity_rate, 0, ',', '.') }}</p>
                                    </td>
                                    <td class="py-4 text-right font-bold">Rp {{ number_format($invoice->electricity_amount, 0, ',', '.') }}</td>
                                </tr>
                            @endif
                            @if($invoice->water_amount > 0)
                                <tr>
                                    <td class="py-4">
                                        <p class="font-bold">Biaya Air</p>
                                    </td>
                                    <td class="py-4 text-right font-bold">Rp {{ number_format($invoice->water_amount, 0, ',', '.') }}</td>
                                </tr>
                            @endif
                            @if($invoice->other_charges)
                                @foreach($invoice->other_charges as $charge)
                                    <tr>
                                        <td class="py-4">
                                            <p class="font-bold">{{ $charge['label'] }}</p>
                                        </td>
                                        <td class="py-4 text-right font-bold">Rp {{ number_format($charge['amount'], 0, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Footer Total -->
                <div class="p-8 bg-surface-2 border-t-2 border-dashed border-border mt-auto">
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-bold text-text-primary">Total Tagihan</h3>
                        <p class="text-3xl font-black text-primary-600">Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Actions & Logs -->
        <div class="space-y-6">
            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">History Pembayaran</h3>
                </div>
                <div class="p-6">
                    @if($invoice->payments->isEmpty())
                        <div class="text-center py-4">
                            <p class="text-xs text-text-muted italic">Belum ada aktivitas pembayaran.</p>
                        </div>
                    @else
                        <!-- Simple Payment List -->
                        <div class="space-y-4">
                            @foreach($invoice->payments as $payment)
                                <div class="flex gap-3">
                                    <div class="w-1.5 h-1.5 rounded-full bg-primary-500 mt-1.5 shrink-0"></div>
                                    <div>
                                        <p class="text-xs font-bold text-text-primary">Pembayaran Rp {{ number_format($payment->amount, 0, ',', '.') }}</p>
                                        <p class="text-[10px] text-text-muted">{{ $payment->created_at->translatedFormat('d M Y, H:i') }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <div class="bg-amber-50 rounded-2xl p-6 border border-amber-200">
                <h4 class="text-sm font-bold text-amber-800 mb-2 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                    Catatan Penagihan
                </h4>
                <p class="text-xs text-amber-700 leading-relaxed italic">
                    {{ $invoice->notes ?? 'Tidak ada catatan tambahan untuk tagihan ini.' }}
                </p>
            </div>
        </div>
    </div>
@endsection