{{-- resources/views/settings/images.blade.php --}}
@extends('layouts.app')
@section('title', 'Property Photos')
@section('page_title', 'Property Photos')
@section('page_subtitle', 'Gallery images for marketplace and booking pages')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-images me-2" style="color:var(--clay)"></i>
                    Gallery
                    <span style="font-size:.75rem;font-weight:400;
                                 color:var(--muted);margin-left:6px;">
                        {{ $images->count() }} photos
                    </span>
                </span>
            </div>

            @if($images->isEmpty())
                <div class="card-body text-center py-5">
                    <i class="bi bi-images"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No photos yet</p>
                    <p class="text-muted" style="font-size:.8rem;">
                        Add photos to showcase your property on the marketplace
                    </p>
                </div>
            @else
                <div class="card-body">
                    <div style="display:grid;
                                grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
                                gap:10px;">
                        @foreach($images as $image)
                            <div style="position:relative;">
                                <img src="{{ asset('storage/' . $image->path) }}"
                                     alt="Property photo"
                                     style="width:100%;aspect-ratio:4/3;
                                            object-fit:cover;border-radius:8px;
                                            {{ $image->is_cover ? 'box-shadow:0 0 0 3px var(--clay);' : '' }}">

                                @if($image->is_cover)
                                    <span style="position:absolute;top:6px;left:6px;
                                                 font-size:.62rem;background:var(--clay);
                                                 color:#fff;padding:2px 6px;
                                                 border-radius:4px;font-weight:700;">
                                        Cover
                                    </span>
                                @endif

                                <div style="display:flex;gap:4px;margin-top:5px;">
                                    @if(!$image->is_cover)
                                        <form method="POST"
                                              action="{{ tenant_route('settings.images.store') }}"
                                              style="flex:1">
                                            @csrf @method('PUT')
                                            <input type="hidden" name="set_cover"
                                                   value="{{ $image->id }}">
                                            {{-- handled separately, skip --}}
                                        </form>
                                    @endif
                                    <form method="POST"
                                          action="{{ tenant_route('settings.images.destroy', ['image' => $image->id]) }}"
                                          onsubmit="return confirm('Remove this photo?')"
                                          style="width:100%">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-outline-danger w-100"
                                                type="submit">
                                            <i class="bi bi-trash"></i> Remove
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Upload Photos</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('settings.images.store') }}"
                      enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Select Photos
                        </label>
                        <input type="file" name="images[]"
                               multiple
                               class="form-control"
                               accept=".jpg,.jpeg,.png,.webp" required>
                        <div style="font-size:.68rem;color:var(--muted);margin-top:4px;">
                            JPG, PNG or WebP. Up to 20 photos. Max 5MB each.
                        </div>
                    </div>

                    <button type="submit"
                            class="btn btn-primary btn-sm w-100">
                        <i class="bi bi-upload me-1"></i>Upload Photos
                    </button>
                </form>

                @if($images->count() > 0)
                    <div style="margin-top:16px;padding-top:16px;
                                border-top:1px solid var(--border);
                                font-size:.73rem;color:var(--muted);">
                        <strong>Tips:</strong><br>
                        The first photo uploaded becomes the cover image.<br>
                        Recommended: landscape orientation, minimum 1200×800px.
                    </div>
                @endif
            </div>
        </div>
    </div>

</div>

@endsection