@extends('layouts.login')
@push('styles')
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            background-color: #fff;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
            text-align: center;
            box-sizing: border-box;
        }

        .container img {
            height: 5em;
            width: 100%;
            object-fit: contain;
            margin-bottom: 1.5rem;
        }

        .container h1 {
            font-size: 24px;
            color: #18528d;
            margin-bottom: 1.5rem;
        }

        .container p {
            font-size: 16px;
            color: #333;
            margin-bottom: 1.5rem;
        }

        .input-group {
            margin-bottom: 1.2rem;
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .input-group label {
            font-size: 14px;
            color: #777;
            display: block;
            text-align: left;
            margin-bottom: 0.5rem;
            width: 100%;
        }

        .input-group input {
            width: calc(16.66% - 0.5rem); /* 6 inputs, each takes 1/6th of the width minus space */
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ddd;
            text-align: center;
            transition: all 0.3s;
        }

        .input-group input:focus {
            border-color: #4a90e2;
            outline: none;
        }

        .button {
            background-color: #18528d;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 5px;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 1.5rem;
        }

        .button:hover {
            background-color: #357ab7;
        }

        .resend {
            margin-top: 1rem;
            font-size: 14px;
            color: #888;
            cursor: pointer;
        }

        .resend a {
            text-decoration: none;
            color: #18528d;
        }

        .resend a:hover {
            color: #357ab7;
        }

        .footer {
            margin-top: 1.5rem;
            font-size: 12px;
            color: #888;
        }

        @media (max-width: 768px) {
            .input-group input {
                width: calc(33.33% - 0.5rem); /* On écrans moyens, chaque champ occupe 1/3 de la largeur */
            }
        }

        @media (max-width: 480px) {
            .input-group input {
                width: calc(50% - 0.5rem); /* Sur écrans mobiles, chaque champ occupe 1/2 de la largeur */
            }

            .button {
                padding: 10px;
                font-size: 14px;
            }

            .container h1 {
                font-size: 20px;
            }

            .container p {
                font-size: 14px;
            }
        }
    </style>
@endpush
@section('titlePage')
    Authentification à deux facteurs
@endsection

@section('contenu')
{{-- <div class="row pt-2">
    <div class="col-sm-8 offset-sm-2">
        <div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
            <div class="authentication-inner py-6 text-center">
                <img src="{{ asset('MonBarreauCI_Logo.png') }}" alt="logo {{ config('app.name') }}"
                    class="img-fluid mx-auto d-block" style="max-width: 250px; padding-bottom:1.5em">
                <div class="card p-md-5 p-3 shadow-lg rounded">
                    <div class="card-body">
                        <h4 class="mb-3" style="color: #18528d">@yield('titlePage') 👋</h4>
                        <p class="text-muted">
                            Vous avez reçu un email contenant votre code d'authentification. Si vous ne l'avez pas reçu,
                            <a href="{{ route('verify.resend') }}" class="fw-bold">cliquez ici</a>.
                        </p>
                        @include('layouts.flash')
                        <form id="formAuthentication" class="mt-4" action="{{ route('verify.store') }}" method="POST" autocomplete="off">
                            @csrf
                            <div class="mb-4 d-flex justify-content-center gap-2">
                                @for ($i = 1; $i <= 6; $i++)
                                    <input id="input{{ $i }}" maxlength="1" oninput="moveToNext(this, 'input{{ $i+1 }}')"
                                        onpaste="handlePaste(event)" pattern="[0-9]" class="text-center form-control rounded-circle fs-4"
                                        style="width: 2.5em; height: 2.8em;" placeholder="0" type="text" name="code{{ $i }}" required>
                                @endfor
                            </div>
                            <button style="background-color:  #18528d; color: #fff" class="btn form-control w-100 py-2 fw-bold" type="submit">Authentifiez-vous</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}
    <div class="container">
        <img src="{{ asset('MonBarreauCI_Logo.png') }}" alt="logo {{ config('app.name') }}"/>
        <h1 class="mb-3">Validation à Double Facteur</h1>
        <p>Entrez le code de vérification que nous vous avons envoyé par email.</p>

        <form action="{{ route('verify.store') }}" method="POST" autocomplete="off">
            @csrf
            <!-- Code de vérification -->
            <div class="input-group">
                <label for="code">Code de vérification</label>
                @for ($i = 1; $i <= 6; $i++)
                    <input id="input{{ $i }}" maxlength="1" oninput="moveToNext(this, 'input{{ $i+1 }}')"
                        onpaste="handlePaste(event)" pattern="[0-9]" class="text-center form-control rounded-circle fs-4"
                        style="width: 2em; height: 2.8em;" placeholder="0" type="text" name="code{{ $i }}" required>
                @endfor
            </div>

            <!-- Bouton de validation -->
            <button type="submit" class="button">Valider</button>
        </form>

        <!-- Renvoi du code -->
        <div class="resend">
            <p>Vous n'avez pas reçu le code ? <a href="{{ route('verify.resend') }}">Renvoi du code</a></p>
        </div>

        <div class="footer">
            <p>Ce formulaire est sécurisé et vos données sont protégées.</p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function(){
        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 5000
        });

        @if (session('warning'))
            Toast.fire({ icon: 'warning', title: '{{ session('warning') }}' });
        @endif

        @if (session('status'))
            Toast.fire({ icon: 'success', title: '{{ session('status') }}' });
        @endif

        @if (session('error'))
            Toast.fire({ icon: 'error', title: '{{ session('error') }}' });
        @endif

        @if (session('info'))
            Toast.fire({ icon: 'info', title: '{{ session('info') }}' });
        @endif
    });

    function moveToNext(current, nextFieldID) {
        if (current.value.length === 1) {
            let nextField = document.getElementById(nextFieldID);
            if (nextField) nextField.focus();
        }
    }

    function handlePaste(event) {
        const paste = (event.clipboardData || window.clipboardData).getData('text').trim();
        const inputs = document.querySelectorAll('input[type="text"]');

        if (/^\d{6}$/.test(paste)) {
            event.preventDefault();
            inputs.forEach((input, index) => {
                input.value = paste[index] || '';
            });
            inputs[5].focus();
        }
    }
</script>
@endpush