<?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>View Purchase</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-toast {
            display: none;
            /* Hidden by default */
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            /* Ensure it's above other elements */
            width: 350px;
            /* Toast width */
            background-color: #4CAF50;
            /* Green background */
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
            /* Smooth transitions */
            padding: 15px;
            font-family: 'Arial', sans-serif;
            font-size: 16px;
        }

        .custom-toast .toast-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
        }

        .custom-toast .toast-body {
            padding-top: 8px;
        }

        .custom-toast .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            font-weight: bold;
        }

        .custom-toast.show {
            display: block;
            opacity: 1;
            top: 30px;
            /* Adjust the distance from top when showing */
        }
    </style>
</head>

<body>
    <div id="toastSuccess" class="custom-toast">
        <div class="toast-header">
            <strong>Success</strong>
            <button type="button" class="close-btn" onclick="closeToast()">&times;</button>
        </div>
        <div class="toast-body">
            Payment of <span id="paymentAmount"></span> has been successfully processed!
        </div>
    </div>


    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php
        include 'includes/sidebar.php';
        ?>
        <!-- TOP Nav Bar -->
        <?php include 'includes/header.php'; ?>
        <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h4 class="card-title"><a href="list_customers.php">list Purchase</a> > View Purchase
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <button class="btn btn-primary  ps-5 pe-5" style="float:inline-end;">
                                        <a href="add_purchase.php">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px">
                                            </ion-icon> <span style="color: #fff;">Add Purchase</span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                           

                            <!-- searchbar end -->
                            <!-- buttons for export -->
                            <div class="row mt-5">
                                <div class="col-lg-2"></div>
                                <!--<div class="col-lg-8">-->
                                <!--    <button class="btn btn-primary">-->
                                <!--        <ion-icon name="document-outline"></ion-icon>Export to CSV-->
                                <!--    </button>-->
                                <!--    <button class="btn btn-info">-->
                                <!--        <ion-icon name="document-outline"></ion-icon>Export to Excel-->
                                <!--    </button>-->
                                <!--    <button class="btn btn-warning">-->
                                <!--        <ion-icon name="print-outline"></ion-icon>Print-->
                                <!--    </button>-->
                                <!--    <button class="btn btn-danger">-->
                                <!--        <ion-icon name="stop-outline"></ion-icon>Column Visibility-->
                                <!--    </button>-->
                                <!--    <button class="btn btn-dark">-->
                                <!--        <ion-icon name="document-outline"></ion-icon>Export to PDF-->
                                <!--    </button>-->
                                <!--</div>-->
                            </div>
                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">
<?php  
include 'includes/config.php';

$search      = isset($_GET['search']) ? trim($_GET['search']) : '';
$from_date   = isset($_GET['from_date']) ? $_GET['from_date'] : '';
$to_date     = isset($_GET['to_date']) ? $_GET['to_date'] : '';
$per_page    = isset($_GET['per_page']) ? $_GET['per_page'] : 20;
$page        = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset      = ($page - 1) * ($per_page == 'All' ? 0 : $per_page);

// Get bill-wise summary
$query = "SELECT 
            p.ref_no,
            MAX(p.purchase_date) AS purchase_date,
            c.name AS supplier_name,
            SUM(p.quantity * p.purchase_price) AS total_amount,
            COUNT(*) AS item_count
          FROM purchase_lines p
          LEFT JOIN contacts c ON p.supplier_id = c.id
          WHERE 1=1
            AND (c.type = 'supplier' OR c.type IS NULL)
            AND (c.name != 'Audit Purchase' OR c.name IS NULL)";

if (!empty($search)) {
    $query .= " AND (p.ref_no LIKE :search OR c.name LIKE :search)";
}

if (!empty($from_date) && !empty($to_date)) {
    $query .= " AND DATE(p.purchase_date) BETWEEN :from_date AND :to_date";
}

$query .= " GROUP BY p.ref_no
            ORDER BY MAX(p.purchase_date) DESC";

if ($per_page != 'All') {
    $query .= " LIMIT :offset, :per_page";
}

$stmt = $conn->prepare($query);

if (!empty($search)) $stmt->bindValue(':search', '%' . $search . '%');
if (!empty($from_date) && !empty($to_date)) {
    $stmt->bindValue(':from_date', $from_date);
    $stmt->bindValue(':to_date', $to_date);
}
if ($per_page != 'All') {
    $stmt->bindValue(':offset', (int)$offset, PDO::PARAM_INT);
    $stmt->bindValue(':per_page', (int)$per_page, PDO::PARAM_INT);
}

$stmt->execute();
$results = $stmt->fetchAll();

