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

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Tambah Properti Baru</h1>
        <p class="text-text-secondary">Isi detail di bawah untuk mendaftarkan properti baru Anda.</p>
    </div>

    <form action="{{ route('owner.properties.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">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') == $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') }}" placeholder="Contoh: Kos Elit Menteng" 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" placeholder="Jl. Raya No. 123..." 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') }}</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') }}" placeholder="Jakarta Selatan" 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') }}" placeholder="12345" 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')) && 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>
                        <label for="description" class="block text-sm font-medium text-text-secondary mb-1">Deskripsi Tambahan</label>
                        <textarea id="description" name="description" rows="4" placeholder="Ceritakan keunggulan properti Anda..." 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') }}</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') }}" placeholder="Pak Budi" 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') }}" placeholder="0812..." 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">Foto Properti</h3>
                </div>
                <div class="p-6">
                    <label class="block">
                        <span class="sr-only">Pilih Foto</span>
                        <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
                        ">
                    </label>
                    <p class="mt-2 text-[10px] text-text-muted">Maksimal 10 foto, masing-masing 2MB.</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 Properti
                </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