<?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>Print Label</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;
        }

        .chosen-container {
            height: 40px;
            /* Adjust the height of the selected box */
        }

        .chosen-container .chosen-single {
            height: 40px;
            /* Adjust the height of the selected box */
            line-height: 38px;
            /* Align text vertically */
            border-radius: 0px;
        }

        .chosen-container .chosen-drop {
            max-height: 200px;
            /* Adjust the max height of the dropdown */
            overflow-y: auto;
            /* Add scroll if content exceeds max-height */
        }

        .chosen-container .chosen-results {
            padding: 0;
            /* Remove default padding */
        }

        .file-input-wrapper {
            display: flex;
            align-items: center;
        }

        .file-input-wrapper input[type="file"] {
            position: absolute;
            border-radius: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .file-input-wrapper .form-control {
            margin-right: 0;
            /* Remove margin to align properly */
        }

        .file-input-wrapper .btn-browse {
            margin-left: -1px;
            /* Adjust to align with the input field */
            border-radius: 0;
            height: 2.4em;
            width: 11em;
        }

        input[type="text"],
        input[type="number"],
        input[type="date"] {
            border-radius: 0px;
            height: 2.3em;
        }

        input[type="search"] {
            border-radius: 0px;
            height: 3em;
        }

        table .th {
            font-size: 12px;
            font-weight: bold;

        }

        table .td {
            width: 8em;
            height: 1.7em;
            border: 1px solid #c5c6c7;
        }

        tbody {
            background-color: #fff;
        }

        .input-group-text {
            background: #f8f9fa;
            /* Optional: to match the input background */
            border-right: 1px solid #ced4da;
            /* Optional: to match the input border */
        }

        .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #product-table {
            min-width: 1000px;
            /* Set this based on your column widths */
        }

        #product-table th,
        #product-table td {
            white-space: nowrap;
            /* Prevents text wrapping */
            text-align: center;
            /* Centers the text */
        }

        #product-table th:nth-child(1),
        #product-table td:nth-child(1) {
            width: 5%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(2),
        #product-table td:nth-child(2) {
            width: 30%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(3),
        #product-table td:nth-child(3) {
            width: 17%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(4),
        #product-table td:nth-child(4) {
            width: 8%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(5),
        #product-table td:nth-child(5) {
            width: 20%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(6),
        #product-table td:nth-child(6) {
            width: 20%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(7),
        #product-table td:nth-child(7) {
            width: 20%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(8),
        #product-table td:nth-child(8) {
            width: 20%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(9),
        #product-table td:nth-child(9) {
            width: 20%;
            /* Adjust width as needed */
        }

        #product-table th:nth-child(10),
        #product-table td:nth-child(10) {
            width: 20%;
            /* Adjust width as needed */
        }

        .table-responsive {
            overflow-x: auto;
        }

        .table {
            width: 100%;
        }

        th,
        td {
            text-align: center;
            vertical-align: middle;
            padding: 4px;
            /* Reduced padding to save space */
            font-size: 12px;
            /* Slightly smaller font size */
            text-transform: capitalize;
        }

        th {
            white-space: nowrap;
            /* Prevent header text from wrapping */
        }

        .table th {
            border-color: #dee2e6;
        }

        .table-bordered th,
        .table-bordered td {
            border: 1px solid #dee2e6;
        }

        .table input {
            width: 100%;
            padding: 3px;
            /* Reduced padding in input fields */
            box-sizing: border-box;
            font-size: 0.875rem;
        }

        @media (max-width: 768px) {

            .table th,
            .table td {
                font-size: 0.75rem;
                padding: 3px;
            }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

</head>

<body>
    <!-- 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="#">Labels</a> > Print Label
                                    </h4>
                                </div>
                            </div>
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h5 class="card-title">Add products to generate Labels
                                    </h5>
                                </div>
                            </div>
                            <!-- search bar -->

                            <form action="">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-1"></div>
                                    <div class="col-lg-10">
                                        <div class="col-lg-10 mx-auto position-relative">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" style="border: 1px solid gray;">
                                                        <ion-icon name="search-outline"></ion-icon>
                                                    </span>
                                                </div>
                                                <?php

                                                $product_id = isset($_GET['product_id']) ? intval($_GET['product_id']) : 0;
                                                $product_name = '';

                                                if ($product_id > 0) {
                                                    try {
                                                        $stmt = $conn->prepare("SELECT `name` FROM `products` WHERE `id` = :product_id");
                                                        $stmt->bindParam(':product_id', $product_id, PDO::PARAM_INT);
                                                        $stmt->execute();
                                                        $product_name = $stmt->fetchColumn();
                                                    } catch (PDOException $e) {
                                                        echo 'Query failed: ' . $e->getMessage();
                                                        exit;
                                                    }
                                                }
                                                ?>
                                                <input type="search" id="product-search" class="form-control" placeholder="Enter Product name to Print labels" value="<?php echo htmlspecialchars($product_name); ?>">

                                            </div>
                                            <div id="product-list" class="dropdown-menu w-100" style="max-height: 200px; overflow-y: auto; display: none; position: absolute; top: 100%; margin-top: 3.5em; left: 0;">
                                                <!-- Dropdown items will be injected here -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <script>
document.getElementById("product-search").addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault(); 
    }
});
</script>
                            <!-- searchbar end -->
                            <div class="iq-card-body" style="overflow:auto;">
                                <table class="table table-hover table-bordered mt-3" id="product-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 3%;">#</th>
                                            <th style="width: 11%;">Product Name</th>
                                            <th style="width: 20%;">Quantity</th>
                                            <th style="width: 20%;">Action</th>
                                            <!-- <th style="width: 8%;">Unit Cost<br>(Before Discount)</th>
                                                <th style="width: 8%;">Discount<br>Percent</th>
                                                <th style="width: 12%;">Unit Cost<br>(Before Tax)</th>
                                                <th style="width: 8%;">Line<br>Total</th>
                                                <th style="width: 12%;">Profit <br>Margin %</th>
                                                <th style="width: 12%;">Unit Selling <br> Price (Inc. tax)</th>
                                                <th style="width: 4%;"><ion-icon name="trash-outline"></ion-icon> -->
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <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">Information to Show in Labels
                                    </h4>
                                </div>
                            </div>
                            <div class="row ">
                                <div class="col-lg-3 text-center mt-5">
                                    <input type="checkbox" name="show_product_name" checked id="show_product_name"> Product Name
                                </div>
                                <div class="col-lg-2 text-center mt-5">
                                    <input type="checkbox" checked> Product Variation <br>(recommended)
                                </div>
                                <div class="col-lg-3 text-center mt-5">
                                    <input type="checkbox" name="show_product_price" checked id="show_product_price"> Product Price
                                </div>

                                <div class="col-lg-3 mt-3">
                                    <Label>Show Price</Label>
                                    <div class="input-group">
                                        <span class="input-group-text" style="border: 1px solid gray; border-radius:0px;"><ion-icon name="information-outline"></ion-icon></span>
                                        <select name="" class="form-control" id="">
                                            <option value="">Select</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 text-center mt-5">
                                    <input type="checkbox" name="show_product_stock" checked id="show_product_stock"> Product Stock
                                </div>

                                <div class="col-lg-3 text-center mt-5">
                                    <input type="checkbox" name="UnitName" checked id="UnitName"> Product UnitName
                                </div>


                                <div class="col-lg-3 text-center mt-5">
                                    <input type="checkbox" name="show_business_name" checked id="show_business_name"> Business Name
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-4 mb-4 ml-4">
                                    <Label>Barcode setting:</Label>
                                    <div class="input-group">
                                        <span class="input-group-text" style="border: 1px solid gray; border-radius:0px;"><ion-icon name="settings-outline"></ion-icon></span>
                                        <select style="border-radius: 0px;" name="" class="form-control" id="label-setting">
                                            <option value="58x38">Continuous Rolls - 58mm * 38mm</option>
                                            <option value="28x18">Continuous Rolls - 28mm * 18mm</option>
                                            <option value="38x28">Continuous Rolls - 38mm * 28mm</option> <!-- New option added -->

                                        </select>

                                    </div>
                                </div>
                                <div class="col-lg-4"></div>
                                <div class="mt-5" style="text-align: right;">
                                    <button id="preview-button" style="border-radius: 0px; width: 20em;" class="btn btn-primary">Preview</button>
                                </div>

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

        </div>
    </div>
    </div> <!-- Container for previewing labels -->
    <!-- Preview content will be injected here -->
    </div>
    <script>
