@extends('admin.layouts.app')

@section('title', 'Properties')

@section('content')
    <!-- Page Header -->
    <div class="page-header flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
            <h1 class="page-title">Properties</h1>
            <p class="page-subtitle">Manage all your property listings in one place</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.properties.create') }}" class="btn btn-primary">
                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Add Property
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @php
            $totalCount = \App\Models\Property::count();
            $activeCount = \App\Models\Property::where('status', 'active')->count();
            $saleCount = \App\Models\Property::where('listing_type', 'sale')->count();
            $rentCount = \App\Models\Property::where('listing_type', 'rent')->count();
        @endphp

        <div class="stat-card-mini">
            <div class="stat-icon bg-blue-100 text-blue-600">
                <svg width="20" height="20" 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" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalCount }}</div>
                <div class="stat-label">Total Properties</div>
            </div>
        </div>

        <div class="stat-card-mini">
            <div class="stat-icon bg-emerald-100 text-emerald-600">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $activeCount }}</div>
                <div class="stat-label">Active Listings</div>
            </div>
        </div>

        <div class="stat-card-mini">
            <div class="stat-icon bg-purple-100 text-purple-600">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $saleCount }}</div>
                <div class="stat-label">For Sale</div>
            </div>
        </div>

        <div class="stat-card-mini">
            <div class="stat-icon bg-amber-100 text-amber-600">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                </svg>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $rentCount }}</div>
                <div class="stat-label">For Rent</div>
            </div>
        </div>
    </div>

    <!-- Filters Card -->
    <div class="admin-card mb-6">
        <div class="admin-card-body">
            <form action="{{ route('admin.properties.index') }}" method="GET" class="filter-form">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                    <!-- Search -->
                    <div class="lg:col-span-2">
                        <div class="search-input-wrapper">
                            <svg class="search-icon" width="18" height="18" 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" />
                            </svg>
                            <input type="text" name="search" value="{{ request('search') }}"
                                placeholder="Search by title, address, or ID..." class="form-input search-input">
                        </div>
                    </div>

                    <!-- Status -->
                    <div>
                        <select name="status" class="form-select">
                            <option value="">All Status</option>
                            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive
                            </option>
                            <option value="sold" {{ request('status') === 'sold' ? 'selected' : '' }}>Sold</option>
                            <option value="rented" {{ request('status') === 'rented' ? 'selected' : '' }}>Rented</option>
                            <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                        </select>
                    </div>

                    <!-- Listing Type -->
                    <div>
                        <select name="listing_type" class="form-select">
                            <option value="">All Types</option>
                            <option value="sale" {{ request('listing_type') === 'sale' ? 'selected' : '' }}>For Sale
                            </option>
                            <option value="rent" {{ request('listing_type') === 'rent' ? 'selected' : '' }}>For Rent
                            </option>
                        </select>
                    </div>

                    <!-- City -->
                    <div>
                        <select name="city" class="form-select">
                            <option value="">All Cities</option>
                            @foreach ($cities as $city)
                                <option value="{{ $city->id }}" {{ request('city') == $city->id ? 'selected' : '' }}>
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex items-center gap-3 mt-4">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        Apply Filters
                    </button>
                    @if (request()->hasAny(['search', 'status', 'listing_type', 'city']))
                        <a href="{{ route('admin.properties.index') }}" class="btn btn-secondary btn-sm">
                            <svg width="16" height="16" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            Clear
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Properties Table -->
    <div class="admin-card">
        <div class="admin-card-header">
            <h3 class="admin-card-title">All Properties</h3>
            <span class="text-sm text-gray-500">{{ $properties->total() }} total</span>
        </div>

        <div class="admin-table-responsive">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th class="w-12">
                            <input type="checkbox" class="form-checkbox" id="selectAll">
                        </th>
                        <th>Property</th>
                        <th>Type</th>
                        <th>Price</th>
                        <th>Location</th>
                        <th>Status</th>
                        <th>Featured</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($properties as $property)
                        <tr class="property-row">
                            <td>
                                <input type="checkbox" class="form-checkbox property-checkbox"
                                    value="{{ $property->id }}">
                            </td>
                            <td>
                                <div class="flex items-center gap-3">
                                    <div class="property-thumb">
                                        @if ($property->primary_image_url)
                                            <img src="{{ $property->primary_image_url }}" alt="{{ $property->title }}">
                                        @else
                                            <div class="property-thumb-placeholder">
                                                <svg width="20" height="20" 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" />
                                                </svg>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="property-info">
                                        <a href="{{ route('admin.properties.show', $property) }}" class="property-title">
                                            {{ Str::limit($property->title, 35) }}
                                        </a>
                                        <div class="property-meta">
                                            <span>ID: {{ $property->id }}</span>
                                            <span class="meta-dot">•</span>
                                            <span>{{ $property->views_count }} views</span>
                                            @if ($property->bedrooms)
                                                <span class="meta-dot">•</span>
                                                <span>{{ $property->bedrooms }} BHK</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="type-badges">
                                    <span
                                        class="badge {{ $property->listing_type === 'sale' ? 'badge-purple' : 'badge-cyan' }}">
                                        {{ $property->listing_type === 'sale' ? 'Sale' : 'Rent' }}
                                    </span>
                                    <span class="property-type-label">{{ ucfirst($property->property_type) }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="price-cell">
                                    <span class="price-value">{{ $property->formatted_price }}</span>
                                    @if ($property->listing_type === 'rent')
                                        <span class="price-period">/month</span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="location-cell">
                                    <span class="location-area">{{ $property->area?->name }}</span>
                                    <span class="location-city">{{ $property->city?->name }}</span>
                                </div>
                            </td>
                            <td>
                                @php
                                    $statusConfig = [
                                        'active' => ['class' => 'status-active', 'icon' => 'M5 13l4 4L19 7'],
                                        'inactive' => [
                                            'class' => 'status-inactive',
                                            'icon' =>
                                                'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636',
                                        ],
                                        'sold' => [
                                            'class' => 'status-sold',
                                            'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
                                        ],
                                        'rented' => [
                                            'class' => 'status-rented',
                                            'icon' =>
                                                'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z',
                                        ],
                                        'draft' => [
                                            'class' => 'status-draft',
                                            'icon' =>
                                                'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
                                        ],
                                    ];
                                    $config = $statusConfig[$property->status] ?? $statusConfig['draft'];
                                @endphp
                                <div class="status-wrapper">
                                    <span class="status-badge {{ $config['class'] }}">
                                        <svg width="12" height="12" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="{{ $config['icon'] }}" />
                                        </svg>
                                        {{ ucfirst($property->status) }}
                                    </span>
                                    @if ($property->is_verified)
                                        <span class="verified-badge">
                                            <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd"
                                                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                            Verified
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <form action="{{ route('admin.properties.toggle-featured', $property) }}" method="POST"
                                    class="inline">
                                    @csrf
                                    <button type="submit"
                                        class="featured-toggle {{ $property->is_featured ? 'active' : '' }}"
                                        title="{{ $property->is_featured ? 'Remove from featured' : 'Add to featured' }}">
                                        <svg width="20" height="20"
                                            fill="{{ $property->is_featured ? 'currentColor' : 'none' }}"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                        </svg>
                                    </button>
                                </form>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('admin.properties.show', $property) }}" class="action-btn"
                                        title="View Details">
                                        <svg width="16" height="16" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                        </svg>
                                    </a>
                                    <a href="{{ route('admin.properties.edit', $property) }}" class="action-btn"
                                        title="Edit">
                                        <svg width="16" height="16" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </a>
                                    <a href="{{ url('/property/' . $property->slug) }}" target="_blank"
                                        class="action-btn" title="View on Website">
                                        <svg width="16" height="16" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                        </svg>
                                    </a>
                                    <form action="{{ route('admin.properties.destroy', $property) }}" method="POST"
                                        class="inline"
                                        onsubmit="return confirm('Are you sure you want to delete this property? This action cannot be undone.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="action-btn action-btn-danger" title="Delete">
                                            <svg width="16" height="16" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <svg width="48" height="48" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                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" />
                                        </svg>
                                    </div>
                                    <h3 class="empty-title">No properties found</h3>
                                    <p class="empty-text">Get started by adding your first property listing.</p>
                                    <a href="{{ route('admin.properties.create') }}" class="btn btn-primary mt-4">
                                        <svg width="18" height="18" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 4v16m8-8H4" />
                                        </svg>
                                        Add First Property
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if ($properties->hasPages())
        <div class="pagination-wrapper mt-6">
            {{ $properties->links() }}
        </div>
    @endif
