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

// error_reporting(E_ALL);
// ini_set('display_errors', 1);


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>View Products</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;
        }

        .custom_select {
            position: relative;
            display: inline-block;
        }

        .select-button {
            background-color: #007BFF;
            color: white;
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 70px;
            text-align: left;
        }

        .arrow {
            margin-left: 3px;
        }

        .select-options {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 4px;
            top: 100%;
            left: 0;
        }

        .select-options a {
            color: black;
            padding: 6px 10px;
            text-decoration: none;
            display: block;
            font-size: 12px;
        }

        .select-options a:hover {
            background-color: #f1f1f1;
        }

        /* Style for the popup background overlay */
        .popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* Semi-transparent background */
            z-index: 1000;
            /* Ensure it's above other content */
            overflow: auto;
            /* Scroll if needed */
        }

        /* Style for the popup content box */
        .popup-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* Center the box */
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            /* Shadow effect */
            width: 90%;
            max-width: 500px;
            /* Responsive max width */
            box-sizing: border-box;
            /* Include padding in width calculation */
        }

        /* Close button styling */
        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close:hover {
            color: #e74c3c;
            /* Change color on hover */
        }

        /* Styling for headings */
        .popup-content h2 {
            margin-top: 0;
            font-size: 24px;
            color: #333;
        }

        /* Table styling */
        .popup-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .popup-content th,
        .popup-content td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .popup-content th {
            background-color: #f4f4f4;
        }

        /* Input field styling */
        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            /* Include padding in width calculation */
        }

        /* Button styling */
        button {
            background-color: #3498db;
            /* Primary color */
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
            /* Darker shade on hover */
        }

        .loading_data {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background-color: rgba(255, 255, 255, 0.8); */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            /* Ensures the loader is on top */
        }

        .spinner {
            border: 8px solid rgba(0, 0, 0, 0.1);
            border-left-color: #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

</head>

<body>
    <!--<div id="loading_data" class="loading_data">-->
    <!--    <div class="spinner"></div>-->
    <!--</div>-->
    <!-- Popup Modal -->
    <!-- HTML for the Modal Popup -->
    <div id="stockPopup" class="popup">
        <div class="popup-content">
            <span class="close" onclick="closePopupstock()">&times;</span>
            <h2>Edit Stock</h2>
            <table>
                <tr>
                    <th>Product Name</th>
                    <th>Overall Purchase Stock</th>
                    <th>Opening Stock</th>
                    <th style="display: none;">Difference Stock</th>
                    <th>Opening Value</th>
                </tr>
                <tr id="productDetailsRow">
                    <td id="productName"></td>
                    <td id="overallStock"></td>
                    <td id="OpeningStock"></td>
                    <!-- Input field for current stock -->
                    <td id="currentStock" style="display: none;"></td>
                    <td><input type="number" id="currentStocksaleInput" /></td>
                </tr>
            </table>
            <!-- Button to submit the stock update -->
            <button onclick="updateStock()">Edit Stock</button>
        </div>
    </div>

    <!-- PHP button for editing stock -->
    <a href="#" onclick="openPopup(<?php echo htmlentities($product['product_id']); ?>)">
        <ion-icon name="server-outline"></ion-icon> &nbsp; Edit Stock
    </a>

    <!-- loader Start -->

    <!-- 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="list_products.php">Reports</a> > Stock Report
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <!-- <button class="btn btn-primary  ps-5 pe-5" style="float:inline-end;">
                                        <a href="add_products.php" class="text-white">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px">
                                            </ion-icon> Add
                                        </a>
                                    </button> -->
                                    <!-- <button class="btn btn-primary  ps-5 pe-5 me-2" style="float:inline-end;">
                                        <a href="list_stock_report.php" class="text-white">Stock Report</a>
                                    </button> -->
                                </div>
                            </div>
                            <!-- search bar -->


                            <!-- <form method="get" id="recordsPerPageForm" style="margin-left:2em;">
                                <label for="recordsPerPage">Show</label>
                                <select name="records_per_page" id="recordsPerPage" class="form-control" style="width: 8em;" onchange="document.getElementById('recordsPerPageForm').submit();">
                                    <option value="50" <?php if ($records_per_page == 50) echo 'selected'; ?>>50</option>
                                    <option value="100" <?php if ($records_per_page == 100) echo 'selected'; ?>>100</option>
                                    <option value="200" <?php if ($records_per_page == 200) echo 'selected'; ?>>200</option>
                                    <option value="500" <?php if ($records_per_page == 500) echo 'selected'; ?>>500</option>
                                    <option value="50" <?php if ($records_per_page == 1000) echo 'selected'; ?>>1000</option>
                                </select>
                                <input type="hidden" name="page" value="<?php echo $page; ?>">
                                <input type="hidden" name="search" value="<?php echo htmlspecialchars($search); ?>">
                            </form> -->
                            <form action="" method="get">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">

                                    <div class="col-lg-5">
                                        <input type="text" id="searchInput" class="form-control" placeholder="Search products..." autocomplete="off">

                                        <!-- <input type="search" id="search" name="search" class="form-control" placeholder="Search products" value="<?php echo htmlspecialchars($search); ?>" autocomplete="off">
                                        <div id="suggestions" style="border: 1px solid #ccc; display: none; position: absolute; z-index: 1000; background: white; width: calc(100% - 20px);"></div> -->
                                    </div>
                                    <!-- <div class="col-lg-2">
                                        <button type="submit" style="width:100%;" class="btn btn-primary p-2">Search</button>
                                    </div> -->
                                    <div class="col-lg-2">
                                        <button type="button" style="width:100%;" class="btn btn-success p-2" onclick="clearFilter()">Clear Filter</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" onclick="exportToCSV()">-->
                                <!--        <ion-icon name="document-outline"></ion-icon>Export to CSV-->
                                <!--    </button>-->
                                <!--    <button class="btn btn-info" onclick="exportToExcel()">-->
                                <!--        <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" onclick="exportToPDF()">-->
                                <!--        <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;">

                                <!-- HTML Table -->


                                <!-- HTML Table -->


                                <button id="printButton" class="btn btn-primary" style="margin-bottom: 10px;">🖨️ Print Report</button>
                                <button id="openAuditModal" class="btn btn-warning" style="margin-bottom: 10px;">Open Stock Audit</button>

                                <style>
                                    #stockSummary {
                                        margin-top: 20px;
                                        padding: 20px;
                                        background: #f9fafb;
                                        border: 1px solid #e0e0e0;
                                        border-radius: 8px;
                                        max-width: 400px;
                                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                                        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                                    }

                                    #stockSummary h3 {
                                        margin-bottom: 15px;
                                        font-size: 20px;
                                        color: #333;
                                        text-align: center;
                                        border-bottom: 1px solid #ddd;
                                        padding-bottom: 8px;
                                    }

                                    #stockSummary .summary-item {
                                        display: flex;
                                        justify-content: space-between;
                                        padding: 8px 0;
                                        font-size: 16px;
                                        color: #444;
                                    }

                                    #stockSummary .summary-label {
                                        font-weight: 600;
                                    }

                                    #stockSummary .summary-value {
                                        font-weight: bold;
                                        color: #007bff;
                                    }
                                </style>

                                <div id="stockSummary">
                                    <h3>Stock Summary</h3>
                                    <div class="summary-item">
                                        <div class="summary-label">Total Current Stock:</div>
                                        <div class="summary-value" id="totalCurrentStock">0</div>
                                    </div>
                                    <div class="summary-item">
                                        <div class="summary-label">Total Units Sold:</div>
                                        <div class="summary-value" id="totalUnitsSold">0</div>
                                    </div>

                                    <div class="summary-item">
                                        <div class="summary-label">Total Current Stock Value:</div>
                                        <div class="summary-value" id="totalCurrentStockValue">0</div>
                                    </div>
                                </div>

                                <table class="table table-hover table-bordered" id="productTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="sku"> SKU</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="barcode"> Barcode</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="product"> Product</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="unit_purchase_price"> Unit <br> Price</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="current_stock"> Current <br> Stock</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="current_stock_value"> Current Stock <br> Value</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="total_unit_sold"> Total Unit <br> Sold</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="total_unit_returned"> Total Units <br> Returned</th>
                                            <th><input type="checkbox" class="column-checkbox" checked data-column="total_defective"> Total Damage <br> Units</th>
                                        </tr>
                                        <input type="checkbox" class="column-checkbox" checked data-column="total_defective">
                                        Total Damage <br> Units
                                        </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <!--<tfoot>-->
                                    <!--  <tr>-->
                                    <!--    <td colspan="4" style="text-align:right; font-weight:bold;">Total Current Stock Value:</td>-->
                                    <!--    <td id="totalCurrentStockValue" style="font-weight:bold;">0</td>-->
                                    <!--    <td colspan="2"></td>-->
                                    <!--  </tr>-->
                                    <!--</tfoot>-->
                                </table>

                                <!-- jsPDF library -->

                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <!-- Include jsPDF and jsPDF AutoTable -->
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

                                <script>
                                    $(document).ready(function() {
                                        $('#downloadPdf').click(function() {
                                            const {
                                                jsPDF
                                            } = window.jspdf;
                                            const doc = new jsPDF('p', 'pt', 'a4');

                                            doc.setFontSize(18);
                                            doc.text("Audit Report", 40, 40);

                                            const headers = [
                                                ["Product", "Unit Price", "Current Stock", "Physical Qty", "Variance"]
                                            ];
                                            const body = [];

                                            $('#auditTable tbody tr:visible').each(function() {
                                                const row = [];
                                                $(this).find('td').each(function(index) {
                                                    if ($(this).find('input').length > 0) {
                                                        row.push($(this).find('input').val());
                                                    } else {
                                                        row.push($(this).text());
                                                    }
                                                });
                                                body.push(row);
                                            });

                                            doc.autoTable({
                                                startY: 60,
                                                head: headers,
                                                body: body,
                                                theme: 'grid',
                                                headStyles: {
                                                    fillColor: [41, 128, 185],
                                                    textColor: 255
                                                },
                                                styles: {
                                                    fontSize: 12
                                                }
                                            });

                                            doc.save("Audit_Report.pdf");
                                        });
                                    });
                                </script>

                                <div id="auditModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; overflow:auto;">
                                    <div style="background:#fff; margin:50px auto; padding:20px; width:80%; border-radius:8px; max-height:80vh; display:flex; flex-direction:column;">
                                        <div style="position:sticky; top:0; background:#fff; z-index:10; padding-bottom:10px;">
                                            <h3>Stock Audit</h3>
                                            <button id="closeAuditModal" style="position:absolute; top:10px; right:10px;">✖</button>
                                            <input type="text" id="auditSearchInput" placeholder="Search Product..." class="form-control mb-3">
                                        </div>
                                        <div style="overflow-y:auto; flex:1;">
                                            <table class="table table-bordered" id="auditTable">
                                                <thead>
                                                    <tr>
                                                        <th>Select</th>
                                                        <th>Product</th>
                                                        <th>Unit</th>
                                                        <th>System Qty</th>
                                                        <th>Physical Qty</th>
                                                        <th>Variance</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                        <button id="saveAudit" class="btn btn-success mt-3">Save</button>
                                    </div>
                                </div>

                                <script>
                                    $(document).ready(function() {
                                        let rafId = null;

                                        function loadAuditTable() {
                                            $.getJSON('fetch_stock_report.php', function(data) {
                                                const tbody = $('#auditTable tbody');
                                                tbody.empty();
                                                const rows = data.map(item => `
                <tr data-product-id="${item.product_id}">
                    <td><input type="checkbox" class="rowCheck"></td>
                    <td>${item.product}</td>
                    <td>${item.unit}</td>
                    <td class="current_stock">${item.current_stock}</td>
                    <td><input type="number" class="physical_qty form-control" value="" min="0" placeholder="Enter qty" disabled></td>
                    <td class="variance">0</td>
                </tr>`).join('');
                                                tbody.html(rows);
                                            });
                                        }

                                        $('#openAuditModal').click(() => {
                                            $('#auditModal').fadeIn();
                                            loadAuditTable();
                                        });
                                        $('#closeAuditModal').click(() => $('#auditModal').fadeOut());

                                        $(document).on('change', '.rowCheck', function() {
                                            const $row = $(this).closest('tr');
                                            $row.find('.physical_qty').prop('disabled', !this.checked).val();
                                            $row.find('.variance').text(0);
                                        });

                                        $(document).on('input', '.physical_qty', function() {
                                            const $row = $(this).closest('tr');
                                            const val = parseFloat($(this).val()) || 0;
                                            const systemQty = parseFloat($row.find('.current_stock').text()) || 0;
                                            if (rafId) cancelAnimationFrame(rafId);
                                            rafId = requestAnimationFrame(() => {
                                                $row.find('.variance').text(systemQty - val);
                                            });
                                        });

                                        $('#auditSearchInput').on('input', function() {
                                            const keyword = $(this).val().toLowerCase();
                                            $('#auditTable tbody tr').each(function() {
                                                $(this).toggle($(this).text().toLowerCase().includes(keyword));
                                            });
                                        });

                                        $('#saveAudit').click(function() {
                                            const adjustments = [];
                                            $('#auditTable tbody tr:visible').each(function() {
                                                const $row = $(this);
                                                if (!$row.find('.rowCheck').is(':checked')) return;
                                                const systemQty = parseFloat($row.find('.current_stock').text()) || 0;
                                                const physicalQty = parseFloat($row.find('.physical_qty').val()) || 0;
                                                const variance = systemQty - physicalQty;
                                                if (variance) adjustments.push({
                                                    product_id: $row.data('product-id'),
                                                    systemQty,
                                                    physicalQty,
                                                    variance
                                                });
                                            });
                                            if (!adjustments.length) return alert("No variance to process.");
                                            if (!confirm("Are you sure you want to process this audit?")) return;

                                            const $btn = $(this).prop('disabled', true).text('Processing...');
                                            $.post('process_audit.php', {
                                                    adjustments: JSON.stringify(adjustments)
                                                })
                                                .done(response => {
                                                    alert("Audit processed!\nVoucher(s): " + response);
                                                    loadAuditTable();
                                                })
                                                .fail(xhr => alert("Error: " + xhr.responseText))
                                                .always(() => $btn.prop('disabled', false).text('Save'));
                                        });
                                    });
                                </script>



                                <script>
                                    $(document).ready(function() {
                                        const chunkSize = 100;
                                        let allData = [];
                                        let loadedChunks = 0;
                                        let filteredData = [];

                                        function renderRows(dataChunk) {
                                            const tbody = $('#productTable tbody');
                                            dataChunk.forEach(item => {
                                                const row = `
                <tr>
                    <td class="sku">${item.sku}</td>
                    <td class="barcode">${item.barcode}</td>
                    <td class="product">${item.product}</td>
                    <td class="unit_purchase_price">${item.unit_purchase_price}</td>
                    <td class="current_stock">${item.current_stock}</td>
                    <td class="current_stock_value">${item.current_stock_value}</td>
                    <td class="total_unit_sold">${item.total_unit_sold}</td>
                    <td class="total_unit_returned">${item.total_unit_returned}</td>
                    <td class="total_defective">${item.total_defective}</td>
                </tr>`;
                                                tbody.append(row);
                                            });
                                        }

                                        function loadNextChunk() {
                                            const start = loadedChunks * chunkSize;
                                            const end = start + chunkSize;
                                            const chunk = filteredData.slice(start, end);

                                            if (chunk.length === 0) return;
                                            renderRows(chunk);
                                            loadedChunks++;
                                        }

                                        function setupScrollTrigger() {
                                            $(window).off('scroll').on('scroll', function() {
                                                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                                                    loadNextChunk();
                                                }
                                            });
                                        }

                                        function updateStockSummary(data) {
                                            let totalStock = 0,
                                                totalSold = 0,
                                                totalStockValue = 0;

                                            data.forEach(item => {
                                                totalStock += parseFloat(item.current_stock) || 0;
                                                totalSold += parseFloat(item.total_unit_sold) || 0;
                                                totalStockValue += parseFloat((item.current_stock_value || "0").toString().replace(/,/g, '')) || 0;
                                            });

                                            $('#totalCurrentStock').text(totalStock.toLocaleString());
                                            $('#totalUnitsSold').text(totalSold.toLocaleString());
                                            $('#totalCurrentStockValue').text(totalStockValue.toLocaleString(undefined, {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2
                                            }));
                                        }

                                        $('.column-checkbox').on('change', function() {
                                            const columnClass = $(this).data('column');
                                            $('.' + columnClass).toggle($(this).is(':checked'));
                                        });

                                        $.ajax({
                                            url: 'fetch_stock_report.php',
                                            method: 'GET',
                                            dataType: 'json',
                                            success: function(data) {
                                                if (data.error) {
                                                    alert("Error: " + data.error);
                                                    return;
                                                }

                                                allData = data;
                                                filteredData = allData;

                                                $('#productTable tbody').empty();
                                                loadedChunks = 0;

                                                loadNextChunk();
                                                setupScrollTrigger();
                                                updateStockSummary(allData);
                                            },
                                            error: function(xhr, status, error) {
                                                console.error("AJAX Error:", error);
                                            }
                                        });

                                        $('#searchInput').on('keyup', function() {
                                            const keyword = $(this).val().toLowerCase();

                                            filteredData = allData.filter(item =>
                                                (item.sku && item.sku.toLowerCase().includes(keyword)) ||
                                                (item.barcode && item.barcode.toLowerCase().includes(keyword)) ||
                                                (item.product && item.product.toLowerCase().includes(keyword))
                                            );

                                            $('#productTable tbody').empty();
                                            loadedChunks = 0;

                                            loadNextChunk();
                                            setupScrollTrigger();
                                            updateStockSummary(filteredData);
                                        });

                                        $('#printButton').on('click', function() {
                                            const printContent = document.getElementById('productTable').outerHTML;
                                            const originalContent = document.body.innerHTML;

                                            document.body.innerHTML = `
            <html>
            <head>
                <title>Print Report</title>
                <style>
                    table { width: 100%; border-collapse: collapse; font-size: 12px; }
                    table th, table td { border: 1px solid #000; padding: 6px; text-align: left; }
                    th { background-color: #f2f2f2; }
                    input[type="checkbox"] { display: none; }
                </style>
            </head>
            <body>
                <h2 style="text-align: center;">Stock Report</h2>
                ${printContent}
            </body>
            </html>
        `;
                                            window.print();
                                            document.body.innerHTML = originalContent;
                                            location.reload();
                                        });
                                    });
                                </script>





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

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



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