<?php
include 'includes/config.php';
session_start();

if (!$_SESSION['email']) {
    header('location:login.php');
}
?>
<!doctype html>
<html lang="en">


<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Categories</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <style>
    ion-icon {
        font-size: 20px;
        margin-bottom: -5px;
    }
    </style>
</head>

<body>
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php 
            include 'includes/sidebar.php';
        ?>
        <!-- TOP Nav Bar -->
        <?php include 'includes/header.php';?>
        <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h4 class="card-title"><a href="categories.php">Categories</a> > View Categories
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#exampleModalCenter" style="float:inline-end;">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px;color:white">
                                            </ion-icon>Add
                                    </button>
                                </div>
                                <!-- add variation -->
                                

                             <!-- Modal HTML -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Add Categories</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="categoryForm" method="POST" action="process_form_category.php">
                    <div class="form-group">
                        <label for="categoryName" class="control-label">Category Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Category Name" id="categoryName" required>
                    </div>
                    <div class="form-group">
                        <label for="categoryCode" class="control-label">Category Code</label>
                        <input type="text" name="short_code" class="form-control" placeholder="Category Code" id="categoryCode" required>
                    </div>
                    <div class="form-group">
                        <label for="description" class="control-label">Description:</label>
                        <textarea name="description" class="form-control" id="description"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" name="isSubTaxonomy" id="isSubTaxonomy">
                        <label for="isSubTaxonomy">Add as sub taxonomy</label>
                    </div>
                    <div id="parentCategoryContainer" class="form-group" style="display: none;">
                        <label for="parentCategory">Parent Category:</label>
                        <select name="parent_id" id="parentCategory" class="form-control">
                            <option value="">Select Parent Category</option>
                            <!-- Options will be populated by JavaScript -->
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#isSubTaxonomy').change(function() {
        if ($(this).is(':checked')) {
            $('#parentCategoryContainer').show();
            
            $.ajax({
                url: 'get_parent_categories.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var $select = $('#parentCategory');
                    $select.empty(); // Clear existing options
                    $select.append($('<option>', { 
                        value: '',
                        text: 'Select Parent Category'
                    }));
                    $.each(data, function(index, item) {
                        $select.append($('<option>', { 
                            value: item.id,
                            text: item.name 
                        }));
                    });
                },
                error: function(xhr, status, error) {
                    console.error("AJAX request failed:", status, error);
                }
            });
        } else {
            $('#parentCategoryContainer').hide();
        }
    });
});
</script>



                                <!-- add variation end -->
                            </div>
                            <!-- search bar -->
                            <form action="">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-5">
                                        <input type="search" name="" placeholder="Search" class="form-control" id="">
                                    </div>
                                  
                                    <div class="col-lg-2">
                                        <button style="width:100%;" class="btn btn-primary p-2">Search</button>
                                    </div>
                                </div>
                            </form>
                            <!-- searchbar end -->
                            <!-- buttons for export -->
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/print.js/1.6.0/print.min.js"></script>

                           <div class="row mt-5">
    <div class="col-lg-2"></div>
    <div class="col-lg-8">
        <button id="exportCsvBtn" class="btn btn-primary">
            <ion-icon name="document-outline"></ion-icon> Export to CSV
        </button>
        <button id="exportExcelBtn" class="btn btn-info">
            <ion-icon name="document-outline"></ion-icon> Export to Excel
        </button>
        <button id="printBtn" class="btn btn-warning">
            <ion-icon name="print-outline"></ion-icon> Print
        </button>
    </div>
</div>

                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">
                            <?php

// Prepare and execute the SQL statement
$stmt = $conn->query("SELECT id, name, business_id, short_code, parent_id, description FROM categories WHERE business_id = 3");

// Fetch all the data
$categories = $stmt->fetchAll();

