<?php
     session_start();
      include 'database/shikanisha.kts.php';
        if(!($_SESSION['type'] == 'Manager' || $_SESSION['type'] == 'Cashier' || $_SESSION['type'] == 'Waiter')){
            header("location:logout.php");
}


?>
<?php 
include 'database/shikanisha.kts.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>THE FARM</title>
    <!-- Favicon icon -->
    <link rel="icon" type="./quixlab/image/png" sizes="16x16" href="./quixlab/images/favicon.png">
    <!-- Pignose Calender -->
    <link href="./quixlab/plugins/pg-calendar/css/pignose.calendar.min.css" rel="stylesheet">
    <!-- Chartist -->
    <link rel="stylesheet" href="./quixlab/plugins/chartist/css/chartist.min.css">
    <link rel="stylesheet" href="./quixlab/plugins/chartist-plugin-tooltips/css/chartist-plugin-tooltip.css">
    <!-- Custom Stylesheet -->
    <link href="./quixlab/css/design.css" rel="stylesheet">
    <!-- DataTables with Buttons -->
    <link rel="stylesheet" href="./quixlab/plugins/tables/css/datatable/dataTables.bootstrap4.min.css">
    <link href="./quixlab/plugins/tables/css/datatable/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="./quixlab/css/buttons.bootstrap.min.css" rel="stylesheet" />

</head>

<body>

    <!--*******************
        Preloader start
    ********************-->
    <div id="preloader">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10" />
            </svg>
        </div>
    </div>
    <!--*******************
        Preloader end
    ********************-->

    
    <!--**********************************
        Main wrapper start
    ***********************************-->
    <div id="main-wrapper">

        <!--**********************************
            Nav header start
        ***********************************-->
        <div class="nav-header">
            <div class="brand-logo" style="background-image: url('./quixlab/images/room.png');">
                
            </div>
        </div>
        <!--**********************************
            Nav header end
        ***********************************-->

        <!--**********************************
            Header start
        ***********************************-->
        <div class="header">    
            <div class="header-content clearfix">
                
                <div class="nav-control">
                    <div class="hamburger">
                        <span class="toggle-icon"><i class="icon-menu"></i></span>
                    </div>
                </div>
                <div class="header-left">
                    <div class="input-group icons">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-transparent border-0 pr-2 pr-sm-3" id="basic-addon1"><i class="mdi mdi-magnify"></i></span>
                        </div>
                        <input type="search" class="form-control" placeholder="Search Dashboard" aria-label="Search Dashboard">
                        <div class="drop-down animated flipInX d-md-none">
                            <form action="#">
                                <input type="text" class="form-control" placeholder="Search">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="header-right">
                    <ul class="clearfix">
                      
                    </ul>
                </div>
            </div>
        </div>
        <!--**********************************
            Header end ti-comment-alt
        ***********************************-->

        <!--**********************************
            Sidebar start
        ***********************************-->
          <?php


// Define arrays for each user role and the corresponding allowed links
$managerLinks = array(
    "orders.php", 
    "table.php", 
    "payments.php", 
    "reports.php", 
    "purchases.php", 
    "accomodation.php", 
    "employee.php", 
    "inventory.php"
);

$cashierLinks = array(
    "orders.php", 
    "table.php", 
    "payments.php"
);

$receptionistLinks = array(
    "orders.php", 
    "payments.php", 
    "accomodation.php", 
    "table.php"
);

// Check if user is logged in and their role is set in the session
if(isset($_SESSION['type'])) {
    $role = $_SESSION['type'];
    
    // Assign the corresponding links based on the user role
    switch($role) {
        case "Manager":
            $links = $managerLinks;
            break;
        case "Cashier":
            $links = $cashierLinks;
            break;
        case "Receptionist":
            $links = $receptionistLinks;
            break;
        default:
            $links = array();
            break;
    }
} else {
    // Redirect user to login page if they are not logged in
    header("Location: login.php");
    exit();
}

?>

<div class="nk-sidebar">           
    <div class="nk-nav-scroll">
        <ul class="metismenu" id="menu">
            <li class="nav-label">Dashboard</li>
            <li>
                <a class="has-arrow" href="javascript:void()" aria-expanded="false">
                    <i class="icon-speedometer menu-icon"></i><span class="nav-text">Dashboard</span>
                </a>
                <ul aria-expanded="false">
                    <li><a href="index.php">Dashboard</a></li>
                    <!-- <li><a href="./index-2.html">Home 2</a></li> -->
                </ul>
            </li>
            <?php 
               foreach($links as $link) {
    $linkText = ucfirst(str_replace(".php", "", $link)); // remove .php extension and capitalize first letter
    echo '<li><a href="' . $link . '"><i class="icon-menu menu-icon"></i><span class="nav-text">' . $linkText . '</span></a></li>';
}

            ?>
            <li>
                <a href="logout.php" aria-expanded="false">
                    <i class="icon-lock menu-icon"></i><span class="nav-text">LogOut</span>
                </a>
            </li>
        </ul>
    </div>
