@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('reports.index') }}" class="hover:text-text-primary transition-colors">Laporan</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Penghuni</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">Laporan Penghuni</h1>
            <p class="text-text-secondary">Daftar penghuni aktif dan histori hunian.</p>
        </div>
        
        <form action="{{ route('reports.residents') }}" method="GET" class="flex flex-wrap items-center gap-3">
            <select name="property_id" class="border border-border rounded-xl px-4 py-2.5 text-sm outline-none bg-white" onchange="this.form.submit()">
                <option value="">Semua Properti</option>
                @foreach($properties as $property)
                    <option value="{{ $property->id }}" {{ request('property_id') == $property->id ? 'selected' : '' }}>{{ $property->name }}</option>
                @endforeach
            </select>
            
            <select name="type" class="border border-border rounded-xl px-4 py-2.5 text-sm outline-none bg-white" onchange="this.form.submit()">
                <option value="active" {{ request('type') == 'active' ? 'selected' : '' }}>Penghuni Aktif</option>
                <option value="ending_soon" {{ request('type') == 'ending_soon' ? 'selected' : '' }}>Akan Keluar (≤30 Hari)</option>
                <option value="past" {{ request('type') == 'past' ? 'selected' : '' }}>Histori Penghuni (Keluar)</option>
            </select>
        </form>
    </div>

    @if($data->isEmpty())
        <div class="bg-white rounded-2xl border border-border p-12 text-center">
            <div class="w-20 h-20 bg-surface rounded-full flex items-center justify-center mx-auto mb-6 text-text-muted">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-text-primary">Tidak ada data</h3>
            <p class="text-text-secondary mt-2">Tidak ditemukan data penghuni untuk kategori yang dipilih.</p>
        </div>
    @else
        <x-data-table :headers="['Penghuni', 'Unit', 'Mulai Sewa', 'Berakhir', 'Status', 'Aksi']">
            @foreach($data as $lease)
                <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">
                                {{ substr($lease->resident->user->name, 0, 1) }}
                            </div>
                            <div>
                                <p class="font-bold text-text-primary text-sm">{{ $lease->resident->user->name }}</p>
                                <p class="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{{ $lease->room->property->name }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 font-bold text-text-primary">
                        {{ $lease->room->room_number }}
                    </td>
                    <td class="px-6 py-4 text-sm text-text-secondary">
                        {{ $lease->start_date->translatedFormat('d M Y') }}
                    </td>
                    <td class="px-6 py-4 text-sm text-text-secondary">
                        {{ $lease->end_date->translatedFormat('d M Y') }}
                        @if($lease->status === 'active' && $lease->end_date->isPast())
                            <span class="block text-[10px] text-red-600 font-bold">Overdue</span>
                        @elseif($lease->status === 'active' && $lease->end_date->diffInDays(now()) <= 30)
                            <span class="block text-[10px] text-amber-600 font-bold">Segera Berakhir (H-{{ $lease->end_date->diffInDays(now()) }})</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <x-badge-status :status="$lease->status" />
                    </td>
                    <td class="px-6 py-4 text-right">
                        <a href="{{ route('owner.residents.edit', $lease->resident) }}" class="px-4 py-2 bg-primary-50 text-primary-600 rounded-xl text-xs font-bold hover:bg-primary-100 transition-all">Detail</a>
                    </td>
                </tr>
            @endforeach
        </x-data-table>
    @endif
@endsection