@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Media library: this restaurant's OWN uploaded assets (tenant-scoped). Browse +
 * delete; new files are added through the shared media picker on the fields that use them
 * (the same /vendor/media endpoint answers the picker's XHR with JSON). Mirrors the admin
 * library minus the all-tenants restaurant filter + per-tile owner label.
 *
 * @var array  $items   media rows for this page
 * @var string $kind    active kind filter ('' | image | video)
 * @var string $search  active search term
 * @var array  $pager   paginate() metadata
 */
$hasFilter = $search !== '' || $kind !== '';
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot, exactly like the screens page.
@endphp
@php ob_start();
@endphp
<a class="qm-btn" href="{{ route('vendor.media.add') }}"><i class="fas fa-upload me-1" aria-hidden="true"></i> {{ t_raw('nav.media_add') }}</a>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp
<div class="qm-card qm-card-pad">
    <form method="get" action="{{ route('vendor.media') }}" class="qm-media-adminbar">
        <div class="qm-media-search-wrap">
            <i class="fas fa-search" aria-hidden="true"></i>
            <input type="search" name="q" class="form-control qm-media-search" value="{{ $search }}" placeholder="{{ t_raw('media.search_placeholder') }}">
        </div>
        <select name="kind" class="form-select qm-select-sm" aria-label="{{ t_raw('media.filter_all') }}">
            <option value=""{{ $kind === '' ? ' selected' : '' }}>{{ t_raw('media.filter_all') }}</option>
            <option value="image"{{ $kind === 'image' ? ' selected' : '' }}>{{ t_raw('media.filter_images') }}</option>
            <option value="video"{{ $kind === 'video' ? ' selected' : '' }}>{{ t_raw('media.filter_videos') }}</option>
        </select>
        <button type="submit" class="qm-btn">{{ t_raw('common.apply') }}</button>
    </form>

    @if (!$items)
    <p class="qm-media-state">{!! $hasFilter ? t('media.empty_results') : t('media.empty_library') !!}</p>
    @else
    <div class="qm-media-grid qm-media-admingrid" data-media-admin data-media-del="/vendor/media/delete" data-media-crop-url="/vendor/media">
        @foreach ($items as $it)
        <div class="qm-media-tile" data-id="{{ (int) $it['id'] }}">
            @if (($it['kind'] ?? 'image') === 'video')
            @php /* A clip is a lightbox trigger exactly like the images beside it — the
                     overlay swaps its <img> for a playing <video> on data-lightbox-kind. */
@endphp
            <video src="{{ media($it['path']) }}#t=0.1" muted playsinline preload="metadata"
                   data-lightbox-src="{{ media($it['path']) }}" data-lightbox-kind="video"
                   data-lightbox-title="{{ (string) ($it['original_name'] ?? basename((string) $it['path'])) }}"
                   data-lightbox-url="{{ media($it['path']) }}"></video>
            @else
            @php /* The image is the trigger for the shared lightbox, which shows it with its
                     uploaded name and its URL. Both values are already here — no extra query. */
@endphp
            <img src="{{ media($it['path']) }}" alt="" loading="lazy"
                 data-lightbox-src="{{ media($it['path']) }}"
                 data-lightbox-title="{{ (string) ($it['original_name'] ?? basename((string) $it['path'])) }}"
                 data-lightbox-url="{{ media($it['path']) }}">
            @endif
            @php /* Images only — there is no server-side video cut. Same button, offset and
                     LOGICAL inset as the admin library; the cut itself is Media::cropRect(),
                     shared across roles. */
@endphp
            @if (($it['kind'] ?? 'image') !== 'video')
            <button type="button" class="qm-media-tile-del qm-media-tile-crop" data-media-crop aria-label="{{ t_raw('admin.media.crop_aria') }}" title="{{ t_raw('admin.media.crop_aria') }}"><i class="fas fa-crop-alt" aria-hidden="true"></i></button>
            @endif
            <button type="button" class="qm-media-tile-del" data-media-admin-del aria-label="{{ t_raw('media.delete_aria') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
        </div>
        @endforeach
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/vendor/media'])
    @endif
</div>

</div>@php /* /.qm-d2 */
@endphp
@endsection