<?php
// /web/paiement-attente.php
// Page d'attente après paiement

$rdv_id = $_GET['rdv'] ?? 0;
$reference = $_GET['ref'] ?? '';
$error = isset($_GET['error']);

if (!$rdv_id) {
    header('Location: /web/rdv.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Paiement en cours - SEN RDV SANTÉ+</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #0066CC;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .pulse { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
    </style>
</head>
<body class="min-h-screen bg-slate-100 flex items-center justify-center p-4">

    <div class="max-w-md w-full bg-white rounded-3xl shadow-2xl overflow-hidden">

        <!-- Entête -->
        <div class="bg-gradient-to-r from-[#003F8A] to-[#0066CC] text-white px-6 py-4 text-center">
            <h1 class="text-xl font-bold">SEN RDV SANTÉ+</h1>
            <p class="text-white/80 text-sm">Paiement en cours</p>
        </div>

        <div class="p-6">

            <?php if ($error): ?>
            <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl p-4 mb-4 text-sm">
                ⚠️ Une erreur est survenue lors de l'initiation du paiement.
                <br>Veuillez réessayer.
            </div>
            <?php endif; ?>

            <div class="text-center py-4">
                <div class="spinner"></div>
                
                <h2 class="text-xl font-bold text-slate-800 mt-6">⏳ Paiement en cours</h2>
                <p class="text-slate-600 text-sm mt-2">
                    Votre paiement est en cours de traitement.
                    <br>Vous recevrez une confirmation dans quelques instants.
                </p>

                <?php if ($reference): ?>
                <p class="text-xs text-slate-400 mt-4">Réf: <?php echo htmlspecialchars($reference); ?></p>
                <?php endif; ?>
            </div>

            <!-- Instructions -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mt-2 text-left text-sm">
                <p class="text-yellow-800 font-medium">📌 Instructions :</p>
                <ul class="text-yellow-700 text-xs space-y-1 mt-2 list-decimal list-inside">
                    <li>Ouvrez votre application <strong>Wave</strong> ou <strong>Orange Money</strong></li>
                    <li>Effectuez le paiement de <strong>200 FCFA</strong></li>
                    <li>Revenez sur cette page après le paiement</li>
                </ul>
            </div>

            <!-- Statut du paiement -->
            <div id="statut-container" class="mt-4">
                <div id="statut-attente" class="text-center">
                    <p class="text-xs text-slate-400 pulse">⏳ En attente de confirmation...</p>
                </div>
                <div id="statut-success" class="hidden text-center">
                    <div class="bg-green-100 text-green-700 rounded-xl p-4">
                        ✅ Paiement confirmé !
                        <br>
                        <a href="/web/confirmation.php?rdv=<?php echo $rdv_id; ?>" 
                           class="inline-block mt-2 bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-2 rounded-xl transition text-sm">
                            Voir mon QR Code
                        </a>
                    </div>
                </div>
                <div id="statut-error" class="hidden text-center">
                    <div class="bg-red-100 text-red-700 rounded-xl p-4">
                        ❌ Paiement échoué ou expiré.
                        <br>
                        <a href="/web/rdv.php" 
                           class="inline-block mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-2 rounded-xl transition text-sm">
                            Réessayer
                        </a>
                    </div>
                </div>
            </div>

            <!-- Boutons -->
            <div class="flex gap-3 mt-6">
                <button onclick="verifierStatut()" id="btn-verifier" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl transition text-sm">
                    🔄 Vérifier le paiement
                </button>
                <a href="/web/rdv.php" class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold py-3 rounded-xl transition text-center text-sm">
                    📋 Retour
                </a>
            </div>

        </div>

        <!-- Footer -->
        <div class="bg-slate-50 px-6 py-3 text-center text-xs text-slate-400 border-t border-slate-200">
            SEN RDV SANTÉ+ — Plateforme de gestion des visites
        </div>
    </div>

    <script>
        const RDV_ID = <?php echo json_encode($rdv_id); ?>;
        let verifications = 0;
        let intervalId = null;

        function verifierStatut() {
            const btn = document.getElementById('btn-verifier');
            btn.textContent = '⏳ Vérification...';
            btn.disabled = true;

            fetch('/api/rdv/liste.php?rdv_id=' + RDV_ID)
                .then(res => res.json())
                .then(data => {
                    if (data.succes && data.rdvs && data.rdvs.length > 0) {
                        const rdv = data.rdvs[0];
                        
                        if (rdv.statut === 'paye' || rdv.statut === 'consomme') {
                            // Paiement réussi !
                            document.getElementById('statut-attente').classList.add('hidden');
                            document.getElementById('statut-success').classList.remove('hidden');
                            document.getElementById('btn-verifier').style.display = 'none';
                            
                            if (intervalId) {
                                clearInterval(intervalId);
                            }
                            return;
                        } else if (rdv.statut === 'annule' || rdv.statut === 'expire') {
                            // Paiement échoué
                            document.getElementById('statut-attente').classList.add('hidden');
                            document.getElementById('statut-error').classList.remove('hidden');
                            document.getElementById('btn-verifier').style.display = 'none';
                            
                            if (intervalId) {
                                clearInterval(intervalId);
                            }
                            return;
                        }
                    }
                    
                    // Encore en attente
                    verifications++;
                    btn.textContent = '🔄 Vérifier le paiement';
                    btn.disabled = false;
                    
                    if (verifications >= 20) {
                        // Trop de tentatives
                        btn.textContent = '🔄 Réessayer plus tard';
                        btn.disabled = true;
                    }
                })
                .catch(() => {
                    btn.textContent = '🔄 Réessayer';
                    btn.disabled = false;
                });
        }

        // Vérification automatique toutes les 10 secondes
        intervalId = setInterval(verifierStatut, 10000);
        
        // Vérifier immédiatement après 5 secondes
        setTimeout(verifierStatut, 5000);
    </script>

</body>
</html>