@extends('layouts.owner')

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

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

    <form action="{{ route('owner.properties.update', $property) }}" 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">Informasi Dasar</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-text-secondary mb-1">Tipe Properti</label>
                        <div class="grid grid-cols-3 gap-3">
                            @foreach(['kos' => 'Kos', 'kontrakan' => 'Kontrakan', 'apartemen' => 'Apartemen'] as $val => $label)
                            <label class="relative flex flex-col items-center p-3 border border-border rounded-xl cursor-pointer hover:bg-surface transition-colors has-[:checked]:border-primary-500 has-[:checked]:bg-primary-50">
                                <input type="radio" name="type" value="{{ $val }}" class="sr-only" {{ old('type', $property->type) == $val ? 'checked' : '' }} required>
                                <span class="text-sm font-bold text-text-primary">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                        <x-input-error :messages="$errors->get('type')" class="mt-2" />
                    </div>

                    <div>
                        <label for="name" class="block text-sm font-medium text-text-secondary mb-1">Nama Properti</label>
                        <input type="text" id="name" name="name" value="{{ old('name', $property->name) }}" 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('name')" class="mt-2" />
                    </div>

                    <div>
                        <label for="address" class="block text-sm font-medium text-text-secondary mb-1">Alamat Lengkap</label>
                        <textarea id="address" name="address" rows="3" 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>{{ old('address', $property->address) }}</textarea>
                        <x-input-error :messages="$errors->get('address')" class="mt-2" />
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="city" class="block text-sm font-medium text-text-secondary mb-1">Kota</label>
                            <input type="text" id="city" name="city" value="{{ old('city', $property->city) }}" 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('city')" class="mt-2" />
                        </div>
                        <div>
                            <label for="zip_code" class="block text-sm font-medium text-text-secondary mb-1">Kode Pos</label>
                            <input type="text" id="zip_code" name="zip_code" value="{{ old('zip_code', $property->zip_code) }}" 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('zip_code')" 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 & Deskripsi</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-text-secondary mb-3">Fasilitas Umum</label>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            @foreach(['wifi' => 'WiFi', 'ac' => 'AC', 'parking' => 'Parkir', 'laundry' => 'Laundry', 'security' => 'Keamanan', 'kitchen' => 'Dapur Umum'] 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', $property->facilities)) && in_array($val, old('facilities', $property->facilities)) ? 'checked' : '' }}>
                                <span class="text-sm text-text-secondary group-hover:text-text-primary transition-colors">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-text-secondary mb-1">Deskripsi Tambahan</label>
                        <textarea id="description" name="description" rows="4" 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('description', $property->description) }}</textarea>
                    </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">Kontak Pengelola</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="contact_name" class="block text-sm font-medium text-text-secondary mb-1">Nama Kontak</label>
                        <input type="text" id="contact_name" name="contact_name" value="{{ old('contact_name', $property->contact_name) }}" 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>
                        <label for="contact_phone" class="block text-sm font-medium text-text-secondary mb-1">WhatsApp / No. Telp</label>
                        <input type="text" id="contact_phone" name="contact_phone" value="{{ old('contact_phone', $property->contact_phone) }}" 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 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 Properti</h3>
                </div>
                <div class="p-6">
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" name="is_active" value="1" class="rounded border-border text-primary-500 focus:ring-primary-500/20" {{ old('is_active', $property->is_active) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-text-secondary group-hover:text-text-primary transition-colors">Aktif (Dapat dilihat oleh publik/penghuni)</span>
                    </label>
                </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.properties.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