@extends('frontend.layouts.app')
@section('title', $title ?? 'Verify OTP')

@push('style')
<style>
    /* Full height wrapper to center content */
    .otp-wrapper {
        min-height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f8f9fa;
    }

    /* Card */
    .otp-card {
        background: #fff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        max-width: 400px;
        width: 100%;
        text-align: center;
    }

    .otp-card h3 {
        margin-bottom: 1rem;
    }

    .otp-card p {
        margin-bottom: 2rem;
        color: #6c757d;
    }

    .otp-card .form-control {
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    .otp-card .btn {
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        width: 48%;
        margin-top: 1rem;
    }

    .otp-card .btn-resend {
        background: transparent;
        border: none;
        color: #0d6efd;
        cursor: pointer;
        text-decoration: underline;
        margin-left: 1rem;
    }

    @media (max-width: 576px) {
        .otp-card .btn {
            width: 100%;
            margin: 0.5rem 0;
        }

        .otp-card .btn-resend {
            display: block;
            margin-left: 0;
            margin-top: 0.5rem;
        }
    }
</style>
@endpush

@section('content')
<div class="otp-wrapper">
    <div class="otp-card">
        <h3>Email Verification</h3>
        <p>We sent a 6-digit OTP to <strong>{{ auth()->user()->email }}</strong></p>

        <form method="POST" action="{{ route('verify.otp') }}">
            @csrf
            <input type="hidden" name="email" value="{{ auth()->user()->email }}">

            <div class="mb-3">
                <input type="text" class="form-control" name="otp" placeholder="Enter OTP" required>
            </div>

            <div class="d-flex justify-content-between">
                <button type="submit" class="btn btn-primary">Verify</button>
                <button type="button" class="btn-resend" id="resendOtp">Resend OTP</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    const resendBtn = document.getElementById('resendOtp');
    let timer;

    resendBtn.addEventListener('click', function() {
        let email = "{{ auth()->user()->email }}";

        // Disable the button immediately
        resendBtn.disabled = true;
        resendBtn.textContent = "Please wait 60s";

        let countdown = 60;
        timer = setInterval(() => {
            countdown--;
            resendBtn.textContent = `Please wait ${countdown}s`;
            if (countdown <= 0) {
                clearInterval(timer);
                resendBtn.disabled = false;
                resendBtn.textContent = "Resend OTP";
            }
        }, 1000);

        // Send OTP via AJAX
        fetch("{{ route('otp.resend') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                toastr.success(data.message || 'OTP resent successfully!', 'Success', {
                    "positionClass": "toast-top-center",
                    "timeOut": "3000"
                });
            } else {
                toastr.error(data.message || 'Failed to resend OTP', 'Error', {
                    "positionClass": "toast-top-center",
                    "timeOut": "3000"
                });
            }
        })
        .catch(error => {
            console.error(error);
            toastr.error('Something went wrong. Please try again.', 'Error', {
                "positionClass": "toast-top-center",
                "timeOut": "3000"
            });
        });
    });
</script>
@endpush

@endsection