@extends('layouts.app')

@section('content')
<div class="container-fluid login">
    <div class="row">
        <div class="col-md-4 d-flex align-self-center justify-content-center bg-leftside ">
            <img src="{{ asset('images/logo.svg') }}" alt="" width="50%">
        </div>
        <div class="col-md-8 bg-white">

            @if ($message = Session::get('success'))
            <div class="alert alert-light alert-block alert-code-v d-flex justify-content-between align-items-center " role="alert">
                <div class="icon">
                    <img src="{{ asset('images/ok.svg') }}" alt="">
                </div>
                <div class="">
                    <strong class="h4-semibold">Code envoyé</strong>
                    <p class="label black400">Votre code de validation a été renvoyé</p>
                </div>
                <button type="button" class="close" data-dismiss="alert">
                    <img src="{{ asset('images/close-danger.svg') }}" alt="Fermer">
                </button>
            </div>
            @endif

            @if ($message = Session::get('error'))
            <div class="alert alert-light alert-block alert-code-e d-flex justify-content-between align-items-center errors" role="alert">
                <div class="icon">
                    <img src="{{ asset('images/echecicon.svg') }}" alt="">
                </div>
                <div class="">
                    <strong class="h4-semibold">Code incorrect</strong>
                    <p class="label black400">Le code renseigné ne correspond pas. </p>
                </div>
                <button type="button" class="close" data-dismiss="alert">
                    <img src="{{ asset('images/close-danger.svg') }}" alt="Fermer">
                </button>
            </div>
            @endif


            <div class="form-area">
                <div class="mb-30">
                    <a href="{{ route('users.relogin') }}" class="discription">
                        <img src="{{ asset('images/arrow_down.svg') }}" alt=""> Retour
                    </a>
                </div>
                <div class="mb-50">
                    <h1 class="h1-bold">{{ __('Entrer le code') }} </h1>
                    <p class="discription">Un code de vérification a été envoyé au : <br>
                        {{ substr(auth()->user()->phone, 0, 5) . '******' . substr(auth()->user()->phone, -2) }}
                    </p>
                </div>

                <div class="">
                    <form method="POST" action="{{ route('reset.password.post') }}">
                        @csrf
                        <div class="col-md-6 ps-0">
                            <div class="d-flex flex-row mb-30">
                                <div class="pe-10">
                                    <input type="tel" data-index="0" class="input-code @error('code[]') is-invalid @enderror" name="code[]" value="" required maxlength="1" autocomplete="off">
                                </div>
                                <div class="pe-10">
                                    <input type="tel" data-index="1" class="input-code @error('code[]') is-invalid @enderror" name="code[]" value="" required maxlength="1" autocomplete="off">
                                </div>
                                <div class="pe-10">
                                    <input type="tel" data-index="2" class="input-code @error('code[]') is-invalid @enderror" name="code[]" value="" required maxlength="1" autocomplete="off">
                                </div>
                                <div class="pe-10">
                                    <input type="tel" data-index="3" class="input-code @error('code[]') is-invalid @enderror" name="code[]" value="" required maxlength="1" autocomplete="off">
                                </div>
                                <div class="pe-10">
                                    <input type="tel" data-index="4" class="input-code @error('code[]') is-invalid @enderror" name="code[]" value="" required maxlength="1" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        @error('code[]')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror


                        <div class="row mb-0">
                            <div class="col-md-8">
                                <button type="submit" class="cta-primary">
                                    {{ __('Valider') }}
                                </button>
                            </div>
                        </div>

                        <div class="row g-1 justify-content-start position-absolute bottom-0 mb-5">
                            <div class="col-12">
                                <div class="discription">
                                    <p class="discription">Tu n’as pas reçu de code ?</p>
                                    <p class="primary-text" id="hidden_message">Vous pourriez faire une nouvelle demande dans</p>
                                    <p id="timer"> </p>

                                    <a class="primary-text" href="{{ route('2fa.resend') }}" id="resend_link">
                                        Renvoyer un code de vérification
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('resend_link').style.display = 'none';
    function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = 0;
            document.getElementById('resend_link').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            document.getElementById('hidden_message').style.display = 'none';
            // timer = duration; // uncomment this line to reset timer automatically after reaching 0
        }
    }, 1000);
}

window.onload = function () {
    var time = 120, // your time in seconds here
    display = document.querySelector('#timer');

    startTimer(time, display);
};
</script>
@endsection
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- @include('Components.flash-message') -->
<script>
    $(document).ready(function() {

        const $inp = $(".input-code");

        $inp.on({
            paste(ev) {

                const clip = ev.originalEvent.clipboardData.getData('text').trim();

                if (!/\d{5}/.test(clip)) return ev.preventDefault();
                const s = [...clip];
                console.log(s);
                $inp.val(i => s[i]).eq(4).focus();
            },
            input(ev) {
                const i = $inp.index(this);
                if (this.value) $inp.eq(i + 1).focus();
            },
            keydown(ev) {
                var key = ev.keyCode || ev.which;
                const i = $inp.index(this);

                if (!this.value && ev.key === "Backspace" && i || key == 37 && i > 0) {
                    ev.preventDefault();
                    $inp.eq(i - 1).focus();
                }
                if (key == 39 && i + 1 < $inp.length) {
                    ev.preventDefault();
                    $inp.eq(i + 1).focus();
                }
            }

        });
    });
</script>