@extends('layouts.guest') 

@section('title', 'PDCN - ' . $panneau->nom)

@section('content')

<style>

html {
  scroll-behavior: smooth;
}


:root {
    --theme-color: {{ $panneau->themePrimaryColor ?? '#f5991a' }};
    --theme-text-color: {{ \Illuminate\Support\Str::of($panneau->themePrimaryColor)->isNotEmpty() && contrastColor($panneau->themePrimaryColor) === 'white' ? '#ffffff' : '#000000' }};

    --bg-primary-color: {{ $panneau->themeSecondaryColor ?? '#dc4c4c' }};
    --bg-primary-text-color: {{ \Illuminate\Support\Str::of($panneau->themeSecondaryColor)->isNotEmpty() && contrastColor($panneau->themeSecondaryColor) === 'white' ? '#ffffff' : '#000000' }};
}

.navbar_pdcn,
.navbar-brand_pdcn {
    color: var(--theme-text-color) !important;
}

.navbar_pdcn {
    background-color: var(--theme-color) !important;
}

.bg-primary_pdcn {
    background-color: var(--bg-primary-color) !important;
    color: var(--bg-primary-text-color) !important;
}

.scroll-top-link i {
  transition: all 0.2s ease;
}

.scroll-top-link:hover i,
.scroll-top-link:active i{
  color : var(--theme-color) !important;
  transform: scale(1.2);
}


.chantier-container {
    border: 1px solid transparent;
    background-image: linear-gradient(white, white),
    repeating-linear-gradient(
        45deg,
        red 0 15px,
        white 2px 30px
    );
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding: 0.5rem;
    text-align: center;
    width: fit-content;
    margin: 2rem auto;
}

.chantier-title {
    background-color: #b30000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.8rem;
    padding: 1rem 2rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.chantier-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 0.5rem;;
}

.chantier-icons img {
    max-height: 85px;
    max-width: 85px;
}

.navbar-guest-padding {
    padding: 1.5rem !important;
}

.navbar-auth-padding {
    padding: 0.2rem !important;
}

/* Simulation smartphone */
.smartphone-frame {
    width: 375px;   /* iPhone taille standard */
    height: 667px;
    border: 12px solid #333;
    border-radius: 30px;
    overflow: hidden;
    margin: auto;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.smartphone-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 576px) {
    body {
        font-size: 90% !important;
    }

    .navbar-brand_pdcn {
         font-size: 80% !important;  
    }

    .container-pdcn {
        padding-top: 1.5rem !important; 
        padding-bottom: 0.7rem !important;
    }

    .navbar-guest-padding {
        padding: 1rem !important;
    }

    .small
    {
        font-size: 85% !important;
    }

    .chantier-title {
        font-size: 1.1rem;
    }

    .chantier-icons img {
        height: 40px;
    }

    .chantier-container {
        padding: 0.75rem;
        margin: 1rem auto;
        max-width: 95%;
    }

    .panneau-physique-card {
        width: 95%;
        max-width: 350px;
        height: 350px;
    }
}

</style>

@php
    $viewType = $panneau->typeMiseEnForme == 1 ? 'pdcn_informations_type1' : 'pdcn_informations_type2';

    function contrastColor($hexColor) {
        $hex = str_replace('#', '', $hexColor);
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
        $brightness = ($r * 299 + $g * 587 + $b * 114) / 1000;
        return $brightness > 128 ? 'black' : 'white';
    }
@endphp

@if($panneau->actif == false)

    <!-- Navbar INACTIF -->
    <nav class="navbar navbar_pdcn bg-danger fixed-top shadow justify-content-center {{ auth()->guest() ? 'navbar-guest-padding' : '' }}">
        <div class="container-fluid d-flex justify-content-center align-items-center">
            <span class="col-10 h3 mb-0 h1 text-uppercase fw-bold text-center text-danger">
                Panneau connecté inactif
            </span>
        </div>
    </nav>

    <div class="py-5 container-pdcn">
        @include('panneaux.blocs.'.$viewType, ['panneau' => $panneau])
    </div>

