<?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>
                            <form action="" method="get">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-5">
                                        <input type="search" name="search" class="form-control" placeholder="Search by reference or supplier">
                                    </div>
                                    <div class="col-lg-5">
                                        <select name="date_filter" class="form-control">
                                            <option value="">Select Date Range</option>
                                            <option value="today">Today</option>
                                            <option value="yesterday">Yesterday</option>
                                            <option value="last_7_days">Last 7 Days</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <button style="width:100%;" class="btn btn-primary p-2">Search</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">-->
                                <!--        <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
                                // Initialize variables for filters
                                $search = isset($_GET['search']) ? $_GET['search'] : '';
                                $date_filter = isset($_GET['date_filter']) ? $_GET['date_filter'] : '';

                                // Base query
                                $query = "SELECT 
                                p.ref_no,
                                p.purchase_date AS Date,
                                c.name AS Supplier,
                                p.supplier_id,
                                SUM(p.purchase_price * p.quantity) AS GrandTotal,
                                p.purchase_status AS PurchaseStatus
                              FROM 
                                purchase_lines p
                              JOIN 
                                contacts c ON p.supplier_id = c.id AND c.type = 'supplier'
                              WHERE 
                                p.ref_no IS NOT NULL AND p.ref_no != '' AND p.ref_no != 0";

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

                                // Apply date filter
                                if (!empty($date_filter)) {
                                    switch ($date_filter) {
                                        case 'today':
                                            $query .= " AND DATE(p.purchase_date) = CURDATE()";
                                            break;
                                        case 'yesterday':
                                            $query .= " AND DATE(p.purchase_date) = CURDATE() - INTERVAL 1 DAY";
                                            break;
                                        case 'last_7_days':
                                            $query .= " AND DATE(p.purchase_date) >= CURDATE() - INTERVAL 7 DAY";
                                            break;
                                    }
                                }

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

                                // Prepare and execute the query
                                $stmt = $conn->prepare($query);

                                // Bind the search term if it's used
                                if (!empty($search)) {
                                    $stmt->bindValue(':search', '%' . $search . '%');
                                }

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

                                <table class="table table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Actions</th>
                                            <th>Date</th>
                                            <th>Reference No</th>
                                            <th>Supplier</th>
                                            <!-- <th>Payment Status</th> -->
                                            <th>Purchase Status</th>
                                            <th>Grand Total</th>
                                            <!-- <th>Payment Due</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach ($results as $row): ?>
                                            <?php
                                            // Calculate due amount from `bank_debit_amount` table
                                            $paymentQuery = "SELECT COALESCE(SUM(amount), 0) AS TotalPaid 
                             FROM bank_debit_amount 
                             WHERE supplier_id = :supplier_id AND ref_no = :ref_no";
                                            $paymentStmt = $conn->prepare($paymentQuery);
                                            $paymentStmt->bindValue(':supplier_id', $row['supplier_id']);
                                            $paymentStmt->bindValue(':ref_no', $row['ref_no']);
                                            $paymentStmt->execute();
                                            $paymentData = $paymentStmt->fetch();

                                            $totalPaid = $paymentData['TotalPaid'];
                                            $dueAmount = $row['GrandTotal'] - $totalPaid;

                                            // Determine payment status
                                            if ($dueAmount <= 0) {
                                                $paymentStatus = 'Paid';
                                                $statusClass = 'bg-success text-white';
                                            } elseif ($dueAmount < $row['GrandTotal']) {
                                                $paymentStatus = 'Partial Paid';
                                                $statusClass = 'bg-warning text-dark';
                                            } else {
                                                $paymentStatus = 'Due';
                                                $statusClass = 'bg-danger text-white';
                                            }
                                            ?>
                                            <tr>
                                                <td>
                                                    <div class="btn-group">
                                                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            Action
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#purchaseModal" data-ref="<?php echo htmlspecialchars($row['ref_no']); ?>">View</a>
                                                                <a href="action/delete_purchase.php?del=<?php echo htmlspecialchars($row['ref_no']); ?>"
                                                                onclick="return confirm('Are you sure you want to delete this Purchase?');">
                                                                <ion-icon name="trash-outline"></ion-icon> &nbsp; Delete
                                                            </a>
                                                            <!-- <a class="dropdown-item" href="#" class="btn btn-primary"
                                                                data-toggle="modal" data-target="#exampleModal"
                                                                data-ref="<?php echo htmlspecialchars($row['ref_no']); ?>"
                                                                data-date="<?php echo htmlspecialchars($row['Date']); ?>"
                                                                data-supplier-id="<?php echo htmlspecialchars($row['supplier_id']); ?>"
                                                                data-supplier="<?php echo htmlspecialchars($row['Supplier']); ?>"
                                                                data-due-amount="<?php echo number_format($dueAmount, 2); ?>">Add Payment</a> -->

                                                            
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><?php echo htmlspecialchars($row['Date']); ?></td>
                                                <td><?php echo htmlspecialchars($row['ref_no']); ?></td>
                                                <td><?php echo htmlspecialchars($row['Supplier']); ?></td>
                                                <!-- <td>
                                                    <span class="badge <?php echo $statusClass; ?>" style="padding: 10px; font-size: 90%; border-radius: 8px;">
                                                        <?php echo htmlspecialchars($paymentStatus); ?>
                                                    </span>
                                                </td> -->
                                                <td><?php echo htmlspecialchars($row['PurchaseStatus']); ?></td>
                                                <td><?php echo number_format($row['GrandTotal'], 2); ?></td>
                                                <!-- <td><?php echo number_format($dueAmount, 2); ?></td> -->
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>


                                <!--------------------------------------------- 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);

                                        // Fetch bank accounts dynamically
                                        $.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()); // Amount entered by user
                                        var note = $('#note').val();
                                        var dueAmount = parseFloat($('#due_amount').val()); // Due amount retrieved from modal

                                        // Debugging logs to check the values of amount and dueAmount
                                        console.log("Amount entered: " + amount);
                                        console.log("Due amount: " + dueAmount);

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

                                        // Ensure that amount is a valid number
                                        if (isNaN(amount)) {
                                            alert("Invalid amount value.");
                                            return;
                                        }

                                        // AJAX request to submit payment data
                                        $.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);

                                                // Hide modal and clean up
                                                $('#exampleModal').modal('hide');
                                                $('body').removeClass('modal-open');
                                                $('.modal-backdrop').remove();

                                                // Display payment amount in a toast or other UI element
                                                $('#paymentAmount').text(amount);
                                                $('#toastSuccess').toast({
                                                    delay: 1000
                                                }).toast('show');

                                                // Redirect to another page after 1 second
                                                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"> <!-- Changed to modal-xl -->
                                        <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"> <!-- Added table-responsive class -->
                                                    <!-- Content will be loaded here -->
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" id="printButton">Print</button> <!-- 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>
        `);

                                        // Trigger print and close the print window
                                        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', // URL to the PHP file that fetches the data
                                                type: 'post',
                                                data: {
                                                    ref_no: refNo
                                                },
                                                success: function(response) {
                                                    // Add response in Modal body
                                                    $('#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>