@extends('admin.layouts.app')

@section('title', 'All Properties')
@section('breadcrumb')
    <li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor"
            stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg></li>
    <li><a href="{{ route('admin.properties.index') }}" class="hover:text-primary-600 transition-colors">Properties</a></li>
@endsection
@section('heading', 'All Properties')
@section('subheading', 'Manage and view all property listings across your platform.')
@section('actions')
    <a href="{{ route('admin.properties.create') }}"
        class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Add
        Property</a>
@endsection

@section('content')

    @if (session('success'))
        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-sm text-emerald-700">
            {{ session('success') }}</div>
    @endif

    {{-- Stats --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-8">
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-primary-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819" />
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-semibold text-gray-900">{{ number_format($total) }}</p>
            <p class="text-sm text-gray-500 mt-1">Total Listings</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-semibold text-gray-900">{{ number_format($forSale) }}</p>
            <p class="text-sm text-gray-500 mt-1">For Sale</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z" />
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-semibold text-gray-900">{{ number_format($forRent) }}</p>
            <p class="text-sm text-gray-500 mt-1">For Rent</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-semibold text-gray-900">{{ number_format($pending) }}</p>
            <p class="text-sm text-gray-500 mt-1">Draft</p>
        </div>
    </div>

    {{-- Search & Filters --}}
    <form method="GET" action="{{ route('admin.properties.index') }}"
        class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <div class="flex flex-col lg:flex-row gap-4">
            <div class="flex-1">
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by title, city, address, ID..."
                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <select name="type"
                    class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                    <option value="">All Types</option>
                    @foreach ($types as $t)
                        <option value="{{ $t->id }}" {{ request('type') == $t->id ? 'selected' : '' }}>
                            {{ $t->name }}</option>
                    @endforeach
                </select>
                <select name="category"
                    class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                    <option value="">All Categories</option>
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}" {{ request('category') == $c->id ? 'selected' : '' }}>
                            {{ $c->name }}</option>
                    @endforeach
                </select>
                <select name="status"
                    class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                    <option value="">Listing Status</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s->id }}" {{ request('status') == $s->id ? 'selected' : '' }}>
                            {{ $s->name }}</option>
                    @endforeach
                </select>
                <select name="listing_type"
                    class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                    <option value="">Sale/Rent</option>
                    <option value="sale" {{ request('listing_type') === 'sale' ? 'selected' : '' }}>Sale</option>
                    <option value="rent" {{ request('listing_type') === 'rent' ? 'selected' : '' }}>Rent</option>
                    <option value="lease" {{ request('listing_type') === 'lease' ? 'selected' : '' }}>Lease</option>
                    <option value="pg" {{ request('listing_type') === 'pg' ? 'selected' : '' }}>PG</option>
                </select>
                <select name="property_status_filter"
                    class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                    <option value="">Publish Status</option>
                    <option value="draft" {{ request('property_status_filter') === 'draft' ? 'selected' : '' }}>Draft
                    </option>
                    <option value="published" {{ request('property_status_filter') === 'published' ? 'selected' : '' }}>
                        Published</option>
                </select>
                <button type="submit"
                    class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors">Apply</button>
                <a href="{{ route('admin.properties.index') }}"
                    class="px-5 py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">Reset</a>
            </div>
        </div>
    </form>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50">
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3 w-12">#
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Property
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Type
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Category
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Price
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Agent
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Status
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Date
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3 w-28">
                            Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($properties as $property)
                        <tr class="hover:bg-gray-50/50 transition-colors group">
                            <td class="px-5 py-3.5 text-gray-500">{{ $property->id }}</td>
                            <td class="px-5 py-3.5">
                                <p class="font-medium text-gray-800">{{ $property->title }}</p>
                                <p class="text-xs text-gray-400">
                                    {{ $property->city ? $property->city : ($property->address ? Str::limit($property->address, 30) : '—') }}
                                </p>
                            </td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $property->type?->name ?? '—' }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $property->category?->name ?? '—' }}</td>
                            <td class="px-5 py-3.5 font-medium text-gray-800">
                                @if ($property->price)
                                    ₹{{ number_format($property->price) }}
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $property->agent?->name ?? '—' }}</td>
                            <td class="px-5 py-3.5">
                                <span
                                    class="inline-block px-2 py-0.5 text-[11px] font-medium rounded-full
                            {{ $property->status === 'published' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600' }}
                        ">{{ $property->status }}</span>
                            </td>
                            <td class="px-5 py-3.5 text-gray-500">{{ $property->created_at->format('d M Y') }}</td>
                            <td class="px-5 py-3.5">
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('admin.properties.edit', $property) }}"
                                        class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
                                        title="Edit">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125" />
                                        </svg>
                                    </a>
                                    <form action="{{ route('admin.properties.destroy', $property) }}" method="POST"
                                        class="inline" onsubmit="return confirm('Delete this property?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="p-1.5 rounded-lg hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
                                            title="Delete">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-5 py-12 text-center text-gray-500">No properties found. <a
                                    href="{{ route('admin.properties.create') }}"
                                    class="text-primary-500 hover:underline">Add one</a>.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{-- Pagination --}}
        @if ($properties->hasPages())
            <div class="border-t border-gray-100 px-5 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3">
                <p class="text-sm text-gray-500">
                    Showing {{ $properties->firstItem() ?? 0 }} to {{ $properties->lastItem() ?? 0 }} of
                    {{ $properties->total() }} results
                </p>
                <div class="flex items-center gap-2">
                    {{ $properties->links() }}
                </div>
            </div>
        @endif
    </div>

@endsection