@extends('layouts.frontend-master')
@section('title', 'login')
@push('style')
@endpush

@section('content')

    <div class="container container-fluid">
        <div class="Toastify"></div>
        <div class="d-flex justify-content-center align-items-center h-100">
            <div class="card py-4 px-4" style="width: 21rem;">
                <h3 class="text-center mb-4">Sign In</h3>
                <form class="" action="{{ route('login') }}" method="post">
                    @csrf
                    <input type="hidden" name="ip" id="ip">

                    <div class="mb-4">
                        <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="+27"
                                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" style="display: none;">
                                    <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>
                    </div>
                    <div class="mb-4 input-group">
                        <input id="pass" name="password" placeholder="Password" type="password" required
                            class="form-control" value="111122221"><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 class="mb-4">
                        <div class="form-check"><input type="checkbox" id="persist"
                                class="form-check-input"><label title="" for="persist"
                                class="form-check-label">Remember me</label></div>
                    </div>
                    <div class="d-flex justify-content-center mb-4">
                        <button type="submit" class="btn btn-primary" style="width: 270px;">SIGN IN</button>
                    </div>
                    <div class="d-flex justify-content-center ">
                        <p class="small fw-bold ">Don't have an account? <a class="link-danger"
                                href="{{ route('signup') }}">Register
                                Here</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--number code country -->
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></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();


            });
        });
    </script>
    <!--select flag-->
    <script type="text/javascript">
        $(document).ready(function() {
            // list of country codes
            var countryMap = {                
                "+1": "ca",
                "+63": "ph",
                "+1": "us",
                "+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",
                "+27": "za",
                "+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',
            };
            $('.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);
                }
            });

        });
    </script>

  
@endpush