@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.rooms.index') }}" class="hover:text-text-primary transition-colors">Kamar & Unit</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Edit Kamar</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Edit Kamar</h1>
        <p class="text-text-secondary">Ubah detail kamar <strong>{{ $room->room_number }}</strong> di {{ $room->property->name }}.</p>
    </div>

    <form action="{{ route('owner.rooms.update', $room) }}" method="POST" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        @csrf
        @method('PUT')
        
        <!-- Main Form -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Detail Kamar</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-text-secondary mb-1">Properti</label>
                        <div class="px-4 py-2.5 bg-surface-2 border border-border rounded-xl text-sm font-semibold text-text-primary">
                            {{ $room->property->name }}
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="room_number" class="block text-sm font-medium text-text-secondary mb-1">Nomor Kamar / Unit</label>
                            <input type="text" id="room_number" name="room_number" value="{{ old('room_number', $room->room_number) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                            <x-input-error :messages="$errors->get('room_number')" class="mt-2" />
                        </div>
                        <div>
                            <label for="floor" class="block text-sm font-medium text-text-secondary mb-1">Lantai</label>
                            <input type="number" id="floor" name="floor" value="{{ old('floor', $room->floor) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="room_type" class="block text-sm font-medium text-text-secondary mb-1">Tipe Kamar</label>
                            <input type="text" id="room_type" name="room_type" value="{{ old('room_type', $room->room_type) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                        <div>
                            <label for="capacity" class="block text-sm font-medium text-text-secondary mb-1">Kapasitas (Orang)</label>
                            <input type="number" id="capacity" name="capacity" value="{{ old('capacity', $room->capacity) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Fasilitas Kamar</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                        @foreach(['kamar_mandi_dalam' => 'KM Dalam', 'spring_bed' => 'Spring Bed', 'lemari' => 'Lemari', 'meja_kursi' => 'Meja & Kursi', 'ac' => 'AC', 'tv' => 'TV'] as $val => $label)
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input type="checkbox" name="facilities[]" value="{{ $val }}" class="rounded border-border text-primary-500 focus:ring-primary-500/20" {{ is_array(old('facilities', $room->facilities)) && in_array($val, old('facilities', $room->facilities)) ? 'checked' : '' }}>
                            <span class="text-sm text-text-secondary group-hover:text-text-primary transition-colors">{{ $label }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Form -->
        <div class="space-y-6">
            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Harga Sewa</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="price_per_month" class="block text-sm font-medium text-text-secondary mb-1">Harga per Bulan (Rp)</label>
                        <input type="number" id="price_per_month" name="price_per_month" value="{{ old('price_per_month', $room->price_per_month) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm font-bold text-primary-600 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                    </div>
                    <div>
                        <label for="price_per_year" class="block text-sm font-medium text-text-secondary mb-1">Harga per Tahun</label>
                        <input type="number" id="price_per_year" name="price_per_year" value="{{ old('price_per_year', $room->price_per_year) }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Status Kamar</h3>
                </div>
                <div class="p-6">
                    <select name="status" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        <option value="available" {{ old('status', $room->status) == 'available' ? 'selected' : '' }}>Tersedia</option>
                        <option value="maintenance" {{ old('status', $room->status) == 'maintenance' ? 'selected' : '' }}>Perbaikan</option>
                        <option value="occupied" {{ old('status', $room->status) == 'occupied' ? 'selected' : '' }} disabled>Terisi (Otomatis dari Sewa)</option>
                    </select>
                    <p class="mt-2 text-[10px] text-text-muted">Status 'Terisi' tidak bisa diubah manual.</p>
                </div>
            </div>

            <div class="pt-2">
                <button type="submit" class="w-full bg-primary-500 text-white font-bold py-3 px-4 rounded-xl hover:bg-primary-600 transition-all shadow-lg shadow-primary-500/20 active:scale-[0.98]">
                    Simpan Perubahan
                </button>
                <a href="{{ route('owner.rooms.index') }}" class="block w-full text-center text-sm font-bold text-text-muted mt-4 hover:text-text-primary transition-colors">Batal</a>
            </div>
        </div>
    </form>
@endsection