@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.leases.index') }}" class="hover:text-text-primary transition-colors">Kontrak Sewa</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Buat Kontrak Baru</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Buat Kontrak Sewa</h1>
        <p class="text-text-secondary">Hubungkan penghuni dengan kamar/unit yang tersedia.</p>
    </div>

    <form action="{{ route('owner.leases.store') }}" method="POST" class="grid grid-cols-1 lg:grid-cols-3 gap-8" x-data="{ 
        propertyId: '{{ old('property_id') }}',
        roomPrice: 0,
        billingCycle: 'monthly',
        updatePrice() {
            let select = document.getElementById('room_id');
            let option = select.options[select.selectedIndex];
            if(option && option.dataset.price) {
                this.roomPrice = option.dataset.price;
            }
        }
    }">
        @csrf
        
        <!-- Left Column: Resident & Room Selection -->
        <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">Pilih Penghuni & Kamar</h3>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="resident_id" class="block text-sm font-medium text-text-secondary mb-1">Pilih Penghuni</label>
                        <select id="resident_id" name="resident_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 Penghuni --</option>
                            @foreach($residents as $resident)
                                <option value="{{ $resident->id }}" {{ (old('resident_id') ?? request('resident_id')) == $resident->id ? 'selected' : '' }}>
                                    {{ $resident->user->name }} ({{ $resident->nik }})
                                </option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('resident_id')" class="mt-2" />
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-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" x-model="propertyId" 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="">-- Pilih Properti --</option>
                                @foreach($properties as $property)
                                    <option value="{{ $property->id }}">{{ $property->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="room_id" class="block text-sm font-medium text-text-secondary mb-1">Pilih Kamar / Unit</label>
                            <select id="room_id" name="room_id" @change="updatePrice()" 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 Kamar --</option>
                                @foreach($properties as $property)
                                    <optgroup label="{{ $property->name }}" x-show="propertyId == '' || propertyId == '{{ $property->id }}'">
                                        @foreach($property->rooms as $room)
                                            <option value="{{ $room->id }}" data-price="{{ $room->price_per_month }}" {{ (old('room_id') ?? request('room_id')) == $room->id ? 'selected' : '' }}>
                                                {{ $property->type === 'kos' ? 'Kamar' : 'Unit' }} {{ $room->room_number }} (Rp {{ number_format($room->price_per_month, 0, ',', '.') }}/bln)
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            <x-input-error :messages="$errors->get('room_id')" 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">Periode & Biaya</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="start_date" class="block text-sm font-medium text-text-secondary mb-1">Tanggal Mulai Sewa</label>
                            <input type="date" id="start_date" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" 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('start_date')" class="mt-2" />
                        </div>
                        <div>
                            <label for="end_date" class="block text-sm font-medium text-text-secondary mb-1">Tanggal Berakhir Kontrak</label>
                            <input type="date" id="end_date" name="end_date" value="{{ old('end_date') }}" 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('end_date')" class="mt-2" />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="billing_cycle" class="block text-sm font-medium text-text-secondary mb-1">Siklus Tagihan</label>
                            <select id="billing_cycle" name="billing_cycle" x-model="billingCycle" 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="monthly">Bulanan</option>
                                <option value="quarterly">3 Bulanan</option>
                                <option value="semi_annually">6 Bulanan</option>
                                <option value="annually">Tahunan</option>
                            </select>
                            <x-input-error :messages="$errors->get('billing_cycle')" class="mt-2" />
                        </div>
                        <div>
                            <label for="price_agreed" class="block text-sm font-medium text-text-secondary mb-1">Harga Disepakati (Sesuai Siklus)</label>
                            <div class="relative">
                                <span class="absolute left-4 top-2.5 text-text-muted text-sm font-bold">Rp</span>
                                <input type="number" id="price_agreed" name="price_agreed" :value="roomPrice" value="{{ old('price_agreed') }}" class="w-full border border-border rounded-xl pl-12 pr-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>
                            <x-input-error :messages="$errors->get('price_agreed')" class="mt-2" />
                        </div>
                    </div>

                    <div>
                        <label for="deposit" class="block text-sm font-medium text-text-secondary mb-1">Deposit / Jaminan (Opsional)</label>
                        <div class="relative">
                            <span class="absolute left-4 top-2.5 text-text-muted text-sm font-bold">Rp</span>
                            <input type="number" id="deposit" name="deposit" value="{{ old('deposit', 0) }}" class="w-full border border-border rounded-xl pl-12 pr-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>
        </div>

        <!-- Right Column: Summary & Notes -->
        <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">Catatan Tambahan</h3>
                </div>
                <div class="p-6">
                    <textarea name="notes" rows="6" placeholder="Misal: Kerusakan yang sudah ada, kesepakatan khusus, dll..." 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">{{ old('notes') }}</textarea>
                </div>
            </div>

            <div class="bg-primary-50 border border-primary-100 rounded-2xl p-6">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-primary-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <div>
                        <h4 class="text-sm font-bold text-primary-900 mb-1">Informasi Penting</h4>
                        <ul class="text-[11px] text-primary-700 space-y-1.5 list-disc pl-4">
                            <li>Status kamar akan otomatis berubah menjadi **Occupied**.</li>
                            <li>Sistem akan mulai menghitung siklus tagihan sesuai tanggal mulai.</li>
                            <li>Aktivasi akun penghuni akan dipicu setelah kontrak ini disimpan.</li>
                        </ul>
                    </div>
                </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]">
                    Aktifkan Kontrak
                </button>
                <a href="{{ route('owner.leases.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