@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">Tambah Kamar</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Tambah Kamar Baru</h1>
        <p class="text-text-secondary">Daftarkan kamar atau unit baru ke dalam properti Anda.</p>
    </div>

    <form action="{{ route('owner.rooms.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        @csrf
        
        <!-- 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 for="property_id" class="block text-sm font-medium text-text-secondary mb-1">Pilih Properti</label>
                        <select id="property_id" name="property_id" 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>
                            <option value="">-- Pilih Properti --</option>
                            @foreach($properties as $property)
                                <option value="{{ $property->id }}" {{ (old('property_id') ?? request('property_id')) == $property->id ? 'selected' : '' }}>
                                    {{ $property->name }} ({{ ucfirst($property->type) }})
                                </option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('property_id')" class="mt-2" />
                    </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') }}" placeholder="Contoh: A1 atau 101" 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', 1) }}" 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">
                            <x-input-error :messages="$errors->get('floor')" class="mt-2" />
                        </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 (Opsional)</label>
                            <input type="text" id="room_type" name="room_type" value="{{ old('room_type') }}" placeholder="Contoh: Deluxe, Single" 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', 1) }}" 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('capacity')" class="mt-2" />
                        </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')) && in_array($val, old('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') }}" placeholder="1500000" 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>
                        <x-input-error :messages="$errors->get('price_per_month')" class="mt-2" />
                    </div>
                    <div>
                        <label for="price_per_year" class="block text-sm font-medium text-text-secondary mb-1">Harga per Tahun (Opsional)</label>
                        <input type="number" id="price_per_year" name="price_per_year" value="{{ old('price_per_year') }}" placeholder="16500000" 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">Foto Kamar</h3>
                </div>
                <div class="p-6">
                    <input type="file" name="photos[]" multiple class="block w-full text-xs text-text-muted
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-xs file:font-semibold
                        file:bg-primary-50 file:text-primary-700
                        hover:file:bg-primary-100 transition-all
                    ">
                    <p class="mt-2 text-[10px] text-text-muted">Maksimal 5 foto.</p>
                </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 Awal</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') == 'available' ? 'selected' : '' }}>Tersedia</option>
                        <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Perbaikan</option>
                    </select>
                </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 Kamar
                </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