<?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>Units</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="units.php">Units</a> > View Units
                                    </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 -->
                                <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 Units</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                    <!-- HTML Form for inserting data -->
<form id="insertForm" method="post" action="insert_unit.php">
    <div class="modal-body">
        <div class="form-group">
            <label for="actual_name" class="control-label">Name</label>
            <input type="text" name="actual_name" class="form-control" placeholder="Name" id="actual_name" required>
        </div>
        <div class="form-group">
            <label for="short_name" class="control-label">Short Name</label>
            <input type="text" name="short_name" class="form-control" placeholder="Short Name" id="short_name" required>
        </div>
        <div class="form-group">
            <label for="allow_decimal" class="control-label">Allow Decimal</label>
            <select name="allow_decimal" class="form-control" id="allow_decimal" required>
                <option value="">Please select</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
            </select>
        </div>
        <div class="form-group">
            <input type="checkbox" name="add_multiple" id="add_multiple">
            <label for="add_multiple">Add as multiple of other unit</label>
        </div>
    </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>
                                <!-- 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-5">
                                        <input type="date" name="" 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 -->
                            <div class="row mt-5">
                                <div class="col-lg-2"></div>
                                <div class="col-lg-8">
                                    <button class="btn btn-primary">
                                        <ion-icon name="document-outline"></ion-icon>Export to CSV
                                    </button>
                                    <button class="btn btn-info">
                                        <ion-icon name="document-outline"></ion-icon>Export to Excel
                                    </button>
                                    <button class="btn btn-warning">
                                        <ion-icon name="print-outline"></ion-icon>Print
                                    </button>
                                    <button class="btn btn-danger">
                                        <ion-icon name="stop-outline"></ion-icon>Column Visibility
                                    </button>
                                    <button class="btn btn-dark">
                                        <ion-icon name="document-outline"></ion-icon>Export to PDF
                                    </button>
                                </div>
                            </div>
                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">
                            <?php
// SQL query
$sql = "SELECT `id`, `business_id`, `actual_name`, `short_name`, `allow_decimal` FROM `units` WHERE `business_id` = 3";

try {
    // Prepare and execute the query
    $stmt = $conn->prepare($sql);
    $stmt->execute();

    // Fetch all results
    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Handle query error
    die("Query failed: " . $e->getMessage());
}
?>
 <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Short Name</th>
                <th>Allow Decimal</th>
                <th colspan="2">Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php if (!empty($results)): ?>
                <?php foreach ($results as $row): ?>
                    <tr>
                        <td><?php echo htmlspecialchars($row['actual_name']); ?></td>
                        <td><?php echo htmlspecialchars($row['short_name']); ?></td>
                        <td><?php echo $row['allow_decimal'] == 1 ? 'Yes' : 'No'; ?></td>
                        <td>  <a href="action/delete_unit.php?del=<?php echo htmlentities($row['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" onclick="openEditModal(<?php echo $row['id']; ?>, '<?php echo htmlspecialchars($row['actual_name']); ?>', '<?php echo htmlspecialchars($row['short_name']); ?>', <?php echo $row['allow_decimal']; ?>)"></ion-icon></td>
                        </tr>
                <?php endforeach; ?>
            <?php else: ?>
                <tr>
                    <td colspan="5">No records found</td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <!-- Edit Modal -->
<div class="modal" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Unit</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editId" name="id" />
                    <div class="form-group">
                        <label for="actualName">Actual Name:</label>
                        <input type="text" class="form-control" id="actualName" name="actual_name" />
                    </div>
                    <div class="form-group">
                        <label for="shortName">Short Name:</label>
                        <input type="text" class="form-control" id="shortName" name="short_name" />
                    </div>
                    <div class="form-group">
                        <label for="allowDecimal">Allow Decimal:</label>
                        <select class="form-control" id="allowDecimal" name="allow_decimal">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="submitEditForm()">Save changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    function openEditModal(id, actualName, shortName, allowDecimal) {
        document.getElementById('editId').value = id;
        document.getElementById('actualName').value = actualName;
        document.getElementById('shortName').value = shortName;
        document.getElementById('allowDecimal').value = allowDecimal;
        $('#editModal').modal('show');
    }

    function submitEditForm() {
        var formData = new FormData(document.getElementById('editForm'));

        fetch('edit_unit.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            $('#editModal').modal('hide');
            location.reload(); // Refresh the page to show updated data
        })
        .catch(error => console.error('Error:', error));
    }
</script>

    <!-- 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>