@extends('frontend.app')

@section('content')
    <!-- 1. HERO SECTION -->
    <div class="relative bg-amber-500 overflow-hidden">
        <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" alt="Background Kos" class="w-full h-full object-cover opacity-20" />
        </div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 flex flex-col items-center text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight mb-6">
                Cari Kos & Kontrakan <br class="hidden md:block"> <span class="text-amber-900">Nyaman, Aman, Bebas Ribet.</span>
            </h1>
            <p class="mt-4 max-w-2xl text-lg text-amber-50 mb-10">
                Temukan ribuan pilihan hunian terbaik di NgekosYuk. Dari kos eksklusif hingga kontrakan keluarga, semua ada di genggaman Anda.
            </p>

            <form action="{{ route('search') }}" method="GET" class="w-full max-w-4xl bg-white p-2 rounded-2xl shadow-2xl flex flex-col md:flex-row gap-2">
                <div class="flex items-center bg-gray-50 rounded-xl px-4 py-3 border border-gray-100 focus-within:ring-2 focus-within:ring-amber-500 md:w-1/3">
                    <svg class="w-6 h-6 text-gray-400 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                    <select name="city_id" class="w-full bg-transparent border-none focus:outline-none text-gray-700 font-medium cursor-pointer">
                        <option value="">Semua Lokasi</option>
                        @foreach($cities as $city)
                            <option value="{{ $city->id }}">{{ $city->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex-1 flex items-center bg-gray-50 rounded-xl px-4 py-3 border border-gray-100 focus-within:ring-2 focus-within:ring-amber-500">
                    <svg class="w-6 h-6 text-gray-400 mr-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    <input type="text" name="q" placeholder="Ketik nama kos atau kampus..." class="w-full bg-transparent border-none focus:outline-none text-gray-700 font-medium placeholder-gray-400">
                </div>
                <button type="submit" class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-4 px-8 rounded-xl transition duration-300 shrink-0">
                    Cari
                </button>
            </form>
        </div>
    </div>

    <!-- 2. SECTION CARI TERDEKAT -->
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex flex-col md:flex-row items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <div class="bg-amber-100 p-3 rounded-full text-amber-600">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path></svg>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-gray-900">Cari di Sekitar Saya</h3>
                    <p class="text-gray-500 text-sm">Temukan properti terdekat menggunakan lokasi GPS Anda saat ini.</p>
                </div>
            </div>
            <button onclick="requestLocation()" class="bg-white border-2 border-amber-500 text-amber-600 hover:bg-amber-50 font-bold py-3 px-6 rounded-xl transition shadow-sm flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                Gunakan Lokasi Saat Ini
            </button>
        </div>
    </div>

    <!-- 3. SECTION EKSPLORASI WILAYAH POPULAR -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
        <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900">Eksplorasi Wilayah Popular</h2>
        <p class="mt-2 text-gray-500 mb-8">Pilihan kota favorit dengan ratusan properti tersedia.</p>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            @foreach($popularCities as $pCity)
                <a href="#" class="relative rounded-2xl overflow-hidden group aspect-square md:aspect-video flex items-center justify-center bg-gray-800">
                    <img src="https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 transition duration-300">
                    <h3 class="relative text-white font-bold text-xl tracking-wide">{{ $pCity->name }}</h3>
                </a>
            @endforeach
        </div>
    </div>

    <!-- 4. SECTION PROPERTI TERBARU -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex justify-between items-end mb-8">
            <div>
                <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900">Baru Saja Ditambahkan</h2>
                <p class="mt-2 text-gray-500">Properti pilihan terbaru yang siap Anda huni hari ini.</p>
            </div>
            <a href="#" class="hidden md:block text-amber-600 font-bold hover:text-amber-700 transition">Lihat Semua &rarr;</a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse ($latestProperties as $kos)
                @php
                    $isKontrakan = strtolower($kos->category) === 'kontrakan';
                    $isFull = false;
                    $inProcess = false;
                    $overlayText = '';

                    if ($isKontrakan) {
                        $minPrice = $kos->price ?? 0; 
                        $satuanWaktu = $kos->price_type ?? 'thn'; 
                        $ownerSetUnavailable = isset($kos->is_available) ? ($kos->is_available == 0) : false;
                        
                        $activeTrx = \App\Models\Transaction::where('boarding_house_id', $kos->id)
                            ->whereNotIn('survey_status', ['batal_tenant', 'batal_owner', 'batal_gagal_bayar', 'batal_no_show'])
                            ->latest()
                            ->first();
                            
                        if ($activeTrx) {
                            if ($activeTrx->survey_status === 'deal') {
                                $isFull = true;
                                $overlayText = 'Telah Disewa';
                            } else {
                                $inProcess = true;
                                $overlayText = 'Dalam Proses';
                            }
                        } elseif ($ownerSetUnavailable) {
                            $isFull = true;
                            $overlayText = 'Telah Disewa';
                        }
                    } else {
                        $availableRooms = $kos->rooms->where('is_available', true)->count();
                        $isFull = $availableRooms == 0;
                        if ($isFull) $overlayText = 'Kamar Penuh';
                        $minPrice = $kos->rooms->min('price_per_month') ?? 0;
                        $satuanWaktu = 'bln';
                    }
                @endphp
                
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 group relative flex flex-col">
                    
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-lg text-xs font-bold text-gray-900 shadow-sm z-20 uppercase tracking-wider">
                        {{ $kos->category ?? 'KOS' }}
                    </div>
                    <div class="absolute top-4 left-4 flex flex-col gap-1.5 z-20 pointer-events-none">
                        <span class="bg-white/95 backdrop-blur-sm px-3 py-1 rounded-lg text-xs font-extrabold text-gray-900 shadow-sm uppercase tracking-widest w-fit border border-gray-100/50">
                            {{ $kos->category ?? 'KOS' }}
                        </span>
                        
                        @if($kos->type)
                        <span class="bg-amber-500/95 backdrop-blur-sm text-white px-3 py-1 rounded-lg text-[10px] font-extrabold shadow-sm uppercase tracking-widest w-fit border border-amber-400/50">
                            {{ $kos->type }}
                        </span>
                        @endif
                    </div>

                    <div class="aspect-[4/3] overflow-hidden bg-gray-100 relative shrink-0">
                        <img src="{{ $kos->thumbnail ? asset('storage/'.$kos->thumbnail) : 'https://images.unsplash.com/photo-1554995207-c18c203602cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' }}" alt="{{ $kos->name }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500 {{ $isFull ? 'grayscale contrast-75' : '' }} {{ $inProcess ? 'brightness-75' : '' }}">
                        
                        <!-- OVERLAY STATUS DINAMIS -->
                        @if($isFull || $inProcess)
                            <div class="absolute inset-0 {{ $isFull ? 'bg-black/50' : 'bg-black/60' }} flex items-center justify-center z-10 backdrop-blur-[1px]">
                                <span class="{{ $isFull ? 'bg-red-600 border-red-400' : 'bg-orange-500 border-orange-400' }} text-white font-extrabold px-6 py-2 rounded-xl text-lg tracking-widest uppercase shadow-2xl transform -rotate-12 border-2 text-center">
                                    {{ $overlayText }}
                                </span>
                            </div>
                        @endif
                    </div>

                    <div class="p-6 flex flex-col flex-1">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <svg class="w-4 h-4 mr-1 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            <span class="truncate">{{ $kos->city->name ?? 'Lokasi Belum Diatur' }}</span>
                        </div>
                        
                        <h3 class="text-xl font-bold text-gray-900 mb-2 truncate">
                            <a href="{{ route('kos.show', ['category' => $kos->category, 'slug' => $kos->slug]) }}" class="hover:text-amber-500 transition">{{ $kos->name }}</a>
                        </h3>
                        
                        <div class="flex-1"></div>
                        
                        <div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-50">
                            <div class="text-lg font-extrabold {{ ($isFull || $inProcess) ? 'text-gray-400' : 'text-amber-500' }}">
                                @if($minPrice > 0)
                                    Mulai Rp {{ number_format($minPrice, 0, ',', '.') }}<span class="text-sm font-normal {{ ($isFull || $inProcess) ? 'text-gray-400' : 'text-gray-400' }}">/{{ $satuanWaktu }}</span>
                                @else
                                    Harga blm diatur
                                @endif
                            </div>
                            <a href="{{ route('kos.show', ['category' => $kos->category, 'slug' => $kos->slug]) }}" class="bg-gray-100 text-gray-900 hover:bg-gray-900 hover:text-white text-sm font-bold px-4 py-2 rounded-lg transition">Detail</a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-full py-12 text-center text-gray-500 bg-gray-50 rounded-2xl border border-dashed border-gray-200">
                    Belum ada data properti yang ditambahkan.
                </div>
            @endforelse
        </div>
        
        <div class="mt-8 text-center md:hidden">
            <button class="w-full bg-amber-100 text-amber-700 font-bold py-3 rounded-xl">Lihat Semua Properti</button>
        </div>
    </div>

    <script>
        function requestLocation() {
            // Logika lokasi
        }
    </script>
@endsection