@extends('layouts.owner')

@section('breadcrumb')
    <span class="text-text-muted">Manajemen</span>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Kamar & Unit</span>
@endsection

@section('content')
    <div class="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-text-primary">Kamar & Unit</h1>
            <p class="text-text-secondary">Kelola ketersediaan dan detail setiap kamar/unit.</p>
        </div>
        <a href="{{ route('owner.rooms.create', ['property_id' => request('property_id')]) }}" 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 justify-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 4v16m8-8H4"></path></svg>
            Tambah Kamar
        </a>
    </div>

    <!-- Filter Property -->
    <div class="bg-white rounded-2xl border border-border p-4 mb-8 flex flex-wrap items-center gap-4 shadow-sm">
        <span class="text-sm font-semibold text-text-secondary ml-2">Filter Properti:</span>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('owner.rooms.index') }}" class="px-4 py-2 rounded-xl text-xs font-bold transition-all {{ !request('property_id') ? 'bg-primary-500 text-white shadow-md shadow-primary-500/20' : 'bg-surface-2 text-text-secondary hover:bg-border' }}">
                Semua
            </a>
            @foreach($properties as $property)
                <a href="{{ route('owner.rooms.index', ['property_id' => $property->id]) }}" class="px-4 py-2 rounded-xl text-xs font-bold transition-all {{ request('property_id') == $property->id ? 'bg-primary-500 text-white shadow-md shadow-primary-500/20' : 'bg-surface-2 text-text-secondary hover:bg-border' }}">
                    {{ $property->name }}
                </a>
            @endforeach
        </div>
    </div>

    @if($rooms->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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-text-primary">Belum ada kamar</h3>
            <p class="text-text-secondary mt-2 max-w-xs mx-auto">Silakan pilih properti dan tambahkan kamar pertama Anda.</p>
        </div>
    @else
        <x-data-table :headers="['Kamar / Unit', 'Properti', 'Lantai', 'Harga / Bln', 'Status', 'Aksi']">
            @foreach($rooms as $room)
                @php
                    $isKos = $room->property->type === 'kos';
                    $term = $isKos ? 'Kamar' : 'Unit';
                @endphp
                <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-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500 shrink-0 overflow-hidden">
                                @if($room->photos->first())
                                    <img src="{{ asset('storage/' . $room->photos->first()->photo_path) }}" class="w-full h-full object-cover">
                                @else
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                @endif
                            </div>
                            <div>
                                <p class="font-bold text-text-primary">{{ $term }} {{ $room->room_number }}</p>
                                <p class="text-[10px] text-text-muted uppercase tracking-wider font-semibold">{{ $room->room_type ?? 'Standard' }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-text-secondary">{{ $room->property->name }}</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span class="text-sm font-medium text-text-primary">{{ $room->floor }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold text-text-primary">Rp {{ number_format($room->price_per_month, 0, ',', '.') }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <x-badge-status :status="$room->status" />
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <div x-data="{ open: false }" class="relative">
                                <button @click="open = !open" class="p-2 text-text-secondary hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-all">
                                    <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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl shadow-xl border border-border py-2 z-10 text-left">
                                    <a href="{{ route('owner.rooms.edit', $room) }}" class="block px-4 py-2 text-sm text-text-primary hover:bg-surface-2 flex items-center gap-2">
                                        <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="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>
                                        Edit
                                    </a>
                                    
                                    <div class="border-t border-border my-1"></div>
                                    <p class="px-4 py-1 text-[10px] font-bold text-text-muted uppercase tracking-wider">Set Status</p>
                                    <form action="{{ route('owner.rooms.update-status', $room) }}" method="POST">
                                        @csrf @method('PATCH')
                                        <button name="status" value="available" class="w-full text-left px-4 py-2 text-sm text-emerald-600 hover:bg-emerald-50">Tersedia</button>
                                        <button name="status" value="maintenance" class="w-full text-left px-4 py-2 text-sm text-blue-600 hover:bg-blue-50">Perbaikan</button>
                                    </form>

                                    <div class="border-t border-border my-1"></div>
                                    <form action="{{ route('owner.rooms.destroy', $room) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus kamar ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">Hapus</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            @endforeach
        </x-data-table>
    @endif
@endsection