{{-- Les photos d'un chantier, envoyées une à une par ceux qui y sont.

     ⚠️ Inclus par les DEUX vues du détail (`_show_modal` et `show`), comme
     `rapports/_liste` : c'est ce qui les garde d'accord.

     Chaque photo part dès qu'elle est choisie, réduite par le navigateur ;
     une photo ratée (réseau) reste là, à renvoyer d'un geste, sans rien
     emporter avec elle (js/plannings/photos-chantier.js). Le serveur répond
     en JSON : le planning ne passe pas par les zones.

     Tout le monde qui voit le chantier voit ses photos ; ajouter demande
     `rapport_chantiers.create`, et chaque vignette dit d'elle-même si on
     peut la toucher (PhotoChantierController::peutModifier).

     Paramètres :
       $planning     le modèle local (peut être nul : rien ne s'affiche)
       $photos       collection de Photo, avec document, version.document, user
       $typeRapport  1, 2, ou null quand l'équipe n'attend pas de retour
--}}

@if ($typeRapport && $planning)
    @php
        $client = $planning->client?->libelle
            ?? ($planning->client_id ? __('Client :id', ['id' => $planning->client_id]) : null);
        $peutAjouter = auth()->user()?->can('rapport_chantiers.create');
    @endphp

    <hr>

    <div class="photos-chantier" data-photos-chantier
        data-csrf="{{ csrf_token() }}"
        @if ($peutAjouter)
            data-url-envoi="{{ route('plannings.photos.store', $planning) }}"
            data-url-pastilles="{{ route('plannings.photos.pastilles', $planning) }}"
            data-cote="{{ \App\Services\Documents\PieceJointe::COTE_MAX }}"
        @endif
        data-confirmer="{{ $client ? __('Retirer cette photo du chantier :client ?', ['client' => $client]) : __('Retirer cette photo du chantier ?') }}"
        data-envoi="{{ __('Envoi…') }}"
        data-renvoyer="{{ __('Renvoyer') }}"
        data-echec="{{ __('Photo refusée.') }}"
        data-session="{{ __('Session expirée : rechargez la page, puis renvoyez la photo.') }}"
        data-aide="{{ __('Touchez ce que montre la photo') }}"
        data-tout="{{ __('Rien de touché : la photo vaut pour tout le chantier.') }}"
        data-injoignables="{{ __('Devis :n injoignable : ses lignes manquent.') }}"
        data-enregistre="{{ __('Enregistré') }}"
        data-erreur="{{ __('Non enregistré, réessayez.') }}">

        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="card-title mb-0">
                {{ __('Photos du chantier') }}
                <span class="badge bg-secondary align-middle" data-photos-nombre>{{ $photos->count() }}</span>
            </h5>
            @can('photos.view')
                @if ($photos->isNotEmpty())
                    <a href="{{ route('photos.index', ['planning' => $planning->id]) }}" class="small">
                        <i class="bi bi-images" aria-hidden="true"></i> {{ __('Voir dans la photothèque') }}
                    </a>
                @endif
            @endcan
        </div>

        @if ($peutAjouter)
            {{-- `accept="image/*"` : un téléphone propose l'appareil photo ou
                 la galerie. Le champ est hors de tout formulaire : chaque
                 photo part seule, rien n'attend un bouton « Enregistrer ». --}}
            <button type="button" class="btn btn-primary w-100 mb-1" data-photos-ajouter>
                <i class="bi bi-camera" aria-hidden="true"></i> {{ __('Ajouter des photos') }}
            </button>
            <input type="file" accept="image/*" multiple hidden data-photos-fichiers>
            <div class="small mb-2">
                {{ __('Chaque photo part dès qu\'elle est choisie, réduite à :n px.', ['n' => \App\Services\Documents\PieceJointe::COTE_MAX]) }}
            </div>
        @endif

        <div class="photos-chantier-grille" data-photos-grille data-visionneuse-bloc>
            @foreach ($photos as $photo)
                @include('admin.plannings.photos._vignette', ['photo' => $photo])
            @endforeach
        </div>

        <p class="small mb-0 {{ $photos->isNotEmpty() ? 'd-none' : '' }}" data-photos-vide>{{ __('Aucune photo pour l\'instant.') }}</p>

        {{-- Ce que montre la photo touchée, sa légende, son retrait : rempli
             par le script à partir du modèle ci-dessous, sous la grille. --}}
        <div class="ac-accordeon" data-photos-panneau>
            <div class="ac-accordeon-corps"></div>
        </div>

        <template data-photos-modele>
            <div class="photos-chantier-panneau">
                <a class="photos-chantier-grande" data-visionneuse="panneau" href="">
                    <img src="" alt="{{ __('Photo du chantier') }}">
                </a>
                <div data-photos-pastilles></div>
                <label class="form-label fw-semibold small mt-2 mb-1">{{ __('Légende') }}</label>
                <input type="text" class="form-control form-control-sm" maxlength="255"
                    placeholder="{{ __('Ex. : pilier gauche refait') }}" data-photos-legende>
                <div class="small mt-1" data-photos-etat aria-live="polite"></div>
                <div class="d-flex gap-2 mt-2">
                    <button type="button" class="btn btn-outline-danger btn-sm flex-fill" data-photos-retirer>
                        <i class="bi bi-trash3" aria-hidden="true"></i> {{ __('Retirer') }}
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm flex-fill" data-photos-fermer>{{ __('Fermer') }}</button>
                </div>
            </div>
        </template>
    </div>
@endif