<?php
include('../config/config.php');
include('../config/session_check.php'); 

// Fetch Active Customers
$result = $conn->query("SELECT id, recipe_name, recipe_details FROM recipes WHERE status='active'");
?>

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Customer Master</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="../assets/img/favicon.png" rel="icon">
  <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../assets/vendor/quill/quill.snow.css" rel="stylesheet">
  <link href="../assets/vendor/quill/quill.bubble.css" rel="stylesheet">
  <link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="../assets/vendor/simple-datatables/style.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="../assets/css/style.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    @media (max-width: 768px) {
        table thead { display: none; }
        table tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #ccc; padding: 1rem; }
        table tbody td { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #ddd; }
        table tbody td:last-child { border-bottom: none; }
        table td::before { content: attr(data-label); font-weight: bold; }
    }
    </style>
    


</head>

<body>

  <!-- ======= Header ======= -->
<?php include('../config/header.php'); ?> // Include the header

  <!-- ======= Sidebar ======= -->

<?php include('../config/sidebar.php'); ?>
  <main id="main" class="main">

   
    <section class="section">
      <div class="row">
        <div class="col-lg-12">

          <div class="card">
            <div class="card-body">
                
               
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receipe</title>
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h2>Receipe</h2>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRecipeModal">Add Receipe</button>
      <table class="table datatable">
             <thead>
                <tr>
                    <th>Recipe Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php while ($row = $result->fetch_assoc()): ?>
                    <tr>
    <td data-label="Recipe Name"><?= htmlspecialchars($row['recipe_name']); ?></td>
    <td data-label="Actions">
        <button onclick="editRecipe(<?= $row['id']; ?>)" class="btn btn-warning btn-sm">Edit</button>
        <button onclick="deleteRecipe(<?= $row['id']; ?>)" class="btn btn-danger btn-sm">Delete</button>
    </td>
</tr>

                <?php endwhile; ?>
            </tbody>
        </table>
</div>

<!-- Add Recipe Modal -->
<div class="modal fade" id="addRecipeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Recipe</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addRecipeForm">
                    <div class="mb-3">
                        <label for="recipe_name" class="form-label">Recipe Name</label>
                        <input type="text" class="form-control" id="recipe_name" name="recipe_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="recipe_details" class="form-label">Recipe Details</label>
                        <textarea class="form-control" id="recipe_details" name="recipe_details" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" onclick="submitAddRecipeForm()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Recipe Modal -->
<div class="modal fade" id="editRecipeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Recipe</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editRecipeForm">
                    <input type="hidden" id="editRecipeId" name="id">
                    <div class="mb-3">
                        <label for="editRecipeName" class="form-label">Recipe Name</label>
                        <input type="text" class="form-control" id="editRecipeName" name="recipe_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editRecipeDetails" class="form-label">Recipe Details</label>
                        <textarea class="form-control" id="editRecipeDetails" name="recipe_details" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" onclick="submitEditRecipeForm()">Update Recipe</button>
            </div>
        </div>
    </div>
</div>



            </div>  
          </div>

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

  </main><!-- End #main -->
  
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
function submitAddRecipeForm() {
    var formData = new FormData(document.getElementById("addRecipeForm"));
    formData.append("action", "add");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "recipe_actions.php", true);

    xhr.onload = function () {
        alert(xhr.responseText);
        location.reload();
    };

    xhr.onerror = function () {
        alert("Error adding recipe. Please check your network.");
    };

    xhr.send(formData);
}

function editRecipe(id) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "recipe_actions.php?id=" + id, true);

    xhr.onload = function () {
        var data = JSON.parse(xhr.responseText);

        document.getElementById("editRecipeId").value = id;
        document.getElementById("editRecipeName").value = data.recipe_name;
        document.getElementById("editRecipeDetails").value = data.recipe_details;

        var modal = new bootstrap.Modal(document.getElementById("editRecipeModal"));
        modal.show();
    };

    xhr.send();
}

function submitEditRecipeForm() {
    var formData = new FormData(document.getElementById("editRecipeForm"));
    formData.append("action", "edit");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "recipe_actions.php", true);

    xhr.onload = function () {
        alert(xhr.responseText);
        location.reload();
    };

    xhr.send(formData);
}

function deleteRecipe(id) {
    if (confirm("Are you sure you want to delete this recipe?")) {
        var formData = new FormData();
        formData.append("id", id);
        formData.append("action", "delete");

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "recipe_actions.php", true);

        xhr.onload = function () {
            alert(xhr.responseText);
            location.reload();
        };

        xhr.send(formData);
    }
}



</script>
  <!-- ======= Footer ======= -->
  <?php include '../config/footer.php'; ?>

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/vendor/chart.js/chart.umd.js"></script>
  <script src="../assets/vendor/echarts/echarts.min.js"></script>
  <script src="../assets/vendor/quill/quill.js"></script>
  <script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
  <script src="../assets/vendor/tinymce/tinymce.min.js"></script>
  <script src="../assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="../assets/js/main.js"></script>

</body>

</html>