@extends('adminlte::auth.auth-page', ['authType' => 'login'])

@php
    $loginUrl = View::getSection('login_url') ?? config('adminlte.login_url', 'login');
    $registerUrl = View::getSection('register_url') ?? config('adminlte.register_url', 'register');

    if (config('adminlte.use_route_url', false)) {
        $loginUrl = $loginUrl ? route($loginUrl) : '';
        $registerUrl = $registerUrl ? route($registerUrl) : '';
    } else {
        $loginUrl = $loginUrl ? url($loginUrl) : '';
        $registerUrl = $registerUrl ? url($registerUrl) : '';
    }
@endphp

@section('auth_header', __('Verify OTP'))

@section('auth_body')

    <p class="text-center text-muted mb-3" style="font-size: 0.875rem;">
        A 6-digit verification code was sent to your registered email or phone.<br>
        Please enter it below to continue.
    </p>

    {{-- Session / Error Messages --}}
    @if (session('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            {{ session('status') }}
        </div>
    @endif

    @if ($errors->has('otp') || $errors->has('message'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            {{ $errors->first('otp') ?? $errors->first('message') }}
        </div>
    @endif

    {{-- OTP Form --}}
    <form action="{{ route('otp.verify') }}" method="POST">
        @csrf

        {{-- Hidden identifier (email or phone, passed from previous step) --}}
        @if (session('otp_identifier'))
            <input type="hidden" name="identifier" value="{{ session('otp_identifier') }}">
        @endif

        {{-- OTP Input Boxes --}}
        <div class="form-group">
            <label class="d-block text-center mb-2" style="font-size: 0.85rem; font-weight: 600; color: #555;">
                Enter 6-Digit OTP
            </label>

            {{-- 6 individual digit boxes --}}
            <div class="d-flex justify-content-center" id="otp-box-wrapper" style="gap: 8px;">
                @for ($i = 1; $i <= 6; $i++)
                    <input
                        type="text"
                        maxlength="1"
                        inputmode="numeric"
                        pattern="[0-9]"
                        class="otp-input form-control text-center @error('otp') is-invalid @enderror"
                        style="width: 40px; height: 44px; font-size: 1.4rem; font-weight: 700; border-radius: 6px; border: 1.5px solid #ced4da; padding: 0;"
                        autocomplete="off"
                        data-index="{{ $i }}"
                    />
                @endfor
            </div>

            {{-- Hidden combined OTP field submitted with the form --}}
            <input type="hidden" name="otp" id="otp-combined">

            @error('otp')
                <span class="invalid-feedback d-block text-center mt-1" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        {{-- Resend OTP --}}
        <input type="hidden" name="email" id="user_email" value="{{ request()->query('email') }}">
        <div class="text-center mb-3" id="resend-section">
            <span class="text-muted" style="font-size: 0.8rem;">
                Didn't receive a code?
            </span>

            <a href="javascript:void(0)"
            id="resend-link"
            class="text-primary font-weight-bold"
            style="font-size: 0.8rem;"
            onclick="resendOtp()">
                Resend OTP
            </a>

            <span id="countdown-text"
                class="text-muted"
                style="font-size: 0.8rem; display:none;">
                Resend in <span id="countdown-seconds">60</span>s
            </span>
        </div>

        {{-- Submit Button --}}
        <div class="row">
            <div class="col-12">
                <button type="submit" class="btn btn-primary btn-block" id="verify-btn">
                    <i class="fas fa-shield-alt mr-1"></i> Verify OTP
                </button>
            </div>
        </div>

    </form>

@stop

@section('auth_footer')
    <p class="my-0">
        <a href="{{ $loginUrl }}" class="text-center d-block">
            <i class="fas fa-arrow-left mr-1"></i> Back to Login
        </a>
    </p>
@stop

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputs = document.querySelectorAll('.otp-input');
        const combined = document.getElementById('otp-combined');
        const form = inputs[0].closest('form');

        // Auto-focus first input
        if (inputs.length) inputs[0].focus();

        inputs.forEach(function (input, index) {
            // Allow only digits
            input.addEventListener('keypress', function (e) {
                if (!/[0-9]/.test(e.key)) e.preventDefault();
            });

            // On input: move to next
            input.addEventListener('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '').slice(-1);
                if (this.value && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }
                syncCombined();
            });

            // Backspace: clear and go back
            input.addEventListener('keydown', function (e) {
                if (e.key === 'Backspace' && !this.value && index > 0) {
                    inputs[index - 1].focus();
                    inputs[index - 1].value = '';
                    syncCombined();
                }
            });

            // Paste handler: distribute digits across boxes
            input.addEventListener('paste', function (e) {
                e.preventDefault();
                const pasted = (e.clipboardData || window.clipboardData)
                    .getData('text')
                    .replace(/[^0-9]/g, '')
                    .slice(0, 6);
                pasted.split('').forEach(function (char, i) {
                    if (inputs[i]) inputs[i].value = char;
                });
                const next = Math.min(pasted.length, inputs.length - 1);
                inputs[next].focus();
                syncCombined();
            });
        });

        function syncCombined() {
            combined.value = Array.from(inputs).map(i => i.value).join('');
        }

        // Validate all boxes filled before submit
        form.addEventListener('submit', function (e) {
            syncCombined();
            if (combined.value.length < 6) {
                e.preventDefault();
                inputs.forEach(function (inp) {
                    inp.classList.add('is-invalid');
                });
                // Remove highlight after shake
                setTimeout(function () {
                    inputs.forEach(function (inp) {
                        inp.classList.remove('is-invalid');
                    });
                }, 1500);
            }
        });
    });

    // Resend countdown
    // function startCountdown(e, link) {
    //     e.preventDefault();
    //     let seconds = 60;
    //     const countdownText = document.getElementById('countdown-text');
    //     const countdownSeconds = document.getElementById('countdown-seconds');

    //     link.style.display = 'none';
    //     countdownText.style.display = 'inline';
    //     countdownSeconds.textContent = seconds;

    //     const timer = setInterval(function () {
    //         seconds--;
    //         countdownSeconds.textContent = seconds;
    //         if (seconds <= 0) {
    //             clearInterval(timer);
    //             countdownText.style.display = 'none';
    //             link.style.display = 'inline';
    //             // Actually trigger the resend request
    //             window.location.href = link.getAttribute('href');
    //         }
    //     }, 1000);
    // }

    function resendOtp() {

        const email = document.getElementById('user_email').value;
        const link = document.getElementById('resend-link');
        const countdownText = document.getElementById('countdown-text');
        const countdownSeconds = document.getElementById('countdown-seconds');

        // Disable resend button
        link.style.display = 'none';
        countdownText.style.display = 'inline';

        // Send AJAX request
        fetch("{{ route('otp.resend.reset') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                email: email
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status) {
                toastr.success(data.message);
            } else {
                toastr.error(data.message);
            }
        })
        .catch(() => {
            toastr.error('Failed to resend OTP.');
        });

        // Start countdown
        let seconds = 60;
        countdownSeconds.textContent = seconds;

        const timer = setInterval(() => {
            seconds--;
            countdownSeconds.textContent = seconds;

            if (seconds <= 0) {
                clearInterval(timer);
                countdownText.style.display = 'none';
                link.style.display = 'inline';
            }
        }, 1000);
    }
</script>
@endpush

@push('css')
<style>
    .otp-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        outline: none;
    }
    .otp-input.is-invalid {
        border-color: #dc3545 !important;
        animation: shake 0.3s ease-in-out;
    }
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    #otp-box-wrapper {
        flex-wrap: wrap;
    }
</style>
@endpush