<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin : Add Expenses</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
    <?php include("headerlink.php")?>
    <style>
    .question-card {
        border: 3px solid #ccc;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
    }

    p{
        font-weight: 800;
    }

    label:not(.form-check-label):not(.custom-file-label) {
        font-weight: 500;
    }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">

        <div class="preloader flex-column justify-content-center align-items-center">
            <img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
        </div>

        <?php include("navbar.php")?>
        <?php include("sidebar.php")?>

        <div class="content-wrapper">

            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <!-- <h1 class="m-0 fw-bold text-uppercase">Inventory</h1> -->
                        </div>

                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">

                            </ol>
                        </div>
                    </div>
                </div>
            </div>



            <section class="content">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-md-12">

                            <div class="card card-primary">
                                <div class="card-header  " style="background: #343a40;">
                                    <h3 class="card-title fw-bold text-uppercase">MCQ Questions</h3>
                                </div>
                                <div class="container">
                                    <form class="p-2" method="POST"
                                        action="https://script.google.com/macros/s/AKfycbx1MJujnzSIfC84D2k9EHGeATcti-GkVpsoD2RlPhrDcKDkWZPOkbsPz_Uh2HHIKjQy/exec"
                                        id="mcqForm">
                                        <?php
                                        include('connection.php');
                                        // Fetch questions from the database
                                        $sql = "SELECT * FROM mcq";
                                        $result = $conn->query($sql);

                                        if ($result->num_rows > 0) {
                                            while ($row = $result->fetch_assoc()) {
                                                $questionId = $row['id'];
                                                // Create a unique name for each response based on the question ID
                                                $responseName = "response_q{$questionId}";
                                                ?>
                                     <input type="hidden" name="name" value="<?= isset($_POST['name']) ? $_POST['name'] : '' ?>">
                                     <input type="hidden" name="email" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>">


                                        <div class='question-card'>
                                            <p><?= htmlspecialchars($row['questions']) ?></p>
                                            <input type="hidden" name="option_id_<?= $questionId ?>"
                                                value="<?= $row['id'] ?>">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label><input type='radio' name='<?= $responseName ?>'
                                                            value="<?= htmlspecialchars($row['option1']) ?>">
                                                        <?= htmlspecialchars($row['option1']) ?></label><br>
                                                </div>
                                                <div class="col-6">
                                                    <label><input type='radio' name='<?= $responseName ?>'
                                                            value="<?= htmlspecialchars($row['option2']) ?>">
                                                        <?= htmlspecialchars($row['option2']) ?></label><br>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <label><input type='radio' name='<?= $responseName ?>'
                                                            value="<?= htmlspecialchars($row['option3']) ?>">
                                                        <?= htmlspecialchars($row['option3']) ?></label><br>
                                                </div>
                                                <div class="col-6">
                                                    <label><input type='radio' name='<?= $responseName ?>'
                                                            value="<?= htmlspecialchars($row['option4']) ?>">
                                                        <?= htmlspecialchars($row['option4']) ?></label><br>
                                                </div>
                                            </div>
                                        </div>
                                        <?php
                                                }
                                            }
                                            $conn->close();
                                            ?>
                                        <button type="button" class="btn btn-danger" id="submitBtn">Submit</button>
                                    </form>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            </section>
        </div>

        <?php include("footer.php")?>


    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script>
    // Add a JavaScript click event listener to the button
    document.getElementById('submitBtn').addEventListener('click', function() {
        // Show a SweetAlert message
        Swal.fire({
            title: 'Form Submitted!',
            text: 'Thank you for submitting the form.',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.isConfirmed) {
                // Submit the form when the user clicks "OK"
                document.getElementById('mcqForm').submit();
            }
        });
    });
    </script>

    <?php include("footerlink.php")?>
</body>

</html>