<?php
include "db.php";
session_start();
if (!isset($_SESSION['email'])) {
  header("Location:login.php");
}
?>

<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicon icon-->
    <link rel="shortcut icon" type="image/png" href="../sglogo.png" />

    <!-- Core Css -->
    <link rel="stylesheet" href="assets/css/styles.css" />

    <title>Admin || Customer Review Data</title>
    <link rel="stylesheet" href="assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</head>

<style>

table td {
    color: #000000d4 !important;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 650px;
        margin-left: auto;
    }
}
</style>

<body class="link-sidebar">
    <!-- Preloader -->

    <div id="main-wrapper">
        <!-- Sidebar Start -->

        <?php
    include "header.php";
    ?>

        <div class="body-wrapper">
            <div class="container-fluid">
                <div class="card card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <div class="d-sm-flex align-items-center justify-space-between">
                                <h4 class="mb-4 mb-sm-0 card-title">Customer Review Data</h4>
                                <nav aria-label="breadcrumb" class="ms-auto">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item d-flex align-items-center gap-2">
                                            <a class="text-muted text-decoration-none d-flex" href="index.php">
                                                <iconify-icon icon="solar:home-2-line-duotone" class="fs-6">
                                                </iconify-icon>
                                            </a>

                                            <!-- Blog Button -->
                                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#blogFormModal"><i class="fa fa-plus"></i>
                                                Add Review
                                            </button>
                                        </li>
                                    </ol>

                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Blog Form Modal -->
<div class="modal fade" id="blogFormModal" tabindex="-1" aria-labelledby="blogFormModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="insert_review.php">
        <div class="modal-header">
          <h5 class="modal-title" id="blogFormModalLabel">Add Review</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label for="" class="form-label">Name</label>
            <input type="text" class="form-control" name="name" >
          </div>

          <div class="mb-3">
            <label for="" class="form-label">Review Content</label>
            <textarea class="form-control" name="content" rows="4" ></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Submit</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

                <div class="datatables">
                    <!-- start File export -->
                    <div class="card">
                        <div class="card-body">

                            <div class="table-responsive" >

<table id="file_export" class="table w-100 table-striped table-bordered display ">
    <thead>
        <tr>
            <th>Sr.No</th>
            <th>Name</th>
            <th>Review Content</th>
            <th>Created At</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $sql = "SELECT * FROM reviews ORDER BY id DESC";
        $result = mysqli_query($conn, $sql);
        $sr = 1;

        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) {
                ?>
                <tr id="row-<?= $row['id'] ?>">
                    <td><?= $sr++ ?></td>
                    <td ><?= htmlspecialchars($row['name']) ?></td>
                    <td style="text-wrap: auto;max-width: 400px;" >
                            <?= $row['content'] ?> 
                    </td>
                    <td><?= date("d-m-Y h:i A", strtotime($row['created_at'])) ?></td>
                    <td class="text-nowrap" >
    <!-- Edit Button -->
    <button class="btn btn-primary btn-sm me-1 editReviewBtn" 
            data-id="<?= $row['id'] ?>"
            data-bs-toggle="modal" 
            data-bs-target="#editReviewModal">
        <i class="fas fa-edit"></i>
    </button>

    <!-- Delete Button -->
    <button class="btn btn-danger btn-sm deleteReviewBtn" data-id="<?= $row['id'] ?>">
        <i class="fas fa-trash-alt"></i>
    </button>
</td>

                </tr>
                <?php
            }
        }
        ?>
    </tbody>
</table>

                            </div>
                        </div>
                    </div>
                    <!-- end File export -->

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

    <!-- SweetAlert CDN -->

<script>
document.querySelectorAll('.editReviewBtn').forEach(button => {
    button.addEventListener('click', function () {
        const row = this.closest('tr');
        const id = this.getAttribute('data-id');
        const name = row.children[1].textContent.trim();
        const content = row.children[2].textContent.trim();

        document.getElementById('edit_id').value = id;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_content').value = content;
    });
});
</script>

<div class="modal fade" id="editReviewModal" tabindex="-1" aria-labelledby="editReviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="update_review.php">
        <div class="modal-header">
          <h5 class="modal-title">Edit Review</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="edit_id" id="edit_id" >

          <div class="mb-3">
            <label>Name</label>
            <input type="text" name="name" id="edit_name" class="form-control" >
          </div>

          <div class="mb-3">
            <label>Content</label>
            <textarea name="content" id="edit_content" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success" type="submit">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.deleteReviewBtn').forEach(button => {
    button.addEventListener('click', function () {
        const id = this.getAttribute('data-id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('delete_review.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'delete_id=' + id
                })
                .then(response => response.text())
                .then(data => {
                    if (data.trim() === 'success') {
                        document.getElementById('row-' + id).remove();
                        Swal.fire(
                            'Deleted!',
                            'Review has been deleted.',
                            'success'
                        );
                    } else {
                        Swal.fire(
                            'Failed!',
                            'Could not delete the review.',
                            'error'
                        );
                    }
                });
            }
        });
    });
});
</script>

    <script>
    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }
    </script>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const deleteButtons = document.querySelectorAll(".deleteBtn");

        deleteButtons.forEach(button => {
            button.addEventListener("click", function() {
                const contactId = this.dataset.id;

                Swal.fire({
                    title: "Are you sure?",
                    text: "This contact will be deleted!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch("delete_contact.php", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/x-www-form-urlencoded"
                                },
                                body: "delete_id=" + contactId
                            })
                            .then(response => response.text())
                            .then(data => {
                                if (data === "success") {
                                    document.getElementById("row-" + contactId)
                                        .remove();
                                    Swal.fire("Deleted!",
                                        "The contact has been deleted.",
                                        "success");
                                } else {
                                    Swal.fire("Error!", "Failed to delete contact.",
                                        "error");
                                }
                            });
                    }
                });
            });
        });
    });
    </script>

    <div class="dark-transparent sidebartoggler"></div>
    <script src="assets/js/vendor.min.js"></script>
    <!-- Import Js Files -->
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/dist/simplebar.min.js"></script>
    <script src="assets/js/theme/app.init.js"></script>
    <script src="assets/js/theme/theme.js"></script>
    <script src="assets/js/theme/app.min.js"></script>
    <script src="assets/js/theme/sidebarmenu-default.js"></script>

    <!-- solar icons -->
    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>

    <!-- highlight.js (code view) -->
    <script src="assets/js/highlights/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();


    document.querySelectorAll("pre.code-view > code").forEach((codeBlock) => {
        codeBlock.textContent = codeBlock.innerHTML;
    });
    </script>
    <script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <script src="assets/js/datatable/datatable-advanced.init.js"></script>
</body>


</html>