</div>
        <!--**********************************
            Sidebar end
        ***********************************-->

        <!--**********************************
            Content body start
        ***********************************-->
        <div class="content-body">

            <div class="container-fluid mt-3">
              
                  <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">My Pending Bills</h4>
                                <div class="active-member">
                                    <div class="table-responsive">
                                        <table class="table table-xs mb-0 " id="billTable">

                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Seller Name</th>
                                                    <th>Total</th>
                                                    <th>Paid Amount</th>
                                                    <th>Status</th>
                                                    <th>Table Name</th>
                                                    <th>Date</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                             <tbody>

                                               
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">My Cleared Bils Today</h4>
                                <div class="active-member">
                                    <div class="table-responsive">
                                        <table class="table table-xs mb-0" id="paidTable">

                                            <thead>
                                               <tr>
                                                    <th>ID</th>
                                                    <th>Seller Name</th>
                                                    <th>Total</th>
                                                    <th>Paid Amount</th>
                                                    <th>Payment Method </th>
                                                    <th>Status</th>
                                                    <th>Table Name</th>
                                                    <th>Date</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                        
        <tbody>

        </tbody>


                                               
                                           
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
              
                
                <!-- Sales Details Modal -->
                <div class="modal fade" id="salesItemsModal" tabindex="-1" role="dialog" aria-labelledby="salesItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="salesItemsModalLabel">Sales Items Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Subtotal</th>
                        </tr>
                    </thead>
                    <tbody id="salesItemsTableBody">
                        <!-- Sales items will be dynamically populated here -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

                
                <!-- end of payment modal -->

            </div>
            <!-- #/ container -->
        </div>
        <!--**********************************
            Content body end
        ***********************************-->
        
        
        <!--**********************************
            Footer start
        ***********************************-->
        <div class="footer">
            <div class="copyright">
                <p>Copyright &copy; Designed & Developed by <a href="https://kakashitech.com">Kakashi Tech</a> 2023</p>
            </div>
        </div>
        <!--**********************************
            Footer end
        ***********************************-->
    </div>
    <!--**********************************
        Main wrapper end
    ***********************************-->

    <!--**********************************
        Scripts
    ***********************************-->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="./quixlab/plugins/common/common.min.js"></script>
    <script src="./quixlab/js/custom.min.js"></script>
    <script src="./quixlab/js/settings.js"></script>
    <script src="./quixlab/js/gleek.js"></script>
    <script src="./quixlab/js/styleSwitcher.js"></script>

    <!-- Chartjs -->
    <script src="./quixlab/plugins/chart.js/Chart.bundle.min.js"></script>
    <!-- Circle progress -->
    <script src="./quixlab/plugins/circle-progress/circle-progress.min.js"></script>
    <!-- Datamap -->
    <script src="./quixlab/plugins/d3v3/index.js"></script>
    <script src="./quixlab/plugins/topojson/topojson.min.js"></script>
    <script src="./quixlab/plugins/datamaps/datamaps.world.min.js"></script>
    <!-- Morrisjs -->
    <script src="./quixlab/plugins/raphael/raphael.min.js"></script>
    <script src="./quixlab/plugins/morris/morris.min.js"></script>
    <!-- Pignose Calender -->
    <script src="./quixlab/plugins/moment/moment.min.js"></script>
    <script src="./quixlab/plugins/pg-calendar/js/pignose.calendar.min.js"></script>
    <!-- ChartistJS -->
    <script src="./quixlab/plugins/chartist/js/chartist.min.js"></script>
    <script src="./quixlab/plugins/chartist-plugin-tooltips/js/chartist-plugin-tooltip.min.js"></script>
    <script src="./quixlab/js/dashboard/dashboard-1.js"></script>
    <!-- Datatables -->
    <script src="./js/dashboard/dashboard-1.js"></script>
    <script src="./quixlab/plugins/tables/js/jquery.dataTables.min.js"></script>
    <script src="./quixlab/plugins/tables/js/datatable/dataTables.bootstrap4.min.js"></script>
    <script src="./quixlab/plugins/tables/js/datatable-init/datatable-basic.min.js"></script>
    
    <script src="./quixlab/js/data-table/dataTables.buttons.min.js"></script>
    <script src="./quixlab/js/data-table/buttons.flash.min.js"></script>
    <script src="./quixlab/js/data-table/jszip.min.js"></script>
    <script src="./quixlab/js/data-table/pdfmake.min.js"></script>
    <script src="./quixlab/js/data-table/vfs_fonts.js"></script>
    <script src="./quixlab/js/data-table/buttons.html5.min.js"></script>
    <script src="./quixlab/js/data-table/buttons.print.min.js"></script>
    <script src="./quixlab/js/data-table/datatables-init.js"></script>



	
	<script>
