<!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" id="submit-to-google-sheet-form">
                                        <?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="submit" class="btn btn-danger" id="submitButton">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>
    function sendOrder(formId, scriptUrl, vendorName) {
        $(formId).submit(function(event) {
            event.preventDefault();

            var formData = $(this).serialize();
            $.ajax({
                type: "POST",
                url: scriptUrl,
                data: formData,
                success: function(response) {
                    Swal.fire(
                        vendorName + ' - Order Sent!',
                        'Order Sent Successfully!!',
                        'success'
                    ).then(() => {
                        window.location.reload();
                    });
                },
                error: function(error) {
                    Swal.fire(
                        vendorName + ' - Error',
                        'An error occurred while submitting the form.',
                        'error'
                    );
                }
            });
        });
    }

    // Customize the function to use #formVendor1
    sendOrder("#formVendor1", "https://script.google.com/macros/s/AKfycbyh2kPUo95D0dsOHLQFsUta_I-T_HNmNYBoJtxZVItrj7Y7jhZbD2MTCzOO6Vct4gAMFA/exec", "Vendor 1");
  </script> -->
    <script>
        const agreeCheckbox = document.getElementById("agreeCheckbox");
        const submitButton = document.getElementById("submitButton");

        agreeCheckbox.addEventListener("change", function () {
            if (agreeCheckbox.checked) {
                submitButton.removeAttribute("disabled");
            } else {
                submitButton.setAttribute("disabled", "disabled");
            }
        });
    </script>
  <script>
      const scriptURL = 'https://script.google.com/macros/s/AKfycbzMo6menqNI7XyZt3GLJBv4-T3T1dZWyYv1H1HDtRF0Gt0dNjD1G0zFdHRNcpLVmbBWfw/exec'
      const form = document.getElementById('submit-to-google-sheet-form');
      form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
      if(response => console.log('Success!', response)){
        swal({
        title: "Thank You!",
        text: "Your message sent successfully. We will get back to you in 15 minutes.",
        icon: "success",
        successMode: true,
        })
        .then((willDelete) => {
        if (willDelete) {
         window.location = window.location.href;
        } else {
        window.location = window.location.href;
        }
        });
        }
      else{
        swal({
        title: "Sorry!",
        text: "Your message not sent. Please try after some time.",
        icon: "warning",
        dangerMode: true,
        })
        .then((willDelete) => {
        if (willDelete) {
         window.location = window.location.href;
        } else {
        window.location = window.location.href;
        }
        });
      }
    })
  </script> 
  


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

</html>