@php
    $isEdit = isset($panneau) && $panneau->id;
    $typeMiseEnForme = old('typeMiseEnForme');
    if ($typeMiseEnForme === null) {
        $typeMiseEnForme = $isEdit ? $panneau->typeMiseEnForme : 1; // Valeur par défaut = 1 en création
    }

    $chantierInterditPrint = old('chantierInterditPrint', $panneau->chantierInterditPrint ?? 1);
    $chantierSafetyPrint = old('chantierSafetyPrint', $panneau->chantierSafetyPrint ?? 0);
    $nbIntervenantsPrint = old('nbIntervenantsPrint', $panneau->nbIntervenantsPrint ?? 5);

    // Les <input type="date"> attendent un format Y-m-d
    $toDateInput = function ($value) {
        if (empty($value)) {
            return '';
        }
        try {
            return \Carbon\Carbon::parse($value)->format('Y-m-d');
        } catch (\Throwable $e) {
            return '';
        }
    };

    $dateDebutTravaux = $toDateInput(old('dateDebutTravaux', optional($panneau)->dateDebutTravaux));
    $dateFinTravaux = $toDateInput(old('dateFinTravaux', optional($panneau)->dateFinTravaux));
@endphp

<form method="POST" action="{{ $isEdit
    ? route('panneaux.update', $panneau->id)
    : route('panneaux.store.panneau') }}" 
    enctype="multipart/form-data">
    
    @csrf

    @if($isEdit)
        @method('PUT')
    @endif

    <div class="">

        <!-- #region Panneau de chantier identités-->
        <div class="card shadow-sm rounded-3">

            <div class="card-header bg-primary text-white text-uppercase">
                <i class="bi bi-postcard me-2"></i>Informations du chantier
            </div>
            
            <div class="card-body">                            
                <div class="row">
                    <!-- Infos chantier -->
                    <div class="col-md-7">
                        <div class="mb-3">
                            <label for="code" class="form-label fw-semibold required">Code Chantier </label>
                            <input type="text" class="form-control" name="codeChantier" id="codeChantier" value="{{ old('codeChantier', optional($panneau)->code) }}" required>
                            @error('code')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="nom" class="form-label fw-semibold required">Nom du chantier </label>
                            <input type="text" class="form-control" name="nom" id="nom" value="{{ old('nom', optional($panneau)->nom) }}" required>
                            @error('nom')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="sousTitre" class="form-label fw-semibold">Sous-titre / Déscription</label>
                            <input type="text" class="form-control" name="sousTitre" id="sousTitre" value="{{ old('sousTitre', optional($panneau)->sousTitre) }}">
                            @error('sousTitre')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="adresse" class="form-label fw-semibold required">Adresse </label>
                            <input type="text" class="form-control" name="adresse" id="adresse" value="{{ old('adresse', optional($panneau)->adresse) }}" required>
                            @error('adresse')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">                                                        
                                <x-codePostal name="codePostal" label="Code postal" fwsemibold="fw-semibold" maxlength="5" required :value="optional($panneau)->codePostal ?? ''" />
                            </div>
                            <div class="col-md-8 mb-3">
                                <x-ville name="ville" fwsemibold="fw-semibold" codePostalInputId="codePostal" required :value="optional($panneau)->ville ?? ''" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="dateDebutTravaux" class="form-label fw-semibold">Début des travaux le</label>
                                <div class="position-relative">
                                    <input type="date" class="form-control pe-5" name="dateDebutTravaux" id="dateDebutTravaux"
                                        value="{{ $dateDebutTravaux }}">
                                    <button type="button"
                                            class="btn btn-sm btn-light border position-absolute top-50 end-0 translate-middle-y me-2"
                                            style="z-index: 2;"
                                            onclick="document.getElementById('dateDebutTravaux').value = ''"
                                            title="Réinitialiser">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                @error('dateDebutTravaux')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="dateFinTravaux" class="form-label fw-semibold">Fin des travaux prévue le</label>
                                <div class="position-relative">
                                    <input type="date" class="form-control pe-5" name="dateFinTravaux" id="dateFinTravaux"
                                        value="{{ $dateFinTravaux }}">
                                    <button type="button"
                                            class="btn btn-sm btn-light border position-absolute top-50 end-0 translate-middle-y me-2"
                                            style="z-index: 2;"
                                            onclick="document.getElementById('dateFinTravaux').value = ''"
                                            title="Réinitialiser">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                @error('dateFinTravaux')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold"> Theme</label>
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <label for="themePrimaryColor" class="form-label d-block">Couleur de la barre supérieure</label>
                                    <input type="color" id="themePrimaryColor" name="themePrimaryColor" class="form-control form-control-color"
                                        value="{{ old('themePrimaryColor', $panneau->themePrimaryColor ?? '#f5991a') }}">
                                </div>
                                <div class="col-auto">
                                    <label for="themeSecondaryColor" class="form-label d-block">Couleur des blocs importants</label>
                                    <input type="color" id="themeSecondaryColor" name="themeSecondaryColor" class="form-control form-control-color"
                                        value="{{ old('themeSecondaryColor', $panneau->themeSecondaryColor ?? '#dc4c4c') }}">
                                </div>
                                <div class="col-auto mt-3">
                                    <button type="button" class="btn btn-outline-secondary" id="resetThemeColors">
                                        🎨 Couleurs par défaut
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-5 align-items-center">
                            <div class="col-3">
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="checkbox" name="actif" id="actif"
                                        {{ old('actif', isset($panneau) ? $panneau->actif : true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="actif">
                                        Panneau Actif
                                    </label>
                                </div>
                                @error('actif')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-auto d-flex align-items-center">
                                <label class="me-2 fw-semibold mb-0">| Type de mise en forme :</label>
                                <div class="form-check form-check-inline">
                                   <input class="form-check-input" type="radio" name="typeMiseEnForme" id="option1" value="1" {{ $typeMiseEnForme == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="option1">Petite image</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="typeMiseEnForme" id="option2" value="2" {{ $typeMiseEnForme == 2 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="option2">Grande image</label>
                                </div>
                            </div>
                        </div>                    
                    </div>

                    <!-- Image chantier -->                    
                    <div class="col-md-5">
                        <label for="imageChantier" class="form-label fw-semibold">Image chantier</label>
                        <input type="file" class="form-control me-2" name="photo" id="photo" accept="image/*">                        

                        <div id="chantierPreviewZone" class="text-center mt-4">
                            @if(!empty($panneau->photo))
                                <div class="position-relative d-inline-block">
                                    <img src="{{ asset('storage/' . $panneau->photo) }}?v={{ $panneau->updated_at->timestamp }}"
                                        alt="Image chantier actuelle"
                                        class="img-fluid rounded shadow-sm" style="max-height: 250px;">

                                    <button type="button"
                                            id="removeImageChantierBtn"
                                            class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                            title="Supprimer l'image">
                                        <i class="fa-solid fa-times"></i>
                                    </button>
                                </div>
                            @endif
                        </div>

                        <input type="hidden" name="current_image_chantier" id="current_image_chantier" value="{{ $panneau->photo ?? '' }}">

                        <!-- Gestion du logo Chantier -->
                        <div class="mt-3">
                            <label for="logo" class="form-label fw-semibold">Logo chantier</label>
                            <input type="file" class="form-control me-2" name="logo" id="logo" accept="image/*">                        

                            <div id="logoChantierPreviewZone" class="text-center mt-4">
                                @if(!empty($panneau->logo))
                                    <div class="position-relative d-inline-block">
                                        <img src="{{ asset('storage/' . $panneau->logo) }}?v={{ $panneau->updated_at->timestamp }}"
                                            alt="Logo chantier"
                                            class="img-fluid rounded shadow-sm" style="max-height: 250px;">

                                        <button type="button"
                                                id="removeLogoChantierBtn"
                                                class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                                title="Supprimer l'image">
                                            <i class="fa-solid fa-times"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>

                            <input type="hidden" name="current_logo_chantier" id="current_logo_chantier" value="{{ $panneau->logo ?? '' }}">
                        </div>

                    </div>

                </div>

                <div class="row mt-4 align-items-center">

                    <div class="col-12 fw-semibold">
                        <i class="fa-solid fa-print"></i> Impression :
                    </div>

                    <!-- Encadré chantier interdit -->
                    <div class="col-auto d-flex align-items-center">
                        <label class="me-2 fw-semibold mb-0">| Afficher l'encart chantier interdit :</label>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="chantierInterditPrint" id="chantierInterditOui" value="1" {{ $chantierInterditPrint == 1 ? 'checked' : '' }}>
                            <label class="form-check-label" for="chantierInterditOui">Oui</label>
                        </div>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="chantierInterditPrint" id="chantierInterditNon" value="0" {{ $chantierInterditPrint == 0 ? 'checked' : '' }}>
                            <label class="form-check-label" for="chantierInterditNon">Non</label>
                        </div>
                    </div>

                     <!-- Ras le vol -->    
                    <div class="col-auto d-flex align-items-center">
                        <label class="me-2 fw-semibold mb-0">| Afficher dispositif Ras le Vol :</label>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="chantierSafetyPrint" id="rasLeVolOui" value="1" {{ $chantierSafetyPrint == 1 ? 'checked' : '' }}>
                            <label class="form-check-label" for="rasLeVolOui">Oui</label>
                        </div>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="chantierSafetyPrint" id="rasLeVolNon" value="0" {{ $chantierSafetyPrint == 0 ? 'checked' : '' }}>
                            <label class="form-check-label" for="rasLeVolNon">Non</label>
                        </div>
                    </div>

                    
                    <!-- Nombre d'intervenants -->
                    <div class="col-auto d-flex align-items-center">
                        <label class="me-2 fw-semibold mb-0">| Nombre d'intervenants <i class="fa-solid fa-circle-info ms-1 text-muted"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Par défaut : Maitre d'ouvrage, Maitre d'oeuvre, Architecte, SPS et Controle. Maximum 9 affichable"></i>
                                :</label>

                        <input 
                            type="number"
                            name="nbIntervenantsPrint"
                            class="form-control form-control-sm"
                            style="width:70px;"
                            min="5"
                            max="9"
                            value="{{ $nbIntervenantsPrint ?? 5 }}"
                        >
                    </div>

                </div>
                

                <div class="mt-4 text-end">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-check-circle me-1"></i> {{ isset($panneau) ? 'Enregistrer' : 'Créer le chantier' }}
                    </button>
                </div>                                    
            </div>

        </div>
        <!-- #end region Panneau de chantier identités-->
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const defaultPrimary = '#f5991a';
    const defaultSecondary = '#dc4c4c';

    const colorInputPrimary = document.getElementById('themePrimaryColor');
    const colorInputSecondary = document.getElementById('themeSecondaryColor');
    const resetBtn = document.getElementById('resetThemeColors');

    if (resetBtn && colorInputPrimary && colorInputSecondary) {
        resetBtn.addEventListener('click', function () {
            colorInputPrimary.value = defaultPrimary;
            colorInputSecondary.value = defaultSecondary;

            // Déclencher les événements 'input' si tu relies à un preview live
            colorInputPrimary.dispatchEvent(new Event('input'));
            colorInputSecondary.dispatchEvent(new Event('input'));
        });
    }

    const input = document.querySelector('[name="nbIntervenantsPrint"]');

    if (!input) return;

    input.addEventListener("input", function () {
        let value = parseInt(this.value);

        if (isNaN(value)) return;

        if (value < 5) this.value = 5;
        if (value > 9) this.value = 9;
    });

});
</script>