@endsection

@push('styles')
    <style>
        /* Stats Cards Mini */
        .stat-card-mini {
            background: white;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .stat-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stat-content {
            min-width: 0;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0f172a;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.8125rem;
            color: #64748b;
            margin-top: 0.25rem;
        }

        /* Search Input */
        .search-input-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }

        .search-input {
            padding-left: 2.5rem !important;
        }

        /* Property Thumbnail */
        .property-thumb {
            width: 64px;
            height: 48px;
            border-radius: 8px;
            overflow: hidden;
            background: #f1f5f9;
            flex-shrink: 0;
        }

        .property-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .property-thumb-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }

        /* Property Info */
        .property-info {
            min-width: 0;
        }

        .property-title {
            font-weight: 600;
            color: #0f172a;
            text-decoration: none;
            display: block;
            transition: color 0.2s;
        }

        .property-title:hover {
            color: var(--primary);
        }

        .property-meta {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .meta-dot {
            color: #cbd5e1;
        }

        /* Type Badges */
        .type-badges {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .badge-purple {
            background: #f3e8ff;
            color: #7c3aed;
        }

        .badge-cyan {
            background: #cffafe;
            color: #0891b2;
        }

        .property-type-label {
            font-size: 0.75rem;
            color: #64748b;
        }

        /* Price Cell */
        .price-cell {
            display: flex;
            align-items: baseline;
            gap: 0.125rem;
        }

        .price-value {
            font-weight: 600;
            color: #0f172a;
        }

        .price-period {
            font-size: 0.75rem;
            color: #94a3b8;
        }

        /* Location Cell */
        .location-cell {
            display: flex;
            flex-direction: column;
        }

        .location-area {
            font-weight: 500;
            color: #0f172a;
        }

        .location-city {
            font-size: 0.75rem;
            color: #94a3b8;
        }

        /* Status Badges */
        .status-wrapper {
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 6px;
            width: fit-content;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-inactive {
            background: #f1f5f9;
            color: #64748b;
        }

        .status-sold {
            background: #fef3c7;
            color: #92400e;
        }

        .status-rented {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-draft {
            background: #f1f5f9;
            color: #64748b;
        }

        .verified-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.125rem 0.375rem;
            font-size: 0.625rem;
            font-weight: 600;
            background: #ecfdf5;
            color: #059669;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        /* Featured Toggle */
        .featured-toggle {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            color: #cbd5e1;
            transition: all 0.2s;
        }

        .featured-toggle:hover {
            background: #fef3c7;
            color: #f59e0b;
        }

        .featured-toggle.active {
            color: #f59e0b;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.25rem;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        .action-btn-danger:hover {
            background: #fee2e2;
            color: #dc2626;
        }

        /* Empty State */
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: #f1f5f9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }

        .empty-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 0.5rem;
        }

        .empty-text {
            font-size: 0.875rem;
            color: #64748b;
        }

        /* Pagination Wrapper */
        .pagination-wrapper {
            display: flex;
            justify-content: center;
        }

        /* Table Responsive */
        .admin-table-responsive {
            overflow-x: auto;
        }

        /* Property Row Hover */
        .property-row:hover {
            background: #f8fafc;
        }

        /* Form Checkbox */
        .form-checkbox {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1.5px solid #d1d5db;
            cursor: pointer;
        }

        .form-checkbox:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Select All Checkbox
        document.getElementById('selectAll')?.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.property-checkbox');
            checkboxes.forEach(cb => cb.checked = this.checked);
        });
    </script>
@endpush