function getCategoryName($categories, $id) {
    foreach ($categories as $category) {
        if ($category['id'] == $id) {
            return $category['name'];
        }
    }
    return '';
}
?>
      <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Category Code</th>
                    <th>Description</th>
                    <th colspan="2">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($categories as $category): ?>
                    <tr>
                        <td>
                            <?php
                            if ($category['parent_id']) {
                                echo '--' . getCategoryName($categories, $category['parent_id']) . ' ' . $category['name'];
                            } else {
                                echo $category['name'];
                            }
                            ?>
                        </td>
                        <td><?php echo $category['short_code']; ?></td>
                        <td><?php echo $category['description']; ?></td>
                        <td>  <a href="action/delete_category.php?del=<?php echo htmlentities($category['id']); ?>" class="delete-link" onclick="return confirm('Are you sure you want to delete this item?');">
    <ion-icon name="trash-outline"></ion-icon>
</a></td>
                        <td>
                            <ion-icon name="create-outline" class="edit-btn" data-bs-toggle="modal" data-bs-target="#editModal" 
                            data-id="<?php echo $category['id']; ?>"
                            data-name="<?php echo $category['name']; ?>"
                            data-short_code="<?php echo $category['short_code']; ?>"
                            data-parent_id="<?php echo $category['parent_id']; ?>"
                            data-description="<?php echo $category['description']; ?>"></ion-icon>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table><!-- Edit Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm" method="POST" action="update_category.php">
                        <input type="hidden" name="id" id="category_id">
                        <div class="mb-3">
                            <label for="category_name" class="form-label">Category Name</label>
                            <input type="text" class="form-control" id="category_name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="category_code" class="form-label">Category Code</label>
                            <input type="text" class="form-control" id="category_code" name="short_code" required>
                        </div>
                        <div class="mb-3">
                            <label for="parent_id" class="form-label">Parent Category</label>
                            <select class="form-control" id="parent_id" name="parent_id">
                                <?php foreach ($categories as $cat): ?>
                                    <option value="<?php echo $cat['id']; ?>"><?php echo $cat['name']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="category_description" class="form-label">Description</label>
                            <textarea class="form-control" id="category_description" name="description" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Script to populate modal with category data
        document.addEventListener('DOMContentLoaded', function () {
            var editBtns = document.querySelectorAll('.edit-btn');
            editBtns.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var id = btn.getAttribute('data-id');
                    var name = btn.getAttribute('data-name');
                    var shortCode = btn.getAttribute('data-short_code');
                    var parentId = btn.getAttribute('data-parent_id');
                    var description = btn.getAttribute('data-description');

                    document.getElementById('category_id').value = id;
                    document.getElementById('category_name').value = name;
                    document.getElementById('category_code').value = shortCode;
                    document.getElementById('parent_id').value = parentId;
                    document.getElementById('category_description').value = description;
                });
            });
        });
    </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <!-- Wrapper END -->
    <!-- Footer -->
<?php include 'includes/footer.php';?>
    <nav class="iq-float-menu">
        <input type="checkbox" href="#" class="iq-float-menu-open" name="menu-open" id="menu-open" />
        <label class="iq-float-menu-open-button" for="menu-open">
            <span class="lines line-1"></span>
            <span class="lines line-2"></span>
            <span class="lines line-3"></span>
        </label>
        <button class="iq-float-menu-item bg-info" data-toggle="tooltip" data-placement="top" title="Direction Mode"
            data-mode="rtl"><i class="ri-text-direction-r"></i></button>
        <button class="iq-float-menu-item bg-danger" data-toggle="tooltip" data-placement="top" title="Color Mode"
            id="dark-mode" data-active="true"><i class="ri-sun-line"></i></button>
        <button class="iq-float-menu-item bg-warning" data-toggle="tooltip" data-placement="top" title="Comming Soon"><i
                class="ri-palette-line"></i></button>
    </nav>
    <!-- Footer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <!-- Rtl and Darkmode -->
    <script src="js/rtl.js"></script>
    <script src="js/customizer.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="js/lottie.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>
</body>


</html>