@extends('layouts.owner')

@section('breadcrumb')
    <span class="text-text-muted">Keuangan</span>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Tagihan</span>
@endsection

@section('content')
    <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-text-primary">Daftar Tagihan</h1>
            <p class="text-text-secondary">Kelola penagihan bulanan untuk seluruh penghuni aktif.</p>
        </div>
        <div class="flex items-center gap-3">
            <form action="{{ route('owner.invoices.generate-bulk') }}" method="POST">
                @csrf
                <input type="hidden" name="month" value="{{ $month }}">
                <input type="hidden" name="year" value="{{ $year }}">
                <button type="submit" class="bg-primary-500 text-white px-5 py-2.5 rounded-xl font-bold text-sm hover:bg-primary-600 transition-all shadow-lg shadow-primary-500/20 active:scale-[0.98] 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    Generate Tagihan {{ \Carbon\Carbon::create()->month($month)->translatedFormat('F') }}
                </button>
            </form>
        </div>
    </div>

    <!-- Filter Bulan & Tahun -->
    <div class="bg-white rounded-2xl border border-border p-4 mb-6">
        <form action="{{ route('owner.invoices.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex items-center gap-2">
                <label class="text-xs font-bold text-text-muted uppercase tracking-wider">Periode:</label>
                <select name="month" class="bg-surface-2 border-none rounded-lg px-3 py-1.5 text-xs font-bold text-text-primary outline-none focus:ring-2 focus:ring-primary-500/20">
                    @for($m=1; $m<=12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ \Carbon\Carbon::create()->month($m)->translatedFormat('F') }}</option>
                    @endfor
                </select>
                <select name="year" class="bg-surface-2 border-none rounded-lg px-3 py-1.5 text-xs font-bold text-text-primary outline-none focus:ring-2 focus:ring-primary-500/20">
                    @for($y=date('Y'); $y>=2024; $y--)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <button type="submit" class="p-1.5 bg-primary-50 text-primary-600 rounded-lg hover:bg-primary-100 transition-colors">
                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
        </form>
    </div>

    @if($invoices->isEmpty())
        <div class="bg-white rounded-2xl border border-border p-12 text-center">
            <div class="w-20 h-20 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-primary-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-text-primary">Belum ada tagihan di periode ini</h3>
            <p class="text-text-secondary mt-2 max-w-xs mx-auto">Klik tombol "Generate" untuk membuat tagihan otomatis bagi semua penghuni yang aktif.</p>
        </div>
    @else
        <x-data-table :headers="['Invoice', 'Penghuni', 'Unit', 'Total Tagihan', 'Jatuh Tempo', 'Status', 'Aksi']">
            @foreach($invoices as $invoice)
                <tr class="hover:bg-surface-2/50 transition-colors">
                    <td class="px-6 py-4">
                        <p class="font-bold text-primary-600 text-sm">#{{ $invoice->invoice_number }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="font-bold text-text-primary text-sm">{{ $invoice->resident->user->name }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-xs">
                            <p class="font-bold text-text-primary">{{ $invoice->lease->room->property->name }}</p>
                            <p class="text-text-secondary">Unit {{ $invoice->lease->room->room_number }}</p>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <p class="font-bold text-text-primary">Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-xs {{ $invoice->due_date->isPast() && $invoice->status === 'unpaid' ? 'text-red-600 font-bold' : 'text-text-secondary' }}">
                            {{ $invoice->due_date->translatedFormat('d M Y') }}
                        </p>
                    </td>
                    <td class="px-6 py-4">
                        <x-badge-status :status="$invoice->status" />
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('owner.invoices.show', $invoice) }}" class="p-2 text-text-secondary hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-all" title="Detail">
                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                            </a>
                            <a href="{{ route('owner.invoices.edit', $invoice) }}" class="p-2 text-text-secondary hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-all" title="Input Utilitas / Biaya">
                                <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>
                            </a>
                        </div>
                    </td>
                </tr>
            @endforeach
        </x-data-table>
    @endif
@endsection