@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
    }
@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">Code Chantier</label>
                            <input type="text" class="form-control" name="code" id="code" value="{{ old('code', 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">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">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="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-2">
                                <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">
                                        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 ?? '' }}">
                    </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'));
        });
    }
});
</script>