@extends('layouts.app')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-end">
                <!-- Zone gauche : messages -->
                <div class="flex-grow-1 me-3">
                    @include('layouts.notification.errors')
                    @include('layouts.notification.success')
                </div>

                @if(isset($panneau))
                    <div class="text-end mt-2 me-3">
                        <a href="{{ route('panneaux.pdcn', $panneau->id) }}" class="btn btn-sm btn-outline-secondary" title="Voir le panneau">
                            <i class="fa-solid fa-eye"></i>
                        </a>
                    </div>
                @endif

                <!-- Zone droite : card header -->
                <div class="card">
                    <div class="card-header bg-primary text-white text-uppercase text-end">                        
                        {{ isset($panneau) ? 'MODIFICATION D\'UN CHANTIER' : 'AJOUT D\'UN CHANTIER' }}
                    </div>
                </div>
            </div>
        </div>

        @php
            $classDisabled = !isset($panneau) ? 'disableInCreate' : '';
        @endphp

        <div class="container-fluid mt-3">

            <!-- Menu latéral -->                 
            <div class="row">
                <div class="col-auto col-md-2 pe-1">
                    <!-- Sidebar -->
                    <ul class="nav flex-column step-nav" id="stepSidebar">
                        <!-- Étape 1 : Panneau de chantier -->
                        <li class="nav-item">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 active step-link" data-target="section-panneau">
                                <!-- <i class="fa-regular fa-circle-right me-2"></i>
                                <i class="bi bi-postcard me-2"></i>Panneau de chantier -->
                                <span class="fa-stack icon-slide small">
                                <i class="fa-regular fa-circle fa-stack-2x"></i>
                                <i class="bi bi-postcard fa-stack-1x inner-icon"></i> 
                                </span>
                                Panneau de chantier
                            </a>
                        </li>

                        <!-- Étape 2 : Panneau de chantier -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer un panneau avant d\'ajouter un permis.' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-permis">
                                <!-- <i class="fa-regular fa-circle me-2"></i>
                                <i class="fa-solid fa-pager me-2"></i> Permis -->
                                <span class="fa-stack icon-slide small">
                                <i class="fa-regular fa-circle fa-stack-2x" aria-hidden="true"></i>
                                <i class="fa-solid fa-pager fa-stack-1x inner-icon"></i> 
                                </span>
                                Permis
                            </a>
                        </li>
                        
                        <!-- Étape 3 : Intervenants (Parties prenantes) -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer un panneau avant d\'ajouter des intervenants.' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-intervenants">
                                <!-- <i class="fa-regular fa-circle me-2"></i>
                                <i class="bi bi-people-fill me-2"></i> Intervenants -->
                                <span class="fa-stack icon-slide small">
                                <i class="fa-regular fa-circle fa-stack-2x" aria-hidden="true"></i>
                                <i class="bi bi-people-fill fa-stack-1x inner-icon"></i> 
                                </span>
                                Intervenants
                            </a>
                        </li>

                        <!-- Étape 4 : Lots -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer un panneau avant d\'ajouter des lots.' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-lots">
                                <!-- <i class="fa-regular fa-circle me-2"></i>
                                <i class="fa-solid fa-person-digging me-2"></i> Lots -->
                                <span class="fa-stack icon-slide small">
                                <i class="fa-regular fa-circle fa-stack-2x" aria-hidden="true"></i>
                                <i class="fa-solid fa-person-digging fa-stack-1x inner-icon"></i> 
                                </span>
                                Lots
                            </a>
                        </li>

                        <!-- Étape 5 : Sous Traitants -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer un panneau avant d\'ajouter des sous traitants.' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-soustraitants">
                                <!-- <i class="fa-regular fa-circle me-2"></i>
                                <i class="fa-solid fa-trowel me-2"></i> Sous traitants -->
                                <span class="fa-stack icon-slide small">
                                <i class="fa-regular fa-circle fa-stack-2x" aria-hidden="true"></i>
                                <i class="fa-solid fa-trowel fa-stack-1x inner-icon"></i> 
                                </span>
                                Sous traitants
                            </a>
                        </li>
                        

                        <!-- Étape 5 : Labels -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer le panneau de chantier avant d\'ajouter des labels' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-labels">
                                <!-- <i class="fa-regular fa-circle me-2"></i>
                                <i class="bi bi-tag-fill me-2"></i> Labels -->
                                <span class="fa-stack icon-wrapper small">
                                <i class="fa-regular fa-circle fa-stack-2x"></i>
                                <i class="bi bi-tag-fill fa-stack-1x inner-icon"></i> 
                                </span>
                                Labels
                            </a>
                        </li>
                    </ul>



                    <hr class="text-start ms-3 mt-4 mb-4" width="30%">

                    <!-- QR CODE -->

                    <div class="ps-3">                       
                        @if(isset($panneau) && $panneau?->qrLink)
                                <div class="d-block d-md-none">
                                <!-- Mobile uniquement () -->
                                    {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(100)->generate(route('qr.redirect', $panneau->qrLink->slug)) !!}
                                </div>
                                <div class="d-none d-md-block d-lg-none">
                                    <!-- Tablette uniquement () -->
                                    {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(120)->generate(route('qr.redirect', $panneau->qrLink->slug)) !!}
                                </div>
                                <div class="d-none d-lg-block">
                                    <!-- Desktop uniquement () -->
                                    {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(140)->generate(route('qr.redirect', $panneau->qrLink->slug)) !!}
                                </div>
                            
                            <div class=" col-9 text-start mt-2 small">
                                <code>{{ route('qr.redirect', $panneau->qrLink->slug) }}</code>
                            </div>
                        @else
                            <div class="text-muted">Aucun QR code associé.</div>
                        @endif
                    </div>
                </div>

                <!-- Blocs dynamiques -->
                <div class="col-md-10 col-auto pe-0">

                    <div id="section-panneau" class="content-section">
                        @include('panneaux.blocs.informations', ['panneau' => $panneau ?? null])
                    </div>

                    <div id="section-permis" class="content-section d-none">
                        @include('panneaux.blocs.permis', ['panneau' => $panneau ?? null])
                    </div>

                    <div id="section-intervenants" class="content-section d-none">
                        @include('panneaux.blocs.intervenants', ['panneau' => $panneau ?? null])
                    </div>

                    <div id="section-lots" class="content-section d-none">
                        @include('panneaux.blocs.lots', ['panneau' => $panneau ?? null])
                    </div>

                    <div id="section-soustraitants" class="content-section d-none">
                        @include('panneaux.blocs.sousTraitants', ['panneau' => $panneau ?? null])
                    </div>
                    
                    <div id="section-labels" class="content-section d-none">
                        @include('panneaux.blocs.labels', ['panneau' => $panneau ?? null])
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<style>
@keyframes slide-bounce {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-1px); }
  70%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

