{% extends 'base.html.twig' %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow">
                {% for success in app.flashes('success') %}
                    <div class="alert alert-success" role="alert">{{ success|raw }}</div>
                {% endfor %}
                    <div class="card-header bg-eolia text-white py-3 d-flex justify-content-between align-items-center">
                        <h3 class="h4 mb-0"><i class="fas fa-user-edit me-2"></i> Modification de votre profil</h3>
                    </div>
                    <div class="card-body">
                        {{ form_start(form, {'attr': {'class': 'needs-validation'}}) }}
                        
                        <div class="row g-4">
                            <!-- Informations de base -->
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3"><i class="fas fa-id-card me-2 text-eolia"></i>Mes Informations personnelles</h5>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.username, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Nom d\'utilisateur'
                                        }
                                    }) }}
                                    <label for="{{ form.username.vars.id }}">Nom d'utilisateur</label>
                                    {{ form_errors(form.username) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.mail, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Adresse email'
                                        }
                                    }) }}
                                    <label for="{{ form.mail.vars.id }}">Adresse email</label>
                                    {{ form_errors(form.mail) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.prenom, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Prénom'
                                        }
                                    }) }}
                                    <label for="{{ form.prenom.vars.id }}">Prénom</label>
                                    {{ form_errors(form.prenom) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.nom, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Nom'
                                        }
                                    }) }}
                                    <label for="{{ form.nom.vars.id }}">Nom</label>
                                    {{ form_errors(form.nom) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.dateNaiss, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Date de naissance'
                                        }
                                    }) }}
                                    <label for="{{ form.dateNaiss.vars.id }}">Date de naissance</label>
                                    {{ form_errors(form.dateNaiss) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.civilite, {
                                        'attr': {
                                            'class': 'form-select',
                                            'placeholder': 'Civilité'
                                        }
                                    }) }}
                                    <label for="{{ form.civilite.vars.id }}">Civilité</label>
                                    {{ form_errors(form.civilite) }}
                                </div>
                            </div>
                            
                            <!-- Coordonnées -->
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3"><i class="fas fa-map-marked-alt me-2 text-eolia"></i>Mes Coordonnées</h5>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.rue, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Rue'
                                        }
                                    }) }}
                                    <label for="{{ form.rue.vars.id }}">Rue</label>
                                    {{ form_errors(form.rue) }}
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.codePostal, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Code postal'
                                        }
                                    }) }}
                                    <label for="{{ form.codePostal.vars.id }}">Code postal</label>
                                    {{ form_errors(form.codePostal) }}
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.ville, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Ville'
                                        }
                                    }) }}
                                    <label for="{{ form.ville.vars.id }}">Ville</label>
                                    {{ form_errors(form.ville) }}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.telephone, {
                                        'attr': {
                                            'class': 'form-control',
                                            'placeholder': 'Téléphone'
                                        }
                                    }) }}
                                    <label for="{{ form.telephone.vars.id }}">Téléphone</label>
                                    {{ form_errors(form.telephone) }}
                                </div>
                            </div>
                            
                            <!-- Informations sportives -->
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3"><i class="fas fa-running me-2 text-eolia"></i>Mes souscriptions</h5>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(form.sportPrincipal, {
                                        'attr': {
                                            'class': 'form-select',
                                            'placeholder': 'Sport principal'
                                        }
                                    }) }}
                                    <label for="{{ form.sportPrincipal.vars.id }}">Sport principal</label>
                                    {{ form_errors(form.sportPrincipal) }}
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <div class="forfait-custom-wrapper">
                                        <!-- Hidden Symfony form -->
                                        <div class="d-none">
                                            {{ form_widget(form.forfaits) }}
                                        </div>
                                        
                                        <!-- Custom dropdown interface -->
                                        <div class="forfait-custom-dropdown">
                                            <div class="forfait-dropdown-toggle">
                                                <span class="forfait-dropdown-text"></span>
                                                <i class="fas fa-chevron-down forfait-dropdown-arrow"></i>
                                            </div>
                                            <div class="forfait-dropdown-menu">
                                                {% for forfait in forfaits %}
                                                    <div class="forfait-dropdown-item" 
                                                         data-forfait-id="{{ forfait.id }}" 
                                                         data-capacity="{{ forfait.capacity }}"
                                                         data-current-usage="{{ forfait.currentUsage }}"
                                                         data-is-full="{{ forfait.isFull ? 'true' : 'false' }}"
                                                         data-is-forced="{{ forfait.isForced ? 'true' : 'false' }}">
                                                        <input type="checkbox" id="custom_forfait_{{ forfait.id }}" data-target="user_modifier_forfaits_{{ forfait.id }}">
                                                        <label for="custom_forfait_{{ forfait.id }}">
                                                            {{ forfait.nom }} ({{ forfait.prix }}€)
                                                            {% if forfait.capacity %}
                                                                {% if forfait.isFull %}
                                                                    [COMPLET]
                                                                {% else %}
                                                                    ({{ forfait.currentUsage }}/{{ forfait.capacity }})
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if forfait.isForced %}[OBLIGATOIRE]{% endif %}
                                                        </label>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <label><i class="fas fa-ticket-alt me-2"></i>Forfaits et cotisations souscrits</label>
                                    {{ form_errors(form.forfaits) }}
                                </div>
                            </div>
                            
                            <!-- Certificat médical -->
                            <div class="col-12">
                                <h5 class="border-bottom pb-2 mb-3"><i class="fas fa-file-medical me-2 text-eolia"></i>Mes informations médicales</h5>
                            </div>
                            
                            {# <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="date" class="form-control" id="dateCertificatMedical" placeholder="Date de votre certificat médical">
                                    <label for="dateCertificatMedical">Date de votre certificat médical</label>
                                </div>
                            </div> #}
                            
                            <div class="col-12">
                                <div class="card mb-3 bg-light">
                                    <div class="card-body">
                                        <div class="mb-3" id="certificatMedic">
                                            <label class="form-label fw-bold">
                                                <i class="fas fa-file-medical me-2 text-eolia"></i>Certificat médical
                                            </label>
                                            {{ form_widget(form.certificatMedic, {'attr': {'class': 'form-control'}}) }}
                                            <div class="form-text">Téléchargez votre certificat médical (PDF, JPG ou PNG)</div>
                                            
                                            {% if app.user.certificatMedic %}
                                                <div class="mt-2">
                                                    <p class="mb-1"><strong>Certificat actuel (datant du {{ app.user.questionnaireSanteDate|date("Y-m-d") }}) :</strong></p>
                                                    {% set file_extension = app.user.certificatMedic|split('.')|last|lower %}
                                                    {% if file_extension == 'jpg' or file_extension == 'jpeg' or file_extension == 'png' or file_extension == 'gif' %}
                                                        <img src="{{ asset('uploads/images/certificats/' ~ app.user.certificatMedic) }}" 
                                                             class="img-thumbnail" style="max-height: 150px;" 
                                                             alt="Certificat médical">
                                                    {% else %}
                                                        <div class="d-flex align-items-center">
                                                            <i class="fas fa-file-pdf text-danger fa-2x me-2"></i>
                                                            <a href="{{ asset('uploads/images/certificats/' ~ app.user.certificatMedic) }}" 
                                                               target="_blank" class="text-decoration-none">
                                                                Voir le document
                                                            </a>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            {% else %}
                                                <div class="mt-2">
                                                    <p class="mb-1"><strong>Certificat actuel :</strong></p>
                                                    <p class="mb-1">Pas de certificat</p>
                                                </div>
                                            {% endif %}
                                        </div>
                                        
                                        <div class="mb-3" id="questionnaireSante" style="display: block;">
                                            <label class="form-label fw-bold">
                                                <i class="fas fa-clipboard-list me-2 text-eolia"></i>Questionnaire de santé
                                            </label>
                                            {{ form_widget(form.questionnaireSante, {'attr': {'class': 'form-control'}}) }}
                                            <div class="form-text">
                                                Téléchargez votre questionnaire de santé complété
                                                <a href="https://www.formulaires.service-public.fr/gf/cerfa_15699.do" target="_blank" class="ms-2">
                                                    <i class="fas fa-external-link-alt"></i> Télécharger le formulaire
                                                </a>
                                            </div>
                                            
                                            {% if app.user.questionnaireSante %}
                                                <div class="mt-2">
                                                    <p class="mb-1"><strong>Questionnaire actuel (datant du {{ app.user.questionnaireSanteDate|date("Y-m-d") }}):</strong></p>
                                                    {% set file_extension = app.user.questionnaireSante|split('.')|last|lower %}
                                                    {% if file_extension == 'jpg' or file_extension == 'jpeg' or file_extension == 'png' or file_extension == 'gif' %}
                                                        <img src="{{ asset('uploads/images/questionnaires/' ~ app.user.questionnaireSante) }}" 
                                                             class="img-thumbnail" style="max-height: 150px;" 
                                                             alt="Questionnaire de santé">
                                                    {% else %}
                                                        <div class="d-flex align-items-center">
                                                            <i class="fas fa-file-pdf text-danger fa-2x me-2"></i>
                                                            <a href="{{ asset('uploads/images/questionnaires/' ~ app.user.questionnaireSante) }}" 
                                                               target="_blank" class="text-decoration-none">
                                                                Voir le document
                                                            </a>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            {% else %}
                                                <div class="mt-2">
                                                    <p class="mb-1"><strong>Questionnaire actuel :</strong></p>
                                                    <p class="mb-1">Pas de questionnaire</p>
                                                </div>
                                            {% endif %}
                                        </div>                                    
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-12 mt-3">
                                <div class="d-flex flex-wrap gap-2 justify-content-between">
                                    <a href="{{ path('club') }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>Retour
                                    </a>
                                    {{ form_widget(form.save, { 
                                        'label': '<i class="fas fa-save me-2"></i>Enregistrer les modifications',
                                        'attr': {'class': 'btn blue text-white'},
                                        'label_html': true
                                    }) }}
                                </div>
                            </div>
                        </div>
                        
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        /* document.getElementById('dateCertificatMedical').addEventListener('change', function() {
            const inputDate = new Date(this.value);
            const oneYearAgo = new Date();
            const threeYearsAgo = new Date();

            oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
            threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);

            if (inputDate < oneYearAgo && inputDate >= threeYearsAgo) {
                document.getElementById('questionnaireSante').style.display = 'block';
            } else {
                document.getElementById('questionnaireSante').style.display = 'none';
            }
        }); */

        // Custom Forfait Dropdown Functionality  
        document.addEventListener('DOMContentLoaded', function() {
            const dropdown = document.querySelector('.forfait-custom-dropdown');
            const hiddenContainer = document.querySelector('.d-none');
            if (!dropdown || !hiddenContainer) return;

            const toggle = dropdown.querySelector('.forfait-dropdown-toggle');
            const menu = dropdown.querySelector('.forfait-dropdown-menu');
            const dropdownText = dropdown.querySelector('.forfait-dropdown-text');
            const customCheckboxes = dropdown.querySelectorAll('input[type="checkbox"]');
            const hiddenCheckboxes = hiddenContainer.querySelectorAll('input[type="checkbox"]');
            const placeholder = dropdown.getAttribute('data-placeholder') || 'Sélectionner...';

            // Get user's current forfaits
            const userForfaitIds = [
                {% for forfait in user.forfaits %}
                {{ forfait.id }}{% if not loop.last %},{% endif %}
                {% endfor %}
            ];

            // Initialize dropdown based on Symfony form state
            function initializeDropdown() {
                customCheckboxes.forEach(function(customCheckbox) {
                    const forfaitId = parseInt(customCheckbox.closest('.forfait-dropdown-item').getAttribute('data-forfait-id'));
                    const hiddenCheckbox = document.querySelector(`input[name="user_modifier[forfaits][]"][value="${forfaitId}"]`);
                    
                    if (hiddenCheckbox && hiddenCheckbox.checked) {
                        customCheckbox.checked = true;
                    }
                });
                
                // Apply business logic styling
                customCheckboxes.forEach(function(checkbox) {
                    const item = checkbox.closest('.forfait-dropdown-item');
                    const isFull = item.getAttribute('data-is-full') === 'true';
                    const isForced = item.getAttribute('data-is-forced') === 'true';
                    const forfaitId = parseInt(item.getAttribute('data-forfait-id'));
                    const userHadThis = userForfaitIds.includes(forfaitId);

                    if (isForced) {
                        item.classList.add('forced');
                        checkbox.checked = true; // Force check
                    }
                    
                    if (isFull && !userHadThis) {
                        item.classList.add('disabled');
                    }
                });
                
                updateDropdownText();
            }

            // Toggle dropdown
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                dropdown.classList.toggle('active');
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!dropdown.contains(e.target)) {
                    dropdown.classList.remove('active');
                }
            });

            // Handle checkbox changes
            /* function updateDropdownText() {
                const selectedOptions = Array.from(customCheckboxes).filter(cb => cb.checked);
                
                if (selectedOptions.length === 0) {
                    dropdownText.textContent = placeholder;
                    dropdownText.classList.remove('selected');
                } else if (selectedOptions.length === 1) {
                    const label = selectedOptions[0].nextElementSibling.textContent;
                    dropdownText.textContent = label.split('[')[0].trim(); // Remove status tags for display
                    dropdownText.classList.add('selected');
                } else {
                    dropdownText.textContent = selectedOptions.length + ' forfaits sélectionnés';
                    dropdownText.classList.add('selected');
                }
            } */

            customCheckboxes.forEach(function(customCheckbox) {
                customCheckbox.addEventListener('change', function(e) {
                    const item = this.closest('.forfait-dropdown-item');
                    const forfaitId = parseInt(item.getAttribute('data-forfait-id'));
                    const isFull = item.getAttribute('data-is-full') === 'true';
                    const isForced = item.getAttribute('data-is-forced') === 'true';
                    const userHadThis = userForfaitIds.includes(forfaitId);
                    
                    // Prevent deselection of forced forfaits
                    if (isForced && !this.checked) {
                        e.preventDefault();
                        this.checked = true;
                        alert('Ce forfait est obligatoire et ne peut pas être désélectionné.');
                        return false;
                    }
                    
                    // Prevent selection of full forfaits (unless user already had it)
                    if (isFull && this.checked && !userHadThis) {
                        e.preventDefault();
                        this.checked = false;
                        alert('Ce forfait est complet. Vous ne pouvez pas le sélectionner.');
                        return false;
                    }
                    
                    // Sync with hidden Symfony checkbox
                    const hiddenCheckbox = document.querySelector(`input[name="user_modifier[forfaits][]"][value="${forfaitId}"]`);
                    if (hiddenCheckbox) {
                        hiddenCheckbox.checked = this.checked;
                    }
                    
                    updateDropdownText();
                });
            });

            // Prevent menu close when clicking on items
            menu.addEventListener('click', function(e) {
                e.stopPropagation();
            });

            // Initialize everything
            initializeDropdown();
        });
    </script>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}