@extends('layouts.owner')

@section('breadcrumb')
    <span class="text-text-muted">Manajemen</span>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Properti</span>
@endsection

@section('content')
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-text-primary">Daftar Properti</h1>
            <p class="text-text-secondary">Kelola semua kos, kontrakan, atau apartemen Anda.</p>
        </div>
        <a href="{{ route('owner.properties.create') }}" class="bg-primary-500 text-white px-5 py-2.5 rounded-xl font-bold text-sm hover:bg-primary-600 transition-all shadow-lg shadow-primary-500/20 active:scale-[0.98] 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="M12 4v16m8-8H4"></path></svg>
            Tambah Properti
        </a>
    </div>

    @if($properties->isEmpty())
        <div class="bg-white rounded-2xl border border-border p-12 text-center">
            <div class="w-20 h-20 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-primary-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-text-primary">Belum ada properti</h3>
            <p class="text-text-secondary mt-2 max-w-xs mx-auto">Mulai kelola bisnis properti Anda dengan menambahkan properti pertama Anda sekarang.</p>
            <a href="{{ route('owner.properties.create') }}" class="mt-6 inline-flex text-primary-600 font-bold hover:text-primary-700 transition-colors">Tambah Properti Pertama &rarr;</a>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($properties as $property)
                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 group">
                    <div class="relative h-48 bg-slate-200 overflow-hidden">
                        @if($property->photos->first())
                            <img src="{{ asset('storage/' . $property->photos->first()->photo_path) }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-slate-400">
                                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            </div>
                        @endif
                        <div class="absolute top-4 right-4">
                            <x-badge-status :status="$property->is_active ? 'active' : 'inactive'" />
                        </div>
                        <div class="absolute bottom-4 left-4">
                            <span class="px-3 py-1 bg-black/60 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-wider rounded-lg">
                                {{ $property->type }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <h3 class="text-lg font-bold text-text-primary mb-1">{{ $property->name }}</h3>
                        <p class="text-xs text-text-secondary flex items-center gap-1 mb-4">
                            <svg class="w-3 h-3" 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>
                            {{ $property->city }}
                        </p>
                        
                        <div class="grid grid-cols-2 gap-4 py-4 border-y border-border/50 mb-6 text-center">
                            <div>
                                <p class="text-[10px] font-bold text-text-muted uppercase tracking-wider">Total Kamar</p>
                                <p class="text-base font-bold text-text-primary">{{ $property->rooms_count }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] font-bold text-text-muted uppercase tracking-wider">Status</p>
                                <p class="text-base font-bold text-text-primary">OK</p>
                            </div>
                        </div>

                        <div class="flex items-center justify-between gap-3">
                            <a href="{{ route('owner.properties.edit', $property) }}" class="flex-1 text-center bg-surface-2 text-text-primary text-sm font-bold py-2.5 rounded-xl hover:bg-border transition-colors">Edit</a>
                            
                            <div x-data="{ open: false }" class="relative">
                                <button @click="open = !open" class="p-2.5 bg-surface-2 rounded-xl text-text-secondary hover:text-text-primary transition-colors">
                                    <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 bottom-full mb-2 w-48 bg-white rounded-xl shadow-xl border border-border py-2 z-10">
                                    <form action="{{ route('owner.properties.toggle-status', $property) }}" method="POST">
                                        @csrf @method('PATCH')
                                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-text-primary hover:bg-surface-2">
                                            {{ $property->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                                        </button>
                                    </form>
                                    <form action="{{ route('owner.properties.destroy', $property) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus properti ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">Hapus Properti</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection