@extends('auth.layout')

@section('name')
Connexion
@endsection
@section('styles')
    <style>
        .height-100 {
            height: 100vh
        }

        .card {
            width: 400px;
            border: none;
            height: 300px;
            box-shadow: 0px 5px 20px 0px #d2dae3;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .card h6 {
            color: red;
            font-size: 20px
        }

        .inputs input {
            width: 40px;
            height: 40px
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0
        }

        .card-2 {
            background-color: #fff;
            padding: 10px;
            width: 350px;
            height: 100px;
            bottom: -50px;
            left: 20px;
            position: absolute;
            border-radius: 5px
        }

        .card-2 .content {
            margin-top: 50px
        }

        .card-2 .content a {
            color: red
        }

        .form-control:focus {
            box-shadow: none;
            border: 2px solid red
        }

        .validate {
            border-radius: 20px;
            height: 40px;
            background-color: red;
            border: 1px solid red;
            width: 140px
        }
    </style>
@endsection
@section('content')

    <div class="  d-flex justify-content-center align-items-center">
        <div class="position-relative">
            <div class=" p-2 text-center">
                <h6>Veuillez entrer le <code>code OTP </code> que vous avez reçu par {{$wtype}} sur le: <code>{{$data}}</code>.</h6>
                <div class="d-flex justify-content-center">
                    @include('layouts.alert')
                </div>

                <form action="{{route('auth.otp.login')}}" method="post">@csrf
                    <input class="form-control" type="text" value="{{$type}}" hidden readonly name="type" />
                    <input class="form-control" type="number" value="{{$user->id}}" hidden readonly name="user_id" />

                    <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code1" id="first" maxlength="1" />
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code2" id="second" maxlength="1" />
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code3" id="third" maxlength="1" />
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code4" id="fourth" maxlength="1" />
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code5" id="fifth" maxlength="1" />
                        <input class="m-2 text-center form-control rounded" type="text" min="1" name="code6" id="sixth" maxlength="1" /> </div>
                    <div class="mt-4"> <button class="btn btn-primary w-100 " type="submit" >Valider et se connecter</button></div>
                </form>
            </div>
        </div>
    </div>



@endsection


@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {

            function OTPInput() {
                const inputs = document.querySelectorAll('#otp > *[id]');
                for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keydown', function(event) { if (event.key==="Backspace" ) { inputs[i].value='' ; if (i !==0) inputs[i - 1].focus(); } else { if (i===inputs.length - 1 && inputs[i].value !=='' ) { return true; } else if (event.keyCode> 47 && event.keyCode < 58) { inputs[i].value=event.key; if (i !==inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } else if (event.keyCode> 64 && event.keyCode < 91) { inputs[i].value=String.fromCharCode(event.keyCode); if (i !==inputs.length - 1) inputs[i + 1].focus(); event.preventDefault(); } } }); } } OTPInput(); });
    </script>
@endsection