@extends('layouts.base')

@section('title', $carousel ? 'Modifier le carousel' : 'Créer un carousel')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        {{ $carousel ? 'Modifier le carousel' : 'Créer un carousel' }}
                    </h3>
                    <div class="card-tools d-flex align-items-center justify-content-between">
                        <a href="{{ route('partner.application.carousels.index', $application) }}" class="btn btn-warning btn-outline-primary">
                            <i class="fas fa-arrow-left"></i> Retour
                        </a>
                        <div class="form-group m-0">
                            <input type="checkbox"
                                    class="d-none @error('is_active') is-invalid @enderror"
                                    id="is_active"
                                    name="is_active"
                                    value="1" form="carousel-form"
                                    {{ old('is_active', $carousel->is_active ?? true) ? 'checked' : '' }}>
                            <label for="is_active" class="toggle-btn">
                                <span class="state-icon" aria-hidden="true"></span>
                                <span class="state-text-on">Carousel actif</span>
                                <span class="state-text-off">Carousel inactif</span>
                            </label>
                            @error('is_active')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                </div>

                <form id="carousel-form" action="{{ $carousel ? route('partner.application.carousels.update', [$application, $carousel]) : route('partner.application.carousels.store', $application) }}" method="POST">
                    @csrf
                    @if($carousel)
                        @method('PUT')
                    @endif

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label for="title" class="form-label">Titre du carousel <span class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control @error('title') is-invalid @enderror"
                                           id="title"
                                           name="title"
                                           value="{{ old('title', $carousel->title ?? '') }}"
                                           required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="type" class="form-label">Type de carousel <span class="text-danger">*</span></label>
                                    <select class="form-control @error('type') is-invalid @enderror"
                                            id="type"
                                            name="type"
                                            required>
                                        <option value="">Sélectionnez un type</option>
                                        @foreach(\App\Enums\CarouselType::getOptions() as $value => $label)
                                            <option value="{{ $value }}"
                                                    {{ old('type', $carousel && $carousel->type ? $carousel->type->value : '') == $value ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="slug" class="form-label">Slug</label>
                                    <div class="input-group">
                                        <input type="text"
                                               class="form-control @error('slug') is-invalid @enderror"
                                               id="slug"
                                               name="slug"
                                               value="{{ old('slug', $carousel->slug ?? '') }}">
                                        <button type="button" class="btn btn-outline-primary" onclick="generateSlug('title', 'slug')" title="Générer automatiquement">
                                            <i class="fas fa-magic me-1"></i>Générer
                                        </button>
                                    </div>
                                    @error('slug')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="form-text text-muted">Généré automatiquement à partir du titre</small> -->
                                </div>
                            </div>
                        </div>

                        <div class="row my-3">
                            <!-- <div class="col-md-3">
                                <div class="form-group">
                                    <label for="order" class="form-label">Ordre d'affichage</label>
                                    <input type="number"
                                           class="form-control @error('order') is-invalid @enderror"
                                           id="order"
                                           name="order"
                                           value="{{ old('order', $carousel->order ?? 0) }}"
                                           min="0">
                                    @error('order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div> -->

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="order" class="form-label">Limite d'affichage</label>
                                    <input type="number"
                                        class="form-control @error('order') is-invalid @enderror"
                                        id="limit"
                                        name="limit"
                                        value="{{ old('limit', $carousel->limit ?? 0) }}"
                                        min="0">
                                    @error('order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="order" class="form-label">Page d'insertion (facultatif)</label>
                                    <input type="number"
                                           class="form-control @error('order') is-invalid @enderror"
                                           id="order"
                                           name="order"
                                           value="{{ old('order', $carousel->order ?? 0) }}"
                                           min="0">
                                    @error('order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted fst-italic">Pour MMI. Laisser vide si non concerné</small>
                                </div>
                            </div>

                        </div>

                        <!-- Conteneur dynamique pour les formulaires selon le type -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label">Configuration du carousel</label>

                                    <!-- Formulaire pour type "Personnalisé" (programmes) -->
                                    <div id="personalized-form" class="carousel-form" style="display: none;">
                                        <h6>Programmes à inclure dans le carousel</h6>
                                        <div class="row">
                                            @if($programs->count() > 0)
                                                @foreach($programs as $program)
                                                    <div class="col-md-6 col-lg-4 mb-3">
                                                        <div class="form-check">
                                                            <input type="checkbox"
                                                                   class="form-check-input program-checkbox"
                                                                   id="program_{{ $program->id }}"
                                                                   name="programs[]"
                                                                   value="{{ $program->id }}"
                                                                   {{ in_array($program->id, old('programs', $selectedPrograms ?? [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label d-flex align-items-center" for="program_{{ $program->id }}">
                                                                <div class="program-card border rounded p-2 w-100">
                                                                    <div class="d-flex align-items-center">
                                                                        @if($program->getFirstMediaUrl('images', 'small'))
                                                                            <img src="{{ $program->getFirstMediaUrl('images', 'small') }}"
                                                                                 alt="{{ $program->name }}"
                                                                                 class="program-thumb me-2"
                                                                                 style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
                                                                        @else
                                                                            <div class="program-placeholder me-2 d-flex align-items-center justify-content-center bg-light"
                                                                                 style="width: 40px; height: 40px; border-radius: 4px;">
                                                                                <i class="fas fa-building text-muted"></i>
                                                                            </div>
                                                                        @endif
                                                                        <div class="flex-grow-1">
                                                                            <div class="fw-bold text-dark">{{ $program->name }}</div>
                                                                            <small class="text-muted">{{ $program->slug }}</small>
                                                                            @if($program->is_active)
                                                                                <span class="badge bg-success ms-1">Actif</span>
                                                                            @else
                                                                                <span class="badge bg-secondary ms-1">Inactif</span>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="col-12">
                                                    <div class="alert alert-info">
                                                        <i class="fas fa-info-circle me-2"></i>
                                                        Aucun programme actif trouvé pour cette application.
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                        <small class="form-text text-muted">
                                            Sélectionnez les programmes qui doivent être inclus dans ce carousel.
                                        </small>
                                        @error('programs')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Formulaire pour type "Critères avancés" -->
                                    <div id="criteres-form" class="carousel-form" style="display: none;">
                                        <h6>Critères de sélection</h6>
                                        <div class="row">
                                            @php
                                                $critereRule = [];
                                                if ($carousel && $carousel->rule) {
                                                    $decodedRule = json_decode($carousel->rule, true);
                                                    if (isset($decodedRule['type']) && $decodedRule['type'] === 'criteres') {
                                                        $critereRule = $decodedRule;
                                                    }
                                                }
                                            @endphp
                                            <!-- Commission -->
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="commission_min" class="form-label">Commission minimale (%)</label>
                                                    <input type="number"
                                                           class="form-control @error('commission_min') is-invalid @enderror"
                                                           id="commission_min"
                                                           name="commission_min"
                                                           step="0.01"
                                                           min="0"
                                                           max="100"
                                                           value="{{ old('commission_min', $critereRule['commission_min'] ?? '') }}">
                                                    @error('commission_min')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="commission_max" class="form-label">Commission maximale (%)</label>
                                                    <input type="number"
                                                           class="form-control @error('commission_max') is-invalid @enderror"
                                                           id="commission_max"
                                                           name="commission_max"
                                                           step="0.01"
                                                           min="0"
                                                           max="100"
                                                           value="{{ old('commission_max', $critereRule['commission_max'] ?? '') }}">
                                                    @error('commission_max')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Fiscalité -->
                                            <div class="col-md-12 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">Fiscalités</label>
                                                    <div class="row">
                                                        @php
                                                            $selectedCritereFiscalites = [];
                                                            if ($carousel && $carousel->rule) {
                                                                $rule = json_decode($carousel->rule, true);
                                                                if (isset($rule['type']) && $rule['type'] === 'criteres' && isset($rule['fiscalites']) && is_array($rule['fiscalites'])) {
                                                                    // Si les fiscalités sont stockées comme valeurs d'enum, les convertir en IDs
                                                                    if (is_string($rule['fiscalites'][0] ?? null)) {
                                                                        $selectedCritereFiscalites = \App\Models\Fiscalite::whereIn('type', $rule['fiscalites'])
                                                                            ->pluck('id')
                                                                            ->toArray();
                                                                    } else {
                                                                        $selectedCritereFiscalites = $rule['fiscalites'];
                                                                    }
                                                                }
                                                            }
                                                            $selectedCritereFiscalites = old('critere_fiscalites', $selectedCritereFiscalites);
                                                        @endphp
                                                        @if($fiscalites->count() > 0)
                                                            @foreach($fiscalites as $fiscalite)
                                                                <div class="col-md-6 col-lg-4 mb-2">
                                                                    <div class="form-check">
                                                                        <input type="checkbox"
                                                                               class="form-check-input critere-fiscalite-checkbox"
                                                                               id="critere_fiscalite_{{ $fiscalite->id }}"
                                                                               name="critere_fiscalites[]"
                                                                               value="{{ $fiscalite->id }}"
                                                                               {{ in_array($fiscalite->id, $selectedCritereFiscalites) ? 'checked' : '' }}>
                                                                        <label class="form-check-label" for="critere_fiscalite_{{ $fiscalite->id }}">
                                                                            {{ $fiscalite->type->label() }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        @else
                                                            <div class="col-12">
                                                                <small class="text-muted">Aucune fiscalité disponible</small>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Année de livraison -->
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="delivery_year" class="form-label">Année de livraison</label>
                                                    <select class="form-control @error('delivery_year') is-invalid @enderror"
                                                            id="delivery_year"
                                                            name="delivery_year[]"
                                                            multiple>
                                                        @php
                                                            $currentYear = date('Y');
                                                            $selectedYears = [];
                                                            if ($carousel && $carousel->rule) {
                                                                $rule = json_decode($carousel->rule, true);
                                                                if (isset($rule['type']) && $rule['type'] === 'criteres' && isset($rule['delivery_years'])) {
                                                                    $selectedYears = $rule['delivery_years'];
                                                                }
                                                            }
                                                            $selectedYears = old('delivery_year', $selectedYears);
                                                        @endphp
                                                        @for($year = $currentYear; $year <= $currentYear + 10; $year++)
                                                            <option value="{{ $year }}" {{ in_array($year, $selectedYears) ? 'selected' : '' }}>
                                                                {{ $year }}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                    @error('delivery_year')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <small class="form-text text-muted">Maintenez Ctrl/Cmd pour sélectionner plusieurs années</small>
                                                </div>
                                            </div>

                                            <!-- Quote/travaux -->
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="quote_travaux_min" class="form-label">Quote-part travaux minimale (%)</label>
                                                    <input type="number"
                                                           class="form-control @error('quote_travaux_min') is-invalid @enderror"
                                                           id="quote_travaux_min"
                                                           name="quote_travaux_min"
                                                           step="0.01"
                                                           min="0"
                                                           max="100"
                                                           value="{{ old('quote_travaux_min', $critereRule['quote_travaux_min'] ?? '') }}">
                                                    @error('quote_travaux_min')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="quote_travaux_max" class="form-label">Quote-part travaux maximale (%)</label>
                                                    <input type="number"
                                                           class="form-control @error('quote_travaux_max') is-invalid @enderror"
                                                           id="quote_travaux_max"
                                                           name="quote_travaux_max"
                                                           step="0.01"
                                                           min="0"
                                                           max="100"
                                                           value="{{ old('quote_travaux_max', $critereRule['quote_travaux_max'] ?? '') }}">
                                                    @error('quote_travaux_max')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Accessibilité (Prestations) -->
                                            <div class="col-md-12 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">Accessibilité / Prestations</label>
                                                    <div class="row">
                                                        @php
                                                            $selectedPrestations = [];
                                                            if ($carousel && $carousel->rule) {
                                                                $rule = json_decode($carousel->rule, true);
                                                                if (isset($rule['type']) && $rule['type'] === 'criteres' && isset($rule['prestations'])) {
                                                                    $selectedPrestations = $rule['prestations'];
                                                                }
                                                            }
                                                            $selectedPrestations = old('critere_prestations', $selectedPrestations);
                                                        @endphp
                                                        @foreach(\App\Enums\PrestationProgram::selectableCases() as $prestation)
                                                            <div class="col-md-6 col-lg-4 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox"
                                                                           class="form-check-input critere-prestation-checkbox"
                                                                           id="critere_prestation_{{ $prestation->value }}"
                                                                           name="critere_prestations[]"
                                                                           value="{{ $prestation->value }}"
                                                                           {{ in_array($prestation->value, $selectedPrestations) ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="critere_prestation_{{ $prestation->value }}">
                                                                        <i class="{{ $prestation->icon() }} me-1"></i>
                                                                        {{ $prestation->label() }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Localisation -->
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="localisation_city" class="form-label">Ville</label>
                                                    <input type="text"
                                                           class="form-control @error('localisation_city') is-invalid @enderror"
                                                           id="localisation_city"
                                                           name="localisation_city"
                                                           value="{{ old('localisation_city', $critereRule['localisation_city'] ?? '') }}">
                                                    @error('localisation_city')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="localisation_postal_code" class="form-label">Code postal</label>
                                                    <input type="text"
                                                           class="form-control @error('localisation_postal_code') is-invalid @enderror"
                                                           id="localisation_postal_code"
                                                           name="localisation_postal_code"
                                                           value="{{ old('localisation_postal_code', $critereRule['localisation_postal_code'] ?? '') }}">
                                                    @error('localisation_postal_code')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Prix -->
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="prix_min" class="form-label">Prix minimum (€)</label>
                                                    <input type="number"
                                                           class="form-control @error('prix_min') is-invalid @enderror"
                                                           id="prix_min"
                                                           name="prix_min"
                                                           step="0.01"
                                                           min="0"
                                                           value="{{ old('prix_min', $critereRule['prix_min'] ?? '') }}">
                                                    @error('prix_min')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="prix_max" class="form-label">Prix maximum (€)</label>
                                                    <input type="number"
                                                           class="form-control @error('prix_max') is-invalid @enderror"
                                                           id="prix_max"
                                                           name="prix_max"
                                                           step="0.01"
                                                           min="0"
                                                           value="{{ old('prix_max', $critereRule['prix_max'] ?? '') }}">
                                                    @error('prix_max')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Mise en avant marketing -->
                                            <div class="col-md-12 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">Mise en avant marketing</label>
                                                    <div class="row">
                                                        @php
                                                            $selectedMarketing = [];
                                                            if ($carousel && $carousel->rule) {
                                                                $rule = json_decode($carousel->rule, true);
                                                                if (isset($rule['type']) && $rule['type'] === 'criteres' && isset($rule['marketing'])) {
                                                                    $selectedMarketing = $rule['marketing'];
                                                                }
                                                            }
                                                            $selectedMarketing = old('critere_marketing', $selectedMarketing);
                                                        @endphp
                                                        @foreach(\App\Enums\MarketingTagType::cases() as $tagType)
                                                            @if($tagType !== \App\Enums\MarketingTagType::NON_DEFINI)
                                                                <div class="col-md-6 col-lg-4 mb-2">
                                                                    <div class="form-check">
                                                                        <input type="checkbox"
                                                                               class="form-check-input critere-marketing-checkbox"
                                                                               id="critere_marketing_{{ $tagType->value }}"
                                                                               name="critere_marketing[]"
                                                                               value="{{ $tagType->value }}"
                                                                               {{ in_array($tagType->value, $selectedMarketing) ? 'checked' : '' }}>
                                                                        <label class="form-check-label" for="critere_marketing_{{ $tagType->value }}">
                                                                            <i class="{{ $tagType->icon() }} me-1"></i>
                                                                            {{ $tagType->label() }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">
                                            Sélectionnez les critères pour filtrer les programmes. Tous les critères sélectionnés seront appliqués simultanément (ET logique).
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Champ caché pour stocker la règle en JSON -->
                        <input type="hidden" id="rule" name="rule" value="{{ old('rule', $carousel->rule ?? '') }}">

                    </div>

                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('partner.application.carousels.index', $application) }}" class="btn btn-danger">
                                <i class="fas fa-times"></i> Annuler
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                {{ $carousel ? 'Mettre à jour' : 'Créer' }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.btn_actif .toggle-btn {
    min-width: 220px;
    display: inline-flex;
    justify-content: center;
}

.card-header .card-tools {
    gap: 10px;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* État inactif par défaut */
.toggle-btn {
    background-color: #f8d7da; /* rouge clair */
    color: #842029; /* rouge foncé */
    border-color: #f5c2c7;
}

/* Quand la case est cochée (actif) */
input#is_active:checked + label.toggle-btn {
    background-color: #d1e7dd; /* vert clair */
    color: #0f5132; /* vert foncé */
    border-color: #badbcc;
}

.toggle-btn .state-icon::before {
    content: '\f00d'; /* times */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

input#is_active:checked + label.toggle-btn .state-icon::before {
    content: '\f00c'; /* check */
}

.toggle-btn .state-text-on { display: none; }
.toggle-btn .state-text-off { display: inline; }

input#is_active:checked + label.toggle-btn .state-text-on { display: inline; }
input#is_active:checked + label.toggle-btn .state-text-off { display: none; }

.toggle-btn:focus-visible,
input#is_active:focus + label.toggle-btn {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Styles personnalisés du switch retirés pour éviter les bugs d'affichage */
</style>
@endpush

@push('scripts')
<script>
// Données existantes pour pré-remplissage
@php
    $existingRuleData = [];
    if ($carousel && $carousel->rule) {
        $existingRuleData = json_decode($carousel->rule, true);
    }
@endphp
const existingData = @json($existingRuleData);

document.addEventListener('DOMContentLoaded', function() {
    console.log('Carousel edit script loaded');

    // Génération automatique du slug lors de la saisie du titre
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');

    // Fonction pour générer le slug automatiquement (sans bouton)
    function generateSlugAuto(sourceId, targetId) {
        const sourceInput = document.getElementById(sourceId);
        const targetInput = document.getElementById(targetId);

        if (!sourceInput || !targetInput || !sourceInput.value) {
            return;
        }

        // Appel Ajax pour générer le slug
        fetch('{{ route('generate.slug') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                text: sourceInput.value
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                targetInput.value = data.slug;
            }
        })
        .catch(error => {
            console.error('Error generating slug:', error);
        });
    }

    if (titleInput && slugInput) {
        let slugGenerationTimeout;
        titleInput.addEventListener('input', function() {
            // Ne générer le slug que si le champ slug est vide
            if (!slugInput.value) {
                // Debounce pour éviter trop d'appels
                clearTimeout(slugGenerationTimeout);
                slugGenerationTimeout = setTimeout(function() {
                    generateSlugAuto('title', 'slug');
                }, 300); // Attendre 300ms après la dernière frappe
            }
        });
    }

    // Gestion du changement de type de carousel
    const typeSelect = document.getElementById('type');
    const ruleInput = document.getElementById('rule');

    // Fonction pour afficher le formulaire correspondant au type
    function showFormForType(type) {
        console.log('showFormForType called with type:', type);

        // Masquer tous les formulaires
        document.querySelectorAll('.carousel-form').forEach(form => {
            form.style.display = 'none';
        });

        // Afficher le formulaire correspondant
        switch(type) {
            case 'programmes':
                const personalizedForm = document.getElementById('personalized-form');
                if (personalizedForm) {
                    personalizedForm.style.display = 'block';
                    console.log('Showing personalized form');
                } else {
                    console.log('personalized-form element not found');
                }
                break;
            case 'criteres':
                const criteresForm = document.getElementById('criteres-form');
                if (criteresForm) {
                    criteresForm.style.display = 'block';
                    console.log('Showing criteres form');
                } else {
                    console.log('criteres-form element not found');
                }
                break;
            default:
                console.log('Unknown type:', type);
        }
    }

    // Fonction pour mettre à jour la règle JSON
    function updateRule() {
        const type = typeSelect.value;
        let rule = {};

        switch(type) {
            case 'programmes':
                const selectedPrograms = Array.from(document.querySelectorAll('.program-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => parseInt(checkbox.value));
                rule = {
                    type: 'programmes',
                    programs: selectedPrograms,
                    created_at: new Date().toISOString()
                };
                break;

            case 'criteres':
                const commissionMin = document.getElementById('commission_min')?.value || null;
                const commissionMax = document.getElementById('commission_max')?.value || null;
                // Les IDs de fiscalités seront convertis en valeurs d'enum par le contrôleur
                // On garde les IDs ici, le contrôleur les convertira
                const selectedCritereFiscaliteIds = Array.from(document.querySelectorAll('.critere-fiscalite-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => parseInt(checkbox.value));
                const deliveryYears = Array.from(document.getElementById('delivery_year')?.selectedOptions || [])
                    .map(option => parseInt(option.value));
                const quoteTravauxMin = document.getElementById('quote_travaux_min')?.value || null;
                const quoteTravauxMax = document.getElementById('quote_travaux_max')?.value || null;
                const selectedPrestations = Array.from(document.querySelectorAll('.critere-prestation-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.value);
                const localisationCity = document.getElementById('localisation_city')?.value || null;
                const localisationPostalCode = document.getElementById('localisation_postal_code')?.value || null;
                const prixMin = document.getElementById('prix_min')?.value || null;
                const prixMax = document.getElementById('prix_max')?.value || null;
                const selectedMarketing = Array.from(document.querySelectorAll('.critere-marketing-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.value);

                rule = {
                    type: 'criteres',
                    commission_min: commissionMin ? parseFloat(commissionMin) : null,
                    commission_max: commissionMax ? parseFloat(commissionMax) : null,
                    // Les fiscalités seront converties en valeurs d'enum par le contrôleur
                    // On stocke temporairement les IDs, mais le contrôleur les convertira
                    fiscalites: selectedCritereFiscaliteIds,
                    delivery_years: deliveryYears,
                    quote_travaux_min: quoteTravauxMin ? parseFloat(quoteTravauxMin) : null,
                    quote_travaux_max: quoteTravauxMax ? parseFloat(quoteTravauxMax) : null,
                    prestations: selectedPrestations,
                    localisation_city: localisationCity,
                    localisation_postal_code: localisationPostalCode,
                    prix_min: prixMin ? parseFloat(prixMin) : null,
                    prix_max: prixMax ? parseFloat(prixMax) : null,
                    marketing: selectedMarketing,
                    created_at: new Date().toISOString()
                };
                break;
        }

        ruleInput.value = JSON.stringify(rule);
    }

    // Écouter les changements sur le type
    if (typeSelect) {
        console.log('Type select element found, adding change listener');
        typeSelect.addEventListener('change', function() {
            console.log('Type changed to:', this.value);
            showFormForType(this.value);
            updateRule();
        });
    } else {
        console.log('Type select element not found!');
    }

    // Écouter les changements sur les checkboxes de programmes
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('program-checkbox')) {
            updateRule();
        }
    });

    // Écouter les changements sur les champs de critères
    document.addEventListener('change', function(e) {
        if (e.target.closest('#criteres-form')) {
            updateRule();
        }
    });

    // Écouter les changements sur les inputs de critères
    document.addEventListener('input', function(e) {
        if (e.target.closest('#criteres-form')) {
            updateRule();
        }
    });

    // Initialiser l'affichage au chargement
    const currentType = typeSelect.value;
    console.log('Current type on load:', currentType);
    if (currentType) {
        showFormForType(currentType);
    } else {
        console.log('No type selected on load');
    }

    // Pré-remplir les données existantes
    if (existingData && Object.keys(existingData).length > 0) {
        setTimeout(() => {
            // Pré-remplir les programmes
            if (existingData.programs && Array.isArray(existingData.programs)) {
                existingData.programs.forEach(programId => {
                    const checkbox = document.getElementById('program_' + programId);
                    if (checkbox) checkbox.checked = true;
                });
            }

            // Pré-remplir les critères
            if (existingData.type === 'criteres') {
                if (existingData.commission_min) {
                    const commissionMinInput = document.getElementById('commission_min');
                    if (commissionMinInput) commissionMinInput.value = existingData.commission_min;
                }
                if (existingData.commission_max) {
                    const commissionMaxInput = document.getElementById('commission_max');
                    if (commissionMaxInput) commissionMaxInput.value = existingData.commission_max;
                }
                if (existingData.fiscalites && Array.isArray(existingData.fiscalites)) {
                    existingData.fiscalites.forEach(fiscaliteId => {
                        const checkbox = document.getElementById('critere_fiscalite_' + fiscaliteId);
                        if (checkbox) checkbox.checked = true;
                    });
                }
                if (existingData.delivery_years && Array.isArray(existingData.delivery_years)) {
                    const deliveryYearSelect = document.getElementById('delivery_year');
                    if (deliveryYearSelect) {
                        existingData.delivery_years.forEach(year => {
                            const option = Array.from(deliveryYearSelect.options).find(opt => parseInt(opt.value) === year);
                            if (option) option.selected = true;
                        });
                    }
                }
                if (existingData.quote_travaux_min) {
                    const quoteTravauxMinInput = document.getElementById('quote_travaux_min');
                    if (quoteTravauxMinInput) quoteTravauxMinInput.value = existingData.quote_travaux_min;
                }
                if (existingData.quote_travaux_max) {
                    const quoteTravauxMaxInput = document.getElementById('quote_travaux_max');
                    if (quoteTravauxMaxInput) quoteTravauxMaxInput.value = existingData.quote_travaux_max;
                }
                if (existingData.prestations && Array.isArray(existingData.prestations)) {
                    existingData.prestations.forEach(prestationValue => {
                        const checkbox = document.getElementById('critere_prestation_' + prestationValue);
                        if (checkbox) checkbox.checked = true;
                    });
                }
                if (existingData.localisation_city) {
                    const localisationCityInput = document.getElementById('localisation_city');
                    if (localisationCityInput) localisationCityInput.value = existingData.localisation_city;
                }
                if (existingData.localisation_postal_code) {
                    const localisationPostalCodeInput = document.getElementById('localisation_postal_code');
                    if (localisationPostalCodeInput) localisationPostalCodeInput.value = existingData.localisation_postal_code;
                }
                if (existingData.prix_min) {
                    const prixMinInput = document.getElementById('prix_min');
                    if (prixMinInput) prixMinInput.value = existingData.prix_min;
                }
                if (existingData.prix_max) {
                    const prixMaxInput = document.getElementById('prix_max');
                    if (prixMaxInput) prixMaxInput.value = existingData.prix_max;
                }
                if (existingData.marketing && Array.isArray(existingData.marketing)) {
                    existingData.marketing.forEach(marketingValue => {
                        const checkbox = document.getElementById('critere_marketing_' + marketingValue);
                        if (checkbox) checkbox.checked = true;
                    });
                }
            }
        }, 100);
    }

    // Initialiser la règle
    updateRule();
});
</script>
@endpush

<!-- Slug Generator Component -->
<x-slug-generator />