@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">Keluhan & Maintenance</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">Keluhan Penghuni</h1>
            <p class="text-text-secondary">Kelola laporan kerusakan dan permintaan maintenance dari penghuni.</p>
        </div>
        
        <form action="{{ route('owner.complaints.index') }}" 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 focus:ring-4 focus:ring-primary-500/10 transition-all 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="status" class="border border-border rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-4 focus:ring-primary-500/10 transition-all bg-white" onchange="this.form.submit()">
                <option value="">Semua Status</option>
                <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
                <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
            </select>
        </form>
    </div>

    @if($complaints->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">Belum ada keluhan</h3>
            <p class="text-text-secondary mt-2 max-w-xs mx-auto">Saat ini tidak ada keluhan atau laporan kerusakan yang perlu ditangani.</p>
        </div>
    @else
        <x-data-table :headers="['Penghuni', 'Keluhan', 'Kategori', 'Status', 'Ditugaskan Ke', 'Tanggal Lapor', 'Aksi']">
            @foreach($complaints as $complaint)
                <tr class="hover:bg-surface-2/50 transition-colors">
                    <td class="px-6 py-4">
                        <p class="font-bold text-text-primary text-sm">{{ $complaint->resident->user->name }}</p>
                        <p class="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{{ $complaint->property->name }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold text-text-primary line-clamp-1">{{ $complaint->title }}</p>
                        <p class="text-xs text-text-secondary line-clamp-1">{{ $complaint->description }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs font-medium text-text-secondary bg-surface px-2.5 py-1 rounded-lg border border-border capitalize">{{ str_replace('_', ' ', $complaint->category) }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <x-badge-status :status="$complaint->status" />
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm text-text-primary italic">{{ $complaint->assigned_to ?: '-' }}</p>
                    </td>
                    <td class="px-6 py-4 text-sm text-text-secondary">
                        {{ $complaint->created_at->translatedFormat('d M Y') }}
                    </td>
                    <td class="px-6 py-4 text-right">
                        <a href="{{ route('owner.complaints.show', $complaint) }}" class="px-4 py-2 bg-primary-50 text-primary-600 rounded-xl text-xs font-bold hover:bg-primary-100 transition-all">Tinjau</a>
                    </td>
                </tr>
            @endforeach
        </x-data-table>
        <div class="mt-6">
            {{ $complaints->appends(request()->query())->links() }}
        </div>
    @endif
@endsection