@extends('layouts.app')

@section('content')
<div class="container-fluid contents">
    <div class="row">
        <div class="col-md-8">

            @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block alert-code">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
            @endif

            <div class="form-area">
                <div class="mb-30">
                    <a href="{{ route('users.edit', Auth::user()) }}" class="discription">
                        <img src="{{ asset('images/arrow_down.svg') }}" alt=""> Retour
                    </a>
                </div>
                <div class="mb-30">
                    <h1 class="h1-bold">{{ __('Modifier mes informations') }}</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('users.2fa.post', $user->id) }}">
                        @csrf
                        <input type="hidden" value="{{$phone}}" name="phone">
                        <input type="hidden" value="{{$indicatif}}" name="indicatif">
                        <input type="hidden" value="{{$email}}" name="email">
                        <input type="hidden" value="{{$adresse}}" name="adresse">
                        <input type="hidden" value="{{$lieu_residence}}" name="lieu_residence">
                        <input type="hidden" value="{{$nom}}" name="nom">
                        <input type="hidden" value="{{$prenom}}" name="prenom">
                        <input type="hidden" value="{{$birthday}}" name="birthday">
                        <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>
                                    <a class="primary-text" href="{{ route('2fa.resend') }}">
                                        Renvoyer un code de vérification
                                    </a>
                                </div>
                            </div>
                        </div> -->
                    </form>

                </div>
            </div>

        </div>

    </div>

    @endsection

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

    <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>