.inner-icon.animate {
  animation: slide-bounce 0.4s ease;
}
</style>

<script src="{{ asset('js/gestionPanneau.js') }}"></script>

<script>
        document.addEventListener("DOMContentLoaded", function () {
            const links = document.querySelectorAll("#stepSidebar .step-link");

            links.forEach(link => {
                link.addEventListener("click", function (e) {
                    e.preventDefault();

                    // Réinitialiser tous les liens
                    links.forEach(l => {
                        l.classList.remove("active");
                        // const icon = l.querySelector("i");
                        // if (icon) {
                        //     icon.classList.remove("fa-circle-right");
                        //     icon.classList.add("fa-circle");
                        // }
                    });

                    // Activer le lien cliqué
                    this.classList.add("active");
                    // const icon = this.querySelector("i");
                    // if (icon) {
                    //     icon.classList.remove("fa-circle");
                    //     icon.classList.add("fa-circle-right");
                    // }

                    // Affichage conditionnel des sections
                    const target = this.getAttribute("data-target");
                    document.querySelectorAll(".content-section").forEach(section => {
                        section.classList.toggle("d-none", section.id !== target);
                    });
                });
            });
        });

        document.querySelectorAll('.step-link').forEach(link => {
            link.addEventListener('click', e => {
                const icon = link.querySelector('.inner-icon');

                icon.classList.remove('animate');
                void icon.offsetWidth; // force reflow pour rejouer l’animation
                icon.classList.add('animate');
            });
        });
    </script>
@endsection