@extends('layouts.owner')

@section('breadcrumb')
    <span class="text-text-muted">Lainnya</span>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Reminder 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">Reminder Tagihan</h1>
            <p class="text-text-secondary">Kirim pengingat pembayaran via WhatsApp ke penghuni yang belum bayar.</p>
        </div>
        @if(!$invoices->isEmpty())
            <form action="{{ route('owner.reminders.bulk-send') }}" method="POST" onsubmit="return confirm('Kirim reminder ke semua penghuni yang belum bayar?')">
                @csrf
                <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                    Kirim Reminder ke Semua
                </button>
            </form>
        @endif
    </div>

    @if($invoices->isEmpty())
        <div class="bg-white rounded-2xl border border-border p-12 text-center">
            <div class="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-text-primary">Tidak ada tunggakan!</h3>
            <p class="text-text-secondary mt-2 max-w-xs mx-auto">Semua penghuni sudah membayar tagihan mereka tepat waktu.</p>
        </div>
    @else
        <x-data-table :headers="['Penghuni', 'Invoice', 'Bulan', 'Total Tunggakan', 'Jatuh Tempo', 'Aksi']">
            @foreach($invoices as $invoice)
                <tr class="hover:bg-surface-2/50 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 font-bold text-xs shrink-0">
                                {{ substr($invoice->resident->user->name, 0, 1) }}
                            </div>
                            <div>
                                <p class="font-bold text-text-primary text-sm">{{ $invoice->resident->user->name }}</p>
                                <p class="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{{ $invoice->lease->room->property->name }} - Unit {{ $invoice->lease->room->room_number }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm font-bold text-primary-600">
                        #{{ $invoice->invoice_number }}
                    </td>
                    <td class="px-6 py-4 text-sm text-text-primary font-medium">
                        {{ \Carbon\Carbon::create()->month($invoice->period_month)->translatedFormat('F') }} {{ $invoice->period_year }}
                    </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 font-bold {{ $invoice->due_date->isPast() ? 'text-red-600' : 'text-text-muted' }}">
                            {{ $invoice->due_date->translatedFormat('d M Y') }}
                        </p>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <form action="{{ route('owner.reminders.send', $invoice) }}" method="POST">
                            @csrf
                            <button type="submit" class="px-4 py-2 bg-primary-50 text-primary-600 rounded-xl text-xs font-bold hover:bg-primary-100 transition-all flex items-center gap-2 mx-auto sm:mx-0 sm:ml-auto">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                                Kirim WA
                            </button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </x-data-table>
    @endif
@endsection