@extends('admin.layout')

@section('title', __('Photothèque'))

{{-- La photothèque : les onglets, la barre des filtres (un menu par filtre)
     et les photos, à droite la photo ouverte. Tout filtre vit dans l'url
     (Phototheque::depuis).

     Zones de js/sur-place.js : `onglets` et `filtres` (les comptes bougent
     quand on pose une étiquette), `grille` et `panneau`. Une étiquette posée
     ou retirée ne recharge que celles-là. --}}

@section('content')

    <div class="pagetitle d-flex flex-wrap align-items-end gap-2">
        <div>
            <h1>@yield('title')</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('plannings.index') }}">{{ __('Plannings') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('Photothèque') }}</li>
                </ol>
            </nav>
        </div>
        <div class="ms-auto small text-muted pb-3">
            {{-- `videos` compte les vidéos de la sélection ; filtrée sur elles, toutes le sont. --}}
            @php $nombreVideos = $filtres->videos ? $nombre : $videos; @endphp
            {{ \App\Services\Photos\Phototheque::compte($nombre - $nombreVideos, $nombreVideos) }}
            @if ($nombre !== $total)
                {{ __('sur :t', ['t' => number_format($total, 0, ',', ' ')]) }}
            @endif
            @if ($chantiers)
                · {{ trans_choice(':n chantier|:n chantiers', $chantiers->total(), ['n' => $chantiers->total()]) }}
            @endif
        </div>
    </div>

    <div data-zone="messages">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif
    </div>

    <section class="section phototheque">
        <div class="phototheque-colonnes">

            {{-- Plus de colonne de filtres : une barre de menus au-dessus des
                 photos, qui prennent sa largeur. --}}
            <div class="phototheque-centre">
                <div data-zone="onglets">
                    @include('admin.photos._onglets')
                </div>
                <div class="phototheque-filtres" data-zone="filtres" role="search" aria-label="{{ __('Filtres') }}">
                    @include('admin.photos._filtres')
                </div>
                <div data-zone="grille">
                    @include('admin.photos._grille')
                </div>
            </div>

            <aside class="phototheque-panneau" id="photo" aria-label="{{ __('La photo') }}" data-zone="panneau">
                @include('admin.photos._panneau')
            </aside>

        </div>
    </section>

    {{-- Hors des zones : js/clients/recherche.js prend ses éléments au
         chargement. Il remplit le champ du panneau, relu au moment du choix. --}}
    @can('photos.edit')
        @include('admin.gestan.clients._modale_recherche', ['cible' => '#panneau-client-id'])
        @include('admin.photos._etiquettes')

        {{-- Les étiquettes existantes, que le menu du champ propose
             (js/phototheque.js) : une fois pour la page, hors des zones. --}}
        <script>
            window.AC_ETIQUETTES = @json($nomsEtiquettes->values());
        </script>
    @endcan

    @if ($catalogueProduits !== null)
        {{-- Ce que « Rattacher » propose dans la barre de sélection : tout le
             catalogue, et les couleurs connues (js/phototheque-site.js). --}}
        <script>
            window.AC_CATALOGUE_PRODUITS = @json($catalogueProduits);
            window.AC_COULEURS = @json($couleursConnues);
        </script>
    @endif

    @if ($catalogueSite !== null)
        {{-- Les modèles et variations du site, que le champ « Site vitrine »
             du panneau propose (js/phototheque-site.js). --}}
        <script>
            window.AC_CATALOGUE_SITE = @json($catalogueSite);
        </script>
    @endif

@endsection

@push('head')
    {{-- Le menu et les pastilles des étiquettes sont ceux des découpes d'une commande. --}}
    <link rel="stylesheet" href="@assetV('css/commandes/decoupes-choix.css')">
    <link rel="stylesheet" href="@assetV('css/phototheque.css')">
    {{-- Le fondu, comme le planning (admin/plannings/_fondu) : la grille
         s'estompe au clic sur un filtre (js/phototheque.js laisse une note
         en partant) et la suivante apparaît en fondu. Dans le <head> pour
         que la classe soit posée avant le premier affichage ; une ouverture
         ordinaire de la page, sans note, ne fond pas. --}}
    <script>
        try {
            if (sessionStorage.getItem('phototheque.filtre')) {
                sessionStorage.removeItem('phototheque.filtre');
                document.documentElement.classList.add('phototheque-arrive');
            }
        } catch (e) { /* stockage refusé : pas de fondu, la page s'affiche */ }
    </script>
@endpush

@push('scripts')
    <script src="@assetV('js/phototheque.js')"></script>
    <script src="@assetV('js/phototheque-etiquettes.js')"></script>
    <script src="@assetV('js/phototheque-site.js')"></script>
@endpush