@extends('layouts.account')

@section('title', __('Photographs & files'))
@section('heading', __('Photographs & files'))
@section('subheading', $listing->title)

@section('actions')
    <x-button variant="outline" :href="route('account.listings.edit', $listing)">
        {{ __('Back to the listing') }}
    </x-button>
@endsection

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    <div class="space-y-6">

        {{-- Photographs. The first one becomes the cover unless another is chosen. --}}
        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="photographs">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <h2 id="photographs" class="font-display text-title font-bold text-text">
                        {{ __('Photographs') }}
                    </h2>
                    <p class="mt-1.5 text-sm text-text-secondary">
                        {{ __('The first photograph is the cover unless you choose another. Drag is not needed — use the arrows.') }}
                    </p>
                </div>

                <p class="text-sm text-text-muted">
                    {{ trans_choice('One slot left.|:count slots left.', $remaining['image'], ['count' => $remaining['image']]) }}
                </p>
            </div>

            @if ($remaining['image'] > 0)
                <form action="{{ route('account.listings.media.store', $listing) }}" method="POST"
                      enctype="multipart/form-data" class="mt-5 flex flex-wrap items-end gap-3"
                      x-data="submitGuard" @submit="submit()">
                    @csrf
                    <input type="hidden" name="type" value="image">

                    <div class="min-w-0 flex-1">
                        <label for="image-files" class="form-label">{{ __('Add photographs') }}</label>
                        <input id="image-files" type="file" name="files[]" multiple accept="image/*"
                               required class="form-input">
                        <p class="form-hint">{{ __('JPG, PNG or WebP, up to 5 MB each.') }}</p>
                    </div>

                    <button type="submit" class="btn btn-primary" :disabled="submitting">
                        <span x-show="!submitting">{{ __('Upload') }}</span>
                        <span x-show="submitting" x-cloak>{{ __('Uploading…') }}</span>
                    </button>
                </form>
            @endif

            @if ($images->isEmpty())
                <x-empty-state icon="photo" class="mt-6" :title="__('No photographs yet')"
                               :message="__('Listings with photographs get far more enquiries.')" />
            @else
                <ul class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4">
                    @foreach ($images as $medium)
                        <li class="overflow-hidden rounded-xl border border-border">
                            <div class="relative">
                                <img src="{{ $medium->thumbnailUrl() }}"
                                     @if ($srcset = $medium->srcset()) srcset="{{ $srcset }}" sizes="(min-width: 640px) 320px, 100vw" @endif
                                     alt="{{ $medium->alt_text ?: $listing->title }}"
                                     loading="lazy" decoding="async"
                                     class="aspect-4/3 w-full object-cover">

                                @if ($medium->is_cover)
                                    <span class="pill pill-brand absolute left-2 top-2">{{ __('Cover') }}</span>
                                @endif
                            </div>

                            <div class="space-y-2.5 p-3">
                                <form action="{{ route('account.listings.media.update', [$listing, $medium]) }}"
                                      method="POST" class="flex gap-2">
                                    @csrf @method('PUT')

                                    <label for="caption-{{ $medium->id }}" class="sr-only">{{ __('Caption') }}</label>
                                    <input id="caption-{{ $medium->id }}" type="text" name="caption"
                                           value="{{ $medium->caption }}" placeholder="{{ __('Caption') }}"
                                           class="form-input py-1.5 text-xs">

                                    <button type="submit" class="btn-outline btn-sm shrink-0">{{ __('Save') }}</button>
                                </form>

                                <div class="flex flex-wrap items-center gap-2">
                                    @unless ($medium->is_cover)
                                        <form action="{{ route('account.listings.media.cover', [$listing, $medium]) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn-ghost btn-sm">{{ __('Make cover') }}</button>
                                        </form>
                                    @endunless

                                    <form action="{{ route('account.listings.media.destroy', [$listing, $medium]) }}"
                                          method="POST" class="ml-auto"
                                          x-data="confirmAction('{{ __('Remove this photograph?') }}')"
                                          @submit="confirm($event)">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-ghost btn-sm text-error">{{ __('Remove') }}</button>
                                    </form>
                                </div>

                                <p class="text-xs text-text-muted">
                                    {{ $medium->width }}×{{ $medium->height }} · {{ $medium->humanSize() }}
                                </p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="floor-plans">
            <h2 id="floor-plans" class="font-display text-title font-bold text-text">{{ __('Floor plans') }}</h2>
            <p class="mt-1.5 text-sm text-text-secondary">
                {{ __('Shown in their own section, separately from the photographs.') }}
            </p>

            <form action="{{ route('account.listings.media.store', $listing) }}" method="POST"
                  enctype="multipart/form-data" class="mt-5 flex flex-wrap items-end gap-3">
                @csrf
                <input type="hidden" name="type" value="floor_plan">

                <div class="min-w-0 flex-1">
                    <label for="plan-files" class="form-label">{{ __('Add floor plans') }}</label>
                    <input id="plan-files" type="file" name="files[]" multiple accept="image/*" required class="form-input">
                </div>

                <button type="submit" class="btn btn-outline">{{ __('Upload') }}</button>
            </form>

            @if ($floorPlans->isNotEmpty())
                <ul class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($floorPlans as $medium)
                        <li class="overflow-hidden rounded-xl border border-border">
                            <img src="{{ $medium->thumbnailUrl() }}" alt="{{ $medium->caption ?: __('Floor plan') }}"
                                 loading="lazy" decoding="async" class="aspect-4/3 w-full bg-surface-muted object-contain">

                            <div class="flex items-center justify-between gap-2 p-3">
                                <span class="truncate text-xs text-text-secondary">{{ $medium->caption ?: $medium->original_name }}</span>

                                <form action="{{ route('account.listings.media.destroy', [$listing, $medium]) }}"
                                      method="POST" x-data="confirmAction('{{ __('Remove this floor plan?') }}')"
                                      @submit="confirm($event)">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-ghost btn-sm text-error">{{ __('Remove') }}</button>
                                </form>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="video">
            <h2 id="video" class="font-display text-title font-bold text-text">{{ __('Video') }}</h2>
            <p class="mt-1.5 text-sm text-text-secondary">
                {{ __('Paste a YouTube or Vimeo link. Nothing is uploaded.') }}
            </p>

            <form action="{{ route('account.listings.media.embed', $listing) }}" method="POST"
                  class="mt-5 flex flex-wrap items-end gap-3">
                @csrf

                <div class="min-w-0 flex-1">
                    <label for="embed_url" class="form-label">{{ __('Video link') }}</label>
                    <input id="embed_url" type="url" name="embed_url" required class="form-input"
                           placeholder="https://www.youtube.com/watch?v=…">
                    @error('embed_url')<p class="form-error">{{ $message }}</p>@enderror
                </div>

                <button type="submit" class="btn btn-outline">{{ __('Add') }}</button>
            </form>

            @if ($videos->isNotEmpty())
                <ul class="mt-5 space-y-2">
                    @foreach ($videos as $medium)
                        <li class="flex items-center justify-between gap-3 rounded-lg border border-border px-3.5 py-2.5">
                            <span class="truncate text-sm text-text-secondary">{{ $medium->embed_url }}</span>

                            <form action="{{ route('account.listings.media.destroy', [$listing, $medium]) }}" method="POST">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-ghost btn-sm text-error">{{ __('Remove') }}</button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        {{--
            Documents. These are ownership papers and surveys: they are stored on
            a disk with no public URL and are only ever reachable through the
            download route, which checks the policy first.
        --}}
        <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="documents">
            <h2 id="documents" class="font-display text-title font-bold text-text">{{ __('Documents') }}</h2>

            <x-alert type="info" class="mt-4">
                {{ __('Documents are private. They are never shown on the listing and never linked — only you and our team can open them.') }}
            </x-alert>

            @if ($remaining['document'] > 0)
                <form action="{{ route('account.listings.media.store', $listing) }}" method="POST"
                      enctype="multipart/form-data" class="mt-5 flex flex-wrap items-end gap-3">
                    @csrf
                    <input type="hidden" name="type" value="document">

                    <div class="min-w-0 flex-1">
                        <label for="document-files" class="form-label">{{ __('Add documents') }}</label>
                        <input id="document-files" type="file" name="files[]" multiple required class="form-input"
                               accept=".pdf,.doc,.docx,.xls,.xlsx">
                        <p class="form-hint">{{ __('PDF or Office documents, up to 20 MB each.') }}</p>
                    </div>

                    <button type="submit" class="btn btn-outline">{{ __('Upload') }}</button>
                </form>
            @endif

            @if ($documents->isNotEmpty())
                <ul class="mt-6 space-y-2">
                    @foreach ($documents as $medium)
                        <li class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border px-3.5 py-2.5">
                            <span class="min-w-0">
                                <span class="block truncate text-sm font-medium text-text">
                                    {{ $medium->original_name }}
                                </span>
                                <span class="text-xs text-text-muted">{{ $medium->humanSize() }}</span>
                            </span>

                            <span class="flex items-center gap-2">
                                <a href="{{ route('account.listings.media.download', [$listing, $medium]) }}"
                                   class="btn-outline btn-sm">{{ __('Download') }}</a>

                                <form action="{{ route('account.listings.media.destroy', [$listing, $medium]) }}"
                                      method="POST" x-data="confirmAction('{{ __('Remove this document?') }}')"
                                      @submit="confirm($event)">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-ghost btn-sm text-error">{{ __('Remove') }}</button>
                                </form>
                            </span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>
@endsection