@extends('User.layout')

@section('header')
{{-- Assuming a simple header or no header for a full-screen verification page --}}
@include('components.header-inner', [
'title' => 'Enter OTP',
])
@endsection

@section('content')
<style>
    footer.mobile-footer {
        display: none;
    }

    .otp-container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px 16px;
        box-sizing: border-box;
        text-align: center;
    }

    .otp-instruction {
        font-size: 16px;
        color: #444;
        line-height: 1.5;
        margin-bottom: 30px;
        font-weight: 500;
    }

    .otp-input-group {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        padding: 0 10px;
    }

    .otp-input {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: 24px;
        text-align: center;
        border: 2px solid #ddd;
        outline: none;
        box-sizing: border-box;
        color: #333;
        font-weight: 700;
        transition: all 0.2s ease;
    }

    .otp-input.filled {
        background: linear-gradient(180deg, #66BB6A 0%, #4CAF50 100%);
        border-color: #4CAF50;
        color: #fff;
        box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
    }

    .otp-input:not(.filled) {
        background-color: #f7f7f7;
        border-color: #eee;
    }

    .button-row {
        display: flex;
        gap: 15px;
        padding: 0 10px;
    }

    .resend-btn {
        flex: 1;
        padding: 14px;
        border-radius: 10px;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(180deg, #FF7043 0%, #F4511E 100%);
        box-shadow: 0 6px 15px rgba(244, 81, 30, 0.2);
        transition: transform .08s ease;
    }

    .verify-btn {
        flex: 1;
        padding: 14px;
        border-radius: 10px;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(180deg, #66BB6A 0%, #4CAF50 100%);
        box-shadow: 0 6px 15px rgba(76, 175, 80, 0.2);
        transition: transform .08s ease;
    }

    .resend-btn:active,
    .verify-btn:active {
        transform: translateY(1px);
    }

    @media (max-width: 480px) {
        .otp-input {
            width: 50px;
            height: 50px;
            font-size: 22px;
        }

        .otp-input-group {
            padding: 0;
        }

        .button-row {
            gap: 10px;
            padding: 0;
        }

        .resend-btn,
        .verify-btn {
            padding: 12px;
            font-size: 15px;
        }
    }
</style>

<div class="otp-container">

    <div class="otp-instruction">
        Enter your 4-digit code. Please enter here to Verify your Number.
    </div>

    <form id="otpForm" action="{{ route('verify_otp_form') }}" method="POST">
        @csrf
        <input type="hidden" name="phone_number" value="{{ old('phone_number', $decode_number ?? '') }}">

        <div class="otp-input-group">
            <input type="tel" class="otp-input" maxlength="1" id="otp1" inputmode="numeric" required>
            <input type="tel" class="otp-input" maxlength="1" id="otp2" inputmode="numeric" required>
            <input type="tel" class="otp-input" maxlength="1" id="otp3" inputmode="numeric" required>
            <input type="tel" class="otp-input" maxlength="1" id="otp4" inputmode="numeric" required>
        </div>

        <input type="hidden" name="otp" id="otpHidden">

        <div class="button-row">
            <button type="button" class="resend-btn">Resend OTP</button>
            <button type="submit" class="verify-btn">Verify OTP</button>
        </div>
        <div style="margin-top: 10px; font-size: 15px; color: #555;">
            <span id="timerText"></span>
        </div>

    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {

    /* ================= OTP INPUT HANDLING ================= */
    const inputs = document.querySelectorAll('.otp-input');
    const form = document.getElementById('otpForm');
    const submitBtn = form.querySelector('.verify-btn');
    const otpHidden = document.getElementById('otpHidden');

    inputs.forEach((input, index) => {
        input.addEventListener('input', (e) => {
            e.target.value = e.target.value.replace(/[^0-9]/g, '');
            e.target.classList.toggle('filled', e.target.value.length === 1);

            if (e.target.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && !e.target.value && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });

    submitBtn.addEventListener('click', function (e) {
        e.preventDefault();

        const otp = Array.from(inputs).map(i => i.value).join('');
        otpHidden.value = otp;

        if (otp.length !== 4) {
            showToast('Please enter the complete 4-digit OTP.', 'bg-danger');
            return;
        }

        this.disabled = true;
        this.innerText = 'Processing...';
        form.submit();
    });

    /* ================= RESEND OTP + TIMER ================= */
    const resendBtn = document.querySelector('.resend-btn');
    const timerText = document.getElementById('timerText');
    const phoneNumber = "{{ $decode_number ?? '' }}";

    let timer = 120;
    let interval = null;

    const startTimer = () => {
        resendBtn.disabled = true;
        timerText.innerText = `Resend OTP in ${timer}s`;

        interval = setInterval(() => {
            timer--;
            timerText.innerText = `Resend OTP in ${timer}s`;

            if (timer <= 0) {
                clearInterval(interval);
                timerText.innerText = '';
                resendBtn.disabled = false;
            }
        }, 1000);
    };

    startTimer(); // 🔥 IMPORTANT

    resendBtn.addEventListener('click', () => {
        resendBtn.disabled = true;
        resendBtn.innerText = 'Resending...';

        fetch("{{ route('login_otp') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
            },
            body: JSON.stringify({ phone_number: phoneNumber })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                showToast('OTP sent successfully.', 'bg-success');

                // Clear old OTP
                inputs.forEach(i => {
                    i.value = '';
                    i.classList.remove('filled');
                });
                otpHidden.value = '';

                timer = 120;
                clearInterval(interval);
                startTimer();
            } else {
                showToast('Failed to resend OTP.', 'bg-danger');
                resendBtn.disabled = false;
            }
        })
        .finally(() => {
            resendBtn.innerText = 'Resend OTP';
        });
    });

});
</script>


@endsection