// Count total bills
$countQuery = "SELECT COUNT(DISTINCT p.ref_no) FROM purchase_lines p
               LEFT JOIN contacts c ON p.supplier_id = c.id
               WHERE 1=1
                 AND (c.type = 'supplier' OR c.type IS NULL)
                 AND (c.name != 'Audit Purchase' OR c.name IS NULL)";
if (!empty($search)) $countQuery .= " AND (p.ref_no LIKE :search OR c.name LIKE :search)";
if (!empty($from_date) && !empty($to_date)) $countQuery .= " AND DATE(p.purchase_date) BETWEEN :from_date AND :to_date";

$countStmt = $conn->prepare($countQuery);
if (!empty($search)) $countStmt->bindValue(':search', '%' . $search . '%');
if (!empty($from_date) && !empty($to_date)) {
    $countStmt->bindValue(':from_date', $from_date);
    $countStmt->bindValue(':to_date', $to_date);
}
$countStmt->execute();
$total_records = $countStmt->fetchColumn();
$total_pages = ($per_page == 'All') ? 1 : ceil($total_records / $per_page);
?>

<form method="GET" class="form-inline mb-3">
    <input type="text" name="search" class="form-control mr-2"
           placeholder="Search Ref / Supplier" value="<?php echo htmlspecialchars($search); ?>">

    <input type="date" name="from_date" class="form-control mr-2"
           value="<?php echo htmlspecialchars($from_date); ?>">
    <input type="date" name="to_date" class="form-control mr-2"
           value="<?php echo htmlspecialchars($to_date); ?>">

    <select name="per_page" class="form-control mr-2" onchange="this.form.submit()">
        <option value="20" <?php echo ($per_page == 20) ? 'selected' : ''; ?>>20</option>
        <option value="50" <?php echo ($per_page == 50) ? 'selected' : ''; ?>>50</option>
        <option value="100" <?php echo ($per_page == 100) ? 'selected' : ''; ?>>100</option>
        <option value="All" <?php echo ($per_page == 'All') ? 'selected' : ''; ?>>All</option>
    </select>

    <button type="submit" class="btn btn-primary mr-2">Filter</button>
    <a href="?per_page=<?php echo $per_page; ?>" class="btn btn-secondary">Clear</a>
</form>

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Ref No</th>
            <th>Date</th>
            <th>Supplier</th>
            <th>Total Amount</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php if ($results): $i = $offset + 1; foreach ($results as $row): ?>
            <tr>
                <td><?php echo $i++; ?></td>
                <td><?php echo htmlspecialchars($row['ref_no']); ?></td>
                <td><?php echo date('d-m-Y', strtotime($row['purchase_date'])); ?></td>
                <td><?php echo htmlspecialchars($row['supplier_name']); ?></td>
                <td><?php echo number_format($row['total_amount'],2); ?></td>
                <td>
                    <!-- <button class="btn btn-sm btn-info viewBillBtn" data-ref="<?php echo $row['ref_no']; ?>">View</button> -->
                    <button class="btn btn-sm btn-warning editBillBtn" data-ref="<?php echo $row['ref_no']; ?>">Edit</button>
                    <button class="btn btn-sm btn-danger deleteBillBtn" data-ref="<?php echo $row['ref_no']; ?>">Delete</button>
                    <button class="btn btn-sm btn-secondary printBillBtn" data-ref="<?php echo $row['ref_no']; ?>">Print</button>
                </td>
            </tr>
        <?php endforeach; else: ?>
            <tr><td colspan="6" class="text-center text-danger">No bills found</td></tr>
        <?php endif; ?>
    </tbody>
</table>


