@extends('frontend.app')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
        
        <div class="bg-gray-900 p-6 text-white">
            <h2 class="text-xl font-bold">Formulir Pengajuan Sewa</h2>
            <p class="text-gray-400 text-sm mt-1">Lengkapi data diri Anda untuk mengunci unit properti ini.</p>
        </div>

        <div class="p-6 bg-amber-50/50 border-b border-gray-100 flex gap-4 items-center">
            <div class="w-16 h-16 rounded-xl overflow-hidden bg-gray-100 flex-shrink-0 border border-gray-200">
                @if($kos->thumbnail)
                    <img src="{{ asset('storage/' . $kos->thumbnail) }}" class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full flex items-center justify-center text-gray-400 text-xs">No Gambar</div>
                @endif
            </div>
            <div>
                <span class="text-[10px] font-extrabold text-amber-600 uppercase bg-amber-100 px-2 py-0.5 rounded-md tracking-wider">
                    {{ $kos->category }}
                </span>
                <h3 class="font-bold text-gray-900 text-base leading-tight mt-1">{{ $kos->name }}</h3>
                <p class="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
                    {{ $kos->city->name }}
                </p>
            </div>
        </div>

        <form action="{{ route('kos.book.store', ['category' => $kos->category, 'slug' => $kos->slug]) }}" method="POST" class="p-6 space-y-5">
            @csrf

            <div>
                <label class="block text-sm font-semibold text-gray-800 mb-1">Nama Lengkap (Sesuai KTP)</label>
                <input type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required 
                    class="w-full bg-gray-50 border border-gray-200 rounded-xl p-3 text-sm focus:outline-none focus:border-amber-500 transition">
                @error('name') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-800 mb-1">Nomor WhatsApp Aktif</label>
                <input type="tel" name="phone" value="{{ old('phone', auth()->user()->phone ?? '') }}" required 
                    class="w-full bg-gray-50 border border-gray-200 rounded-xl p-3 text-sm focus:outline-none focus:border-amber-500 transition">
                <p class="text-xs text-gray-400 mt-1">Digunakan untuk konfirmasi pemesanan dan pengiriman tagihan.</p>
                @error('phone') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-800 mb-1">Tanggal Survey Lokasi</label>
                <input type="date" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" required 
                    min="{{ date('Y-m-d') }}" 
                    max="{{ date('Y-m-d', strtotime('+1 day')) }}" 
                    class="w-full bg-gray-50 border border-gray-200 rounded-xl p-3 text-sm focus:outline-none focus:border-amber-500 transition cursor-pointer">
                <p class="text-xs text-gray-400 mt-1">Jadwal survei maksimal adalah H+1 dari hari ini. {{ $kos->category === 'kontrakan' ? 'Kontrakan' : 'Kamar' }} akan dikunci sementara untuk Anda.</p>
                @error('start_date') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
            </div>

            @if($kos->category === 'kos')
                <div>
                    <label class="block text-sm font-semibold text-gray-800 mb-1">Pilih Nomor / Tipe Kamar</label>
                    <select name="room_id" required class="w-full bg-gray-50 border border-gray-200 rounded-xl p-3 text-sm focus:outline-none focus:border-amber-500 transition font-medium">
                        <option value="">-- Silakan Pilih Kamar --</option>
                        @foreach($kos->rooms as $room)
                            <option value="{{ $room->id }}" 
                                {{ (old('room_id') == $room->id || request('room_id') == $room->id) ? 'selected' : '' }}
                                {{ !$room->is_available ? 'disabled' : '' }}>
                                {{ $room->room_type }} (Rp {{ number_format((float)$room->price_per_month, 0, ',', '.') }}/bln) {{ !$room->is_available ? '- PENUH' : '' }}
                            </option>
                        @endforeach
                    </select>
                    @error('room_id') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                </div>
            @endif

            <div class="pt-6 mt-4 border-t border-gray-100 flex flex-col sm:flex-row gap-3 items-center justify-between">
                <a href="{{ route('kos.show', ['category' => $kos->category, 'slug' => $kos->slug]) }}" class="w-full sm:w-1/3 bg-gray-100 hover:bg-gray-200 text-gray-700 text-center font-bold py-3.5 px-4 rounded-xl transition text-sm">
                    Batal
                </a>
                <button type="submit" class="w-full sm:w-2/3 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3.5 px-4 rounded-xl transition shadow-md text-sm sm:text-base">
                    Konfirmasi & Kunci {{ $kos->category === 'kontrakan' ? 'Kontrakan' : 'Kamar' }} Sekarang
                </button>
            </div>
        </form>
    </div>
</div>
@endsection