<!DOCTYPE html>
<html>

<head>
    <title>Se trimit emailurile...</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f9f9f9;
            color: #333;
            padding: 40px;
            text-align: center;
        }

        #loader {
            font-size: 24px;
            padding: 50px;
        }

        #result {
            display: none;
            margin-top: 40px;
            padding: 20px;
            border-radius: 8px;
            font-size: 20px;
        }

        #result.success {
            background-color: #e6ffed;
            color: #218838;
            border: 1px solid #c3e6cb;
        }

        #result.error {
            background-color: #ffe6e6;
            color: #cc0000;
            border: 1px solid #f5c6cb;
            text-align: left;
            max-width: 800px;
            margin: 40px auto;
        }

        ul {
            padding-left: 20px;
            text-align: left;
        }
    </style>
</head>

<body>

    <div id="loader">Se trimit emailurile... ⏳</div>
    <div id="result" class=""></div>

    <script>
        fetch('send_emails.php')
            .then(res => res.json())
            .then(errors => {
                document.getElementById('loader').style.display = 'none';
                const result = document.getElementById('result');
                result.style.display = 'block';

                if (errors.length === 0) {
                    result.className = 'success';
                    result.innerHTML = `
    ✅ <b>Toate emailurile au fost trimise cu succes.</b><br><br>
    <a href="index.php" style="
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
    ">Trimite alte diplome</a>
`;

                } else {
                    result.className = 'error';
                    result.innerHTML = "<h3>❌ Emailuri netrimise:</h3><ul>" +
                        errors.map(e => `<li><b>${e.name}</b> (${e.email}) – ${e.error}</li>`).join('') +
                        "</ul>";
                }
            })
            .catch(err => {
                document.getElementById('loader').style.display = 'none';
                const result = document.getElementById('result');
                result.className = 'error';
                result.style.display = 'block';
                result.innerHTML = "❌ <b>Eroare la trimiterea emailurilor:</b><br>" + err;
            });
    </script>

</body>

</html>