@extends('auth.layouts.app')

@section('title', 'Vérification OTP - ePerformance+')

@section('content')
<div class="row auth-wrapper gx-0">
    <div class="col-lg-4 col-xl-3 bg-warning auth-box-2 on-sidebar">
        <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="row justify-content-center text-center">
                <div class="col-md-7 col-lg-12 col-xl-9">
                    <h1 class="mb-0 fw-bold text-white">
                        <i class="mdi mdi-shield-check fs-1"></i>
                    </h1>
                    <h2 class="text-white mt-4 fw-light">Vérification <span class="font-weight-medium">Sécurisée</span></h2>
                    <p class="op-5 text-white fs-4 mt-4">Saisissez le code à 6 chiffres envoyé à votre email.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8 col-xl-9 d-flex align-items-center justify-content-center">
        <div class="row justify-content-center w-100 mt-4 mt-lg-0">
            <div class="col-lg-6 col-xl-5 col-md-8">
                <div class="card shadow-lg">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <div class="mb-3">
                                <i class="mdi mdi-email-check text-warning" style="font-size: 64px;"></i>
                            </div>
                            <h2 class="fw-bold">Code de Vérification</h2>
                            <p class="text-muted fs-5">Envoyé à <strong>{{ session('email') }}</strong></p>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-alert-circle me-2"></i>
                                <strong>Erreur :</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-check-circle me-2"></i>
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <div class="alert alert-info">
                            <i class="mdi mdi-information"></i>
                            <strong>Étape 2/3 :</strong> Saisissez le code OTP reçu par email
                        </div>

                        <form method="POST" action="{{ route('password.verify-otp.submit') }}" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="email" value="{{ session('email') }}">

                            <div class="mb-4">
                                <label for="otp" class="form-label fw-bold">Code OTP (6 chiffres)</label>
                                <input type="text"
                                    class="form-control form-control-lg text-center @error('otp') is-invalid @enderror"
                                    id="otp"
                                    name="otp"
                                    maxlength="6"
                                    pattern="[0-9]{6}"
                                    placeholder="000000"
                                    style="font-size: 28px; letter-spacing: 10px; font-weight: bold;"
                                    required
                                    autofocus>
                                @error('otp')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <div class="form-text">
                                    <i class="mdi mdi-clock-outline"></i> Le code expire dans <span id="countdown" class="fw-bold text-danger">5:00</span>
                                </div>
                            </div>

                            <div class="d-grid gap-2 mb-3">
                                <button type="submit" class="btn btn-warning btn-lg">
                                    <i class="mdi mdi-check-circle"></i> Vérifier le Code
                                </button>
                            </div>
                        </form>

                        <hr class="my-4">

                        <div class="text-center">
                            <p class="text-muted mb-3">Vous n'avez pas reçu le code ?</p>
                            <form method="POST" action="{{ route('password.resend-otp') }}" id="resend-form">
                                @csrf
                                <input type="hidden" name="email" value="{{ session('email') }}">
                                <button type="submit" class="btn btn-outline-info" id="resend-btn">
                                    <i class="mdi mdi-reload"></i> Renvoyer le Code
                                </button>
                            </form>
                            <p class="text-muted small mt-3 mb-0">
                                <a href="{{ route('password.request') }}" class="text-muted">
                                    <i class="mdi mdi-arrow-left"></i> Changer l'email
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Validation Bootstrap
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()

    document.getElementById('otp').addEventListener('input', function(e) {
        this.value = this.value.replace(/[^0-9]/g, '');
    });
    let timeLeft = 300; // 5 minutes en secondes
    const countdownElement = document.getElementById('countdown');
    const resendBtn = document.getElementById('resend-btn');

    const countdown = setInterval(function() {
        timeLeft--;

        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;

        countdownElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;

        if (timeLeft <= 60) {
            countdownElement.classList.remove('text-danger');
            countdownElement.classList.add('text-warning');
        }

        if (timeLeft <= 0) {
            clearInterval(countdown);
            countdownElement.textContent = 'Expiré';
            countdownElement.classList.add('text-danger');

            document.querySelector('button[type="submit"]').disabled = true;
            document.querySelector('button[type="submit"]').innerHTML = '<i class="mdi mdi-clock-alert"></i> Code Expiré';

            const expiredAlert = document.createElement('div');
            expiredAlert.className = 'alert alert-danger';
            expiredAlert.innerHTML = '<i class="mdi mdi-alert"></i> Le code a expiré. Veuillez demander un nouveau code.';
            document.querySelector('form').insertBefore(expiredAlert, document.querySelector('.d-grid'));
        }
    }, 1000);

    let resendCooldown = 0;
    document.getElementById('resend-form').addEventListener('submit', function(e) {
        if (resendCooldown > 0) {
            e.preventDefault();
            alert('Veuillez patienter ' + resendCooldown + ' secondes avant de renvoyer.');
            return false;
        }

        resendCooldown = 30;
        resendBtn.disabled = true;

        const cooldownInterval = setInterval(function() {
            resendCooldown--;
            resendBtn.innerHTML = `<i class="mdi mdi-reload"></i> Renvoyer (${resendCooldown}s)`;

            if (resendCooldown <= 0) {
                clearInterval(cooldownInterval);
                resendBtn.disabled = false;
                resendBtn.innerHTML = '<i class="mdi mdi-reload"></i> Renvoyer le Code';
            }
        }, 1000);
    });

    document.getElementById('otp').addEventListener('input', function() {
        if (this.value.length === 6) {
            setTimeout(() => {
                if (this.value.length === 6) {
                    this.form.submit();
                }
            }, 500);
        }
    });
</script>
@endpush