@extends('layouts.frontend-master')
@section('title', 'Sign up')

@section('content')
    <div>
        <div class="container container-fluid">
            <div class="d-flex justify-content-center align-items-center h-100">
                <div class="card py-4 px-4" style="width: 20rem;">
                    <h3 class="text-center mb-4">Registration</h3>
                    <form id="form" class="arco-form arco-form-layout-vertical arco-form-size-medium"
                        action="{{ route('member.signup') }}" method="post">
                        @csrf
                        <input type="hidden" name="ip" id="ip">
                        <div class="mb-4"><label class="form-label" for="formPhoneNumber">Phone Number:<svg
                                    aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                    class="svg-inline--fa fa-check visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                    style="color: limegreen; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                    </path>
                                </svg><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark"
                                    class="svg-inline--fa fa-xmark visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                    style="color: red; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                    </path>
                                </svg></label>
                                <div class=" react-tel-input ">
                                    <div class="special-label">Phone</div>
                                    <input class="form-control " placeholder="Enter phone number" type="tel" required=""
                                        oninput="this.value = this.value.replace(/[^0-9+]/g, '').replace(/^(.+?)\+/g, '$1');"
                                        id="phone-input" name="phone" required inputmode="numeric" value="+63"
                                        style="width: 286px; height: 38px; border-radius: 6px; border-color: rgb(222, 226, 230);">
                                   <!--  <small id="phone-error" style="color: red; display: none;">
                                        ❌ Between 9 and 15 digits. Must start with a digit. Only numbers are permitted.
                                    </small> -->
                                    <div class="flag-dropdown open"
                                        style="border-top-left-radius: 6px; border-bottom-left-radius: 6px; border-color: rgb(222, 226, 230);">
                                        <div class="selected-flag open" title="South Africa: + 27" tabindex="0" role="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <div id="flagimage" class="flag za">
                                                <div class="arrow down"></div>
                                            </div>
                                        </div>

                                        <ul class="country-list dropdown-menu" role="listbox" tabindex="0">
                                            <li class="search-container">
                                                <input type="text" id="country-search" placeholder="Search countries..."
                                                    class="form-control search-input" style="margin: 5px; width: 95%;">
                                            </li>
        
                                            <li data-flag-key="+93" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="af" role="option">
                                                <div class="flag af"></div><span class="country-name">Afghanistan</span><span
                                                    class="dial-code">+93</span>
                                            </li>
                                            <li data-flag-key="+355" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="al" role="option">
                                                <div class="flag al"></div><span class="country-name">Albania</span><span
                                                    class="dial-code">+355</span>
                                            </li>
                                            <li data-flag-key="+213" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="dz" data-flag-class="dz" role="option">
                                                <div class="flag dz"></div><span class="country-name">Algeria</span><span
                                                    class="dial-code">+213</span>
                                            </li>
                                            <li data-flag-key="+1" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="ca" role="option">
                                                <div class="flag ca"></div><span class="country-name">Canada</span><span
                                                    class="dial-code">+1</span>
                                            </li>
                                            <li data-flag-key="+266" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="ls" role="option">
                                                <div class="flag ls"></div><span class="country-name">Lesotho</span><span
                                                    class="dial-code">+266</span>
                                            </li>
                                            <li data-flag-key="+231" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="lr" role="option">
                                                <div class="flag lr"></div><span class="country-name">Liberia</span><span
                                                    class="dial-code">+231</span>
                                            </li>
                                            <li data-flag-key="+218" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="ly" role="option">
                                                <div class="flag ly"></div><span class="country-name">Libya</span><span
                                                    class="dial-code">+218</span>
                                            </li>
                                            <li data-flag-key="+423" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="li" role="option">
                                                <div class="flag li"></div><span class="country-name">Liechtenstein</span><span
                                                    class="dial-code">+423</span>
                                            </li>
                                            <li data-flag-key="+370" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lt" role="option">
                                                <div class="flag lt"></div><span class="country-name">Lithuania</span><span
                                                    class="dial-code">+370</span>
                                            </li>
                                            <li data-flag-key="+352" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lu" role="option">
                                                <div class="flag lu"></div><span class="country-name">Luxembourg</span><span
                                                    class="dial-code">+352</span>
                                            </li>
                                            <li data-flag-key="+853" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mo" role="option">
                                                <div class="flag mo"></div><span class="country-name">Macau</span><span
                                                    class="dial-code">+853</span>
                                            </li>
                                            <li data-flag-key="+389" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mk" role="option">
                                                <div class="flag mk"></div><span class="country-name">Macedonia</span><span
                                                    class="dial-code">+389</span>
                                            </li>
                                            <li data-flag-key="+261" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mg" role="option">
                                                <div class="flag mg"></div><span class="country-name">Madagascar</span><span
                                                    class="dial-code">+261</span>
                                            </li>
                                            <li data-flag-key="+265" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mw" role="option">
                                                <div class="flag mw"></div><span class="country-name">Malawi</span><span
                                                    class="dial-code">+265</span>
                                            </li>
                                            <li data-flag-key="+60" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="my" role="option">
                                                <div class="flag my"></div><span class="country-name">Malaysia</span><span
                                                    class="dial-code">+60</span>
                                            </li>
                                            <li data-flag-key="+960" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mv" role="option">
                                                <div class="flag mv"></div><span class="country-name">Maldives</span><span
                                                    class="dial-code">+960</span>
                                            </li>
                                            <li data-flag-key="+223" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ml" role="option">
                                                <div class="flag ml"></div><span class="country-name">Mali</span><span
                                                    class="dial-code">+223</span>
                                            </li>
                                            <li data-flag-key="+356" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mt" role="option">
                                                <div class="flag mt"></div><span class="country-name">Malta</span><span
                                                    class="dial-code">+356</span>
                                            </li>
                                            <li data-flag-key="+692" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mh" role="option">
                                                <div class="flag mh"></div><span class="country-name">Marshall Islands</span><span
                                                    class="dial-code">+692</span>
                                            </li>
                                            <li data-flag-key="+596" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mq" role="option">
                                                <div class="flag mq"></div><span class="country-name">Martinique</span><span
                                                    class="dial-code">+596</span>
                                            </li>
                                            <li data-flag-key="+222" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mr" role="option">
                                                <div class="flag mr"></div><span class="country-name">Mauritania</span><span
                                                    class="dial-code">+222</span>
                                            </li>
                                            <li data-flag-key="+230" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mu" role="option">
                                                <div class="flag mu"></div><span class="country-name">Mauritius</span><span
                                                    class="dial-code">+230</span>
                                            </li>
                                            <li data-flag-key="+52" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mx" role="option">
                                                <div class="flag mx"></div><span class="country-name">Mexico</span><span
                                                    class="dial-code">+52</span>
                                            </li>
                                            <li data-flag-key="+691" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="fm" role="option">
                                                <div class="flag fm"></div><span class="country-name">Micronesia</span><span
                                                    class="dial-code">+691</span>
                                            </li>
                                            <li data-flag-key="+373" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="md" role="option">
                                                <div class="flag md"></div><span class="country-name">Moldova</span><span
                                                    class="dial-code">+373</span>
                                            </li>
                                            <li data-flag-key="+377" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mc" role="option">
                                                <div class="flag mc"></div><span class="country-name">Monaco</span><span
                                                    class="dial-code">+377</span>
                                            </li>
                                            <li data-flag-key="+976" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mn" role="option">
                                                <div class="flag mn"></div><span class="country-name">Mongolia</span><span
                                                    class="dial-code">+976</span>
                                            </li>
                                            <li data-flag-key="+382" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="me" role="option">
                                                <div class="flag me"></div><span class="country-name">Montenegro</span><span
                                                    class="dial-code">+382</span>
                                            </li>
                                            <li data-flag-key="+212" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ma" role="option">
                                                <div class="flag ma"></div><span class="country-name">Morocco</span><span
                                                    class="dial-code">+212</span>
                                            </li>
                                            <li data-flag-key="+258" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mz" role="option">
                                                <div class="flag mz"></div><span class="country-name">Mozambique</span><span
                                                    class="dial-code">+258</span>
                                            </li>
                                            <li data-flag-key="+95" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mm" role="option">
                                                <div class="flag mm"></div><span class="country-name">Myanmar</span><span
                                                    class="dial-code">+95</span>
                                            </li>
                                            <li data-flag-key="+264" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="na" role="option">
                                                <div class="flag na"></div><span class="country-name">Namibia</span><span
                                                    class="dial-code">+264</span>
                                            </li>
                                            <li data-flag-key="+674" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nr" role="option">
                                                <div class="flag nr"></div><span class="country-name">Nauru</span><span
                                                    class="dial-code">+674</span>
                                            </li>
                                            <li data-flag-key="+977" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="np" role="option">
                                                <div class="flag np"></div><span class="country-name">Nepal</span><span
                                                    class="dial-code">+977</span>
                                            </li>
                                            <li data-flag-key="+31" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nl" role="option">
                                                <div class="flag nl"></div><span class="country-name">Netherlands</span><span
                                                    class="dial-code">+31</span>
                                            </li>
                                            <li data-flag-key="+687" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nc" role="option">
                                                <div class="flag nc"></div><span class="country-name">New Caledonia</span><span
                                                    class="dial-code">+687</span>
                                            </li>
                                            <li data-flag-key="+64" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nz" role="option">
                                                <div class="flag nz"></div><span class="country-name">New Zealand</span><span
                                                    class="dial-code">+64</span>
                                            </li>
                                            <li data-flag-key="+505" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ni" role="option">
                                                <div class="flag ni"></div><span class="country-name">Nicaragua</span><span
                                                    class="dial-code">+505</span>
                                            </li>
                                            <li data-flag-key="+227" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ne" role="option">
                                                <div class="flag ne"></div><span class="country-name">Niger</span><span
                                                    class="dial-code">+227</span>
                                            </li>
                                            <li data-flag-key="+234" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ng" role="option">
                                                <div class="flag ng"></div><span class="country-name">Nigeria</span><span
                                                    class="dial-code">+234</span>
                                            </li>
                                            <li data-flag-key="+850" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="kp" role="option">
                                                <div class="flag kp"></div><span class="country-name">North Korea</span><span
                                                    class="dial-code">+850</span>
                                            </li>
                                            <li data-flag-key="+47" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="no" role="option">
                                                <div class="flag no"></div><span class="country-name">Norway</span><span
                                                    class="dial-code">+47</span>
                                            </li>
                                            <li data-flag-key="+968" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="om" role="option">
                                                <div class="flag om"></div><span class="country-name">Oman</span><span
                                                    class="dial-code">+968</span>
                                            </li>
                                            <li data-flag-key="+92" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pk" role="option">
                                                <div class="flag pk"></div><span class="country-name">Pakistan</span><span
                                                    class="dial-code">+92</span>
                                            </li>
                                            <li data-flag-key="+680" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pw" role="option">
                                                <div class="flag pw"></div><span class="country-name">Palau</span><span
                                                    class="dial-code">+680</span>
                                            </li>
                                            <li data-flag-key="+970" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ps" role="option">
                                                <div class="flag ps"></div><span class="country-name">Palestine</span><span
                                                    class="dial-code">+970</span>
                                            </li>
                                            <li data-flag-key="+507" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pa" role="option">
                                                <div class="flag pa"></div><span class="country-name">Panama</span><span
                                                    class="dial-code">+507</span>
                                            </li>
                                            <li data-flag-key="+675" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pg" role="option">
                                                <div class="flag pg"></div><span class="country-name">Papua New Guinea</span><span
                                                    class="dial-code">+675</span>
                                            </li>
                                            <li data-flag-key="+595" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="py" role="option">
                                                <div class="flag py"></div><span class="country-name">Paraguay</span><span
                                                    class="dial-code">+595</span>
                                            </li>
                                            <li data-flag-key="+51" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pe" role="option">
                                                <div class="flag pe"></div><span class="country-name">Peru</span><span
                                                    class="dial-code">+51</span>
                                            </li>
        
                                            <li data-flag-key="+48" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pl" role="option">
                                                <div class="flag pl"></div><span class="country-name">Poland</span><span
                                                    class="dial-code">+48</span>
                                            </li>
                                            <li data-flag-key="+351" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pt" role="option">
                                                <div class="flag pt"></div><span class="country-name">Portugal</span><span
                                                    class="dial-code">+351</span>
                                            </li>
                                            <li data-flag-key="+1" class="select-flag country" data-dial-code="1" tabindex="0"
                                                data-flag-class="pr" role="option">
                                                <div class="flag pr"></div><span class="country-name">Puerto Rico</span><span
                                                    class="dial-code">+1</span>
                                            </li>
                                            <li data-flag-key="+974" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="qa" role="option">
                                                <div class="flag qa"></div><span class="country-name">Qatar</span><span
                                                    class="dial-code">+974</span>
                                            </li>
                                            <li data-flag-key="+262" class="select-flag<ul class="country-list dropdown-menu"
                                                role="listbox" tabindex="0">
                                            <li data-flag-key="+93" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="af" role="option">
                                                <div class="flag af"></div><span class="country-name">Afghanistan</span><span
                                                    class="dial-code">+93</span>
                                            </li>
                                            <li data-flag-key="+355" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="al" role="option">
                                                <div class="flag al"></div><span class="country-name">Albania</span><span
                                                    class="dial-code">+355</span>
                                            </li>
                                            <li data-flag-key="+213" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="dz" role="option">
                                                <div class="flag dz"></div><span class="country-name">Algeria</span><span
                                                    class="dial-code">+213</span>
                                            </li>
                                            <li data-flag-key="+266" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ls" role="option">
                                                <div class="flag ls"></div><span class="country-name">Lesotho</span><span
                                                    class="dial-code">+266</span>
                                            </li>
                                            <li data-flag-key="+231" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lr" role="option">
                                                <div class="flag lr"></div><span class="country-name">Liberia</span><span
                                                    class="dial-code">+231</span>
                                            </li>
                                            <li data-flag-key="+218" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ly" role="option">
                                                <div class="flag ly"></div><span class="country-name">Libya</span><span
                                                    class="dial-code">+218</span>
                                            </li>
                                            <li data-flag-key="+423" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="li" role="option">
                                                <div class="flag li"></div><span class="country-name">Liechtenstein</span><span
                                                    class="dial-code">+423</span>
                                            </li>
                                            <li data-flag-key="+370" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lt" role="option">
                                                <div class="flag lt"></div><span class="country-name">Lithuania</span><span
                                                    class="dial-code">+370</span>
                                            </li>
                                            <li data-flag-key="+352" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lu" role="option">
                                                <div class="flag lu"></div><span class="country-name">Luxembourg</span><span
                                                    class="dial-code">+352</span>
                                            </li>
                                            <li data-flag-key="+853" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mo" role="option">
                                                <div class="flag mo"></div><span class="country-name">Macau</span><span
                                                    class="dial-code">+853</span>
                                            </li>
                                            <li data-flag-key="+389" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mk" role="option">
                                                <div class="flag mk"></div><span class="country-name">Macedonia</span><span
                                                    class="dial-code">+389</span>
                                            </li>
                                            <li data-flag-key="+261" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mg" role="option">
                                                <div class="flag mg"></div><span class="country-name">Madagascar</span><span
                                                    class="dial-code">+261</span>
                                            </li>
                                            <li data-flag-key="+265" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mw" role="option">
                                                <div class="flag mw"></div><span class="country-name">Malawi</span><span
                                                    class="dial-code">+265</span>
                                            </li>
                                            <li data-flag-key="+60" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="my" role="option">
                                                <div class="flag my"></div><span class="country-name">Malaysia</span><span
                                                    class="dial-code">+60</span>
                                            </li>
                                            <li data-flag-key="+960" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mv" role="option">
                                                <div class="flag mv"></div><span class="country-name">Maldives</span><span
                                                    class="dial-code">+960</span>
                                            </li>
                                            <li data-flag-key="+223" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ml" role="option">
                                                <div class="flag ml"></div><span class="country-name">Mali</span><span
                                                    class="dial-code">+223</span>
                                            </li>
                                            <li data-flag-key="+356" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mt" role="option">
                                                <div class="flag mt"></div><span class="country-name">Malta</span><span
                                                    class="dial-code">+356</span>
                                            </li>
                                            <li data-flag-key="+692" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mh" role="option">
                                                <div class="flag mh"></div><span class="country-name">Marshall Islands</span><span
                                                    class="dial-code">+692</span>
                                            </li>
                                            <li data-flag-key="+596" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mq" role="option">
                                                <div class="flag mq"></div><span class="country-name">Martinique</span><span
                                                    class="dial-code">+596</span>
                                            </li>
                                            <li data-flag-key="+222" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mr" role="option">
                                                <div class="flag mr"></div><span class="country-name">Mauritania</span><span
                                                    class="dial-code">+222</span>
                                            </li>
                                            <li data-flag-key="+230" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mu" role="option">
                                                <div class="flag mu"></div><span class="country-name">Mauritius</span><span
                                                    class="dial-code">+230</span>
                                            </li>
                                            <li data-flag-key="+52" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mx" role="option">
                                                <div class="flag mx"></div><span class="country-name">Mexico</span><span
                                                    class="dial-code">+52</span>
                                            </li>
                                            <li data-flag-key="+691" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="fm" role="option">
                                                <div class="flag fm"></div><span class="country-name">Micronesia</span><span
                                                    class="dial-code">+691</span>
                                            </li>
                                            <li data-flag-key="+373" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="md" role="option">
                                                <div class="flag md"></div><span class="country-name">Moldova</span><span
                                                    class="dial-code">+373</span>
                                            </li>
                                            <li data-flag-key="+377" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mc" role="option">
                                                <div class="flag mc"></div><span class="country-name">Monaco</span><span
                                                    class="dial-code">+377</span>
                                            </li>
                                            <li data-flag-key="+976" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mn" role="option">
                                                <div class="flag mn"></div><span class="country-name">Mongolia</span><span
                                                    class="dial-code">+976</span>
                                            </li>
                                            <li data-flag-key="+382" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="me" role="option">
                                                <div class="flag me"></div><span class="country-name">Montenegro</span><span
                                                    class="dial-code">+382</span>
                                            </li>
                                            <li data-flag-key="+212" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ma" role="option">
                                                <div class="flag ma"></div><span class="country-name">Morocco</span><span
                                                    class="dial-code">+212</span>
                                            </li>
                                            <li data-flag-key="+258" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mz" role="option">
                                                <div class="flag mz"></div><span class="country-name">Mozambique</span><span
                                                    class="dial-code">+258</span>
                                            </li>
                                            <li data-flag-key="+95" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="mm" role="option">
                                                <div class="flag mm"></div><span class="country-name">Myanmar</span><span
                                                    class="dial-code">+95</span>
                                            </li>
                                            <li data-flag-key="+264" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="na" role="option">
                                                <div class="flag na"></div><span class="country-name">Namibia</span><span
                                                    class="dial-code">+264</span>
                                            </li>
                                            <li data-flag-key="+674" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nr" role="option">
                                                <div class="flag nr"></div><span class="country-name">Nauru</span><span
                                                    class="dial-code">+674</span>
                                            </li>
                                            <li data-flag-key="+977" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="np" role="option">
                                                <div class="flag np"></div><span class="country-name">Nepal</span><span
                                                    class="dial-code">+977</span>
                                            </li>
                                            <li data-flag-key="+31" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nl" role="option">
                                                <div class="flag nl"></div><span class="country-name">Netherlands</span><span
                                                    class="dial-code">+31</span>
                                            </li>
                                            <li data-flag-key="+687" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nc" role="option">
                                                <div class="flag nc"></div><span class="country-name">New Caledonia</span><span
                                                    class="dial-code">+687</span>
                                            </li>
                                            <li data-flag-key="+64" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="nz" role="option">
                                                <div class="flag nz"></div><span class="country-name">New Zealand</span><span
                                                    class="dial-code">+64</span>
                                            </li>
                                            <li data-flag-key="+505" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ni" role="option">
                                                <div class="flag ni"></div><span class="country-name">Nicaragua</span><span
                                                    class="dial-code">+505</span>
                                            </li>
                                            <li data-flag-key="+227" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ne" role="option">
                                                <div class="flag ne"></div><span class="country-name">Niger</span><span
                                                    class="dial-code">+227</span>
                                            </li>
                                            <li data-flag-key="+234" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ng" role="option">
                                                <div class="flag ng"></div><span class="country-name">Nigeria</span><span
                                                    class="dial-code">+234</span>
                                            </li>
                                            <li data-flag-key="+850" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="kp" role="option">
                                                <div class="flag kp"></div><span class="country-name">North Korea</span><span
                                                    class="dial-code">+850</span>
                                            </li>
                                            <li data-flag-key="+47" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="no" role="option">
                                                <div class="flag no"></div><span class="country-name">Norway</span><span
                                                    class="dial-code">+47</span>
                                            </li>
                                            <li data-flag-key="+968" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="om" role="option">
                                                <div class="flag om"></div><span class="country-name">Oman</span><span
                                                    class="dial-code">+968</span>
                                            </li>
                                            <li data-flag-key="+92" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pk" role="option">
                                                <div class="flag pk"></div><span class="country-name">Pakistan</span><span
                                                    class="dial-code">+92</span>
                                            </li>
                                            <li data-flag-key="+680" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pw" role="option">
                                                <div class="flag pw"></div><span class="country-name">Palau</span><span
                                                    class="dial-code">+680</span>
                                            </li>
                                            <li data-flag-key="+970" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ps" role="option">
                                                <div class="flag ps"></div><span class="country-name">Palestine</span><span
                                                    class="dial-code">+970</span>
                                            </li>
                                            <li data-flag-key="+507" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pa" role="option">
                                                <div class="flag pa"></div><span class="country-name">Panama</span><span
                                                    class="dial-code">+507</span>
                                            </li>
                                            <li data-flag-key="+675" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pg" role="option">
                                                <div class="flag pg"></div><span class="country-name">Papua New Guinea</span><span
                                                    class="dial-code">+675</span>
                                            </li>
                                            <li data-flag-key="+595" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="py" role="option">
                                                <div class="flag py"></div><span class="country-name">Paraguay</span><span
                                                    class="dial-code">+595</span>
                                            </li>
                                            <li data-flag-key="+51" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pe" role="option">
                                                <div class="flag pe"></div><span class="country-name">Peru</span><span
                                                    class="dial-code">+51</span>
                                            </li>
                                            <li data-flag-key="+63" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ph" role="option" aria-selected="true">
                                                <div class="flag ph"></div><span class="country-name">Philippines</span><span
                                                    class="dial-code">+63</span>
                                            </li>
                                            <li data-flag-key="+48" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pl" role="option">
                                                <div class="flag pl"></div><span class="country-name">Poland</span><span
                                                    class="dial-code">+48</span>
                                            </li>
                                            <li data-flag-key="+351" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pt" role="option">
                                                <div class="flag pt"></div><span class="country-name">Portugal</span><span
                                                    class="dial-code">+351</span>
                                            </li>
                                            <li data-flag-key="+1" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="pr" role="option">
                                                <div class="flag pr"></div><span class="country-name">Puerto Rico</span><span
                                                    class="dial-code">+1</span>
                                            </li>
                                            <li data-flag-key="+974" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="qa" role="option">
                                                <div class="flag qa"></div><span class="country-name">Qatar</span><span
                                                    class="dial-code">+974</span>
                                            </li>
        
                                            <li data-flag-key="+262" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="re" role="option">
                                                <div class="flag re"></div><span class="country-name">Réunion</span><span
                                                    class="dial-code">+262</span>
                                            </li>
                                            <li data-flag-key="+40" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ro" role="option">
                                                <div class="flag ro"></div><span class="country-name">Romania</span><span
                                                    class="dial-code">+40</span>
                                            </li>
                                            <li data-flag-key="+7" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ru" role="option">
                                                <div class="flag ru"></div><span class="country-name">Russia</span><span
                                                    class="dial-code">+7</span>
                                            </li>
                                            <li data-flag-key="+250" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="rw" role="option">
                                                <div class="flag rw"></div><span class="country-name">Rwanda</span><span
                                                    class="dial-code">+250</span>
                                            </li>
                                            <li data-flag-key="+1869" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="kn" role="option">
                                                <div class="flag kn"></div><span class="country-name">Saint Kitts and
                                                    Nevis</span><span class="dial-code">+1869</span>
                                            </li>
                                            <li data-flag-key="+1758" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lc" role="option">
                                                <div class="flag lc"></div><span class="country-name">Saint Lucia</span><span
                                                    class="dial-code">+1758</span>
                                            </li>
                                            <li data-flag-key="+1784" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="vc" role="option">
                                                <div class="flag vc"></div><span class="country-name">Saint Vincent and the
                                                    Grenadines</span><span class="dial-code">+1784</span>
                                            </li>
                                            <li data-flag-key="+685" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ws" role="option">
                                                <div class="flag ws"></div><span class="country-name">Samoa</span><span
                                                    class="dial-code">+685</span>
                                            </li>
                                            <li data-flag-key="+378" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sm" role="option">
                                                <div class="flag sm"></div><span class="country-name">San Marino</span><span
                                                    class="dial-code">+378</span>
                                            </li>
                                            <li data-flag-key="+239" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="st" role="option">
                                                <div class="flag st"></div><span class="country-name">São Tomé and
                                                    Príncipe</span><span class="dial-code">+239</span>
                                            </li>
                                            <li data-flag-key="+966" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sa" role="option">
                                                <div class="flag sa"></div><span class="country-name">Saudi Arabia</span><span
                                                    class="dial-code">+966</span>
                                            </li>
                                            <li data-flag-key="+221" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sn" role="option">
                                                <div class="flag sn"></div><span class="country-name">Senegal</span><span
                                                    class="dial-code">+221</span>
                                            </li>
                                            <li data-flag-key="+381" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="rs" role="option">
                                                <div class="flag rs"></div><span class="country-name">Serbia</span><span
                                                    class="dial-code">+381</span>
                                            </li>
                                            <li data-flag-key="+248" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sc" role="option">
                                                <div class="flag sc"></div><span class="country-name">Seychelles</span><span
                                                    class="dial-code">+248</span>
                                            </li>
                                            <li data-flag-key="+232" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sl" role="option">
                                                <div class="flag sl"></div><span class="country-name">Sierra Leone</span><span
                                                    class="dial-code">+232</span>
                                            </li>
                                            <li data-flag-key="+65" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sg" role="option">
                                                <div class="flag sg"></div><span class="country-name">Singapore</span><span
                                                    class="dial-code">+65</span>
                                            </li>
                                            <li data-flag-key="+421" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sk" role="option">
                                                <div class="flag sk"></div><span class="country-name">Slovakia</span><span
                                                    class="dial-code">+421</span>
                                            </li>
                                            <li data-flag-key="+386" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="si" role="option">
                                                <div class="flag si"></div><span class="country-name">Slovenia</span><span
                                                    class="dial-code">+386</span>
                                            </li>
                                            <li data-flag-key="+677" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sb" role="option">
                                                <div class="flag sb"></div><span class="country-name">Solomon
                                                    Islands</span><span class="dial-code">+677</span>
                                            </li>
                                            <li data-flag-key="+252" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="so" role="option">
                                                <div class="flag so"></div><span class="country-name">Somalia</span><span
                                                    class="dial-code">+252</span>
                                            </li>
                                            <li data-flag-key="+27" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="za" role="option">
                                                <div class="flag za"></div><span class="country-name">South Africa</span><span
                                                    class="dial-code">+27</span>
                                            </li>
                                            <li data-flag-key="+81" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="jp" role="option">
                                                <div class="flag jp"></div><span class="country-name">Japan</span><span
                                                    class="dial-code">+81</span>
                                            </li>
                                            <li data-flag-key="+82" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="kr" role="option">
                                                <div class="flag kr"></div><span class="country-name">South Korea</span><span
                                                    class="dial-code">+82</span>
                                            </li>
                                            <li data-flag-key="+211" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ss" role="option">
                                                <div class="flag ss"></div><span class="country-name">South Sudan</span><span
                                                    class="dial-code">+211</span>
                                            </li>
                                            <li data-flag-key="+34" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="es" role="option">
                                                <div class="flag es"></div><span class="country-name">Spain</span><span
                                                    class="dial-code">+34</span>
                                            </li>
                                            <li data-flag-key="+94" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="lk" role="option">
                                                <div class="flag lk"></div><span class="country-name">Sri Lanka</span><span
                                                    class="dial-code">+94</span>
                                            </li>
                                            <li data-flag-key="+249" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sd" role="option">
                                                <div class="flag sd"></div><span class="country-name">Sudan</span><span
                                                    class="dial-code">+249</span>
                                            </li>
                                            <li data-flag-key="+597" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sr" role="option">
                                                <div class="flag sr"></div><span class="country-name">Suriname</span><span
                                                    class="dial-code">+597</span>
                                            </li>
                                            <li data-flag-key="+268" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sz" role="option">
                                                <div class="flag sz"></div><span class="country-name">Swaziland</span><span
                                                    class="dial-code">+268</span>
                                            </li>
                                            <li data-flag-key="+46" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="se" role="option">
                                                <div class="flag se"></div><span class="country-name">Sweden</span><span
                                                    class="dial-code">+46</span>
                                            </li>
                                            <li data-flag-key="+41" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ch" role="option">
                                                <div class="flag ch"></div><span class="country-name">Switzerland</span><span
                                                    class="dial-code">+41</span>
                                            </li>
                                            <li data-flag-key="+963" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="sy" role="option">
                                                <div class="flag sy"></div><span class="country-name">Syria</span><span
                                                    class="dial-code">+963</span>
                                            </li>
                                            <li data-flag-key="+886" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tw" role="option">
                                                <div class="flag tw"></div><span class="country-name">Taiwan</span><span
                                                    class="dial-code">+886</span>
                                            </li>
                                            <li data-flag-key="+992" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tj" role="option">
                                                <div class="flag tj"></div><span class="country-name">Tajikistan</span><span
                                                    class="dial-code">+992</span>
                                            </li>
                                            <li data-flag-key="+255" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tz" role="option">
                                                <div class="flag tz"></div><span class="country-name">Tanzania</span><span
                                                    class="dial-code">+255</span>
                                            </li>
                                            <li data-flag-key="+66" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="th" role="option">
                                                <div class="flag th"></div><span class="country-name">Thailand</span><span
                                                    class="dial-code">+66</span>
                                            </li>
                                            <li data-flag-key="+670" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tl" role="option">
                                                <div class="flag tl"></div><span class="country-name">Timor-Leste</span><span
                                                    class="dial-code">+670</span>
                                            </li>
                                            <li data-flag-key="+228" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tg" role="option">
                                                <div class="flag tg"></div><span class="country-name">Togo</span><span
                                                    class="dial-code">+228</span>
                                            </li>
                                            <li data-flag-key="+676" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="to" role="option">
                                                <div class="flag to"></div><span class="country-name">Tonga</span><span
                                                    class="dial-code">+676</span>
                                            </li>
                                            <li data-flag-key="+1868" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tt" role="option">
                                                <div class="flag tt"></div><span class="country-name">Trinidad and
                                                    Tobago</span><span class="dial-code">+1868</span>
                                            </li>
                                            <li data-flag-key="+216" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tn" role="option">
                                                <div class="flag tn"></div><span class="country-name">Tunisia</span><span
                                                    class="dial-code">+216</span>
                                            </li>
                                            <li data-flag-key="+90" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tr" role="option">
                                                <div class="flag tr"></div><span class="country-name">Turkey</span><span
                                                    class="dial-code">+90</span>
                                            </li>
                                            <li data-flag-key="+993" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tm" role="option">
                                                <div class="flag tm"></div><span class="country-name">Turkmenistan</span><span
                                                    class="dial-code">+993</span>
                                            </li>
                                            <li data-flag-key="+688" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="tv" role="option">
                                                <div class="flag tv"></div><span class="country-name">Tuvalu</span><span
                                                    class="dial-code">+688</span>
                                            </li>
                                            <li data-flag-key="+256" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ug" role="option">
                                                <div class="flag ug"></div><span class="country-name">Uganda</span><span
                                                    class="dial-code">+256</span>
                                            </li>
                                            <li data-flag-key="+380" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ua" role="option">
                                                <div class="flag ua"></div><span class="country-name">Ukraine</span><span
                                                    class="dial-code">+380</span>
                                            </li>
                                            <li data-flag-key="+971" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ae" role="option">
                                                <div class="flag ae"></div><span class="country-name">United Arab
                                                    Emirates</span><span class="dial-code">+971</span>
                                            </li>
                                            <li data-flag-key="+44" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="gb" role="option">
                                                <div class="flag gb"></div><span class="country-name">United Kingdom</span><span
                                                    class="dial-code">+44</span>
                                            </li>
                                            <li data-flag-key="+1" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="us" role="option">
                                                <div class="flag us"></div><span class="country-name">United States</span><span
                                                    class="dial-code">+1</span>
                                            </li>
                                            <li data-flag-key="+598" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="uy" role="option">
                                                <div class="flag uy"></div><span class="country-name">Uruguay</span><span
                                                    class="dial-code">+598</span>
                                            </li>
                                            <li data-flag-key="+998" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="uz" role="option">
                                                <div class="flag uz"></div><span class="country-name">Uzbekistan</span><span
                                                    class="dial-code">+998</span>
                                            </li>
                                            <li data-flag-key="+678" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="vu" role="option">
                                                <div class="flag vu"></div><span class="country-name">Vanuatu</span><span
                                                    class="dial-code">+678</span>
                                            </li>
                                            <li data-flag-key="+39" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="va" role="option">
                                                <div class="flag va"></div><span class="country-name">Vatican City</span><span
                                                    class="dial-code">+39</span>
                                            </li>
                                            <li data-flag-key="+58" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ve" role="option">
                                                <div class="flag ve"></div><span class="country-name">Venezuela</span><span
                                                    class="dial-code">+58</span>
                                            </li>
                                            <li data-flag-key="+84" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="vn" role="option">
                                                <div class="flag vn"></div><span class="country-name">Vietnam</span><span
                                                    class="dial-code">+84</span>
                                            </li>
                                            <li data-flag-key="+967" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="ye" role="option">
                                                <div class="flag ye"></div><span class="country-name">Yemen</span><span
                                                    class="dial-code">+967</span>
                                            </li>
                                            <li data-flag-key="+260" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="zm" role="option">
                                                <div class="flag zm"></div><span class="country-name">Zambia</span><span
                                                    class="dial-code">+260</span>
                                            </li>
                                            <li data-flag-key="+263" class="select-flag country" data-dial-code="1"
                                                tabindex="0" data-flag-class="zw" role="option">
                                                <div class="flag zw"></div><span class="country-name">Zimbabwe</span><span
                                                    class="dial-code">+263</span>
                                            </li>
                                        </ul>
        
                                    </div>
                                </div>
        
                                <script>
                                    $(document).ready(function() {
                                        // Add search functionality
                                        $('#country-search').on('input', function() {
                                            var searchText = $(this).val().toLowerCase();
        
                                            $('.country-list li.country').each(function() {
                                                var countryName = $(this).find('.country-name').text().toLowerCase();
                                                if (countryName.includes(searchText)) {
                                                    $(this).show();
                                                } else {
                                                    $(this).hide();
                                                }
                                            });
                                        });
        
                                        // Prevent dropdown from closing when clicking search input
                                        $('.search-input').click(function(e) {
                                            e.stopPropagation();
                                        });
                                    });
                                </script>
        
                                <style>
                                    .search-container {
                                        padding: 5px;
                                        position: sticky;
                                        top: 0;
                                        background: white;
                                        z-index: 1;
                                    }
        
                                    .search-input {
                                        width: 100%;
                                        padding: 5px;
                                        border: 1px solid #ddd;
                                        border-radius: 4px;
                                    }
        
                                    .country-list {
                                        max-height: 300px;
                                        overflow-y: auto;
                                    }
                                </style>
                            <small id="phone-error" style="color: red; display: none;">
                                <!-- ❌ Please enter a valid phone number with the correct country code. -->
                                ❌ Between 9 and 15 digits. Must start with a digit. Only numbers are permitted.
                            </small>
                            <p id="pnnote" class="visually-hidden"
                                style="font-size: 1rem; border-radius: 0.5rem; background: lightpink; color: firebrick; padding: 0.25rem; position: relative; margin-top: 0.5rem;">
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info"
                                    class="svg-inline--fa fa-circle-info " role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="currentColor"
                                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z">
                                    </path>
                                </svg><span></span> Between 9 and 15 digits.<br>Must start with a digit.<br>Only
                                numbers are permitted.
                            </p>
                        </div>
                        <!-- <div class="mb-4">
                                                            <label class="form-label" for="formEmail">Email Address:<svg aria-hidden="true"
                                                                    focusable="false" data-prefix="fas" data-icon="check"
                                                                    class="svg-inline--fa fa-check visually-hidden" role="img"
                                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                                                    style="color: limegreen; margin-left: 0.25rem;">
                                                                    <path fill="currentColor"
                                                                        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                                                    </path>
                                                                </svg><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark"
                                                                    class="svg-inline--fa fa-xmark visually-hidden" role="img"
                                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                                                    style="color: red; margin-left: 0.25rem;">
                                                                    <path fill="currentColor"
                                                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                                                    </path>
                                                                </svg></label><input maxlength="100" placeholder="example@example.com" autocomplete="off"
                                                                required="" aria-invalid="true" aria-describedby="enote" type="email" id="formEmail"
                                                                class="form-control" value="">
                                                            <p id="enote" class="visually-hidden"
                                                                style="font-size: 1rem; border-radius: 0.5rem; background: lightpink; color: firebrick; padding: 0.25rem; position: relative; margin-top: 0.5rem;">
                                                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info"
                                                                    class="svg-inline--fa fa-circle-info " role="img"
                                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                                    <path fill="currentColor"
                                                                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z">
                                                                    </path>
                                                                </svg><span></span> Invalid email format.<br>Please ensure your email address is
                                                                in the correct format (e.g., example@example.com).
                                                            </p>
                                                        </div> -->
                        <div class="mb-4"><label class="form-label" for="formFullName">Full Name:<svg
                                    aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                    class="svg-inline--fa fa-check visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                    style="color: limegreen; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                    </path>
                                </svg><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark"
                                    class="svg-inline--fa fa-xmark visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                    style="color: red; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                    </path>
                                </svg></label><input maxlength="100" placeholder="Full Name" autocomplete="off"
                                required="" aria-invalid="true" aria-describedby="fnnote" type="text"
                                id="formFullName" class="form-control" name="name" required>
                            <p id="fnnote" class="visually-hidden"
                                style="font-size: 1rem; border-radius: 0.5rem; background: lightpink; color: firebrick; padding: 0.25rem; position: relative; margin-top: 0.5rem;">
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info"
                                    class="svg-inline--fa fa-circle-info " role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="currentColor"
                                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z">
                                    </path>
                                </svg><span></span> Please enter both your first and last name.<br>Ensure the
                                name is within a reasonable length.
                            </p>
                        </div>
                        <div class="mb-4"><label class="form-label" for="formPassword">Create Password:<svg
                                    aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                    class="svg-inline--fa fa-check visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                    style="color: limegreen; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                    </path>
                                </svg><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark"
                                    class="svg-inline--fa fa-xmark visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                    style="color: red; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                    </path>
                                </svg></label>
                            <div class="input-group"><input maxlength="24" autocomplete="off"
                                    placeholder="Create password" required="" aria-invalid="true"
                                    aria-describedby="pwdnote" type="password" id="pass" name="password"
                                    class="form-control" value="">
                                <span class="input-group-text" style="cursor: pointer;">
                                    <svg aria-hidden="true" id="close" focusable="false" data-prefix="fas"
                                        data-icon="eye" class="svg-inline--fa fa-eye " role="img"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                        <path fill="currentColor"
                                            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
                                        </path>
                                    </svg>
                                    <svg style="display: none;" id="open" aria-hidden="true" focusable="false"
                                        data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash "
                                        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                                        <path fill="currentColor"
                                            d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z">
                                        </path>
                                    </svg>
                                </span>
                            </div>

                        </div>
                        <div class="mb-4"><label class="form-label" for="formConfirmPassword">Confirm
                                Password:
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check"
                                    class="svg-inline--fa fa-check visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                                    style="color: limegreen; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z">
                                    </path>
                                </svg>
                                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark"
                                    class="svg-inline--fa fa-xmark visually-hidden" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
                                    style="color: red; margin-left: 0.25rem;">
                                    <path fill="currentColor"
                                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
                                    </path>
                                </svg>
                            </label>
                            <div class="input-group">
                                <input maxlength="24" autocomplete="off" placeholder="Confirm password"
                                    required="" aria-invalid="true" aria-describedby="cpwdmnote" type="password"
                                    name="password_confirmation" id="pass_confirm" class="form-control"
                                    value=""><span class="input-group-text" style="cursor: pointer;">
                                    <svg aria-hidden="true" id="close2" focusable="false" data-prefix="fas"
                                        data-icon="eye" class="svg-inline--fa fa-eye " role="img"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                        <path fill="currentColor"
                                            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
                                        </path>
                                    </svg>
                                    <svg style="display: none;" id="open2" aria-hidden="true" focusable="false"
                                        data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash "
                                        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                                        <path fill="currentColor"
                                            d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z">
                                        </path>
                                    </svg>
                                </span>
                            </div>

                        </div>
                        <div class="d-flex justify-content-center mb-4">
                            <button type="submit" class="btn btn-primary" style="width: 270px;">REGISTER NOW</button>
                        </div>
                    </form>
                    <div class="d-flex justify-content-center ">
                        <p class="small fw-bold ">Already have an account? <a class="link-danger"
                                href="{{ route('signin') }}">Sign In
                                Here</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script type="text/javascript">
        $.ajax({
            url: "https://api.ipify.org",
            async: false,
            success: function(data) {
                document.querySelector('#ip').value = data;
            }
        });
        $(function() {
            $('#close').on('click', function() {
                $('#pass').attr('type', 'text');
                $(this).hide();
                $('#open').show();

            });

            $('#open').on('click', function() {
                $('#pass').attr('type', 'password');
                $(this).hide();
                $('#close').show();


            });
            $('#close2').on('click', function() {
                $('#pass_confirm').attr('type', 'text');
                $(this).hide();
                $('#open2').show();

            });

            $('#open2').on('click', function() {
                $('#pass_confirm').attr('type', 'password');
                $(this).hide();
                $('#close2').show();


            });
        });
    </script>
    <!--select flag-->
    <script type="text/javascript">
        $(document).ready(function() {
            // Default country code (Ph)
            var defaultCountryCode = "+27";
            // list of country codes
            var countryMap = {
                "+63": "ph",
                "+1": "us",
                "+1": "ca",
                "+44": "gb",
                "+93": "af",
                "+355": "al",
                "+266": "ls",
                "+213": "dz",
                "+231": "",
                "+218": "ly",
                "+423": "li",
                "+370": "lt",
                "+352": "lu",
                "+853": "mo",
                "+389": "mk",
                "+261": "mg",
                "+265": "mw",
                "+60": "my",
                "+960": "mv",
                "+223": "ml",
                "+356": "mt",
                "+692": "mh",
                "++596": "mq",
                "+222": "mr",
                "+230": "mu",
                "+52": "mx",
                "+691": "fm",
                "+373": "md",
                "+52": "mx",
                "+377": "mc",
                "+850": "ng",
                "+47": "kp",
                "+968": "no",
                "+92": "om",
                "+680": "pk",
                "+970": "pw",
                "+507": "ps",
                "+675": "pa",
                "+595": "pg",
                "+51": "py",
                // "+63": "pe",
                "+48": "pl",
                "+351": "pt",
                "+1": "pr",
                "+974": "qa",
                "+262": "re",
                "+355": "ro",
                "+213": "ru",
                "+266": "rw",
                "+231": "kn",
                "+218": "lc",
                "+423": "vc",
                "+370": "ws",
                "+352": "sm",
                "+230": "st",
                "+508": "sa",
                "+677": "sg",
                "+684": "sx",
                "+239": "sk",
                "+966": "si",
                "+221": "sb",
                "+381": "so",
                "+248": "za",
                "+232": "kr",
                "+65": "ss",
                "+421": "es",
                "+34": "es",
                "+503": "sv",
                "+249": "sl",
                "+247": "sh",
                "+250": "sc",
                "+268": "sd",
                "+597": "sr",
                "+233": "sz",
                "+47": "se",
                "+46": "sv",
                "+55": "br",
                "+505": "bz",
                "+284": "bj",
                "+246": "bm",
                "+673": "bn",
                "+598": "bo",
                "+27": "bw",
                "+675": "bt",
                "+55": "br",
                "+244": "bf",
                "+686": "bi",
                "+257": "bj",
                // "+855": "kh",
                "+263": "km",
                "+672": "kg",
                "+385": "xk",
                "+354": "gi",
                "+299": "gl",
                "+350": "gr",
                "+49": "de",
                "+20": "gr",
                "+30": "gr",
                "+39": "it",
                "+1": "us",
                "+44": "gb",
                "++44": "uk",
                "+33": "fr",
                "+594": "gq",
                "+240": "gn",
                "+220": "gw",
                "+224": "lr",
                "+245": "ls",
                "+262": "ly",
                "+249": "li",
                "+247": "lc",
                "+238": "vc",
                "+377": "ws",
                "+230": "st",
                "+508": "sa",
                "+677": "sg",
                "+684": "sx",
                "+239": "sk",
                "+966": "si",
                "+221": "sb",
                "+381": "so",
                "+248": "za",
                '+84': 'vn',
                '+967': 'ye',
                '+260': 'zm',
                '+263': 'zw',
                '+255': 'na',
                '+256': 'zw',
                '+268': 'zw',
                '+250': 'zw',
                '+264': 'mz',
                '+212': 'zw',
                '+254': 'ke',
                '+255': 'tz',
                '+257': 'ug',
                '+258': 'zm',
                '+260': 'na',
                '+265': 'mw',
                '+266': 'zm',
                '+267': 'na',
                '+268': 'zw',
                '+269': 'zm',
                '+66': 'th',
            };
            // Set default country code and flag
            $('#phone-input').val(defaultCountryCode + " ");

            $('.select-flag').click(function() {
                var phone = $(this).data('flag-key');
                var flagClass = $(this).data('flag-class');
                $('input[name="phone"]').val(phone);
                $('#flagimage').attr('class', 'flag ' + flagClass);
            });
            // When user types a country code, update flag 
            $('#phone-input').on('input', function() {
                var inputVal = $(this).val().trim();
                var matchedFlag = null;

                // Check if the input matches any country code
                $.each(countryMap, function(code, flag) {
                    if (inputVal.startsWith(code)) {
                        matchedFlag = flag;
                    }
                });

                // If match found, update flag
                if (matchedFlag) {
                    $('#flagimage').attr('class', 'flag ' + matchedFlag);
                }
            });
            // Validate phone number on blur
            $('#phone-input').on('blur', function() {
                var phoneNumber = $(this).val().trim();
                var digitsOnly = phoneNumber.replace(/\D/g, '').length; // Count only digits

                if (digitsOnly < 9 || digitsOnly > 15) {
                    $('#phone-error').show();
                    // jSuites.notification({
                    // error: 1,
                    // name: 'Agreement Required',
                    // message: '❌ Between 9 and 15 digits. Must start with a digit. Only numbers are permitted.',
                    // });
                } else {
                    $('#phone-error').hide();
                    // jSuites.notification({
                    // success: 1,
                    // name: 'Agreement Required',
                    // message: 'Greated! You have entered a valid phone number.',
                    // });
                }
            });

        });
    </script>
@endpush