<?php if ($total_pages > 1 && $per_page != 'All'): ?>
<nav>
    <ul class="pagination">
        <?php if ($page > 1): ?>
            <li class="page-item">
                <a class="page-link" href="?page=<?php echo ($page-1); ?>&per_page=<?php echo $per_page; ?>&search=<?php echo $search; ?>&from_date=<?php echo $from_date; ?>&to_date=<?php echo $to_date; ?>">«</a>
            </li>
        <?php endif; ?>

        <?php
        $start = max(1, $page-2);
        $end = min($total_pages, $page+2);

        if ($start > 1) {
            echo '<li class="page-item"><a class="page-link" href="?page=1&per_page='.$per_page.'">1</a></li>';
            if($start>2) echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
        for($i=$start;$i<=$end;$i++){
            $active = ($i==$page)?'active':'';
            echo '<li class="page-item '.$active.'"><a class="page-link" href="?page='.$i.'&per_page='.$per_page.'">'.$i.'</a></li>';
        }
        if ($end<$total_pages){
            if($end<$total_pages-1) echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
            echo '<li class="page-item"><a class="page-link" href="?page='.$total_pages.'&per_page='.$per_page.'">'.$total_pages.'</a></li>';
        }
        ?>

        <?php if ($page < $total_pages): ?>
            <li class="page-item">
                <a class="page-link" href="?page=<?php echo ($page+1); ?>&per_page=<?php echo $per_page; ?>">»</a>
            </li>
        <?php endif; ?>
    </ul>
</nav>
<?php endif; ?>

<!-- Bill Modal -->
<div class="modal fade" id="billModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Bill Details</h5>
        <button type="button" class="btn-close" id="billModalCloseBtn" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="billModalBody"></div>
      <div class="modal-footer">
        <button type="button" id="printBill" class="btn btn-secondary">Print</button>
        <button type="button" class="btn btn-primary" id="billModalCloseFooterBtn">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- JS & AJAX -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    var billModalEl = document.getElementById('billModal');
    var billModal = new bootstrap.Modal(billModalEl, {keyboard: false});

    $('.editBillBtn').on('click', function(){
        let ref_no = $(this).data('ref');
        $.get('ajax_bill_details.php', {ref_no: ref_no}, function(res){
            $('#billModalBody').html(res);
            billModal.show(); 
        });
    });

    $('#billModalCloseBtn, #billModalCloseFooterBtn').on('click', function(){
        billModal.hide();
    });


    $('.deleteBillBtn').on('click', function(){
        if(!confirm('Are you sure you want to delete this bill?')) return;
        let ref_no = $(this).data('ref');
        $.post('ajax_delete_bill.php', {ref_no: ref_no}, function(res){
            alert(res);
            location.reload();
        });
    });


    $('.printBillBtn').on('click', function(){
        let ref_no = $(this).data('ref');
        window.open('print_bill.php?ref_no=' + ref_no, '_blank');
    });

    $('#printBill').on('click', function(){
        let printContents = document.getElementById('billModalBody').innerHTML;
        let printWindow = window.open('', '', 'height=600,width=400');
        printWindow.document.write('<html><head><title>Print Bill</title>');
        printWindow.document.write('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">');
        printWindow.document.write('</head><body>');
        printWindow.document.write(printContents);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    });
});
</script>





                                <!--------------------------------------------- Modal for Adding Payment ----------------------------------------------------->
                                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Add Payment</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="paymentForm">
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <label for="ref_no">Reference No</label>
                                                            <input type="text" class="form-control" id="ref_no" readonly>
                                                        </div>
                                                        <div class="form-group col-md-6">
                                                            <label for="purchase_date">Purchase Date</label>
                                                            <input type="text" class="form-control" id="purchase_date" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <label for="supplier_id">Supplier Name</label>
                                                            <input type="hidden" class="form-control" id="supplier_id" readonly>
                                                            <input type="text" class="form-control" id="supplier" readonly>
                                                        </div>
                                                        <div class="form-group col-md-6">
                                                            <label for="due_amount">Due Amount</label>
                                                            <input type="text" class="form-control" id="due_amount" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <label for="debit_account">Debit Account</label>
                                                            <select class="form-control" id="debit_account" required>
                                                                <option value="">Select Account</option>
                                                                <!-- Dynamically populated options -->
                                                            </select>
                                                        </div>
                                                        <div class="form-group col-md-6">
                                                            <label for="amount">Amount</label>
                                                            <input type="number" class="form-control" id="amount" required>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="note">Note</label>
                                                        <textarea class="form-control" id="note"></textarea>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary" id="submitPayment">Submit Payment</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


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

                                <!-- Popper.js (required for Bootstrap dropdowns) -->
                                <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

                                <!-- Bootstrap JS -->
                                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
                                <script>
                                    $('#exampleModal').on('show.bs.modal', function(event) {
                                        var button = $(event.relatedTarget);
                                        var refNo = button.data('ref');
                                        var date = button.data('date');
                                        var supplierId = button.data('supplier-id');
                                        var supplier = button.data('supplier');
                                        var dueAmount = button.data('due-amount');

                                        var currentDate = new Date().toISOString().slice(0, 10);

                                        var modal = $(this);
                                        modal.find('#ref_no').val(refNo);
                                        modal.find('#supplier_id').val(supplierId);
                                        modal.find('#supplier').val(supplier);
                                        modal.find('#due_amount').val(dueAmount);
                                        modal.find('#purchase_date').val(date ? date : currentDate);

                                       
                                        $.ajax({
                                            url: 'get_banks.php',
                                            method: 'GET',
                                            success: function(data) {
                                                var banks = JSON.parse(data);
                                                $('#debit_account').empty();
                                                $('#debit_account').append('<option value="">Select Account</option>');
                                                banks.forEach(function(bank) {
                                                    $('#debit_account').append('<option value="' + bank.id + '">' + bank.bank_name + '</option>');
                                                });
                                            },
                                            error: function(err) {
                                                console.error('Error fetching bank accounts:', err);
                                            }
                                        });
                                    });

                                    $('#submitPayment').on('click', function() {
                                        var refNo = $('#ref_no').val();
                                        var supplierId = $('#supplier_id').val();
                                        var debitAccount = $('#debit_account').val();
                                        var amount = parseFloat($('#amount').val()); 
                                        var note = $('#note').val();
                                        var dueAmount = parseFloat($('#due_amount').val());

                                      
                                        console.log("Amount entered: " + amount);
                                        console.log("Due amount: " + dueAmount);

                                        
                                        if (!refNo || !amount || !debitAccount) {
                                            alert("Please fill in all required fields.");
                                            return;
                                        }

                                       
                                        if (isNaN(amount)) {
                                            alert("Invalid amount value.");
                                            return;
                                        }

                                        
                                        $.ajax({
                                            url: 'purchase_payment_pay.php',
                                            method: 'POST',
                                            data: {
                                                ref_no: refNo,
                                                supplier_id: supplierId,
                                                bank_id: debitAccount,
                                                amount: amount,
                                                note: note,
                                                due_amount: dueAmount,
                                                status: 'purchase',
                                                date: new Date().toISOString().slice(0, 19).replace('T', ' ')
                                            },
                                            success: function(response) {
                                                console.log('Payment successfully added:', response);

                                               
                                                $('#exampleModal').modal('hide');
                                                $('body').removeClass('modal-open');
                                                $('.modal-backdrop').remove();

                                               
                                                $('#paymentAmount').text(amount);
                                                $('#toastSuccess').toast({
                                                    delay: 1000
                                                }).toast('show');

                                                
                                                setTimeout(function() {
                                                    window.location.href = 'list_purchase.php';
                                                }, 1000);
                                            },
                                            error: function(err) {
                                                console.error('Error adding payment:', err);
                                                alert('There was an error processing your payment. Please try again.');
                                            }
                                        });
                                    });
                                </script>
                                <!--------------------------------------------- End Modal for Adding Payment ----------------------------------------------------->

                                <script>
                                    document.addEventListener("DOMContentLoaded", function() {
                                        const refNos = document.querySelectorAll('.ref-no');

                                        refNos.forEach(function(refNoCell) {
                                            refNoCell.addEventListener('dblclick', function() {
                                                const refNo = refNoCell.getAttribute('data-ref-no');
                                                const purchaseDate = refNoCell.getAttribute('data-purchase-date');

                                                const newRefNo = prompt("Enter new Reference No for all entries with Purchase Date: " + purchaseDate);
                                                if (newRefNo) {
                                                    updateRefNo(purchaseDate, newRefNo);
                                                }
                                            });
                                        });
                                    });

                                    function updateRefNo(purchaseDate, newRefNo) {
                                        const xhr = new XMLHttpRequest();
                                        xhr.open("POST", "update_purchase_ref.php", true);
                                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                                        xhr.onreadystatechange = function() {
                                            if (xhr.readyState == 4 && xhr.status == 200) {
                                                alert("Reference No updated successfully.");
                                                location.reload();
                                            }
                                        };

                                        xhr.send("purchase_date=" + encodeURIComponent(purchaseDate) + "&new_ref_no=" + encodeURIComponent(newRefNo));
                                    }
                                </script>
                                <!-- Modal -->
                                <div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-xl" role="document"> 
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="purchaseModalLabel">Purchase 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">
                                                <div id="modalContent" class="table-responsive"> 
                                                    <!-- Content will be loaded here -->
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" id="printButton">Print</button> 
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    document.getElementById('printButton').addEventListener('click', function() {
                                        var content = document.getElementById('modalContent').innerHTML;

                                        var printWindow = window.open('', '', 'width=900,height=650');

                                        printWindow.document.write(`
            <html>
                <head>
                    <title>Print Purchase Details</title>
                    <style>
                        /* Add necessary styles for printing */
                        body { font-family: Arial, sans-serif; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                        table, th, td { border: 1px solid #000; }
                        th, td { padding: 8px; text-align: left; }
                        h5, p { margin: 10px 0; }
                    </style>
                </head>
                <body>
                    ${content}
                </body>
            </html>
        `);

                                       
                                        printWindow.document.close();
                                        printWindow.focus();
                                        printWindow.print();
                                        printWindow.close();
                                    });
                                </script>


                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

                                <script>
                                    $(document).ready(function() {
                                        $('#purchaseModal').on('show.bs.modal', function(event) {
                                            var button = $(event.relatedTarget);
                                            var refNo = button.data('ref');

                                            // AJAX request
                                            $.ajax({
                                                url: 'fetch_purchase_details.php', 
                                                type: 'post',
                                                data: {
                                                    ref_no: refNo
                                                },
                                                success: function(response) {
                                                    
                                                    $('#modalContent').html(response);
                                                }
                                            });
                                        });
                                    });
                                </script>




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

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