<%- include("navbar") %>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: radial-gradient(circle at top left, #1e293b, #0f172a);
            min-height: 100vh;
            overflow-y: hidden;
        }

        /* Layout */
        .result-wrapper {
            margin-left: 250px;
            margin-top: 90px;
            padding: 40px;
        }

        /* Main Glass Card */
        .result-card {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 50px;
            color: white;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            margin-bottom: 30px;
        }

        /* LEFT SIDE */
        .performance-panel {
            text-align: center;
            padding: 30px;
            border-radius: 20px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
        }

        .performance-panel h2 {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .score-big {
            font-size: 70px;
            font-weight: 700;
            margin: 20px 0;
        }

        .progress-bar-container {
            background: rgba(255, 255, 255, 0.3);
            height: 12px;
            border-radius: 30px;
            overflow: hidden;
            margin-top: 20px;
        }

        .progress-bar {
            height: 100%;
            background: white;
        }

        /* RIGHT SIDE */
        .details-panel h3 {
            margin-bottom: 20px;
            font-weight: 600;
        }

        .detail-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .status {
            margin-top: 20px;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 500;
            display: inline-block;
        }

        .pass {
            background: #22c55e;
        }

        .fail {
            background: #ef4444;
        }

        .btn-back {
            margin-top: 30px;
            display: inline-block;
            padding: 12px 25px;
            border-radius: 12px;
            text-decoration: none;
            background: white;
            color: #1e293b;
            font-weight: 500;
        }

        @media(max-width:992px) {
            .result-wrapper {
                margin-left: 0;
                padding: 20px;
            }

            .result-card {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="result-wrapper">

        <% let resultArray=[]; if (typeof results !=='undefined' && results) { resultArray=Array.isArray(results) ?
            results : [results]; } %>

            <% if(resultArray.length> 0){ %>

                <% resultArray.forEach(r=> {

                    let score = r.score || 0;

                    // 👉 dynamic total (default 10)
                    let total = r.total_questions || 10;

                    // 👉 percentage calculate
                    let percentage = (score / total) * 100;

                    // 👉 passing (40%)
                    let passingMarks = 0.4 * total;

                    let passed = score >= passingMarks;

                    %>

                    <div class="result-card">

                        <!-- LEFT -->
                        <div class="performance-panel">
                            <h2>
                                <%= r.quiz_title %>
                            </h2>

                            <!-- ✅ score out of total -->
                            <div class="score-big">
                                <%= score %>/<%= total %>
                            </div>

                            <!-- ✅ correct progress -->
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width:<%= percentage %>%"></div>
                            </div>

                            <div class="status <%= passed ? 'pass' : 'fail' %>">
                                <%= passed ? "🎉 Passed Successfully" : "😔 Not Cleared" %>
                            </div>
                        </div>

                        <!-- RIGHT -->
                        <div class="details-panel">
                            <h3>Performance Summary</h3>

                            <div class="detail-box">
                                <span>Score</span>
                                <span>
                                    <%= score %>/<%= total %>
                                </span>
                            </div>

                            <div class="detail-box">
                                <span>Passing</span>
                                <span>
                                    <%= passingMarks %>/<%= total %>
                                </span>
                            </div>

                            <div class="detail-box">
                                <span>Status</span>
                                <span>
                                    <%= passed ? "Passed" : "Failed" %>
                                </span>
                            </div>

                            <% if(resultArray.length> 1){ %>
                                <a href="/result/<%= r.quiz_id %>" class="btn-back">
                                    View Details →
                                </a>
                                <% } %>

                        </div>

                    </div>

                    <% }) %>

                        <% } else { %>

                            <h2 style="color:white;text-align:center;">No Results Found</h2>

                            <% } %>

    </div>

    <%- include("footer") %>