@extends('layout.layout')

@php
    $title    = 'Detail Tagihan';
    $subTitle = 'Informasi Pembayaran Warga';
@endphp

@section('content')
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-8 lg:col-start-3">
            <div class="card border-0 shadow-sm rounded-2xl overflow-hidden bg-white dark:bg-neutral-800">
                
                {{-- Header Invoice --}}
                <div class="p-6 border-b border-neutral-100 dark:border-neutral-700 flex flex-wrap gap-4 justify-between items-start bg-neutral-50/50 dark:bg-neutral-800/50">
                    <div>
                        <h6 class="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-1">NO. INVOICE</h6>
                        <h4 class="text-2xl font-black text-neutral-800 dark:text-neutral-100">{{ $invoice->invoice_number }}</h4>
                    </div>
                    <div>
                        @if($invoice->status == 'unpaid')
                            <span class="bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400 border border-rose-100 dark:border-rose-800 px-4 py-2 rounded-full font-bold text-xs uppercase tracking-widest">Unpaid</span>
                        @else
                            <span class="bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-800 px-4 py-2 rounded-full font-bold text-xs uppercase tracking-widest">Paid</span>
                        @endif
                    </div>
                </div>

                {{-- Body Invoice --}}
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                        {{-- Info Pelanggan --}}
                        <div>
                            <p class="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-3">Ditagihkan Kepada</p>
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center font-bold text-sm border border-blue-100 dark:border-blue-800">
                                    {{ substr($invoice->user->name ?? 'U', 0, 2) }}
                                </div>
                                <div>
                                    <h6 class="font-bold text-neutral-800 dark:text-neutral-100 mb-0">{{ $invoice->user->name ?? 'User Tidak Dikenal' }}</h6>
                                    <p class="text-xs text-neutral-500 font-medium tracking-wide">ID: #{{ $invoice->user_id }}</p>
                                </div>
                            </div>
                        </div>

                        {{-- Info Periode --}}
                        <div>
                            <p class="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-3">Keterangan Waktu</p>
                            <div class="flex flex-col gap-1">
                                <div class="flex justify-between">
                                    <span class="text-sm text-neutral-500">Periode Meteran</span>
                                    <span class="text-sm font-bold text-neutral-800 dark:text-neutral-100">
                                        {{ \Carbon\Carbon::create()->month($invoice->meterReading->month ?? 1)->translatedFormat('F') }} {{ $invoice->meterReading->year ?? '' }}
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-neutral-500">Jatuh Tempo</span>
                                    <span class="text-sm font-bold text-rose-500">
                                        {{ $invoice->due_date ? $invoice->due_date->translatedFormat('d F Y') : '-' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="border-dashed border-neutral-200 dark:border-neutral-700 mb-6">

                    {{-- Rincian Transaksi --}}
                    <div>
                        <p class="text-xs font-bold text-neutral-400 uppercase tracking-widest mb-4">Rincian Pembayaran</p>
                        
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-sm font-medium text-neutral-500">Metode</span>
                            <span class="text-sm font-bold text-neutral-800 dark:text-neutral-100 uppercase">
                                {{ $invoice->payment_method ?? 'Belum Dipilih' }}
                            </span>
                        </div>

                        @if($invoice->paid_at)
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-sm font-medium text-neutral-500">Tanggal Bayar</span>
                            <span class="text-sm font-bold text-neutral-800 dark:text-neutral-100">
                                {{ $invoice->paid_at->translatedFormat('d F Y - H:i') }}
                            </span>
                        </div>
                        @endif

                        @if($invoice->transaction_id)
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-sm font-medium text-neutral-500">ID Transaksi</span>
                            <span class="text-xs font-mono font-bold text-neutral-800 dark:text-neutral-100 bg-neutral-100 dark:bg-neutral-700 px-2 py-1 rounded">
                                {{ $invoice->transaction_id }}
                            </span>
                        </div>
                        @endif

                        {{-- Total Block --}}
                        <div class="flex justify-between items-center mt-6 p-4 bg-blue-50/50 dark:bg-blue-900/10 rounded-xl border border-blue-100/50 dark:border-blue-800/30">
                            <span class="font-bold text-neutral-800 dark:text-neutral-100">Total Tagihan</span>
                            <span class="text-2xl font-black text-blue-600 dark:text-blue-400">
                                Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}
                            </span>
                        </div>
                    </div>
                </div>
                
                {{-- Footer / Action Buttons --}}
                <div class="p-6 bg-neutral-50/50 dark:bg-neutral-800/50 border-t border-neutral-100 dark:border-neutral-700 flex justify-end gap-3">
                    <a href="{{ route('tagihan.index') }}" class="px-6 py-2.5 rounded-xl border border-neutral-200 dark:border-neutral-600 text-neutral-600 dark:text-neutral-300 font-bold text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors">
                        Kembali
                    </a>
                    {{-- Jika ada fitur cetak kuitansi bisa ditambahkan tombol di sebelah sini --}}
                </div>

            </div>
        </div>
    </div>
@endsection