@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Media library (all tenants). Browse every restaurant's uploaded assets
 * with a restaurant / kind / search filter and a per-tile owner label; remove any.
 *
 * @var array  $items        media rows for this page
 * @var array  $restaurants  [id,name] for the filter dropdown
 * @var array  $names        id => restaurant name (tile owner labels)
 * @var int    $ridFilter    active restaurant filter (0 = all)
 * @var string $kind         active kind filter ('' | image | video)
 * @var string $search       active search term
 * @var array  $pager        paginate() metadata
 */
@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 vendor library.
@endphp
@php ob_start();
@endphp
<a class="qm-btn" href="{{ route('admin.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('admin.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="restaurant_id" class="form-select qm-media-restaurant" aria-label="{{ t_raw('media.restaurant_col') }}">
            <option value="">{{ t_raw('media.filter_restaurant_all') }}</option>
            @foreach ($restaurants as $r)
            <option value="{{ (int) $r['id'] }}"{{ $ridFilter === (int) $r['id'] ? ' selected' : '' }}>{{ $r['name'] }}</option>
            @endforeach
        </select>
        <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>
        @php /* Stated once, here, rather than inside the crop modal: what a crop produces is a
                 property of the library (every asset is re-encoded on the way in), not of the
                 rectangle someone happens to be dragging. Standard .qm-tip. */
@endphp
        <button type="button" class="qm-tip" aria-label="{{ t_raw('admin.media.crop_note') }}" data-qm-tip="{{ t_raw('admin.media.crop_note') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
    </form>

    @if (!count($items))
    <p class="qm-media-state">{{ t_raw('admin.media.empty') }}</p>
    @else
    <div class="qm-media-grid qm-media-admingrid" data-media-admin data-media-crop-url="/admin/media">
        @foreach ($items as $it)
@php $ownerId = $it['restaurant_id'] !== null ? (int) $it['restaurant_id'] : 0; @endphp
        <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
            <span class="qm-media-tile-owner">{{ $ownerId > 0 ? ($names[$ownerId] ?? ('#' . $ownerId)) : t_raw('media.platform_owner') }}</span>
            @php /* Images only — there is no server-side video cut, and offering the control
                     on a clip would be a button that can only fail. Reuses the tile's existing
                     action-button look; the inline offset is the one thing app.css has no class
                     for, and it is a LOGICAL inset so it mirrors correctly in Arabic. */
@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' => '/admin/media'])
    @endif
</div>

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