$('#preview-button').on('click', function() {
    console.log("Preview button clicked");

    // Get checked states for checkboxes
    var showProductName = $('#show_product_name').is(':checked');
    var showProductPrice = $('#show_product_price').is(':checked');
    var showBusinessName = $('#show_business_name').is(':checked');
    var showProductStock = $('#show_product_stock').is(':checked'); // Stock checkbox
    var showUnitName = $('#UnitName').is(':checked');
    var businessName = 'Give & Take Grocery Store'; // Fixed business name

    // Get the selected option from the dropdown and set the label dimensions
    var selectedLabelSize = $('#label-setting').val();  // Get selected label size
    var labelDimensions;
    var fontSizeSettings = {}; // To handle different font sizes for different label sizes

    // Define font sizes and label dimensions for different label sizes
    if (selectedLabelSize === '58x38') {
        labelDimensions = { width: 58, height: 38 }; // Set dimensions as per actual label size
        fontSizeSettings = {
            businessNameFontSize: '13px', // Adjusted font size
            productNameFontSize: '11px',
            productPriceFontSize: '11px',
            stockFontSize: '11px',
            barcodeHeight: 30, // Height for barcode
            fontWeight: 'bold' // Set font weight to bold for all text
        };
    } else if (selectedLabelSize === '28x18') {
        labelDimensions = { width: 28, height: 18 };
        fontSizeSettings = {
            businessNameFontSize: '8px',    
            productNameFontSize: '7px',     
            productPriceFontSize: '7px',    
            stockFontSize: '7px',           
            barcodeHeight: 22,              
        };
    } else if (selectedLabelSize === '38x28') { // For 38x28 labels
        labelDimensions = { width: 38, height: 28 }; // Set dimensions as per actual label size
        fontSizeSettings = {
            businessNameFontSize: '10px',
            productNameFontSize: '8px',
            productPriceFontSize: '8px',
            stockFontSize: '8px',
            barcodeHeight: 25, // Adjusted height for barcode
            fontWeight: 'bold' // Set font weight to bold for all text
        };
    }

    console.log("Selected label dimensions:", labelDimensions);
    console.log("Font size settings:", fontSizeSettings);

    var labelsPerRow = 1; // Single column, continuous roll
    var maxLabelsPerSheet = Infinity; // Continuous means no sheet limit

    // Create a new window or tab for preview
    var previewWindow = window.open('', '', 'width=800,height=600');
    var previewDocument = previewWindow.document;

    previewDocument.open();
    previewDocument.write('<!DOCTYPE html><html><head><title>Label Preview</title>');
    previewDocument.write(`
        <style>
            @media print {
                body {
                    margin: 0;
                    padding: 0;
                }
                .label-container {
                    margin: 0; /* Removed margin for printing */
                    padding: 0; /* Removed padding for printing */
                    box-sizing: border-box;
                    page-break-inside: avoid; /* Avoid breaking inside label */
                }
                @page {
                    margin: 0; /* Set page margin to zero */
                }
            }
            body {
                margin: 0;
                padding: 0;
                background: white;
            }
            .label-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: ${labelDimensions.width}mm; /* Set width according to actual label size */
                height: ${labelDimensions.height}mm; /* Set height according to actual label size */
                font-family: Arial, sans-serif;
                font-size: 10px;
                text-align: center;
                padding: 0; /* Keep this to ensure no extra space around labels */
                margin: 0; /* Adjust margin here if needed */
                border: 1px solid black; /* Keep this for visibility */
                box-sizing: border-box;
                overflow: hidden; /* Prevent any overflow of content */
            }
            .business-name {
                font-weight: bold; /* Make business name bold */
                font-size: ${fontSizeSettings.businessNameFontSize};
                margin-top: 3mm; /* Increased top margin for more space from the top */
                margin-bottom: 1mm; /* Space below business name */
                text-align: center;
            }
            .product-code {
                font-weight: bold; /* Make product name bold */
                margin-bottom: 0.5mm;
                font-size: ${fontSizeSettings.productNameFontSize};
                text-align: center;
            }
            .product-price {
                font-weight: bold; /* Make product price bold */
                margin-bottom: 0.5mm;
                font-size: ${fontSizeSettings.productPriceFontSize};
                text-align: center;
            }
            .barcode {
                margin-top: 1mm;
                display: block;
                text-align: center;
            }
            .stock-info {
                font-weight: bold; /* Make stock info bold */
                font-size: ${fontSizeSettings.stockFontSize};
            }
        </style>
    `);
    previewDocument.write('</head><body>');

    // Iterate over each product row
    $('#product-table tbody tr').each(function(index) {
        var productName = $(this).find('.product-name').text();
        var productPrice = $(this).find('.unit-selling-price').val();
        var barcodeValue = $(this).find('.product-barcode').text();
        var quantity = parseInt($(this).find('.quantity_unit').val(), 10) || 1;
        var stockQuantity = $(this).find('.stock_unit').text();
        var UnitName = $(this).find('.UnitName').text();

        productPrice = parseFloat(productPrice) || 0; // Parse price to float

        console.log("Processing row:", index, {
            productName: productName,
            productPrice: productPrice,
            barcodeValue: barcodeValue,
            quantity: quantity,
            UnitName: UnitName
        });

        for (var q = 0; q < quantity; q++) {
            var labelContent = '';
            if (showBusinessName) {
                labelContent += '<div class="business-name">' + businessName + '</div>';
            }
            if (showProductName) {
                labelContent += '<div class="product-code">' + productName + '</div>';
            }
            if (showProductPrice) {
                labelContent += '<div class="product-price">Price: Rs ' + productPrice.toFixed(2) + '</div>';
            }
            if (showProductStock) {
        var formattedStock = parseFloat(stockQuantity.replace(/[^0-9.-]+/g, '')); // Parse stock to float
        labelContent += '<div class="stock-info">Stock: ' + formattedStock.toFixed(2) + ' (' + UnitName + ')</div>';
    }
          
            // Label HTML structure
            previewDocument.write(`
                <div class="label-container">
                    ${labelContent}
                    <svg id="barcode-${index}-${q}" class="barcode"></svg>
                </div>
            `);

            previewDocument.write('<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"><\/script>');
            previewDocument.write(`
                <script>
                    JsBarcode("#barcode-${index}-${q}", "${barcodeValue}", {
                        format: "CODE128",
                        width: 1,
                        height: ${fontSizeSettings.barcodeHeight},
                        displayValue: false
                    });
                <\/script>
            `);
        }
    });

    previewDocument.write('</body></html>');
    previewDocument.close();

    console.log("Preview generation completed and displayed in new window.");
});
</script>

    <script>
       $(document).ready(function() {
    // Track added products
    let addedProducts = new Set();

    // Handle product search
    function performSearch(search) {
        if (search.length > 0) {
            $.ajax({
                type: 'POST',
                url: 'search_products.php',
                data: { search: search },
                success: function(response) {
                    if (response.includes('Product not found') || response.trim().length === 0) {
                        $('#product-list').hide();
                    } else {
                        var $productList = $(response);
                        if ($productList.length === 1 && $productList.hasClass('product-item')) {
                            var productId = $productList.data('id');
                            addProductIfNotExists(productId);
                        } else {
                            $('#product-list').html(response).show();
                        }
                    }
                }
            });
        } else {
            $('#product-list').hide();
        }
    }

    // Add product if not already in table
    function addProductIfNotExists(productId) {
        if (!addedProducts.has(productId)) {
            $.ajax({
                type: 'POST',
                url: 'get_products_labels.php',
                data: { id: productId },
                success: function(response) {
                    $('#product-table tbody').append(response);
                    addedProducts.add(productId);
                    $('#product-search').val('').trigger('change');
                    $('#product-list').hide();
                    updateTotals();
                }
            });
        } else {
            alert('This product is already in the table');
            $('#product-search').val('').trigger('change');
            $('#product-list').hide();
        }
    }

    // Search input handler
    $('#product-search').on('keyup', function() {
        var search = $(this).val().trim();
        performSearch(search);
    });

    // Initial search if product name exists
    var initialSearch = $('#product-search').val().trim();
    if (initialSearch.length > 0) {
        performSearch(initialSearch);
    }

    // Product selection from dropdown
    $(document).on('click', '.product-item', function() {
        var productId = $(this).data('id');
        addProductIfNotExists(productId);
    });

    // Update calculations on input change
    $('#product-table').on('input', '.quantity, .discount, .profit-margin', function() {
        updateRow($(this).closest('tr'));
        updateTotals();
    });

    // Update single row calculations
    function updateRow(row) {
        var purchasePrice = parseFloat(row.find('.purchase-price').val()) || 0;
        var quantity = parseFloat(row.find('.quantity').val()) || 1;
        var discountPercent = parseFloat(row.find('.discount').val()) || 0;
        var userProfitMarginPercent = parseFloat(row.find('.profit-margin').val()) || 0;

        var unitCostBeforeDiscount = purchasePrice;
        var unitCostBeforeTax = unitCostBeforeDiscount * (1 - discountPercent / 100);
        var lineTotal = unitCostBeforeTax * quantity;

        var calculatedProfitMarginPercent = ((unitCostBeforeDiscount - unitCostBeforeTax) / unitCostBeforeTax) * 100;
        var finalProfitMarginPercent = Math.max(userProfitMarginPercent, calculatedProfitMarginPercent);
        var unitSellingPrice = unitCostBeforeTax * (1 + finalProfitMarginPercent / 100);

        row.find('.unit-cost-before-discount').val(unitCostBeforeDiscount.toFixed(2));
        row.find('.unit-cost-before-tax').val(unitCostBeforeTax.toFixed(2));
        row.find('.line-total').text(lineTotal.toFixed(2));
        row.find('.profit-margin').val(finalProfitMarginPercent.toFixed(2));
        row.find('.unit-selling-price').val(unitSellingPrice.toFixed(2));
    }

    // Update totals for all products
    function updateTotals() {
        var totalItems = 0;
        var netTotalAmount = 0;
        var discountAmount = parseFloat($('#discount-amount').val()) || 0;
        var discountType = $('#discount-type').val();
        var shippingCharges = parseFloat($('#shipping-charges').val()) || 0;
        var appliedDiscount = 0;
        var purchaseTotal = 0;
        var paymentAmount = parseFloat($('#payment-amount').val()) || 0;
        var paymentDue = 0;

        $('#product-table tbody tr').each(function() {
            var quantity = parseFloat($(this).find('.quantity').val()) || 1;
            var lineTotal = parseFloat($(this).find('.line-total').text()) || 0;
            totalItems += quantity;
            netTotalAmount += lineTotal;
        });

        purchaseTotal = netTotalAmount;

        if (discountType === 'Fixed') {
            appliedDiscount = discountAmount;
            purchaseTotal -= appliedDiscount;
        } else if (discountType === 'Percentage') {
            appliedDiscount = (purchaseTotal * (discountAmount / 100));
            purchaseTotal -= appliedDiscount;
        }

        purchaseTotal += shippingCharges;
        paymentDue = purchaseTotal - paymentAmount;

        $('#total-items').text(totalItems);
        $('#net-total-amount').text(netTotalAmount.toFixed(2) + ' ₨');
        $('#applied-discount').text(appliedDiscount.toFixed(2) + ' Rs');
        $('#purchase-total').text(purchaseTotal.toFixed(2) + ' ₨');
        $('#payment-due').text(paymentDue.toFixed(2) + ' Rs');
    }

    // Remove product row
    $('#product-table').on('click', 'ion-icon[name="trash-outline"]', function() {
        var $row = $(this).closest('tr');
        var productId = $row.data('product-id');
        addedProducts.delete(productId);
        $row.remove();
        updateTotals();
    });

    // Update totals on discount/shipping/payment changes
    $('#discount-type, #discount-amount, #shipping-charges, #payment-amount').on('input change', function() {
        updateTotals();
    });

    // Prevent form submission on enter
    $('#product-search').on('keydown', function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
        }
    });

    // Initialize totals
    updateTotals();
});
    </script>


    <!-- Wrapper END -->
    <!-- Footer -->
    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright <span id="copyright">
                        <script>
                            document.getElementById('copyright').appendChild(document.createTextNode(new Date()
                                .getFullYear()))
                        </script>
                    </span> <a href="#">Vito</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <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 -->
    <!-- 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>