<!DOCTYPE html>
{% trans_default_domain 'sign-up' %}

<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
      <title>Téléchargeur de vidéos YouTube</title>
      <!-- jQuery -->
      <script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
      <!-- Font Awesome pour les icônes -->
      <link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/country-select-js@2.1.0/build/css/countrySelect.css') }}">
      <link rel="stylesheet" href="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/css/intlTelInput.min.css') }}">
   </head>
   <body>
        
      <div class="main-container">
         
         <div class="row mb-4">
            <div class="col-sm-2 offset-sm-3">
                <a href="{{ path('change_language', {'lang':'fr'}) }}">🇫🇷 Français</a>
            </div>
            <div class="col-sm-2">
                <a href="{{ path('change_language', {'lang':'en'}) }}">🇬🇧 English (UK)</a>
            </div>
            <div class="col-sm-2">
                <a href="{{ path('change_language', {'lang':'ar'}) }}"> 🇸🇦 العربية</a>
            </div>
        </div>

         <div class="row">
				<!-- create a new account -->

                    {{ form_start(form, {'attr': {'class': 'register-form outer-top-xs'}}) }}
                        
                        {% set formErrors = form.vars.errors.form.getErrors(true) %}
                        
                        {% if formErrors|length %}
                            <div class="alert alert-danger">
                                <ul>
                                    {% for key,error in formErrors %}
                                        <li><strong>{{ error.message }}</strong></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}

                        <h3 class="checkout-subtitle">{{ 'your_personal_information'|trans }}</h3>
                            <div class="row mt-3">
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.gender) }} <span>*</span></label>
                                        {{ form_widget(form.gender, {'attr': {'class': 'form-control'}}) }}
                                        <span class="help-block">{{ form_errors(form.gender) }}</span>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.pseudo) }}</label>
                                        {{ form_widget(form.pseudo, {'attr': {'class': 'form-control'}}) }}
                                        <span class="help-block">{{ form_errors(form.pseudo) }}</span>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.birthdate) }} <span>*</span></label>
                                        {{ form_widget(form.birthdate, {'attr': {'placeholder': 'dd/mm/yyyy'}}) }} 
                                        <span class="help-block">{{ form_errors(form.birthdate) }}</span>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-4 col-sm-4">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.phoneNumber) }} <span>*</span></label>
                                        {{ form_widget(form.phoneNumber, {'attr': {'class': 'form-control'}}) }}
                                        <span class="help-block">{{ form_errors(form.phoneNumber) }}</span>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-3">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.country) }}<span>*</span></label>
                                        <span class="help-block">{{ form_errors(form.country) }}</span>
                                    </div>
                                    {{ form_widget(form.country, {'attr': {'class': 'form-control'}}) }}
                                </div>
                                
                                
                            </div>   
                            
                            <h3 class="checkout-subtitle mt-5">{{ 'your_login_information'|trans }}</h3>
                            
                            <div class="form-group mt-3">
                                <label class="info-title">{{ form_label(form.email) }} <span>*</span></label>
                                {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
                                <span class="help-block">{{ form_errors(form.email) }}</span>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-6 col-sm-6">
                                   
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.password.first) }} <span>*</span></label>
                                        {{ form_widget(form.password.first, {'attr': {'class': 'form-control'}}) }}
                                         <span class="help-block">{{ form_errors(form.password.first) }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label class="info-title">{{ form_label(form.password.second) }} <span>*</span></label>
                                        {{ form_widget(form.password.second, {'attr': {'class': 'form-control'}}) }}
                                        <span class="help-block">{{ form_errors(form.password.second) }}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <br>

                            <div class="form-group">    
                                {{ form_widget(form.cgu, {'attr': {'class': 'form-check-input'}}) }}
                                <label class="form-check-label">{{ form_label(form.cgu) }}</label>
                            </div>

                            {{ form_row(form.save) }}
                            
                    {{ form_end(form) }}
                        
                
            </div><!-- /.row -->
      </div>
      
      <script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
      <script src="{{ asset('assets/vendor/country-select-js@2.1.0/build/js/countrySelect.js') }}"></script>
      <script src="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/intlTelInput.min.js') }}"></script>
      
      <script>

        // 1. Récupérer la locale du navigateur (ex: "fr-FR", "en-US")
        let browserLocale = navigator.language || navigator.userLanguage; 
        
        // 2. Extraire le code pays (les 2 dernières lettres après le tiret)
        // On passe en minuscule car country-select-js attend du minuscule (ex: "fr")
        let defaultCountryCode = "tn"; // Une valeur de secours (fallback) au cas où
        
        if (browserLocale && browserLocale.includes('-')) {
            defaultCountryCode = browserLocale.split('-')[1].toLowerCase();
        }
        
        
        $("#user_registration_country").countrySelect({
            defaultCountry: defaultCountryCode,
            preferredCountries: ['tn','fr'],
            excludeCountries: ["il"],
            nationalMode: false,
            formatOnDisplay: true,           
            separateDialCode: true,
            autoHideDialCode: true, 
        });

        var phoneInputID = document.querySelector("#user_registration_phoneNumber");

        // 1. Initialisation
        var iti = intlTelInput(phoneInputID, {
            nationalMode: false,
            formatOnDisplay: true,           
            separateDialCode: true, // L'indicatif est masqué du champ de saisie
            autoHideDialCode: true, 
            autoPlaceholder: "aggressive",
            initialCountry: defaultCountryCode,
            placeholderNumberType: "MOBILE",
            preferredCountries: ['tn', 'fr'],
            excludeCountries: ["il"],
            loadUtils: () =>
            import("{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/utils.js') }}")
                .then((module) => {

                    window.intlTelInputUtils = module;

                    return module;
                }),
        });
        
        // attendre le chargement
        iti.promise.then(() => {
            $(phoneInputID).on("countrychange", function(event) {

                // Get the selected country data to know which country is selected.
                var selectedCountryData = iti.getSelectedCountryData();
                
                // Get an example number for the selected country to use as placeholder.
                var newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL);
                
                // Reset the phone number input.
                iti.setNumber("");
                
                // Convert placeholder as exploitable mask by replacing all 1-9 numbers with 0s
                var mask = newPlaceholder.replace(/[1-9]/g, "0"); 
            
                // Apply the new mask for the input
                $(this).mask(mask);
            });
        });


      </script>
   </body>
</html>
