@extends('admin.layouts.app')

@section('title', 'Property Images')
@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>
    <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><span class="text-gray-500">Images</span></li>
@endsection
@section('heading', 'Property Images')
@section('subheading', 'Browse and manage property image galleries.')

@section('content')

    <form method="GET" action="{{ route('admin.properties.images') }}" class="mb-6">
        <div class="flex gap-2">
            <input type="text" name="search" value="{{ request('search') }}"
                placeholder="Search by property title, city, ID..."
                class="flex-1 max-w-md 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">
            <button type="submit"
                class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600">Search</button>
        </div>
    </form>

    @if ($properties->isEmpty())
        <div class="bg-white rounded-xl border border-gray-100 p-12 text-center">
            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" 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>
            <p class="text-gray-500">No property images yet. Add images when creating or editing a property.</p>
            <a href="{{ route('admin.properties.create') }}"
                class="inline-block mt-4 px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600">Add
                Property</a>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($properties as $property)
                @php
                    $firstImage = $property->images->first();
                    $imageUrl = $firstImage ? $firstImage->url : null;
                    $count = $property->images->count();
                    $location = $property->city ?: \Illuminate\Support\Str::limit($property->address ?? '—', 25);
                @endphp
                <div
                    class="bg-white rounded-2xl overflow-hidden border border-primary-200 hover:border-primary-500 hover:border transition-shadow cursor-pointer">
                    <div class="w-full bg-gray-50 flex items-center justify-center p-2">
                        @if ($imageUrl)
                            <img src="{{ $imageUrl }}" alt="{{ $property->title }}" class="w-full h-auto rounded-xl">
                        @else
                            <div class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-xl">
                                <svg class="w-16 h-16 text-gray-300" 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="px-4 pb-4">
                        <h3 class="font-normal text-gray-900 text-sm mb-1">{{ $property->title }}</h3>
                        <p class="text-gray-900 font-semibold text-lg">${{ number_format($property->price ?? 0) }}</p>
                        <p class="text-xs text-gray-500 mt-2">{{ $location }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ $count }} image{{ $count !== 1 ? 's' : '' }} ·
                            {{ $property->agent?->name ?? '—' }}</p>
                        <div class="flex items-center gap-3 mt-4">
                            <a href="{{ route('admin.properties.edit', $property) }}"
                                class="text-primary-600 hover:text-primary-700 text-sm font-medium">Edit</a>
                            <a href="{{ route('admin.properties.index') }}"
                                class="text-gray-600 hover:text-gray-700 text-sm">View</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        @if ($properties->hasPages())
            <div class="mt-8 flex justify-center">
                {{ $properties->links() }}
            </div>
        @endif
    @endif

@endsection