@extends('layouts.auth')

@section('title', 'Verify Account')

@push('styles')
<style>
    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
    }

    .verify-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: 0.3s ease;
    }

    .verify-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }

    .toast-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1055;
    }

    #resendLink {
        cursor: pointer;
    }
    
    #resendLink.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .countdown {
        color: #FEBD21;
        font-weight: bold;
    }
</style>
@endpush

@section('content')
{{-- Toasts --}}
<div class="toast-container">
    @if(session('success'))
        <div class="toast align-items-center text-bg-success border-0 mb-2" role="alert">
            <div class="d-flex">
                <div class="toast-body">{{ session('success') }}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    @endif
    @if(session('error'))
        <div class="toast align-items-center text-bg-danger border-0 mb-2" role="alert">
            <div class="d-flex">
                <div class="toast-body">{{ session('error') }}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    @endif
</div>

<div class="d-flex align-items-center justify-content-center h-100">
    <div class="verify-card p-4 p-md-5 bg-white" style="max-width: 420px; width: 100%;">
        {{-- Logo --}}
        <div class="text-center mb-4">
            <img src="{{ asset('logo.png') }}" alt="FlareSend Logo" class="mb-2" style="height: 28px;">
            <div class="logo-text fw-bold fs-5 text-dark">
                <span>Flare</span><span>Send</span>
            </div>
            <p class="text-muted small mb-0">Enter the OTP sent to your email</p>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- OTP Form --}}
        <form action="{{ route('verification.verify') }}" method="POST" class="mt-3">
            @csrf
            <div class="mb-3">
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" 
                placeholder="Enter your email" value="{{ old('email', session('email')) }}" required>
            </div>
            <div class="mb-3">
                <input type="text" name="otp" class="form-control @error('otp') is-invalid @enderror"
                       placeholder="Enter your OTP" value="{{ old('otp') }}" required autocomplete="off">
                @error('otp')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                Verify Account
            </button>
        </form>

        {{-- Resend link --}}
        <p class="text-center small mt-3 mb-0">
            Didn't receive the code?
            {{-- <a href="javascript:void(0)" id="resendLink" class="text-decoration-none fw-semibold" style="color: #FEBD21;">
                Resend OTP
            </a> --}}
             <a href="{{ route('verification.resend.view') }}" class="text-decoration-none fw-semibold" style="color: #FEBD21;">
                Resend OTP
            </a>
            {{-- <span id="countdown" class="countdown d-none">(<span id="timer">60</span>s)</span> --}}
        </p>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const resendLink = document.getElementById('resendLink');
    const countdownEl = document.getElementById('countdown');
    const timerEl = document.getElementById('timer');
    let countdown = 60;
    let canResend = true;

    // Auto-show toasts
    var toasts = document.querySelectorAll('.toast');
    toasts.forEach(function(toast) {
        new bootstrap.Toast(toast).show();
    });

    // Start countdown on page load
    startCountdown();

    resendLink.addEventListener('click', function() {
        if (!canResend) return;

        // Disable resend and show loading
        canResend = false;
        resendLink.classList.add('disabled');
        const originalText = resendLink.textContent;
        resendLink.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending...';

        // Send AJAX request to resend OTP
        fetch('{{ route("verification.resend.post") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                email: '{{ old("email", session("email")) }}'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('OTP sent successfully!', 'success');
                startCountdown();
            } else {
                showToast(data.message || 'Failed to resend OTP', 'error');
                canResend = true;
                resendLink.classList.remove('disabled');
                resendLink.textContent = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Failed to resend OTP. Please try again.', 'error');
            canResend = true;
            resendLink.classList.remove('disabled');
            resendLink.textContent = originalText;
        });
    });

    function startCountdown() {
        countdown = 60;
        countdownEl.classList.remove('d-none');
        timerEl.textContent = countdown;
        
        const countdownInterval = setInterval(() => {
            countdown--;
            timerEl.textContent = countdown;
            
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                countdownEl.classList.add('d-none');
                canResend = true;
                resendLink.classList.remove('disabled');
            }
        }, 1000);
    }

    function showToast(message, type = 'success') {
        // Create toast element
        const toastEl = document.createElement('div');
        toastEl.className = `toast align-items-center text-bg-${type === 'success' ? 'success' : 'danger'} border-0 mb-2`;
        toastEl.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;
        
        // Add to container and show
        document.querySelector('.toast-container').appendChild(toastEl);
        new bootstrap.Toast(toastEl).show();
        
        // Remove after hide
        toastEl.addEventListener('hidden.bs.toast', function() {
            toastEl.remove();
        });
    }
});
</script>
@endsection