<? session_start();
require_once("assets/php/_user_authenticate.php"); ?>
<!-- Login the User -->

<!-- This code generates the base URL for the website by combining the protocol, domain name, and directory path -->
<?php
    $rootFolder = basename($_SERVER['DOCUMENT_ROOT']);
    $baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . str_replace('/pages', '', dirname($_SERVER['SCRIPT_NAME']));
?>
<!-- This code generates the base URL for the website by combining the protocol, domain name, and directory path -->

<!-- This code is useful for internal styles  -->
<?php ob_start(); ?>

        <!-- DATA TABLES CSS -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">


<style>
.dt-buttons {
        display: flex;
        gap: 5px;
    }
</style>
<?php $styles = ob_get_clean(); ?>
<!-- This code is useful for internal styles  -->

<!-- This code is useful for content -->
<?php ob_start(); ?>

                <div class="container-fluid">

                    <!-- Page Header -->
                    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                        <h1 class="page-title fw-semibold fs-18 mb-0">Search Packages</h1>
                        <div class="ms-md-1 ms-0">
                            <nav>
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">Packages</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Search</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <!-- Page Header Close -->

                    <div class="alert alert-solid-secondary alert-dismissible fs-15 fade show mb-4">
                        We Placed <strong class="text-fixed-black">Datatables</strong> only in this page by using <strong class="text-fixed-black">jquery</strong> cdn link.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
                    </div>

                    <!-- Start::row-1 -->
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-header">
                                    <div class="card-title">
                                        Search All Packages
                                    </div>
                                </div>
                                <div class="card-body">
                                    
                                    <div id="packages-container">
                                        <div class="table-responsive">
                                            <table id="datatable-packages" class="table table-bordered table-hover text-nowrap" style="width:100%">
                                            
                                            <!-- Content Dynamically Loaded through Ajax -->

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

                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End::row-1 -->


                </div>

<?php $content = ob_get_clean(); ?>
<!-- This code is useful for content -->

<!-- This code is useful for internal scripts  -->
<?php ob_start(); ?>

        <!-- JQUERY JS -->
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

        <!-- DATATABLES CDN JS -->
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.6/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.2.3/js/buttons.html5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

        <script>
$(document).ready(function () {

    let packageFilterMode = 'all';

    var packagesTable = $('#datatable-packages').DataTable({

        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],

        pageLength: 25,

        dom: '<"top-container"<"left-controls"lB>f>rtip',

        processing: true,
        serverSide: true,

        ajax: {
            url: 'assets/php/_get_packages.php',
            data: function(d) {

                d.package_filter_mode = packageFilterMode;
            }
        },

        order: [[0, 'desc']],

        columns: [
            { title: "Received" },
            { title: "Tracking" },
            { title: "Customer" },
            { title: "Mailbox" },
            { title: "Location" },
            { title: "Size" },
            { title: "Sender" },
            { title: "Received By" },
            { title: "package_key", visible: false, searchable: false }
        ],

        buttons: [

            {
                text: 'Receive Package',
                className: 'btn btn-primary',
                action: function () {

                    window.location.href = 'accept-packages.php';

                }
            },

            {
                text: 'All Packages',
                className: 'btn btn-secondary',
                attr: {
                    id: 'btn-all-packages',
                    disabled: true
                },
                action: function () {

                    packageFilterMode = 'all';

                    packagesTable.ajax.reload();

                    $('#btn-all-packages').prop('disabled', true);
                    $('#btn-active-packages').prop('disabled', false);
                    $('#btn-aging-packages').prop('disabled', false);

                }
            },

            {
                text: 'Active Packages',
                className: 'btn btn-secondary',
                attr: {
                    id: 'btn-active-packages'
                },
                action: function () {

                    packageFilterMode = 'active';

                    packagesTable.ajax.reload();

                    $('#btn-active-packages').prop('disabled', true);
                    $('#btn-all-packages').prop('disabled', false);
                    $('#btn-aging-packages').prop('disabled', false);

                }
            },

            {
                text: 'Aging Packages',
                className: 'btn btn-secondary',
                attr: {
                    id: 'btn-aging-packages'
                },
                action: function () {

                    packageFilterMode = 'aging';

                    packagesTable.ajax.reload();

                    $('#btn-aging-packages').prop('disabled', true);
                    $('#btn-all-packages').prop('disabled', false);
                    $('#btn-active-packages').prop('disabled', false);

                }
            }

        ],

        language: {
            searchPlaceholder: 'Search packages...',
            sSearch: '',
        },

        autoWidth: false,
        scrollX: true,

        initComplete: function () {

            this.api().columns.adjust().draw();

        }

    });

});
</script>

<?php $scripts = ob_get_clean(); ?>
<!-- This code is useful for internal scripts  -->

<!-- This code use for render base file -->
<?php include 'layouts/base.php'; ?>
<!-- This code use for render base file -->