@extends('auth.layout.app')

@section('auth_content')
    <div class="limiter">
        <!-- <button class="btn btn-primary" data-toggle="modal" data-target="#paymentModal" type="button" id="test-modal">
                                    test modal payment
                                </button> -->
        <div class="row container-login100 page-background">
            <div class="row align-items-center">
                <div class="wrap-login100 col">
                    <form method="POST" action="{{ route('users.register') }}" class="login100-form validate-form"
                        id="register-form">
                        @csrf
                        <style>
                            .phone-input-container {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                width: 100%;
                                padding-left: 10px;
                            }

                            .country-selector-wrapper {
                                display: flex;
                                align-items: center;
                                gap: 5px;
                            }

                            /* Styles pour Select2 avec drapeaux */
                            .select2-container--default .select2-selection--single {
                                border: none !important;
                                background: transparent !important;
                                height: auto !important;
                            }

                            .select2-container--default .select2-selection--single .select2-selection__arrow {
                                display: none !important;
                            }

                            .select2-container--default .select2-selection--single .select2-selection__rendered {
                                padding-left: 0 !important;
                                color: #666 !important;
                            }

                            .flag-icon-select {
                                width: 20px;
                                height: 14px;
                                margin-right: 8px;
                                display: inline-block;
                                vertical-align: middle;
                                border-radius: 2px;
                                box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
                            }

                            .select2-results__option {
                                padding: 8px 12px !important;
                                font-size: 14px !important;
                            }

                            .phone-number-input {
                                flex: 1;
                                border: none;
                                background: transparent;
                                color: #444;
                                font-size: 14px;
                                padding: 5px;
                                outline: none;
                                font-weight: 500;
                            }
                        </style>
                        <link href="{{ asset('medical') }}/assets/plugins/select2/css/select2.css" rel="stylesheet"
                            type="text/css" />
                        <link href="{{ asset('medical') }}/assets/plugins/select2/css/select2-bootstrap.min.css"
                            rel="stylesheet" type="text/css" />
                        <script>
                            function formatState(state) {
                                if (!state.id) { return state.text; }
                                var code = $(state.element).data('code').toLowerCase();
                                var $state = $(
                                    '<span><img src="https://flagcdn.com/w20/' + code + '.png" class="flag-icon-select" /> ' + state.text + '</span>'
                                );
                                return $state;
                            };

                            document.addEventListener('DOMContentLoaded', function () {
                                if (typeof $ !== 'undefined' && $.fn.select2) {
                                    // Trier les options pour les deux sélecteurs
                                    ['#country_code', '#clinical_country_code'].forEach(function (id) {
                                        var select = $(id);
                                        var selectedVal = select.val(); // Sauvegarder la valeur
                                        var options = select.find('option');
                                        options.sort(function (a, b) {
                                            return a.text.localeCompare(b.text);
                                        });
                                        select.empty().append(options);
                                        select.val(selectedVal); // Restaurer la valeur

                                        select.select2({
                                            templateResult: formatState,
                                            templateSelection: formatState,
                                            dropdownAutoWidth: true,
                                            width: 'auto'
                                        });
                                    });

                                    // Synchroniser le pays clinique avec le pays perso en temps réel
                                    $('#country_code').on('select2:select', function (e) {
                                        var selectedValue = e.params.data.id;
                                        $('#clinical_country_code').val(selectedValue).trigger('change');
                                    });

                                    // --- LOGIQUE DE VÉRIFICATION D'EMAIL ---
                                    var emailTimer;
                                    window.emailExists = false;
                                    var isCheckingEmail = false;

                                    function checkStep1Validation() {
                                        var tousLesChampsRemplis = true;
                                        $('#step1 input[required]').each(function () {
                                            if ($(this).val() === '') {
                                                tousLesChampsRemplis = false;
                                                return false;
                                            }
                                        });

                                        if (tousLesChampsRemplis && !window.emailExists && !isCheckingEmail) {
                                            $('#btn-continue').prop('disabled', false);
                                        } else {
                                            $('#btn-continue').prop('disabled', true);
                                        }
                                    }

                                    // Écouter les changements sur tous les inputs du step1
                                    $('#step1 input').on('input', function () {
                                        checkStep1Validation();
                                    });

                                    $('#email-field').on('input', function () {
                                        var email = $(this).val();
                                        clearTimeout(emailTimer);

                                        // Réinitialiser si le format est invalide ou vide
                                        if (email.length <= 5 || !email.includes('@')) {
                                            window.emailExists = false;
                                            isCheckingEmail = false;
                                            $('#email-error').hide();
                                            checkStep1Validation();
                                            return;
                                        }

                                        // Désactiver le bouton pendant la vérification
                                        isCheckingEmail = true;
                                        checkStep1Validation();

                                        emailTimer = setTimeout(function () {
                                            $.post('{{ route("check.email") }}', {
                                                email: email,
                                                _token: '{{ csrf_token() }}'
                                            }, function (response) {
                                                isCheckingEmail = false;
                                                if (response.exists) {
                                                    window.emailExists = true;
                                                    $('#email-error').show();
                                                } else {
                                                    window.emailExists = false;
                                                    $('#email-error').hide();
                                                }
                                                checkStep1Validation();
                                            }).fail(function () {
                                                isCheckingEmail = false;
                                                checkStep1Validation();
                                            });
                                        }, 500);
                                    });
                                }
                            });
                        </script>
                        <div class="" style="margin: auto; text-align: center">
                            <a href="/">
                                <img alt="" src="{{ asset('medical') }}/assets/img/main_logo.png" style="width: 120px">
                            </a>
                            <br>
                            <img src="{{ asset('medical') }}/assets/img/medical_gif.gif" style="max-height: 200px">
                        </div>
                        @error('email')
                            <div class="sub-banner error">
                                <h2>
                                    L'adresse Email a déja été utilisée.
                                </h2>
                                <p>
                                    Veuillez choisir une autre SVP
                                </p>
                            </div>
                            <br>
                        @enderror
                        <div id="step1" class="animate__animated animate__slideInRight">
                            <div class="text-center p-t-10" style="font-size: 12px">
                                Déja un compte ? <a href="{{route('login')}}" class="text-primary"
                                    style="font-size: 12px">Identifiez-vous</a>
                            </div>
                            <br>
                            <h4 class="text-right">Votre Identité</h4>
                            <br>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <input class="input100" type="text" name="name" placeholder="Votre Nom & Prénoms"
                                    value="{{old('name')}}" required>
                                <i class="far fa-user"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <select class="input100 input-height" name="sex">
                                    <option selected>Homme</option>
                                    <option>Femme</option>
                                    <option>Autre</option>
                                </select>
                                <i class="fa-solid fa-genderless"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <select class="input100 input-height" name="role">
                                    <option selected>Médecin</option>
                                    <option>Infirmier</option>
                                    <option>Sage-femme</option>
                                    <option>Sécretaire</option>
                                </select>
                                <i class="fa-solid fa-stethoscope"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <!-- <i class="fas fa-mobile-screen"></i> -->
                                <div class="phone-input-container">
                                    <div class="country-selector-wrapper">
                                        <select class="country-select" name="country_code" id="country_code">
                                            <option value="+1" data-code="US">+1</option>
                                            <option value="+1" data-code="CA">+1</option>
                                            <option value="+1" data-code="PR">+1</option>
                                            <option value="+1" data-code="DO">+1</option>
                                            <option value="+1" data-code="JM">+1</option>
                                            <option value="+1" data-code="TT">+1</option>
                                            <option value="+1" data-code="BB">+1</option>
                                            <option value="+1" data-code="BS">+1</option>
                                            <option value="+1" data-code="GD">+1</option>
                                            <option value="+1" data-code="AG">+1</option>
                                            <option value="+1" data-code="KN">+1</option>
                                            <option value="+1" data-code="LC">+1</option>
                                            <option value="+1" data-code="VC">+1</option>
                                            <option value="+1" data-code="DM">+1</option>
                                            <option value="+1" data-code="BZ">+1</option>
                                            <option value="+1" data-code="CR">+1</option>
                                            <option value="+1" data-code="SV">+1</option>
                                            <option value="+1" data-code="GT">+1</option>
                                            <option value="+1" data-code="HN">+1</option>
                                            <option value="+1" data-code="NI">+1</option>
                                            <option value="+1" data-code="PA">+1</option>
                                            <option value="+7" data-code="RU">+7</option>
                                            <option value="+7" data-code="KZ">+7</option>
                                            <option value="+20" data-code="EG">+20</option>
                                            <option value="+27" data-code="ZA">+27</option>
                                            <option value="+30" data-code="GR">+30</option>
                                            <option value="+31" data-code="NL">+31</option>
                                            <option value="+32" data-code="BE">+32</option>
                                            <option value="+33" data-code="FR" selected>+33</option>
                                            <option value="+34" data-code="ES">+34</option>
                                            <option value="+36" data-code="HU">+36</option>
                                            <option value="+39" data-code="IT">+39</option>
                                            <option value="+40" data-code="RO">+40</option>
                                            <option value="+41" data-code="CH">+41</option>
                                            <option value="+43" data-code="AT">+43</option>
                                            <option value="+44" data-code="GB">+44</option>
                                            <option value="+45" data-code="DK">+45</option>
                                            <option value="+46" data-code="SE">+46</option>
                                            <option value="+47" data-code="NO">+47</option>
                                            <option value="+48" data-code="PL">+48</option>
                                            <option value="+49" data-code="DE">+49</option>
                                            <option value="+51" data-code="PE">+51</option>
                                            <option value="+52" data-code="MX">+52</option>
                                            <option value="+53" data-code="CU">+53</option>
                                            <option value="+54" data-code="AR">+54</option>
                                            <option value="+55" data-code="BR">+55</option>
                                            <option value="+56" data-code="CL">+56</option>
                                            <option value="+57" data-code="CO">+57</option>
                                            <option value="+58" data-code="VE">+58</option>
                                            <option value="+60" data-code="MY">+60</option>
                                            <option value="+61" data-code="AU">+61</option>
                                            <option value="+62" data-code="ID">+62</option>
                                            <option value="+63" data-code="PH">+63</option>
                                            <option value="+64" data-code="NZ">+64</option>
                                            <option value="+65" data-code="SG">+65</option>
                                            <option value="+66" data-code="TH">+66</option>
                                            <option value="+81" data-code="JP">+81</option>
                                            <option value="+82" data-code="KR">+82</option>
                                            <option value="+84" data-code="VN">+84</option>
                                            <option value="+86" data-code="CN">+86</option>
                                            <option value="+90" data-code="TR">+90</option>
                                            <option value="+91" data-code="IN">+91</option>
                                            <option value="+92" data-code="PK">+92</option>
                                            <option value="+93" data-code="AF">+93</option>
                                            <option value="+94" data-code="LK">+94</option>
                                            <option value="+95" data-code="MM">+95</option>
                                            <option value="+98" data-code="IR">+98</option>
                                            <option value="+212" data-code="MA">+212</option>
                                            <option value="+213" data-code="DZ">+213</option>
                                            <option value="+216" data-code="TN">+216</option>
                                            <option value="+218" data-code="LY">+218</option>
                                            <option value="+220" data-code="GM">+220</option>
                                            <option value="+221" data-code="SN">+221</option>
                                            <option value="+222" data-code="MR">+222</option>
                                            <option value="+223" data-code="ML">+223</option>
                                            <option value="+224" data-code="GN">+224</option>
                                            <option value="+225" data-code="CI">+225</option>
                                            <option value="+226" data-code="BF">+226</option>
                                            <option value="+227" data-code="NE">+227</option>
                                            <option value="+228" data-code="TG">+228</option>
                                            <option value="+229" data-code="BJ">+229</option>
                                            <option value="+230" data-code="MU">+230</option>
                                            <option value="+231" data-code="LR">+231</option>
                                            <option value="+232" data-code="SL">+232</option>
                                            <option value="+233" data-code="GH">+233</option>
                                            <option value="+234" data-code="NG">+234</option>
                                            <option value="+235" data-code="TD">+235</option>
                                            <option value="+236" data-code="CF">+236</option>
                                            <option value="+237" data-code="CM">+237</option>
                                            <option value="+238" data-code="CV">+238</option>
                                            <option value="+239" data-code="ST">+239</option>
                                            <option value="+240" data-code="GQ">+240</option>
                                            <option value="+241" data-code="GA">+241</option>
                                            <option value="+242" data-code="CG">+242</option>
                                            <option value="+243" data-code="CD">+243</option>
                                            <option value="+244" data-code="AO">+244</option>
                                            <option value="+245" data-code="GW">+245</option>
                                            <option value="+246" data-code="IO">+246</option>
                                            <option value="+247" data-code="AC">+247</option>
                                            <option value="+248" data-code="SC">+248</option>
                                            <option value="+249" data-code="SD">+249</option>
                                            <option value="+250" data-code="RW">+250</option>
                                            <option value="+251" data-code="ET">+251</option>
                                            <option value="+252" data-code="SO">+252</option>
                                            <option value="+253" data-code="DJ">+253</option>
                                            <option value="+254" data-code="KE">+254</option>
                                            <option value="+255" data-code="TZ">+255</option>
                                            <option value="+256" data-code="UG">+256</option>
                                            <option value="+257" data-code="BI">+257</option>
                                            <option value="+258" data-code="MZ">+258</option>
                                            <option value="+260" data-code="ZM">+260</option>
                                            <option value="+261" data-code="MG">+261</option>
                                            <option value="+262" data-code="RE">+262</option>
                                            <option value="+263" data-code="ZW">+263</option>
                                            <option value="+264" data-code="NA">+264</option>
                                            <option value="+265" data-code="MW">+265</option>
                                            <option value="+266" data-code="LS">+266</option>
                                            <option value="+267" data-code="SZ">+267</option>
                                            <option value="+268" data-code="MG">+268</option>
                                            <option value="+269" data-code="KM">+269</option>
                                            <option value="+290" data-code="SH">+290</option>
                                            <option value="+291" data-code="ER">+291</option>
                                            <option value="+297" data-code="AW">+297</option>
                                            <option value="+298" data-code="FO">+298</option>
                                            <option value="+299" data-code="GL">+299</option>
                                            <option value="+350" data-code="GI">+350</option>
                                            <option value="+351" data-code="PT">+351</option>
                                            <option value="+352" data-code="LU">+352</option>
                                            <option value="+353" data-code="IE">+353</option>
                                            <option value="+354" data-code="IS">+354</option>
                                            <option value="+355" data-code="AL">+355</option>
                                            <option value="+356" data-code="MT">+356</option>
                                            <option value="+357" data-code="CY">+357</option>
                                            <option value="+358" data-code="FI">+358</option>
                                            <option value="+359" data-code="BG">+359</option>
                                            <option value="+370" data-code="LT">+370</option>
                                            <option value="+371" data-code="LV">+371</option>
                                            <option value="+372" data-code="EE">+372</option>
                                            <option value="+373" data-code="MD">+373</option>
                                            <option value="+374" data-code="AM">+374</option>
                                            <option value="+375" data-code="BY">+375</option>
                                            <option value="+376" data-code="AD">+376</option>
                                            <option value="+377" data-code="MC">+377</option>
                                            <option value="+378" data-code="SM">+378</option>
                                            <option value="+380" data-code="UA">+380</option>
                                            <option value="+381" data-code="RS">+381</option>
                                            <option value="+382" data-code="ME">+382</option>
                                            <option value="+383" data-code="XK">+383</option>
                                            <option value="+385" data-code="HR">+385</option>
                                            <option value="+386" data-code="SI">+386</option>
                                            <option value="+387" data-code="BA">+387</option>
                                            <option value="+389" data-code="MK">+389</option>
                                            <option value="+420" data-code="CZ">+420</option>
                                            <option value="+421" data-code="SK">+421</option>
                                            <option value="+500" data-code="FK">+500</option>
                                            <option value="+501" data-code="BZ">+501</option>
                                            <option value="+502" data-code="GT">+502</option>
                                            <option value="+503" data-code="SV">+503</option>
                                            <option value="+504" data-code="HN">+504</option>
                                            <option value="+505" data-code="NI">+505</option>
                                            <option value="+506" data-code="CR">+506</option>
                                            <option value="+507" data-code="PA">+507</option>
                                            <option value="+508" data-code="PM">+508</option>
                                            <option value="+509" data-code="HT">+509</option>
                                            <option value="+590" data-code="GP">+590</option>
                                            <option value="+591" data-code="BO">+591</option>
                                            <option value="+592" data-code="GY">+592</option>
                                            <option value="+593" data-code="EC">+593</option>
                                            <option value="+594" data-code="GF">+594</option>
                                            <option value="+595" data-code="PY">+595</option>
                                            <option value="+596" data-code="MQ">+596</option>
                                            <option value="+597" data-code="SR">+597</option>
                                            <option value="+598" data-code="UY">+598</option>
                                            <option value="+599" data-code="CW">+599</option>
                                            <option value="+670" data-code="TL">+670</option>
                                            <option value="+672" data-code="AQ">+672</option>
                                            <option value="+673" data-code="BN">+673</option>
                                            <option value="+674" data-code="NR">+674</option>
                                            <option value="+675" data-code="PG">+675</option>
                                            <option value="+676" data-code="TO">+676</option>
                                            <option value="+677" data-code="SB">+677</option>
                                            <option value="+678" data-code="VU">+678</option>
                                            <option value="+679" data-code="FJ">+679</option>
                                            <option value="+680" data-code="PW">+680</option>
                                            <option value="+681" data-code="WF">+681</option>
                                            <option value="+682" data-code="CK">+682</option>
                                            <option value="+683" data-code="NU">+683</option>
                                            <option value="+684" data-code="AS">+684</option>
                                            <option value="+685" data-code="WS">+685</option>
                                            <option value="+686" data-code="KI">+686</option>
                                            <option value="+687" data-code="NC">+687</option>
                                            <option value="+688" data-code="TV">+688</option>
                                            <option value="+689" data-code="PF">+689</option>
                                            <option value="+690" data-code="TK">+690</option>
                                            <option value="+691" data-code="FM">+691</option>
                                            <option value="+692" data-code="MH">+692</option>
                                            <option value="+850" data-code="KP">+850</option>
                                            <option value="+852" data-code="HK">+852</option>
                                            <option value="+853" data-code="MO">+853</option>
                                            <option value="+855" data-code="KH">+855</option>
                                            <option value="+856" data-code="LA">+856</option>
                                            <option value="+880" data-code="BD">+880</option>
                                            <option value="+886" data-code="TW">+886</option>
                                            <option value="+960" data-code="MV">+960</option>
                                            <option value="+961" data-code="LB">+961</option>
                                            <option value="+962" data-code="JO">+962</option>
                                            <option value="+963" data-code="SY">+963</option>
                                            <option value="+964" data-code="IQ">+964</option>
                                            <option value="+965" data-code="KW">+965</option>
                                            <option value="+966" data-code="SA">+966</option>
                                            <option value="+967" data-code="YE">+967</option>
                                            <option value="+968" data-code="OM">+968</option>
                                            <option value="+970" data-code="PS">+970</option>
                                            <option value="+971" data-code="AE">+971</option>
                                            <option value="+972" data-code="IL">+972</option>
                                            <option value="+973" data-code="BH">+973</option>
                                            <option value="+974" data-code="QA">+974</option>
                                            <option value="+975" data-code="BT">+975</option>
                                            <option value="+976" data-code="MN">+976</option>
                                            <option value="+977" data-code="NP">+977</option>
                                            <option value="+992" data-code="TJ">+992</option>
                                            <option value="+993" data-code="TM">+993</option>
                                            <option value="+994" data-code="AZ">+994</option>
                                            <option value="+995" data-code="GE">+995</option>
                                            <option value="+996" data-code="KG">+996</option>
                                            <option value="+998" data-code="UZ">+998</option>
                                        </select>
                                    </div>
                                    <input class="input100 phone-number-input" style="padding-left: 0px !important" type="tel" name="tel"
                                        placeholder="Téléphone perso" required>
                                </div>
                                <!-- <i class="fas fa-mobile-screen"></i> -->
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <input class="input100" type="email" name="email" id="email-field" placeholder="Email"
                                    required>
                                <i class="far fa-envelope"></i>
                                <span id="email-error"
                                    style="color: red; font-size: 11px; display: none; position: absolute; bottom: -18px; left: 20px;">L'adresse
                                    Email a déjà été utilisée.</span>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter password">
                                <input class="input100" id="password-input" type="password" name="password"
                                    placeholder="Mot de Passe" required>
                                {{-- <i class="far fa-lock"></i>--}}
                                <i class="material-symbols-rounded" style="font-size: 20px">lock</i>
                                <i class="fa fa-eye eye" style="font-size: 20px"></i>
                                <i class="fa fa-eye-slash eye" style="font-size: 20px; display: none"></i>
                            </div>
                            <div class="container-login100-form-btn text-right" style="justify-content: right">
                                <button class="btn btn-primary btn-loading " id="btn-continue" disabled>
                                    Continuer <i class="fa-solid fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                        <div id="step2" class="animate__animated animate__slideInLeft" style="display: none">
                            <div class="text-center p-t-10" style="font-size: 12px">
                                Déja un compte ? <a href="{{route('login')}}" class="text-primary"
                                    style="font-size: 12px">Identifiez-vous</a>
                            </div>
                            <br>
                            <h4 class="text-right">Votre Centre Médical</h4>
                            <br>
                            <div class="form-check form-switch">
                                <input class="form-check-input" name="is_doctor[]" type="checkbox" role="switch"
                                    id="doctor-check" checked style="cursor: pointer !important;">
                                &nbsp;&nbsp;
                                <label class="form-check-label" for="doctor-check" style="cursor: pointer !important;">Je
                                    suis Docteur</label>
                            </div>
                            <br>
                            <div class="wrap-input100 validate-input animate__animated animate__fadeIn"
                                data-validate="Enter username" id="doctor-name">
                                <input class="input100" type="text" name="doctor"
                                    placeholder="Nom complet du Directeur general" required>
                                <i class="fa-solid fa-user-doctor"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <input class="input100" type="text" name="clinical_name"
                                    placeholder="Nom de la Clinique / Hôpital / Centre" required>
                                <i class="fa-regular fa-hospital"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <div class="phone-input-container">
                                    <div class="country-selector-wrapper">
                                        <select class="country-select" name="clinical_country_code"
                                            id="clinical_country_code">
                                            <option value="+33" data-code="FR" selected>+33</option>
                                            <option value="+32" data-code="BE">+32</option>
                                            <option value="+41" data-code="CH">+41</option>
                                            <option value="+1" data-code="CA">+1</option>
                                            <option value="+352" data-code="LU">+352</option>
                                            <option value="+377" data-code="MC">+377</option>
                                            <option value="+509" data-code="HT">+509</option>
                                            <option value="+225" data-code="CI">+225</option>
                                            <option value="+221" data-code="SN">+221</option>
                                            <option value="+237" data-code="CM">+237</option>
                                            <option value="+223" data-code="ML">+223</option>
                                            <option value="+224" data-code="GN">+224</option>
                                            <option value="+235" data-code="TD">+235</option>
                                            <option value="+227" data-code="NE">+227</option>
                                            <option value="+229" data-code="BJ">+229</option>
                                            <option value="+228" data-code="TG">+228</option>
                                            <option value="+226" data-code="BF">+226</option>
                                            <option value="+241" data-code="GA">+241</option>
                                            <option value="+242" data-code="CG">+242</option>
                                            <option value="+243" data-code="CD">+243</option>
                                            <option value="+236" data-code="CF">+236</option>
                                            <option value="+261" data-code="MG">+261</option>
                                            <option value="+250" data-code="RW">+250</option>
                                            <option value="+257" data-code="BI">+257</option>
                                            <option value="+253" data-code="DJ">+253</option>
                                            <option value="+269" data-code="KM">+269</option>
                                            <option value="+248" data-code="SC">+248</option>
                                            <option value="+678" data-code="VU">+678</option>
                                            <option value="+240" data-code="GQ">+240</option>
                                            <option value="+212" data-code="MA">+212</option>
                                            <option value="+213" data-code="DZ">+213</option>
                                            <option value="+216" data-code="TN">+216</option>
                                            <option value="+961" data-code="LB">+961</option>
                                        </select>
                                    </div>
                                    <input class="input100 phone-number-input" type="tel" style="padding-left: 0px !important" name="clinical_tel"
                                        placeholder="Téléphone Clinique / Hôpital / Centre" required>
                                </div>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <input class="input100" type="text" name="city"
                                    placeholder="Ville de la Clinique / Hôpital / Centre" required>
                                <i class="fa-solid fa-map-pin"></i>
                            </div>
                            <div class="wrap-input100 validate-input" data-validate="Enter username">
                                <input class="input100" type="text" name="adresse"
                                    placeholder="Adresse de la Clinique / Hôpital / Centre" required>
                                <i class="fa-solid fa-location-crosshairs"></i>
                            </div>


                            <div class="form-check form-switch">
                                <input class="form-check-input" name="conditions" type="checkbox" role="switch"
                                    id="conditions" style="cursor: pointer !important;">
                                &nbsp;&nbsp;
                                <label class="form-check-label conditions-terms" for="conditions"
                                    style="cursor: pointer !important; font-size: 12px !important;">J'ai lu et accepté les
                                    <a href="{{ url('/terms') }}" target="_blank"
                                        style="cursor: pointer; color: inherit; text-decoration: underline; font-size: 12px !important;">conditions générales 
                                        d'utilisations (CGU)</a>
                                    <br>
                                    et les <a href="{{ url('/subscription') }}" target="_blank"
                                        style="cursor: pointer; color: inherit; text-decoration: underline; font-size: 12px !important;">termes du
                                        contrat d'abonnement</a>.
                                </label>
                            </div>
                            @error('conditions')
                                <div class="text-danger" style="font-size: 12px; margin-top:6px">{{ $message }}</div>
                            @enderror
                            <div class="form-check form-switch">
                                <input class="form-check-input" name="privacy" type="checkbox" role="switch"
                                    id="privacy" style="cursor: pointer !important;">
                                &nbsp;&nbsp;
                                <label class="form-check-label" for="privacy" style="cursor: pointer !important; font-size: 12px !important;">J'ai lu la
                                    <a href="{{ url('/privacy') }}" target="_blank" style="cursor: pointer; color: inherit; text-decoration: underline; font-size: 12px !important;">politique de confidentialité</a>
                                </label>
                            </div>
                            @error('privacy')
                                <div class="text-danger" style="font-size: 12px; margin-top:6px">{{ $message }}</div>
                            @enderror
                            <br><br>
                            {{-- inputs hidden--}}
                            <input type="hidden" name="subscription_id" value="{{$subscription->id}}">
                            <input type="hidden" name="subscription_value"
                                value="{{$subscription->annual_monthly_value ?? 0}}">
                            <input type="hidden" name="subscription_monthly_value" value="{{$subscription->value ?? 0}}">
                            <input type="hidden" name="subscription_name" value="{{$subscription->name}}">
                            <input type="hidden" name="subscription_mode"
                                value="{{$subscription->id == 4 ? 'cash' : 'stripe'}}">
                            <input type="hidden" name="payment_infos_sup" value="">
                            <input type="hidden" name="annual" value="{{$subscription->id == 4 ? '0' : '1'}}">

                            <div class="row">
                                <div class="col" style="justify-content: left">
                                    <button class="btn btn-light btn-loading " id="btn-back">
                                        <i class="fa-solid fa-arrow-left"></i> Retour
                                    </button>
                                </div>
                                <div class="col" style="justify-content: right; text-align: right">
                                    @if($subscription->id == 4)
                                        <button class="btn btn-primary btn-loading " id="btn-continue-step2" disabled>
                                            Continuer <i class="fa-solid fa-arrow-right"></i>
                                        </button>
                                    @else
                                        <button class="btn btn-primary btn-save" id="btn-submit-registration" disabled
                                            type="submit">
                                            Continuer
                                            <!-- vers la vérification -->
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if($subscription->id == 4)
                            <div id="step3" class="animate__animated animate__slideInRight" style="display: none">
                                <div class="text-center p-t-10" style="font-size: 12px">
                                    Déja un compte ? <a href="{{route('login')}}" class="text-primary"
                                        style="font-size: 12px">Identifiez-vous</a>
                                </div>
                                <br>
                                <h4 class="text-right">Votre Abonnement Enterprise</h4>
                                <br>

                                <div class="wrap-input100 validate-input" data-validate="Enter username">
                                    <select class="input100 input-height" id="duration_years" name="duration_years" required>
                                        <option value="" disabled selected>Durée de l'abonnement *</option>
                                        <option value="2">2 ans (-20% de remise)</option>
                                        <option value="3">3 ans (-30% de remise)</option>
                                        <option value="5">5 ans (-40% de remise)</option>
                                    </select>
                                    <i class="fa-solid fa-calendar-days"></i>
                                </div>

                                <div class="wrap-input100 validate-input" data-validate="Enter username">
                                    @php
                                        $enterpriseMin = isset($goldSubscription) && $goldSubscription->annual_monthly_value
                                            ? $goldSubscription->annual_monthly_value
                                            : 600;
                                    @endphp
                                    <input class="input100" type="number" id="monthly_price" name="monthly_price"
                                        min="{{ $enterpriseMin }}" step="0.01" value="{{ $enterpriseMin }}"
                                        placeholder="Prix mensuel de base (€)" required readonly>
                                    <i class="fa-solid fa-euro-sign"></i>
                                    <small style="position: absolute; bottom: -20px; left: 0; font-size: 11px; color: #999;">
                                        Prix indexé sur GOLD : {{ number_format($enterpriseMin, 0, ',', ' ') }} €/mois
                                    </small>
                                </div>

                                <div class="alert alert-success" id="price-calculation" style="margin-top: 30px;">
                                    <strong>Prix total calculé :</strong><br>
                                    <span id="total-price-display" style="font-size: 18px; font-weight: bold;">0 €</span><br>
                                    <small id="price-breakdown"></small>
                                </div>
                                <input type="hidden" id="cash_amount" name="amount" value="0">
                                <input type="hidden" id="country" name="country" value="">
                                <input type="hidden" id="clinical_country" name="clinical_country" value="">



                                <div class="wrap-input100">
                                    <textarea class="input100" id="cash_notes" name="notes" rows="3"
                                        placeholder="Informations complémentaires (Informations sur le paiement, coordonnées pour le suivi, etc.)"
                                        style="padding-top: 15px; min-height: 80px;"></textarea>
                                    <i class="fa-solid fa-note-sticky" style="top: 15px;"></i>
                                </div>

                                <div class="alert alert-warning">
                                    <i class="fa fa-info-circle"></i>
                                    <strong>Important :</strong> Votre abonnement sera activé sous 24-48h après validation de
                                    votre paiement par notre équipe.
                                </div>

                                <div class="row">
                                    <div class="col" style="justify-content: left">
                                        <button class="btn btn-light btn-loading " id="btn-back-step3">
                                            <i class="fa-solid fa-arrow-left"></i> Retour
                                        </button>
                                    </div>
                                    <div class="col" style="justify-content: right">
                                        <button class="btn btn-primary btn-save" type="submit" id="btn-submit-enterprise">
                                            S'inscrire Enterprise
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <br>
                        <br><br>
                        <div class="text-center p-t-10" style="font-size: 10px; color: #4b6082">
                            &copy; {{ date('Y') }} <b>KONDY</b> · Propulsé par <b>Diaris</b>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modals Start -->
    @if($subscription->id != 4)
        @include('modals.paiement')
    @endif
    @include('modals.pdf-viewer')
    <!-- Modals End -->
