<?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 Stock Transfer</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;
        }

        .modal-dialog {
            max-width: 800px;
            /* Set maximum width for the modal */
            margin: 1.75rem auto;
            /* Center the modal */
        }

        .table {
            width: 100%;
            /* Ensure the table takes the full width */
            overflow-x: auto;
            /* Allow horizontal scrolling if necessary */
        }

        .table th,
        .table td {
            text-align: left;
            /* Align text to the left for better readability */
            white-space: nowrap;
            /* Prevent text from wrapping */
        }

        .total-summary {
            margin-top: 20px;
            /* Add some space above the summary */
        }
    </style>
</head>

<body>
    <!-- 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_stock_transfer.php">Stock Receive</a> > View Stock Receive
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <button class="btn btn-primary  ps-5 pe-5" style="float:inline-end;">
                                        <a href="add_stock_transfer.php" class="text-white">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px">
                                            </ion-icon> Add
                                        </a>
                                    </button>
                                </div>
                            </div>
                            <!-- search bar -->
                           
                            <!-- 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'; // Include your database connection

// Initialize variables for search and date
$search = isset($_GET['search']) ? $_GET['search'] : '';
$transfer_date = isset($_GET['transfer_date']) ? $_GET['transfer_date'] : '';

// Build the SQL query with filters
$sql = "SELECT ref_no, 
               SUM(QuantityReceived) AS total_quantity,
               SUM(QuantityReceived * purchase_price) AS total_value,
               MAX(shipping_charges) AS shipping_charges,  
               FromBranch, 
               ToBranch, 
               sell_note, 
               MAX(TransferDate) AS TransferDate  
        FROM stockreceive 
        WHERE (ref_no LIKE :search OR :search = '') 
        AND (DATE(TransferDate) = :transfer_date OR :transfer_date = '')
        GROUP BY ref_no, FromBranch, ToBranch, sell_note";

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

// Bind parameters
$stmt->bindValue(':search', '%' . $search . '%');
$stmt->bindValue(':transfer_date', $transfer_date);

// Execute the query
$stmt->execute();
?>

<!-- Search Form -->
<!-- Search Form -->
<form method="GET" action="">
    <div class="row mt-5 mb-5" style="width:95%;margin:0 auto;">
        <div class="col-lg-4">
            <input type="search" name="search" class="form-control" placeholder="Search Reference No." value="<?php echo htmlspecialchars($search); ?>">
        </div>
        <div class="col-lg-4">
            <input type="date" name="transfer_date" class="form-control" value="<?php echo htmlspecialchars($transfer_date); ?>">
        </div>
        <div class="col-lg-4 d-flex">
            <button type="submit" class="btn btn-primary p-2">Search</button>
            <a href="list_stock_transfer.php" class="btn btn-secondary p-2" style="margin-left: 5px;">Clear Filter</a>
        </div>
    </div>
</form>



<!-- Generate the HTML table -->
<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Ref No.</th>
            <th>Location (From)</th>
            <th>Location (To)</th>
            <th>Shipping Charges</th>
            <th>Total Amount</th>
            <th>Notes</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($row = $stmt->fetch()): ?>
            <?php $total_amount = $row['total_value'] + $row['shipping_charges']; ?>
            <tr>
                <td>
                    <a href="#" class="ref-no" data-ref-no="<?php echo htmlspecialchars($row['ref_no']); ?>" data-toggle="modal" data-target="#detailsModal">
                        <?php echo htmlspecialchars($row['ref_no']); ?>
                    </a>
                </td>
                <td><?php echo htmlspecialchars($row['FromBranch']); ?></td>
                <td><?php echo htmlspecialchars($row['ToBranch']); ?></td>
                <td><?php echo number_format($row['shipping_charges'], 2); ?></td>
                <td><?php echo number_format($total_amount, 2); ?></td>
                <td><?php echo htmlspecialchars($row['sell_note']); ?></td>
                <td><?php echo htmlspecialchars($row['TransferDate']); ?></td>
            </tr>
        <?php endwhile; ?>
    </tbody>
</table>


                                <!-- Modal HTML -->
                                <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="detailsModalLabel">Detail Data</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="modalDetailsContent">Loading...</div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button id="printButton" class="btn btn-primary" onclick="printModal()">Print</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <script>
                                    function printModal() {
                                        // Hide the footer buttons during printing
                                        document.querySelector('.modal-footer').style.display = 'none';

                                        // Print the modal
                                        window.print(); // Trigger the print dialog

                                        // Show the footer buttons again after printing
                                        document.querySelector('.modal-footer').style.display = 'flex';
                                    }
                                </script>

                                <style>
                                    @media print {
                                        body * {
                                            visibility: hidden;
                                            /* Hide all body elements */
                                        }

                                        #detailsModal,
                                        #detailsModal * {
                                            visibility: visible;
                                            /* Show only modal and its contents */
                                        }

                                        #detailsModal {
                                            position: absolute;
                                            /* Position it to avoid overflow */
                                            left: 0;
                                            top: 0;
                                        }
                                    }
                                </style>

                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
                                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

                                <script>
                                    $(document).ready(function() {
                                        $('.ref-no').on('click', function() {
                                            var refNo = $(this).data('ref-no');
                                            // Fetch detailed data via AJAX (you may need to create a new PHP file for this)
                                            $.ajax({
                                                url: 'fetch_receive_stock_details.php', // Create this file to handle the detail fetching
                                                method: 'GET',
                                                data: {
                                                    ref_no: refNo
                                                },
                                                success: function(data) {
                                                    $('#modalDetailsContent').html(data);
                                                },
                                                error: function() {
                                                    $('#modalDetailsContent').html('<p>An error has occurred</p>');
                                                }
                                            });
                                        });
                                    });
                                </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>