@else

    <nav class="navbar navbar_pdcn fixed-top shadow {{ auth()->guest() ? 'navbar-guest-padding' : 'navbar-auth-padding' }}"">
        <div class="container position-relative d-flex align-items-center ">
            
            @auth
                <a href="{{ url()->previous() }}" class="text-dark me-3" style="font-size: 1.5rem;">
                    <i class="fas fa-arrow-left"></i>
                </a>
            @endauth

            <span class="col-6 position-absolute start-50 translate-middle-x navbar-brand_pdcn mb-0 h5 fw-bold text-uppercase text-center">
                <i class="fa-solid fa-helmet-safety"></i>
                    <span>Panneau connecté</span>
                <i class="fa-solid fa-helmet-safety"></i>
            </span>

            @auth
                @if(!request()->boolean('embed'))
                <div class="p-1 d-flex gap-2">
                    <button id="mobilePreviewBtn" class="btn btn-primary btn-sm">
                        <i class="fa-solid fa-mobile-screen-button me-2"></i> Aperçu mobile
                    </button>
                    <button id="printPreviewBtn" class="btn btn-primary btn-sm">
                        <i class="fa-solid fa-print me-2"></i> Aperçu impression
                    </button>
                </div>
                @endif
            @endauth

        </div>
    </nav>


    <div id="mobilePreview" class="d-none mt-5 pt-5 text-center">
        <div class="smartphone-frame">
            <iframe src="{{ request()->fullUrlWithQuery(['embed' => 1]) }}" class="smartphone-iframe"></iframe>
        </div>
    </div>

    @include('panneaux.blocs.pdcn_print', ['panneau' => $panneau])
    
    <div class="py-5 container-pdcn">
    
        @include('panneaux.blocs.'.$viewType, [
                        'panneau' => $panneau
                    ])

        <!-- INTERVENANTS -->
        @php
            $lastUpdateIntervenant = $panneau->intervenants?->max('updated_at');
        @endphp
        <div class="card shadow-sm rounded-3 mt-4">
            <div class="card-header bg-primary_pdcn text-white d-flex justify-content-between align-items-center">
                <div class="text-uppercase fz-15">
                    <i class="bi bi-people-fill me-2"></i> Intervenants
                </div>
                <div class="col-6 text-end small">
                    Dernière modification : {{ $lastUpdateIntervenant ? \Carbon\Carbon::parse($lastUpdateIntervenant)->format('d/m/Y H:i') : 'Non disponible' }}
                </div>
            </div>

            <div class="card-body">                
                @if($panneau->intervenants->isEmpty())
                    <div class="">
                        <i class="fa-solid fa-bullhorn"></i> Pour l'instant, aucun intervenant n'est renseigné. <br> <small>À venir prochainement...</small>
                    </div>
                @else
                    @foreach($panneau->intervenants->sortBy('numeroOrdre') as $intervenant)
                        <div class="row anchor" id="intervenant-{{ $intervenant->id }}">
                            
                            <!-- Type de l'intervenant -->
                            <div class="col-12 col-md-4 h5 fw-semibold">
                               {{ Str::upper(Str::ascii($intervenant->type)) }}
                            </div>

                            <!-- Détails de l'intervenant -->
                            <div class="col-6 col-md-4 mt-2 mt-md-0">
                                <span class="fw-semibold">{{ $intervenant->libelleType }}</span><br>
                                <small>
                                    {{ $intervenant->adresse }}<br>
                                    {{ $intervenant->codePostal }} {{ $intervenant->ville }}<br>
                                    {{ preg_replace('/(\d{2})(?=\d)/', '$1 ', $intervenant->numeroTel) }}
                                </small>
                            </div>

                            <!-- Logo intervenant sur desktop -->
                            <!-- @if($intervenant->logo)
                            <div class="col-6 col-md-3 text-center d-flex align-items-center justify-content-center">                               
                                <img src="{{ asset('storage/' . $intervenant->logo) }}" alt="Logo {{ $intervenant->libelle }}"
                                    alt="Logo" 
                                    class="img-fluid" 
                                    style="max-height: 50px; max-width: 100%; object-fit: contain;">                               
                            </div>
                            @endif -->

                            @php
                                $logos = [];
                                if ($intervenant->logo) $logos[] = $intervenant->logo;
                                if ($intervenant->logo2) $logos[] = $intervenant->logo2;
                            @endphp

                            <!-- Max 2 logos -->
                            @foreach($logos as $logo)
                                <div class="{{ count($logos) == 1 ? 'col-6 col-md-4 mt-2 text-center' : 'col-3 col-md-2 mt-2 text-center' }}">
                                    <img src="{{ asset('storage/' . $logo) }}" 
                                        alt="Logo {{ $intervenant->libelle }}" 
                                        class="img-fluid" 
                                        style="max-height: 50px; max-width: 100%; object-fit: contain;">
                                </div>
                            @endforeach
        
                        </div>

                        @if(!$loop->last)
                            <hr class="m-md-5 m-4" style="width: 90%; background: linear-gradient(to right, #ccc, #333, #ccc); border: 0; height: 1px;">
                        @endif

                    @endforeach
                @endif
            </div>
        </div>


        <!-- LOTS -->
        @php
            $lastUpdateLot = $panneau->lots?->max('updated_at');
        @endphp
        <div class="card shadow-sm rounded-3 mt-5">
            <div class="card-header bg-primary_pdcn text-white d-flex justify-content-between align-items-center">
                <div class="text-uppercase fz-15">
                    <i class="fa-solid fa-person-digging me-2"></i> Lots
                </div>
                <div class="col-6 text-end justify-content-end small d-flex align-items-center">
                    Dernière modification : {{ $lastUpdateLot ? \Carbon\Carbon::parse($lastUpdateLot)->format('d/m/Y H:i') : 'Non disponible' }}
                    <a href="#top" class="text-white ms-3 scroll-top-link" title="Remonter en haut">
                        <i class="fas fa-arrow-up"></i>
                    </a>
                </div>
            </div>

            <div class="card-body">
                @php
                    $lotsTries = $panneau->lots->sortBy(function($lot) {
                        $lotParent = $lot->lotParent ?? null;

                        if ($lotParent) {
                            $ordrePrincipal = $lotParent->numeroOrdre ?? 9999;
                            $suffixeParent = $lotParent->suffixeNumeroOrdre ?? '';
                            $ordreSecondaire = $lot->nom;
                            return sprintf('%04d-%s-%s', $ordrePrincipal, $suffixeParent, $ordreSecondaire);
                        }

                        $ordrePrincipal = $lot->numeroOrdre ?? 9999;
                        $suffixe = $lot->suffixeNumeroOrdre ?? '';
                        if (is_numeric($suffixe)) {
                            $suffixe = sprintf('%04d', $suffixe);
                        }

                        return sprintf('%04d-%s', $ordrePrincipal, $suffixe);
                    })->values();
                @endphp

                @if($lotsTries->isEmpty())
                    <div class="">
                        <i class="fa-solid fa-bullhorn"></i> Pour l'instant, aucun lot n'est renseigné. <br> <small>À venir prochainement...</small>
                    </div>
                @else   
                    @php
                        $coTraitantCounters = []; // stocke les index par numeroOrdre parent
                    @endphp
                    @foreach($lotsTries as $index => $lot)
                        @php
                            $isCoTraitant = $lot->lotParent !== null;
                            $isLastItem = $loop->last;
                            $showHr = true;

                            $nextLot = !$isLastItem ? $lotsTries[$index + 1] : null;

                            if (!$isLastItem) {
                                if ($nextLot->lotParent) {
                                    $showHr = false;
                                }
                            } else {
                                $showHr = false;
                            }
                        @endphp

                        <div class="row anchor {{ $isCoTraitant ? ' mt-2 ps-4 ps-xs-3 ps-md-3 ms-md-4 ms-0' : '' }}" id="intervenant-{{ $lot->id }}">
                            <div class="col-12 d-flex align-items-start gap-2 fz-16 fw-semibold">
                                @if($isCoTraitant)
                                    @php
                                        $parentOrdre = $lot->lotParent->numeroOrdre ?? '??';
                                        $coTraitantCounters[$parentOrdre] = ($coTraitantCounters[$parentOrdre] ?? 0) + 1;
                                        $suffixe = $coTraitantCounters[$parentOrdre];
                                    @endphp
                                    <span class="fw-semibold fz-15">
                                        <i class="fa-solid fa-arrow-turn-up fa-rotate-90 me-1"></i>
                                        {{ $parentOrdre }}.{{ $suffixe }}
                                    </span>
                                    <span class="fz-15">Co-traitant</span>
                                @else
                                    <span class="fw-semibold text-nowrap">
                                        Lot n° {{ $lot->numeroOrdre }}
                                        @if(!empty($lot->suffixeNumeroOrdre))
                                            {{ $lot->suffixeNumeroOrdre }}
                                        @endif
                                    </span>
                                    <span class="">{{ Str::upper(Str::ascii($lot->designation)) }}</span>
                                @endif
                            </div>
                            
                             @if($isCoTraitant)
                                <div class="col-12 col-xs-8 col-md-6 ps-4 ps-xs-3 ps-md-3 mt-0 mt-md-0">
                             @else
                                <div class="col-12 col-md-6 mt-2 mt-md-0">
                            @endif
                            
                                <span class="fw-semibold">{{ $lot->nom }}</span><br>
                                <small>
                                    {{ $lot->adresse }}<br>
                                    {{ $lot->codePostal }} {{ $lot->ville }}<br>
                                    {{ preg_replace('/(\d{2})(?=\d)/', '$1 ', $lot->numeroTel) }}
                                </small>
                            </div>
                        </div>

                        @if($showHr)
                            <hr class="m-md-4 m-3" style="width: 90%; background: linear-gradient(to right, #ccc, #333, #ccc); border: 0; height: 1px;">
                        @endif
                    @endforeach
                @endif
            </div>
        </div>

        <!--  SOUS TRAITANTS -->
        @php
            $lastUpdateSousTraitant = $panneau->sousTraitants?->max('updated_at');
        @endphp
        <div class="card shadow-sm rounded-3 mt-5">
            <div class="card-header bg-primary_pdcn text-white d-flex justify-content-between align-items-center">
                <div class="text-uppercase fz-15">
                    <i class="fa-solid fa-trowel me-2"></i> Sous traitants
                </div>
                <div class="col-6 text-end justify-content-end small d-flex align-items-center">
                    Dernière modification : {{ $lastUpdateSousTraitant ? \Carbon\Carbon::parse($lastUpdateSousTraitant)->format('d/m/Y H:i') : 'Non disponible' }}
                    <a href="#top" class="text-white ms-3 scroll-top-link" title="Remonter en haut">
                        <i class="fas fa-arrow-up"></i>
                    </a>
                </div>
            </div>

            <div class="card-body">                
                @if($panneau->sousTraitants->isEmpty())
                    <div class="">
                        <i class="fa-solid fa-bullhorn"></i> Pour l'instant, aucun sous traitant n'est renseigné. <br> <small>À venir prochainement...</small>
                    </div>
                @else
                    @php
                        // Grouper et trier les sous-traitants 
                        $sousTraitantsGroupes = $panneau->sousTraitants
                            ->sortBy('numeroOrdre')
                            ->groupBy('lot_id')
                            ->sortBy(function($groupe, $lotId) {
                                if (!$lotId) return 999999; // Sans lot à la fin
                                
                                $lot = $groupe->first()->lot;
                                if (!$lot) return 999999;
                                                                
                                $ordrePrincipal = $lot->lotParent->numeroOrdre ?? $lot->numeroOrdre;
                                return sprintf('%04d-%05d', $ordrePrincipal, $lot->lotParent ? $lot->id : 0);
                            })
                            ->values();
                    @endphp

                    @foreach($sousTraitantsGroupes as $sousTraitantsDuLot)
                        @php
                            $premierSousTraitant = $sousTraitantsDuLot->first();
                            $lot = $premierSousTraitant->lot;
                        @endphp
                        
                        {{-- En-tête du lot --}}
                        <div class="row mb-0">
                            <div class="col-12">
                                <div class="d-flex align-items-center">
                                    <h5 class="fw-semibold fz-18 mb-0 mt-1">
                                        <i class="fa-solid fa-caret-right"></i>
                                        @if($lot)
                                            Lot n° {{ $lot->numeroOrdre ?? 'N.C' }} - {{ $lot->nom }}
                                        @else
                                            Lot non renseigné
                                        @endif
                                    </h5>
                                    
                                </div>
                                <hr class="mt-2 mb-3" style="width: 100%; background: linear-gradient(to right, #ccc, #333, #ccc); border: 0; height: 1px;">
                            </div>
                        </div>

                        {{-- Liste des sous-traitants --}}
                        @foreach($sousTraitantsDuLot as $sousTraitant)
                            <div class="row anchor mb-3" id="intervenant-{{ $sousTraitant->id }}">
                                
                                <!-- Nom du sous traitant -->
                                <div class="col-5 col-md-4 fw-semibold">
                                    {{ $sousTraitant->nom }}
                                </div>

                                <!-- Détails du sous traitant -->
                                <div class="col-7 col-md-8">
                                    <span class="fw-semibold fz-15">{{ $sousTraitant->designation }}</span><br>
                                    <small class="text-muted">
                                        {{ $sousTraitant->adresse }}<br>
                                        {{ $sousTraitant->codePostal }} {{ $sousTraitant->ville }}<br>
                                        @if($sousTraitant->numeroTel)
                                            {{ preg_replace('/(\d{2})(?=\d)/', '$1 ', $sousTraitant->numeroTel) }}
                                        @endif
                                    </small>
                                </div>        

                            </div>

                        @endforeach

                        {{-- Séparateur entre les groupes de lots --}}
                        @if(!$loop->last)
                            <div class="">
                                <div class="m-2"></div>
                            </div>
                        @endif

                    @endforeach
                @endif
            </div>
        </div>

        <!--  PERMIS -->
        @php
            $lastUpdatePermis = $panneau->permis?->max('updated_at');
        @endphp
        <div class="card shadow-sm rounded-3 mt-5">
            <div class="card-header bg-primary_pdcn text-white d-flex justify-content-between align-items-center">
                <div class="text-uppercase fz-15">
                    <i class="fa-solid fa-pager me-2"></i> Permis
                </div>
                <div class="col-6 text-end justify-content-end small d-flex align-items-center">
                    Dernière modification : {{ $lastUpdatePermis ? \Carbon\Carbon::parse($lastUpdatePermis)->format('d/m/Y H:i') : 'Non disponible' }}
                    <a href="#top" class="text-white ms-3 scroll-top-link" title="Remonter en haut">
                        <i class="fas fa-arrow-up"></i>
                    </a>
                </div>
            </div>

            <div class="card-body">                
                @if(isset($panneau->permis))
                    <div class="row anchor" id="permis-{{ $panneau->permis->id }}">                        
                        <!-- Type de permis-->
                        <div class="col-12 col-md-12">
                            {{ $panneau->permis->type }} <b>N° {{ $panneau->permis->numero }}</b> - {{ $panneau->permis->libelleType }} - 
                        </div>

                        <!-- Date permis -->
                        <div class="col-12 col-md-12 mb-2 mt-2">
                            <span class="d-block d-md-inline">
                                Date d'obtention : {{ $panneau->permis->dateObention ?: 'N.C' }}
                            </span>
                            <span class="d-block d-md-inline">
                                <span class="d-none d-md-inline"> - </span>
                                Date de publication : {{ $panneau->permis->publieLe ?: 'N.C' }}
                            </span>
                        </div>      
                    </div>                    
                @else                    
                    <div class="">
                        <i class="fa-solid fa-bullhorn"></i> Pour l'instant, aucun permis n'est renseigné. <br> <small>À venir prochainement...</small>
                    </div>
                @endif
            </div>
        </div>


        <!--  PARTENAIRES -->
        @if($panneau->partenaires->isNotEmpty())
            <div class="col-12 text-center mt-3">
                Avec la participation de
            </div>

            <style>
                .partenaire-item {
                    width: 120px;
                    margin: 10px;
                    text-align: center;
                }

                .partenaire-logo {
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 5px;
                }

                .partenaire-logo img {
                    max-height: 100%;
                    max-width: 100%;
                    object-fit: contain;
                }

                .partenaire-texte {
                    font-size: 14px;
                }
            </style>

            <div class="d-flex justify-content-center align-items-center flex-wrap mt-3">
                @foreach($panneau->partenaires as $partenaire)
                    <div class="partenaire-item">
                        @if(!empty($partenaire->texte))
                            <div class="partenaire-texte">{{ $partenaire->texte }}</div>
                        @endif
                        <div class="partenaire-logo">
                            <img src="{{ asset('storage/' . $partenaire->logo) }}" alt="Logo {{ $partenaire->nom }}">
                        </div>
                    </div>
                @endforeach
            </div>
        @endif



        <!-- CHANTIER INTERDIT AU PUBLIC -->
        <div class="chantier-container mt-5">
            <div class="chantier-title">Chantier interdit au public</div>
                <div class="chantier-icons">
                 <img src="{{ asset('storage/images/default/'. rawurlencode('PDCN_Port du casque.png')) }}" alt="Casque obligatoire">
                 <img src="{{ asset('storage/images/default/'. rawurlencode('PDCN_risque general.png')) }}" alt="Danger">
                 <img src="{{ asset('storage/images/default/'. rawurlencode('PDCN_acces interdit.png')) }}" alt="Accès interdit">            
            </div>
        </div>

        <figure class="small mt-4">
            <blockquote class="blockquote fs-6">
                <p>Affichage dématérialisé autorisé selon Art R8221-1 </p>
            </blockquote>
            <figcaption class="blockquote-footer">
            Créé par décret n°2008-244 du 7 mars 2008  art.(V) Relatif au travail dissimulé, le décret n°2023-452 du 9 juin 2023</cite>
            </figcaption>
        </figure>

        

