@props(['audit'])

@php $screenshots = $audit->screenshots; @endphp

<x-card title="Tangkapan Skrin"
        description="Rakam paparan laman web sebagai bukti sekiranya terdapat anomali.">

    @if (auth()->user()->hasPermission('audit.edit'))
        {{-- Its own form: the audit form wraps most of this page, and a nested
             form would have its fields hoisted into the outer one. --}}
        <form method="POST" action="{{ route('audits.screenshots.store', $audit) }}"
              x-data="{ capturing: false }" x-on:submit="capturing = true"
              class="mb-4 flex flex-wrap items-center gap-2">
            @csrf

            <input type="text" name="note" maxlength="255" placeholder="Catatan (pilihan) — cth. paparan rosak"
                   class="field-input w-full sm:w-auto sm:flex-1">

            <button type="submit" class="btn-primary shrink-0" x-bind:disabled="capturing">
                <span x-show="! capturing">Tangkap Skrin</span>
                <span x-show="capturing" x-cloak>Merakam…</span>
            </button>
        </form>
    @endif

    @if ($screenshots->isEmpty())
        <p class="text-sm text-slate-500">Belum ada tangkapan skrin bagi penilaian ini.</p>
    @else
        <ul class="grid gap-4 sm:grid-cols-2">
            @foreach ($screenshots as $screenshot)
                <li class="overflow-hidden rounded-lg border border-slate-200">
                    <a href="{{ route('audits.screenshots.show', $screenshot) }}" target="_blank" rel="noopener noreferrer"
                       class="block bg-slate-50">
                        <img src="{{ route('audits.screenshots.show', ['screenshot' => $screenshot, 'thumb' => 1]) }}"
                             alt="Tangkapan skrin {{ $screenshot->url }} pada {{ $screenshot->captured_at->format('d M Y H:i') }}"
                             loading="lazy" class="w-full">
                    </a>

                    <div class="space-y-1 px-3 py-2 text-xs">
                        <p class="font-medium text-slate-700">
                            {{ $screenshot->captured_at->format('d M Y, H:i') }}
                        </p>

                        @if ($screenshot->note)
                            <p class="text-slate-600">{{ $screenshot->note }}</p>
                        @endif

                        <p class="text-slate-500">
                            {{ $screenshot->width }}×{{ $screenshot->height }}px ·
                            {{ $screenshot->humanSize() }}
                            @if ($screenshot->capturedBy)
                                · {{ $screenshot->capturedBy->name }}
                            @endif
                        </p>

                        <div class="flex items-center gap-3 pt-1">
                            <a href="{{ route('audits.screenshots.show', $screenshot) }}" target="_blank" rel="noopener noreferrer"
                               class="font-medium text-indigo-600 hover:text-indigo-500">Lihat penuh</a>

                            @if (auth()->user()->hasPermission('audit.edit'))
                                <button type="submit" form="delete-screenshot-{{ $screenshot->id }}"
                                        class="font-medium text-slate-500 hover:text-rose-600"
                                        onclick="return confirm('Padam tangkapan skrin ini?')">Padam</button>
                            @endif
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
</x-card>

{{-- Delete forms live outside the card so they are never nested inside the
     audit form; the buttons above reach them by id. --}}
@if (auth()->user()->hasPermission('audit.edit'))
    @foreach ($screenshots as $screenshot)
        <form id="delete-screenshot-{{ $screenshot->id }}" method="POST" class="hidden"
              action="{{ route('audits.screenshots.destroy', $screenshot) }}">
            @csrf
            @method('DELETE')
        </form>
    @endforeach
@endif