@extends('layouts.front')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">
<style>
    /* Styles pour le stepper */
    .stepper {
        display: flex;
        justify-content: space-between;
        margin: 2rem 0 3rem;
        position: relative;
        flex-wrap: wrap;
    }
    #expected-results-container,#specific-objectives-container,#budget-items-container
    {
        border: 1px solid #2ecc71;
        border-radius: 5px;
        margin: .5rem;
        padding: 1rem;
    }
    .stepper::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e0e0e0;
        z-index: 1;
    }

    .step {
        position: relative;
        z-index: 2;
        text-align: center;
        width: 20%;
        min-width: 120px;
        margin-bottom: 1rem;
    }

    .step-number {
        width: 30px;
        height: 30px;
        background: #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem;
        color: #fff;
        font-weight: bold;
    }

    .step.active .step-number {
        background: #4CAF50;
    }

    .step.completed .step-number {
        background: #4CAF50;
    }

    .step.completed .step-number::after {
        content: '✓';
    }

    .step-label {
        font-size: 0.8rem;
        color: #666;
    }

    .step.active .step-label {
        font-weight: bold;
        color: #333;
    }

    .form-section {
        display: none;
        animation: fadeIn 0.3s ease-in-out;
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .form-section.active {
        display: block;
    }

    .form-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        padding: 1.5rem 0;
        border-top: 1px solid #eee;
    }
    
    .section-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .section-header h3 {
        color: #2c3e50;
        font-weight: 600;
        margin: 0;
    }
    
    .section-header i {
        margin-right: 10px;
        color: #3498db;
    }
    
    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #34495e;
    }
    
    .form-label.required:after {
        content: " *";
        color: #e74c3c;
    }
    
    .form-control, .form-textarea {
        border-radius: 4px;
        border: 1px solid #ddd;
        padding: 0.75rem 1rem;
        transition: all 0.3s;
    }
    
    .form-control:focus, .form-textarea:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }
    
    .form-textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    
    .form-group {
        flex: 1;
        padding: 0 15px;
        margin-bottom: 1.5rem;
        min-width: 0;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        transition: all 0.3s;
    }
    
    .btn-primary {
        background-color: #3498db;
        border-color: #3498db;
    }
    
    .btn-primary:hover {
        background-color: #2980b9;
        border-color: #2980b9;
    }
    
    .btn-secondary {
        background-color: #95a5a6;
        border-color: #95a5a6;
    }
    
    .btn-success {
        background-color: #2ecc71;
        border-color: #2ecc71;
    }
    
    .btn-danger {
        background-color: #e74c3c;
        border-color: #e74c3c;
    }
    
    .btn-sm {
        padding: 0.4rem 0.8rem;
        font-size: 0.875rem;
    }
    
    .progress-container {
        margin: 1.5rem 0;
    }
    
    .progress-bar {
        height: 8px;
        background-color: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }
    
    .progress-fill {
        height: 100%;
        background-color: #3498db;
        width: 0%;
        transition: width 0.3s ease;
    }
    
    .progress-text {
        text-align: right;
        color: #6c757d;
        font-size: 0.875rem;
    }
    
    .input-group .btn {
        padding: 0.375rem 0.75rem;
    }
    
    .input-group-text {
        background-color: #f8f9fa;
    }
    
    .is-invalid {
        border-color: #e74c3c !important;
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e74c3c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    
    .is-invalid:focus {
        border-color: #e74c3c;
        box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
    }
    
    .invalid-feedback {
        display: none;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #e74c3c;
    }
    
    .is-invalid ~ .invalid-feedback {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush
@section('content')
    <div class="container py-3">
        @if($errors->any())
            <div class="alert alert-danger">
                <h5><i class="fas fa-exclamation-triangle"></i> Erreur de validation</h5>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <div class="form-container">
            <div class="form-title">
                <i class="fas fa-file-invoice-dollar"></i> @lang('financement.funding_request_form')
            </div>
            
            <!-- Stepper -->
            <div class="stepper">
                <div class="step active" data-step="1">
                    <div class="step-number">1</div>
                    <div class="step-label">@lang('financement.applicant_info')</div>
                </div>
                <div class="step" data-step="2">
                    <div class="step-number">2</div>
                    <div class="step-label">@lang('financement.project_info')</div>
                </div>
                <div class="step" data-step="3">
                    <div class="step-number">3</div>
                    <div class="step-label">@lang('financement.development_issues')</div>
                </div>
                <div class="step" data-step="4">
                    <div class="step-number">4</div>
                    <div class="step-label">@lang('financement.objectives')</div>
                </div>
                <div class="step" data-step="5">
                    <div class="step-number">5</div>
                    <div class="step-label">@lang('financement.budget')</div>
                </div>
            </div>
            
            <!-- Progress Bar -->
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%;"></div>
                </div>
                <div class="progress-text" id="progressText">0% @lang('financement.complete')</div>
            </div>
            
            <!-- Form Content -->
            <form id="fundingForm" action="{{ route('financements.store') }}" method="POST" enctype="multipart/form-data" class="form-content my-3 needs-validation" novalidate>
                @csrf
                
                <!-- Section 1: Identité du Soumissionnaire -->
                <div class="form-section active" id="section-1">
                    <div class="section-header">
                        <i class="fas fa-user-tie"></i>
                        <h3>1. @lang('financement.applicant_identity')</h3>
                    </div>
                    <!-- Informations de la structure -->
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.organization_name')</label>
                            <input type="text" name="nom_structure" class="form-control" required>
                        </div>
                    </div>

                    <!-- Contact du demandeur -->
                    <div class="contact-section mb-4">
                        <h5 class="mb-3">@lang('financement.contact_person')</h5>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="form-label required">@lang('financement.postal_address_requerant')</label>
                                <input type="text" name="adresse_requerant" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.phone_requerant')</label>
                                <input type="tel" name="telephone_requerant" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.email_requerant')</label>
                                <input type="email" name="email_requerant" class="form-control" required>
                            </div>
                        </div>
                    </div>

                    <!-- Responsable -->
                    <div class="responsible-section">
                        <h5 class="mb-3">@lang('financement.responsable')</h5>
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.contact_title')</label>
                                <input type="text" name="titre_responsable" class="form-control" placeholder="Ex: Directeur, PDG, Président" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.nom_responsable')</label>
                                <input type="text" name="nom_responsable" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.prenom_responsable')</label>
                                <input type="text" name="prenom_responsable" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.telephone_responsable')</label>
                                <input type="tel" name="telephone_responsable" class="form-control" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-label required">@lang('financement.email_responsable')</label>
                                <input type="email" name="email_responsable" class="form-control" required>
                            </div>
                        </div>
                    </div>

                    <!-- Siège social -->
                    <div class="form-row mt-3">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.headquarters')</label>
                            <input type="text" name="siege_social" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">@lang('financement.previous_experience')</label>
                            <textarea name="experience_anterieure" class="form-textarea" rows="4"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary" disabled>@lang('financement.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="2">@lang('financement.next')</button>
                    </div>
                </div>
                
                <!-- Section 2: Présentation du Projet -->
                <div class="form-section" id="section-2">
                    <div class="section-header">
                        <i class="fas fa-project-diagram"></i>
                        <h3>2. @lang('financement.project_presentation')</h3>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.project_title')</label>
                            <input type="text" name="titre_projet" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.intervention_domain')</label>
                            <input type="text" name="domaine_intervention" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.intervention_zone')</label>
                            <input type="text" name="zone_intervention" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.duration_months')</label>
                            <input type="text" name="duree_projet" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.start_date')</label>
                            <input type="date" name="date_debut" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.key_findings')</label>
                            <textarea name="constats_majeurs" class="form-textarea" rows="4" required></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.justification')</label>
                            <textarea name="justification_projet" class="form-textarea" rows="4" required></textarea>
                        </div>
                    </div>
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="1">@lang('financement.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="3">@lang('financement.next')</button>
                    </div>
                </div>
                
                <!-- Section 3: Objectifs -->
                <div class="form-section" id="section-3">
                    <div class="section-header">
                        <i class="fas fa-bullseye"></i>
                        <h3>3. @lang('financement.objectives')</h3>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.overall_objective')</label>
                            <textarea name="objectif_general" class="form-textarea" rows="3" required></textarea>
                        </div>
                    </div>
                    
                    <div id="specific-objectives-container">
                        <div class="form-group specific-objective">
                            <label class="form-label required">@lang('financement.specific_objectives')</label>
                            <div class="input-group mb-2">
                                <input type="text" name="objectifs_specifiques[]" class="form-control" required>
                                <button type="button" class="btn btn-danger remove-objective" style="display: none;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-success btn-sm" id="add-objective">
                        <i class="fas fa-plus"></i> Ajouter un objectif
                    </button>
                    
                    <div class="form-navigation mt-4">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="2">@lang('financement.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="4">@lang('financement.next')</button>
                    </div>
                </div>
                
                <!-- Section 4: Résultats Attendus -->
                <div class="form-section" id="section-4">
                    <div class="section-header">
                        <i class="fas fa-chart-line"></i>
                        <h3>4. @lang('financement.expected_results')</h3>
                    </div>
                    
                    <div id="expected-results-container">
                        <div class="form-group expected-result">
                            <div class="input-group mb-2">
                                <input type="text" name="resultats_attendus[]" class="form-control" required>
                                <button type="button" class="btn btn-danger remove-result" style="display: none;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-success btn-sm" id="add-result">
                        <i class="fas fa-plus"></i> Ajouter un résultat attendu
                    </button>
                    
                    <!-- Bénéficiaires -->
                    <div class="mt-4">
                        <h5>@lang('financement.beneficiaries')</h5>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.direct_beneficiaries')</label>
                                <textarea name="beneficiaires_directs" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.indirect_beneficiaries')</label>
                                <textarea name="beneficiaires_indirects" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="3">@lang('financement.previous')</button>
                        <button type="button" class="btn btn-primary next-btn" data-next="5">@lang('financement.next')</button>
                    </div>
                </div>
                
                <!-- Section 5: Budget -->
                <div class="form-section" id="section-5">
                    <div class="section-header">
                        <i class="fas fa-money-bill-wave"></i>
                        <h3>5. @lang('financement.budget')</h3>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.total_project_cost') (FCFA)</label>
                            <input type="number" name="cout_total" class="form-control" min="0" step="0.01" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label required">@lang('financement.funding_requested') (FCFA)</label>
                            <input type="number" name="montant_sollicite" class="form-control" min="0" step="0.01" required>
                        </div>
                    </div>
                    
                    <h5 class="mt-4">@lang('financement.budget_breakdown')</h5>
                    <div id="budget-items-container">
                        <div class="budget-item form-row">
                            <div class="form-group" style="flex: 2;">
                                <label class="form-label">@lang('financement.item_description')</label>
                                <input type="text" name="budget_items[0][description]" class="form-control">
                            </div>
                            <div class="form-group" style="flex: 1;">
                                <label class="form-label">@lang('financement.amount') (FCFA)</label>
                                <input type="number" name="budget_items[0][amount]" class="form-control" min="0" step="0.01">
                            </div>
                            <div class="form-group d-flex align-items-end">
                                <button type="button" class="btn btn-danger remove-budget-item" style="display: none;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-success btn-sm" id="add-budget-item">
                        <i class="fas fa-plus"></i> Ajouter une ligne budgétaire
                    </button>
                    
                    <!-- Alignement Stratégique -->
                    <div class="mt-4">
                        <h5>@lang('financement.strategic_alignment')</h5>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.sdg')</label>
                                <select name="odd" class="form-control">
                                    <option value="">@lang('financement.select_sdg')</option>
                                    @foreach (__('odd') as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.ndc_contribution')</label>
                                <textarea name="contribution_cdn" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.nap_alignment')</label>
                                <textarea name="alignement_pna" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.snem_alignment')</label>
                                <textarea name="alignement_snem" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">@lang('financement.other_documents')</label>
                                <textarea name="autres_documents" class="form-textarea" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                
                    
                    <div class="form-navigation">
                        <button type="button" class="btn btn-secondary prev-btn" data-prev="4">@lang('financement.previous')</button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-paper-plane"></i> @lang('financement.submit')
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion de la navigation entre les étapes
        const formSections = document.querySelectorAll('.form-section');
        const prevBtns = document.querySelectorAll('.prev-btn');
        const nextBtns = document.querySelectorAll('.next-btn');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');
        const totalSections = document.querySelectorAll('.form-section').length;
        
        // Fonction pour afficher une section et masquer les autres
        function showSection(sectionNumber) {
            formSections.forEach((section, index) => {
                if (index + 1 === sectionNumber) {
                    section.style.display = 'block';
                    // Mettre à jour le stepper
                    document.querySelectorAll('.step').forEach((step, i) => {
                        if (i + 1 < sectionNumber) {
                            step.classList.add('completed');
                            step.classList.remove('active');
                        } else if (i + 1 === sectionNumber) {
                            step.classList.add('active');
                            step.classList.remove('completed');
                        } else {
                            step.classList.remove('active', 'completed');
                        }
                    });
                    
                    // Mettre à jour la barre de progression
                    const progress = ((sectionNumber - 1) / (totalSections - 1)) * 100;
                    progressFill.style.width = `${progress}%`;
                    progressText.textContent = `${Math.round(progress)}% complété`;
                    
                    // Faire défiler vers le haut de la section
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                } else {
                    section.style.display = 'none';
                }
            });
        }
        
        // Gestion des boutons Suivant
        nextBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const currentSection = this.closest('.form-section');
                const nextSectionId = this.getAttribute('data-next');
                
                // Valider la section actuelle avant de passer à la suivante
                if (validateSection(currentSection)) {
                    showSection(parseInt(nextSectionId));
                }
            });
        });
        
        // Gestion des boutons Précédent
        prevBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const prevSectionId = this.getAttribute('data-prev');
                showSection(parseInt(prevSectionId));
            });
        });
        
        // Fonction de validation d'une section
        function validateSection(section) {
            const requiredFields = section.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                }
            });
            
            if (!isValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Champs requis',
                    text: 'Veuillez remplir tous les champs obligatoires avant de continuer.',
                    confirmButtonColor: '#3498db'
                });
                
                // Faire défiler jusqu'au premier champ invalide
                const firstInvalid = section.querySelector('.is-invalid');
                if (firstInvalid) {
                    firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstInvalid.focus();
                }
            }
            
            return isValid;
        }
        
        // Gestion de l'ajout d'objectifs spécifiques
        const addObjectiveBtn = document.getElementById('add-objective');
        const objectivesContainer = document.getElementById('specific-objectives-container');
        let objectiveCount = 1;
        
        if (addObjectiveBtn) {
            addObjectiveBtn.addEventListener('click', function() {
                const newObjective = document.createElement('div');
                newObjective.className = 'form-group specific-objective';
                newObjective.innerHTML = `
                    <div class="input-group mb-2">
                        <input type="text" name="specific_objectives[]" class="form-control" placeholder="@lang('financement.objective_placeholder')" required>
                        <button type="button" class="btn btn-danger remove-objective">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
                
                objectivesContainer.appendChild(newObjective);
                objectiveCount++;
                
                // Afficher les boutons de suppression pour tous les objectifs sauf le premier
                if (objectiveCount > 1) {
                    document.querySelectorAll('.remove-objective').forEach(btn => {
                        btn.style.display = 'block';
                    });
                }
            });
            
            // Délégation d'événement pour les boutons de suppression d'objectifs
            objectivesContainer.addEventListener('click', function(e) {
                if (e.target.closest('.remove-objective')) {
                    const objectiveToRemove = e.target.closest('.specific-objective');
                    if (document.querySelectorAll('.specific-objective').length > 1) {
                        objectiveToRemove.remove();
                        objectiveCount--;
                        
                        // Masquer les boutons de suppression s'il ne reste qu'un seul objectif
                        if (objectiveCount <= 1) {
                            document.querySelector('.remove-objective').style.display = 'none';
                        }
                    }
                }
            });
        }
        
        // Gestion de l'ajout de résultats attendus
        const addResultBtn = document.getElementById('add-result');
        const resultsContainer = document.getElementById('expected-results-container');
        let resultCount = 1;
        
        if (addResultBtn) {
            addResultBtn.addEventListener('click', function() {
                const newResult = document.createElement('div');
                newResult.className = 'form-group expected-result';
                newResult.innerHTML = `
                    <div class="input-group mb-2">
                        <input type="text" name="expected_results[]" class="form-control" placeholder="@lang('financement.result_placeholder')" required>
                        <button type="button" class="btn btn-danger remove-result">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
                
                resultsContainer.appendChild(newResult);
                resultCount++;
                
                // Afficher les boutons de suppression pour tous les résultats sauf le premier
                if (resultCount > 1) {
                    document.querySelectorAll('.remove-result').forEach(btn => {
                        btn.style.display = 'block';
                    });
                }
            });
            
            // Délégation d'événement pour les boutons de suppression de résultats
            resultsContainer.addEventListener('click', function(e) {
                if (e.target.closest('.remove-result')) {
                    const resultToRemove = e.target.closest('.expected-result');
                    if (document.querySelectorAll('.expected-result').length > 1) {
                        resultToRemove.remove();
                        resultCount--;
                        
                        // Masquer les boutons de suppression s'il ne reste qu'un seul résultat
                        if (resultCount <= 1) {
                            document.querySelector('.remove-result').style.display = 'none';
                        }
                    }
                }
            });
        }
        
        // Gestion de l'ajout de lignes budgétaires
        const addBudgetItemBtn = document.getElementById('add-budget-item');
        const budgetItemsContainer = document.getElementById('budget-items-container');
        let budgetItemCount = 1;
        
        if (addBudgetItemBtn) {
            addBudgetItemBtn.addEventListener('click', function() {
                const newItem = document.createElement('div');
                newItem.className = 'budget-item form-row';
                newItem.innerHTML = `
                    <div class="form-group" style="flex: 2;">
                        <input type="text" name="budget_items[${budgetItemCount}][description]" class="form-control" placeholder="@lang('financement.item_description')">
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <div class="input-group">
                            <input type="number" name="budget_items[${budgetItemCount}][amount]" class="form-control" min="0" step="0.01" placeholder="0.00">
                            <span class="input-group-text">FCFA</span>
                        </div>
                    </div>
                    <div class="form-group d-flex align-items-end">
                        <button type="button" class="btn btn-danger remove-budget-item">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                budgetItemsContainer.appendChild(newItem);
                budgetItemCount++;
                
                // Afficher les boutons de suppression pour tous les éléments sauf le premier
                if (budgetItemCount > 1) {
                    document.querySelectorAll('.remove-budget-item').forEach(btn => {
                        btn.style.display = 'block';
                    });
                }
            });
            
            // Délégation d'événement pour les boutons de suppression de lignes budgétaires
            budgetItemsContainer.addEventListener('click', function(e) {
                if (e.target.closest('.remove-budget-item')) {
                    const itemToRemove = e.target.closest('.budget-item');
                    if (document.querySelectorAll('.budget-item').length > 1) {
                        itemToRemove.remove();
                        budgetItemCount--;
                        
                        // Masquer les boutons de suppression s'il ne reste qu'un seul élément
                        if (budgetItemCount <= 1) {
                            document.querySelector('.remove-budget-item').style.display = 'none';
                        }
                    }
                }
            });
        }
        
        // Validation du formulaire avant soumission
        const fundingForm = document.getElementById('fundingForm');
        if (fundingForm) {
            fundingForm.addEventListener('submit', function(e) {
                // Valider la dernière section avant soumission
                const lastSection = document.querySelector('.form-section:last-child');
                if (!validateSection(lastSection)) {
                    e.preventDefault();
                    return false;
                }
                
                // Afficher un indicateur de chargement
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Soumission en cours...';
                
            });
        }
        
        // Afficher la première section au chargement
        showSection(1);
    });

    // Fonction pour mettre à jour la progression du formulaire
    function updateFormProgress() {
        const form = document.getElementById('fundingForm');
        const requiredInputs = form.querySelectorAll('input[required], textarea[required], select[required]');
        let filledCount = 0;
        
        requiredInputs.forEach(input => {
            if (input.type === 'checkbox' || input.type === 'radio') {
                if (input.checked) filledCount++;
            } else if (input.type === 'file') {
                // Pour les champs de fichier, on vérifie s'il y a des fichiers sélectionnés
                if (input.files && input.files.length > 0) {
                    filledCount++;
                }
            } else if (input.value.trim() !== '') {
                filledCount++;
            }
        });
        
        const percentage = Math.round((filledCount / requiredInputs.length) * 100);
        progressFill.style.width = `${percentage}%`;
        progressText.textContent = `${percentage}% @lang('financement.complete')`;
    }
    
    // Ajouter des écouteurs d'événements pour mettre à jour la progression
    document.querySelectorAll('input, textarea, select').forEach(input => {
        input.addEventListener('change', updateFormProgress);
        input.addEventListener('input', updateFormProgress);
    });
    
    // Mettre à jour la progression au chargement de la page
    updateFormProgress();
    
    // Gestion des champs de fichier
    document.querySelectorAll('input[type="file"]').forEach(fileInput => {
        fileInput.addEventListener('change', function() {
            const fileList = this.nextElementSibling;
            if (fileList && fileList.classList.contains('file-list')) {
                fileList.innerHTML = '';
                
                Array.from(this.files).forEach(file => {
                    const fileItem = document.createElement('div');
                    fileItem.className = 'file-item';
                    fileItem.innerHTML = `
                        <i class="fas fa-file-alt"></i>
                        <span>${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)</span>
                    `;
                    fileList.appendChild(fileItem);
                });
            }
            
            updateFormProgress();
        });
    });
    
    // Validation des champs numériques
    document.querySelectorAll('input[type="number"]').forEach(input => {
        input.addEventListener('input', function() {
            if (this.value < 0) {
                this.value = 0;
            }
        });
    });
    
    // Formatage des montants
    const currencyInputs = document.querySelectorAll('input[data-type="currency"]');
    currencyInputs.forEach(input => {
        input.addEventListener('input', function() {
            // Formatage du nombre avec des séparateurs de milliers
            let value = this.value.replace(/[^0-9]/g, '');
            if (value) {
                value = parseInt(value, 10).toLocaleString('fr-FR');
                this.value = value;
            }
        });
    });
    
    // Initialisation du datepicker si nécessaire
    if (typeof flatpickr !== 'undefined') {
        flatpickr('input[type="date"]', {
            dateFormat: 'Y-m-d',
            allowInput: true
        });
    }
        currencyInputs.forEach(input => {
            input.addEventListener('blur', function() {
                if (this.value) {
                    const formatted = parseFloat(this.value).toLocaleString('fr-FR');
                    const label = this.parentElement.querySelector('.form-label');
                    if (label && !label.querySelector('.formatted-value')) {
                        const span = document.createElement('span');
                        span.className = 'formatted-value';
                        span.style.cssText = 'color: #2e8b57; font-weight: normal; margin-left: 0.5rem;';
                        span.textContent = `(${formatted} FCFA)`;
                        label.appendChild(span);
                    }
                }
            });
        });

        // Initialize progress on load
        updateProgress();

        // Smooth scroll to top button
        window.addEventListener('scroll', function() {
            const scrollBtn = document.getElementById('scrollTopBtn');
            if (!scrollBtn) {
                const btn = document.createElement('button');
                btn.id = 'scrollTopBtn';
                btn.innerHTML = '<i class="fas fa-arrow-up"></i>';
                btn.style.cssText = `
                    position: fixed;
                    bottom: 2rem;
                    right: 2rem;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, #2e8b57, #228b22);
                    color: white;
                    border: none;
                    cursor: pointer;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.2rem;
                    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.3);
                    transition: all 0.3s ease;
                    z-index: 1000;
                `;
                btn.addEventListener('click', function() {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
                document.body.appendChild(btn);
            }
            
            const scrollTopBtn = document.getElementById('scrollTopBtn');
            if (window.pageYOffset > 300) {
                scrollTopBtn.style.display = 'flex';
            } else {
                scrollTopBtn.style.display = 'none';
            }
        });
    </script> 
    <script>
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
@endpush