$(document).ready(function() {
  // Load table data via AJAX
  var table = $('#billTable').DataTable({
    ajax: {
      url: './database/get_transactions.kts.php',
      type: 'GET',
      dataSrc: ''
    },
    columns: [
      { data: 'trans_id' },
      { data: 'seller_name' },
      { data: 'total' },
      { data: 'amount_received'},
    
      {
        data: null,
        className: 'text-center',
        render: function(data, type, row) {
            var badgeClass = '';
            var badgeText = '';

            if (data.amount_received == data.total) {
                badgeClass = 'badge-success';
                badgeText = 'Paid';
            } else if (data.amount_received < data.total) {
                badgeClass = 'badge-warning';
                badgeText = 'Pending';
            } else if (data.amount_received > data.total) {
                badgeClass = 'badge-danger';
                badgeText = 'Overpayment';
            }

            return '<span class="badge ' + badgeClass + '">' + badgeText + '</span>';
        }
    },
      { data: 'table_name' },
      { data: 'seller_date' },
      {
        data: null,
        className: 'text-center',
        render: function(data, type, row) {
          return '<span>' +
         
            '<i class="fa fa-eye view-transaction" data-transid="' + row.trans_id + '" title="Delete Supplier"></i>  ' +
            '</span>';
        }
      }
    ]
  });
  
$(document).on("click", ".view-transaction", function() {
    var transId = $(this).data("transid");

    // Send an AJAX request to fetch sales items data
    $.ajax({
        type: "POST",
        url: "./database/fetch_sales_items.kts.php",
        data: { trans_id: transId },
        success: function(response) {
            var salesItemsTable = $('#salesItemsTableBody');
            salesItemsTable.empty();

            // Loop through the sales items and display them in a table
            $.each(response, function(index, item) {
                var row = '<tr>' +
                    '<td>' + item.product_name + '</td>' +
                    '<td>' + item.quantity + '</td>' +
                    '<td>' + item.selling_price + '</td>' +
                    '<td>' + item.subtotal + '</td>' +
                    '</tr>';
                salesItemsTable.append(row);
            });

            // Show the modal
            $('#salesItemsModal').modal('show');
        },
        error: function() {
            console.log('Error fetching sales items data.');
        }
    });
});

});
</script>

	
	<script>
$(document).ready(function() {
  // Load table data via AJAX
  var table = $('#paidTable').DataTable({
    ajax: {
      url: './database/get_paid.kts.php',
      type: 'GET',
      dataSrc: ''
    },
    columns: [
      { data: 'trans_id' },
      { data: 'seller_name' },
      { data: 'total' },
      { data: 'amount_received'},
        { data: 'payment_method'},
      {
        data: null,
        className: 'text-center',
        render: function(data, type, row) {
            var badgeClass = '';
            var badgeText = '';

            if (data.amount_received == data.total) {
                badgeClass = 'badge-success';
                badgeText = 'Paid';
            } else if (data.amount_received < data.total) {
                badgeClass = 'badge-warning';
                badgeText = 'Pending';
            } else if (data.amount_received > data.total) {
                badgeClass = 'badge-danger';
                badgeText = 'Overpayment';
            }

            return '<span class="badge ' + badgeClass + '">' + badgeText + '</span>';
        }
    },
      { data: 'table_name' },
      { data: 'seller_date' },
      {
        data: null,
        className: 'text-center',
        render: function(data, type, row) {
          return '<span>' +
         
            '<i class="fa fa-eye view-transaction" data-transid="' + row.trans_id + '" title="Delete Supplier"></i>  ' +
            '</span>';
        }
      }
    ]
  });
  
$(document).on("click", ".view-transaction", function() {
    var transId = $(this).data("transid");

    // Send an AJAX request to fetch sales items data
    $.ajax({
        type: "POST",
        url: "./database/fetch_sales_items.kts.php",
        data: { trans_id: transId },
        success: function(response) {
            var salesItemsTable = $('#salesItemsTableBody');
            salesItemsTable.empty();

            // Loop through the sales items and display them in a table
            $.each(response, function(index, item) {
                var row = '<tr>' +
                    '<td>' + item.product_name + '</td>' +
                    '<td>' + item.quantity + '</td>' +
                    '<td>' + item.selling_price + '</td>' +
                    '<td>' + item.subtotal + '</td>' +
                    '</tr>';
                salesItemsTable.append(row);
            });

            // Show the modal
            $('#salesItemsModal').modal('show');
        },
        error: function() {
            console.log('Error fetching sales items data.');
        }
    });
});

});
</script>
	
	
</body>

</html>