@extends('layouts.master4')
@section('css')
		<!-- INTERNAL SINGLE-PAGE CSS -->
		<link href="{{ url('assets/plugins/single-page/css/main.css')}}" rel="stylesheet" type="text/css">
       <style>
    .wrap-input100 {
        display: flex;
        align-items: center;
    }
    .input100 {
        flex: 1;
    }
    .select-small {
        width: 80px; /* Adjust the width of the select as needed */

    }
    .input100 {
        height: 38px !important;
    }
    .input-large {
        width: calc(100% - 120px); /* Input width is the remainder of the width minus that of the select */
        margin-left: 20px; /* To add space between the select and the input */
    }
</style>
@endsection
@section('content')
			<!-- CONTAINER OPEN -->


			<div class="container-login100" style="opacity: 0.8">

				<div class="wrap-login100 p-6">
					<form class="login100-form validate-form"  method="POST" action="{{ route('login') }}">
                          @csrf
						<span class="login100-form-title">
							Login
						</span>
                        <div class="login-separater text-center mb-4"> <span>Connectez vous avec votre numero et votre mot de passe </span>
                                        <hr/>
                        </div>
                         @include("layouts.alert")
                        <div id="step1">
						<div class="wrap-input100 validate-input" >
                             <span class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.05 21q-.45 0-.75-.3t-.3-.75V15.9q0-.325.225-.587t.575-.363l3.45-.7q.35-.05.713.063t.587.337L10.9 17q.95-.55 1.8-1.213t1.625-1.437q.825-.8 1.513-1.662t1.187-1.788L14.6 8.45q-.2-.2-.275-.475T14.3 7.3l.65-3.5q.05-.325.325-.562T15.9 3h4.05q.45 0 .75.3t.3.75q0 3.125-1.362 6.175t-3.863 5.55q-2.5 2.5-5.55 3.863T4.05 21"/></svg>
							</span>
                            &nbsp;
                              <select required class="form-control select2-show-search  select-small" name="country_code" id="country_code">
                                                                    </select>

							<input required class="form-control input-large" type="text" id="full_login" name="full_login" placeholder="Numero">



						</div>
                         <div class="container-login100-form-btn">
            <button type="button" class="login100-form-btn btn-primary" onclick="nextStep()">Suivant</button>
        </div>
                          </div>
                           <div id="step2" style="display: none;">
					<div class="wrap-input100 validate-input" data-validate="Password is required">
                        <div style="display: flex; align-items: center;">
                               <span class="">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="fill: #000; color:white">
                                    <g fill="none">
                                        <path d="M0 0h24v24H0V0z"/>
                                        <path d="M0 0h24v24H0V0z" opacity=".87"/>
                                    </g>
                                    <path d="M6 20h12V10H6v10zm6-7c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" opacity=".3"/>
                                    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/>
                                </svg>
                            </span>
                            &nbsp;
                            <input required style="width:250px" class="form-control" type="password" name="password" id="passwordInput" placeholder="Password">
                           &nbsp;
                            <span style="cursor: pointer;">
                                <i class='bx bx-hide toggle-password'></i>
                            </span>
                            <!-- Button to toggle password visibility -->

                        </div>
                    </div>

              {{--     <div class="text-center pt-1">
   {!! Captcha::img() !!}
        <input type="text" id="captcha" name="captcha" class="form-control" placeholder="Enter Captcha">
        </div>
						<div class="text-right pt-1">
							<p class="mb-0"><a href="{{url('/' . $page='forgot-password')}}" class="text-primary ml-1">Forgot Password?</a></p>
						</div>--}}
                        <br>
						  <div class="container-login100-form-btn">
            <button type="submit" class="login100-form-btn btn-primary">Login</button>


        </div>
        <br>
         <div style="text-align: left;">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  style="fill: red; color:red" style="cursor: pointer;" onclick="prevStep()">

            <path fill="currentColor" d="M20 11H7.41l5.3-5.29c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0l-7.7 7.71c-.39.39-.39 1.02 0 1.41l7.7 7.71c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-5.29-5.29H20c.55 0 1-.45 1-1s-.45-1-1-1z"/>
        </svg>
           @lang("Retour")
    </div>
						{{--<div class="text-center pt-3">
							<p class="text-dark mb-0">Not a member?<a href="{{url('/' . $page='register')}}" class="text-primary ml-1">Sign UP now</a></p>
						</div>--}}
						{{--<div class=" flex-c-m text-center mt-3">
							<p>Or</p>
							<div class="social-icons">
								<ul>
									<li><a class="btn  btn-social btn-block btn-google"><i class="fa fa-google-plus"></i> Sign up with Google</a></li>
									<li><a class="btn  btn-social btn-block btn-facebook mt-2"><i class="fa fa-facebook"></i> Sign in with Facebook</a></li>
								</ul>
							</div>
						</div>--}}
                         </div>
					</form>
				</div>
			</div>
			<!-- CONTAINER CLOSED -->
@endsection
@section('js')
<script>
    // Définissez une liste d'indicateurs de pays avec les longueurs de numéro correspondantes
    const countryCodes = {
        "1": { indicator: "+1", length: 10 }, // USA
        "33": { indicator: "+33", length: 9 }, // France
        // Ajoutez d'autres pays avec leurs indicateurs et longueurs respectives
    };

    // Fonction pour mettre à jour la longueur maximale du champ de numéro en fonction du pays sélectionné
    document.getElementById("country_code").addEventListener("change", function() {
        const selectedCountry = this.value;
        const selectedCountryData = countryCodes[selectedCountry];
        if (selectedCountryData) {
            document.getElementById("full_login").setAttribute("maxlength", selectedCountryData.length);
        }
    });

    // Présélectionnez l'indicateur de pays en fonction du paramètre passé dans le contrôleur
    const countryCodeFromController = "{{ $pays }}"; // Remplacez cela par le code approprié pour récupérer le paramètre de votre contrôleur
    if (countryCodes[countryCodeFromController]) {
        document.getElementById("country_code").value = countryCodeFromController;
        document.getElementById("full_login").setAttribute("maxlength", countryCodes[countryCodeFromController].length);
    }
</script>
<script>
   function nextStep() {
    var fullLoginInput = document.getElementById('full_login').value.trim();
    if (fullLoginInput === '') {
        alert('Veuillez svp renseigner le numero de téléphone');
        return;
    }
    document.getElementById('step1').style.display = 'none';
    document.getElementById('step2').style.display = 'block';
}

    function prevStep() {
        document.getElementById('step2').style.display = 'none';
        document.getElementById('step1').style.display = 'block';
    }
</script>
<script>
    const togglePasswordBtn = document.querySelector('.toggle-password');
    const passwordInput = document.getElementById('passwordInput');

    togglePasswordBtn.addEventListener('click', function () {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        // Change icon based on password visibility
        this.classList.toggle('bx-hide');
        this.classList.toggle('bx-show');
    });
</script>
<script>
    $(document).ready(function () {
        $("#show_hide_password a").on('click', function (event) {
            event.preventDefault();
            if ($('#show_hide_password input').attr("type") == "text") {
                $('#show_hide_password input').attr('type', 'password');
                $('#show_hide_password i').addClass("bx-hide");
                $('#show_hide_password i').removeClass("bx-show");
            } else if ($('#show_hide_password input').attr("type") == "password") {
                $('#show_hide_password input').attr('type', 'text');
                $('#show_hide_password i').removeClass("bx-hide");
                $('#show_hide_password i').addClass("bx-show");
            }
        });
    });
</script>
@endsection