@endsection
@push('scripts')
    <!-- web speech -->
    <!-- JITSI -->
    <script src='https://meet.jit.si/external_api.js'></script>
    @include('scriptjs')
    @include('site.scripts')
    <script src="{{ asset('medical') }}/assets/plugins/select2/js/select2.js"></script>
    @if($subscription->id == 4)
        <script>
            $(document).ready(function () {
                function calculatePrice() {
                    var duration = parseInt($('#duration_years').val());
                    var monthlyPrice = parseFloat($('#monthly_price').val());
                    var minMonthly = {{ isset($goldSubscription) && $goldSubscription->annual_monthly_value ? $goldSubscription->annual_monthly_value : 600 }};

                    if (!duration || !monthlyPrice || monthlyPrice < minMonthly) {
                        $('#total-price-display').text('Prix invalide');
                        $('#price-breakdown').text('Veuillez sélectionner une durée et un prix mensuel minimum de ' + minMonthly + '€');
                        $('#cash_amount').val(0);
                        return;
                    }

                    var totalMonths = duration * 12;
                    var totalWithoutDiscount = monthlyPrice * totalMonths;

                    var discount = 0;
                    if (duration == 2) {
                        discount = 0.20; // 20% de remise
                    } else if (duration == 3) {
                        discount = 0.30; // 30% de remise
                    } else if (duration == 5) {
                        discount = 0.40; // 40% de remise
                    }

                    var discountAmount = totalWithoutDiscount * discount;
                    var totalWithDiscount = totalWithoutDiscount - discountAmount;

                    $('#total-price-display').text(totalWithDiscount.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €');

                    var breakdown = monthlyPrice.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €/mois × ' + totalMonths + ' mois = ' +
                        totalWithoutDiscount.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';

                    if (discount > 0) {
                        breakdown += ' - ' + (discount * 100) + '% = ' + totalWithDiscount.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
                    }

                    $('#price-breakdown').text(breakdown);
                    $('#cash_amount').val(totalWithDiscount);
                }

                // Calculer le prix quand on change la durée ou le prix mensuel
                $('#duration_years, #monthly_price').on('change input', calculatePrice);

                // Extraire le pays depuis l'indicatif téléphonique
                function updateCountryFromPhoneCode() {
                    var phoneCode = $('#country_code').val();
                    var countryMapping = {
                        '+1': 'US', '+33': 'FR', '+44': 'GB', '+49': 'DE', '+34': 'ES',
                        '+39': 'IT', '+31': 'NL', '+41': 'CH', '+32': 'BE', '+212': 'MA',
                        '+213': 'DZ', '+216': 'TN', '+221': 'SN', '+225': 'CI', '+234': 'NG',
                        '+81': 'JP', '+86': 'CN', '+91': 'IN', '+7': 'RU', '+20': 'EG',
                        '+27': 'ZA', '+30': 'GR', '+36': 'HU', '+40': 'RO', '+43': 'AT',
                        '+45': 'DK', '+46': 'SE', '+47': 'NO', '+48': 'PL', '+351': 'PT',
                        '+352': 'LU', '+353': 'IE', '+354': 'IS', '+355': 'AL', '+356': 'MT',
                        '+357': 'CY', '+358': 'FI', '+359': 'BG', '+370': 'LT', '+371': 'LV',
                        '+372': 'EE', '+373': 'MD', '+374': 'AM', '+375': 'BY', '+376': 'AD',
                        '+377': 'MC', '+378': 'SM', '+380': 'UA', '+381': 'RS', '+382': 'ME',
                        '+383': 'XK', '+385': 'HR', '+386': 'SI', '+387': 'BA', '+389': 'MK',
                        '+420': 'CZ', '+421': 'SK', '+500': 'FK', '+501': 'BZ', '+502': 'GT',
                        '+503': 'SV', '+504': 'HN', '+505': 'NI', '+506': 'CR', '+507': 'PA',
                        '+508': 'PM', '+509': 'HT', '+590': 'GP', '+591': 'BO', '+592': 'GY',
                        '+593': 'EC', '+594': 'GF', '+595': 'PY', '+596': 'MQ', '+597': 'SR',
                        '+598': 'UY', '+599': 'CW', '+670': 'TL', '+672': 'AQ', '+673': 'BN',
                        '+674': 'NR', '+675': 'PG', '+676': 'TO', '+677': 'SB', '+678': 'VU',
                        '+679': 'FJ', '+680': 'PW', '+681': 'WF', '+682': 'CK', '+683': 'NU',
                        '+684': 'AS', '+685': 'WS', '+686': 'KI', '+687': 'NC', '+688': 'TV',
                        '+689': 'PF', '+690': 'TK', '+691': 'FM', '+692': 'MH', '+850': 'KP',
                        '+852': 'HK', '+853': 'MO', '+855': 'KH', '+856': 'LA', '+880': 'BD',
                        '+886': 'TW', '+960': 'MV', '+961': 'LB', '+962': 'JO', '+963': 'SY',
                        '+964': 'IQ', '+965': 'KW', '+966': 'SA', '+967': 'YE', '+968': 'OM',
                        '+970': 'PS', '+971': 'AE', '+972': 'IL', '+973': 'BH', '+974': 'QA',
                        '+975': 'BT', '+976': 'MN', '+977': 'NP', '+992': 'TJ', '+993': 'TM',
                        '+994': 'AZ', '+995': 'GE', '+996': 'KG', '+998': 'UZ'
                    };

                    var countryCode = countryMapping[phoneCode] || 'FR'; // Par défaut France
                    $('#country').val(countryCode);
                }

                // Mettre à jour le pays quand l'indicatif change
                $('#country_code').on('change', updateCountryFromPhoneCode);

                // Initialiser au chargement
                updateCountryFromPhoneCode();

                // Extraire le pays depuis l'indicatif téléphonique clinique
                function updateClinicalCountryFromPhoneCode() {
                    var phoneCode = $('#clinical_country_code').val();
                    var countryMapping = {
                        '+1': 'US', '+33': 'FR', '+44': 'GB', '+49': 'DE', '+34': 'ES',
                        '+39': 'IT', '+31': 'NL', '+41': 'CH', '+32': 'BE', '+212': 'MA',
                        '+213': 'DZ', '+216': 'TN', '+221': 'SN', '+225': 'CI', '+234': 'NG',
                        '+81': 'JP', '+86': 'CN', '+91': 'IN', '+7': 'RU', '+20': 'EG',
                        '+27': 'ZA', '+30': 'GR', '+36': 'HU', '+40': 'RO', '+43': 'AT',
                        '+45': 'DK', '+46': 'SE', '+47': 'NO', '+48': 'PL', '+351': 'PT',
                        '+352': 'LU', '+353': 'IE', '+354': 'IS', '+355': 'AL', '+356': 'MT',
                        '+357': 'CY', '+358': 'FI', '+359': 'BG', '+370': 'LT', '+371': 'LV',
                        '+372': 'EE', '+373': 'MD', '+374': 'AM', '+375': 'BY', '+376': 'AD',
                        '+377': 'MC', '+378': 'SM', '+380': 'UA', '+381': 'RS', '+382': 'ME',
                        '+383': 'XK', '+385': 'HR', '+386': 'SI', '+387': 'BA', '+389': 'MK',
                        '+420': 'CZ', '+421': 'SK', '+500': 'FK', '+501': 'BZ', '+502': 'GT',
                        '+503': 'SV', '+504': 'HN', '+505': 'NI', '+506': 'CR', '+507': 'PA',
                        '+508': 'PM', '+509': 'HT', '+590': 'GP', '+591': 'BO', '+592': 'GY',
                        '+593': 'EC', '+594': 'GF', '+595': 'PY', '+596': 'MQ', '+597': 'SR',
                        '+598': 'UY', '+599': 'CW', '+670': 'TL', '+672': 'AQ', '+673': 'BN',
                        '+674': 'NR', '+675': 'PG', '+676': 'TO', '+677': 'SB', '+678': 'VU',
                        '+679': 'FJ', '+680': 'PW', '+681': 'WF', '+682': 'CK', '+683': 'NU',
                        '+684': 'AS', '+685': 'WS', '+686': 'KI', '+687': 'NC', '+688': 'TV',
                        '+689': 'PF', '+690': 'TK', '+691': 'FM', '+692': 'MH', '+850': 'KP',
                        '+852': 'HK', '+853': 'MO', '+855': 'KH', '+856': 'LA', '+880': 'BD',
                        '+886': 'TW', '+960': 'MV', '+961': 'LB', '+962': 'JO', '+963': 'SY',
                        '+964': 'IQ', '+965': 'KW', '+966': 'SA', '+967': 'YE', '+968': 'OM',
                        '+970': 'PS', '+971': 'AE', '+972': 'IL', '+973': 'BH', '+974': 'QA',
                        '+975': 'BT', '+976': 'MN', '+977': 'NP', '+992': 'TJ', '+993': 'TM',
                        '+994': 'AZ', '+995': 'GE', '+996': 'KG', '+998': 'UZ'
                    };

                    var countryCode = countryMapping[phoneCode] || 'FR'; // Par défaut France
                    $('#clinical_country').val(countryCode);
                }

                // Mettre à jour le pays clinique quand l'indicatif change
                $('#clinical_country_code').on('change', updateClinicalCountryFromPhoneCode);

                // Initialiser au chargement
                updateClinicalCountryFromPhoneCode();

                // Calculer le prix quand on arrive sur le step3
                $('#btn-continue-step2').on('click', function () {
                    setTimeout(calculatePrice, 100);
                });

                // Calcul initial
                calculatePrice();
                // Validation des cases à cocher (conditions + privacy)
                function updateSubmitButtonState() {
                    var cond = $('#conditions').is(':checked');
                    var priv = $('#privacy').is(':checked');
                    if (cond && priv) {
                        $('#btn-continue-step2').prop('disabled', false);
                    } else {
                        $('#btn-continue-step2').prop('disabled', true);
                    }
                }

                $('#conditions, #privacy').on('change', updateSubmitButtonState);
                // initial state
                updateSubmitButtonState();
            });
        </script>
    @endif
    <script>
        // For non-enterprise flows, enable final submit only when both checkboxes are checked
        $(document).ready(function () {
            function updateFinalSubmit() {
                var cond = $('#conditions').is(':checked');
                var priv = $('#privacy').is(':checked');
                if (cond && priv) {
                    $('#btn-submit-registration').prop('disabled', false);
                } else {
                    $('#btn-submit-registration').prop('disabled', true);
                }
            }
            $('#conditions, #privacy').on('change', updateFinalSubmit);
            updateFinalSubmit();

            // Extra safeguard: prevent submit if checkboxes not checked
            $('#register-form').on('submit', function (e) {
                if (!$('#conditions').is(':checked') || !$('#privacy').is(':checked')) {
                    e.preventDefault();
                    alert('Veuillez accepter les Conditions et la Politique de confidentialité pour continuer.');
                }
            });
        });
    </script>
@endpush