@extends('layouts.app')
@section('head')
    <style>
        :root {
            --dr-primary: #2E3A4A;
            --dr-secondary: #B99474;
            --dr-accent: #d4a87c;
            --dr-success: #28a745;
            --dr-dark: #1e1e1e;
            --dr-light: #f8f9fa;
            --dr-border: #e0e4e8;
            --dr-gradient: linear-gradient(135deg, #2E3A4A 0%, #3d4d61 100%);
            --dr-gradient-gold: linear-gradient(135deg, #B99474 0%, #a37f5f 100%);
        }

        body {
            background: linear-gradient(135deg, #f5f3f0 0%, #e8e3db 100%) !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            color: var(--dr-dark) !important;
            padding: 0 !important;
            line-height: 1.6 !important;
            margin: 0 !important;
        }

        .waiting-page-wrapper {
            width: 100vw !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 20px !important;
            background: linear-gradient(135deg, #f5f3f0 0%, #e8e3db 100%);
            min-height: calc(100vh - 40px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .waiting-container {
            max-width: 600px;
            width: 100%;
            background: #ffffff;
            border-radius: 20px;
            padding: 60px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .loading-icon {
            margin: 0 auto 30px;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--dr-gradient-gold);
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(185, 148, 116, 0.3);
            animation: pulse 2s ease-in-out infinite;
        }

        .loading-icon i {
            font-size: 3rem;
            color: white;
            animation: spin 1.5s linear infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 4px 20px rgba(185, 148, 116, 0.3);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 6px 30px rgba(185, 148, 116, 0.5);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .waiting-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--dr-primary);
            margin-bottom: 20px;
        }

        .waiting-message {
            font-size: 16px;
            color: #666;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .waiting-subtitle {
            font-size: 14px;
            color: var(--dr-secondary);
            font-weight: 600;
        }
    </style>
@endsection

@section('content')
    <div class="waiting-page-wrapper">
        <div class="waiting-container">
            <div class="loading-icon">
                <i class="fas fa-spinner"></i>
            </div>
            <h1 class="waiting-title">@lang("En attente de validation")</h1>
            <p class="waiting-message">
                @lang("Nous attendons la validation de votre paiement, s'il vous plaît patientez...")
            </p>
            <p class="waiting-subtitle">
                @lang("Cette page se rafraîchira automatiquement une fois le paiement confirmé.")
            </p>
        </div>
    </div>

    @if($token)
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script>
            (function () {
                const token = @json($token);
                const type = @json($type);
                const csrfToken = '{{ csrf_token() }}';
                let checkInterval;
                let isChecking = false;

                function checkPaymentStatus() {
                    if (isChecking) return;

                    isChecking = true;

                    fetch('{{ route('payment-status') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                            Accept: 'application/json'
                        },
                        body: JSON.stringify({
                            token: token,
                            type: type
                        })
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then(data => {
                            isChecking = false;
                            if (data.status === true) {
                                // Payment confirmed, reload page
                                if (checkInterval) {
                                    clearInterval(checkInterval);
                                }
                                window.location.reload();
                            }
                        })
                        .catch(error => {
                            isChecking = false;
                            console.error('Error checking payment status:', error);
                        });
                }

                // Start checking every 10 seconds
                checkInterval = setInterval(checkPaymentStatus, 10000);

                // Also check immediately
                checkPaymentStatus();
            })();
        </script>
    @endif
@endsection