</div>

<div style="position: fixed; bottom: 10px; right: 20px; color: #999; font-size: 0.7em;">
    © GB Finances - Tous droits réservés
</div>

@endif

<script>
document.addEventListener('DOMContentLoaded', () => {
  const mobileBtn = document.getElementById('mobilePreviewBtn');
  const printBtn  = document.getElementById('printPreviewBtn');

  const mobilePreview = document.getElementById('mobilePreview');
  const printPreview  = document.getElementById('printPreview');
  const container     = document.querySelector('.container-pdcn.py-5');

  if (!mobilePreview || !printPreview) {
    console.warn('[PDcN] Préviews manquants: #mobilePreview et/ou #printPreview.');
  }

  // Utils
  const isHidden = el => !el || el.classList.contains('d-none');
  const show = el => { if (el) el.classList.remove('d-none'); };
  const hide = el => { if (el) el.classList.add('d-none'); };
  const toggle = el => { if (el) el.classList.toggle('d-none'); };

  function updateContainerVisibility() {
    // Le container principal n'est masqué que si AU MOINS un aperçu est visible
    const anyPreviewVisible = (!isHidden(mobilePreview) || !isHidden(printPreview));
    if (container) {
      if (anyPreviewVisible) hide(container);
      else show(container);
    }
  }

 function setBtnState(btn, activeText, inactiveText, isActive, iconHtml = '') {
  if (!btn) return;
  btn.classList.toggle('active', isActive);
  btn.setAttribute('aria-pressed', String(isActive));
  if (activeText && inactiveText) {
    btn.innerHTML = iconHtml + (isActive ? activeText : inactiveText);
  }
}

  // Handlers
function handleMobileClick() {
  // On ferme l'aperçu print s'il est ouvert
  hide(printPreview);
  // On bascule l'aperçu mobile
  toggle(mobilePreview);

  const mobileActive = !isHidden(mobilePreview);
  const printActive  = !isHidden(printPreview); // après hide(), devrait être false

  setBtnState(
    mobileBtn,
    'Quitter Aperçu mobile',
    'Aperçu mobile',
    mobileActive,
    '<i class="fa-solid fa-mobile-screen-button me-2"></i>'
  );
  setBtnState(
    printBtn,
    'Quitter aperçu impression',
    'Aperçu impression',
    printActive,
    '<i class="fa-solid fa-print me-2"></i>'
  );

  updateContainerVisibility();
}

function handlePrintClick() {
  // Appel safe à autoFitText() si présent
  try { if (typeof autoFitText === 'function') autoFitText(); } catch (e) { /* noop */ }

  // On ferme l'aperçu mobile s'il est ouvert
  hide(mobilePreview);
  // On bascule l'aperçu print
  toggle(printPreview);

  const printActive  = !isHidden(printPreview);
  const mobileActive = !isHidden(mobilePreview); // après hide(), false

  setBtnState(
    printBtn,
    'Quitter aperçu impression',
    'Aperçu impression',
    printActive,
    '<i class="fa-solid fa-print me-2"></i>'
  );
  setBtnState(
    mobileBtn,
    'Quitter Aperçu mobile',
    'Aperçu mobile',
    mobileActive,
    '<i class="fa-solid fa-mobile-screen-button me-2"></i>'
  );

  updateContainerVisibility();
}

  // Click
  mobileBtn?.addEventListener('click', handleMobileClick);
  printBtn?.addEventListener('click', handlePrintClick);

  // Accessibilité clavier (Enter/Space)
  function keyActivate(fn) {
    return (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fn(); }
    };
  }
  mobileBtn?.addEventListener('keydown', keyActivate(handleMobileClick));
  printBtn?.addEventListener('keydown', keyActivate(handlePrintClick));
});
</script>

@endsection