<?php
    // session_start();
    include "../db.php";
    require '../auth.php';
    restrictAccess(['Student']);
    date_default_timezone_set('Asia/Kolkata');
    $currentTime = date('M j, Y g:i a');

    if ( !isset($_SESSION['uid']) && !isset($_SESSION['uref']) && !isset($_SESSION['utype']) ) {
        header("Location: logout.php");
        exit();
    }

    $student = "";
    if(isset($_SESSION['uid'])){
        $student_id = $_SESSION['uid'];
        $student_sql = mysqli_query($con, "SELECT * FROM users WHERE uid = '$student_id' ");
        if($student_row = mysqli_fetch_assoc($student_sql)){
            $student = $student_row["uname"];
        }
    }
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <?php include "include/meta.php"; ?>
    <?php include "include/css.php"; ?>
    <?php include "include/php-functions.php"; ?>
    <script src="https://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<style>
.form-group label {
    position: absolute;
    top: -10px;
    left: 5px;
    background: #fff;
    font-size: 10px;
    padding: 1px 2px;
    border-radius: 3px;
}
</style>

<body>
    <!--  Header -->
    <?php include "include/header.php"; ?>
    <!-- #header -->

    <section id="inner-body">
        <div class="body-content">
            <div class="container-fluid">
                <div class="card mt-3 mb-3">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between">
                                    <h4 class="text-gray-800 m-0">
                                        <?php if(!empty($student_id)){ echo $student; } else {?>Student <?php }?>
                                        Work Bill</h4>
                                </div>
                            </div>
                            <div class="col-md-6 mt-1">
                                <div class="d-block d-lg-flex">
                                    <div class="row my-2 my-lg-0">
                                        <div class="col-6">
                                            <div class="w-100">
                                                <div class="form-group position-relative">
                                                    <label for="startDate" class="small">Start Date/On Date</label>
                                                    <input type="date" class="form-control form-control-sm"
                                                        name="startDate" id="startDate">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="w-100">
                                                <div class="form-group position-relative">
                                                    <label for="endDate" class="small">End Date/On Date</label>
                                                    <input type="date" class="form-control form-control-sm me-2"
                                                        name="endDate" id="endDate">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="w-100">
                                            <div class="form-group">
                                                <input type="text" list="First" class="form-control form-control-sm"
                                                    id="FirstFilterValue" placeholder="Search By Vendor/Hotel Name">
                                                <datalist id="First">
                                                    <?php
                                                    $sql = "SELECT wp_name FROM work_place WHERE wp_recycle != '0' ORDER BY wp_name ASC";
                                                    $res = mysqli_query($con,$sql);
                                                    while ($row = mysqli_fetch_assoc($res)) {
                                                ?>
                                                    <option value="<?php echo $row['wp_name']; ?>">
                                                        <?php echo $row['wp_name']; ?></option>
                                                    <?php } ?>
                                                </datalist>
                                            </div>
                                            <input type="hidden" class="form-control" value="" id="SecondFilterValue">
                                        </div>
                                        <div class="#">
                                            <button type="button" id="filter" class="btn btn-primary btn-sm"> Search
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!--loader -->
                            <div class="col-12" id='loader'>
                                <ul style="list-style: none; padding-left: 0;">
                                    <?php
                                    for ($count = 0; $count < 4; $count++) {
                                        echo '<li>
                                        <div class="ph-item">
                                        <div cl ass="ph-test">
                                        <div class="ph-row">
                                        <div class="ph-col-12 big"></div>
                                        <div class="ph-col-12"></div>
                                        <div class="ph-col-12"></div>
                                        <div class="ph-col-12"></div>
                                        <div class="ph-col-12"></div>
                                        <div class="ph-col-12"></div>
                                        </div>
                                        </div>
                                        </div>
                                        </li>';
                                        }
                                    ?>
                                </ul>
                            </div>

                            <!-- loader -->
                            <div class="col-12" id="full-table">
                                <ul class="timeline" id="full-table-data" style="list-style: none; padding: 0;">
                                    </>
                                </ul>
                            </div>

                            <div class="col-12" id="filter-table" style="display: none;">
                                <ul class="timeline" id="filter-table-data" style="list-style: none; padding: 0;">
                                    </>
                                </ul>
                            </div>
                            <div class="text-center mt-3" id="load-more-container">
                                <button id="loadMoreBtn" class="btn btn-info btn-sm text-white">Load More</button>
                                <div id="endMessage" class="text-muted mt-2" style="display: none;">End of result</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php include "include/footer.php"; ?>
    </section>

    <!-- JavaScript Libraries -->

    <?php include "include/js.php"; ?>

    <!-- Modal Structure -->
    <div class="modal fade" id="adminDetailsModal" data-bs-backdrop="static" tabindex="-1" role="dialog"
        aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 style="color:orange;font-size: 20px"> <i class="fa fa-hotel"></i> <span id="modalName"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-0"><b>Title:</b> <span id="modalTitle"></span></p>
                            <p class="mb-0"><b>Work Date:</b> <span id="modalStartDate"></span></p>
                            <p class="mb-0"><b>Work Time:</b> <span id="modaltime"></span></p>
                            <p class="mb-0"><b>Created Date:</b> <span id="modalDate"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-0"><b>Amount by Hotel:</b> <span id="modalHotelAmount"></span></p>
                            <p class="mb-0"><b>Amount to Student:</b> <span id="modalStudentAmount"></span></p>
                            <p class="mb-0"><b>Total Received:</b> <span id="modalTotalReceived"></span>/-</p>
                            <p class="mb-0"><b>Total Dispatched:</b> <span id="modalTotalDispatched"></span>/-</p>
                        </div>
                    </div>
                    <hr>
                    <h6>Students [ <span class="small">Total: <span id="total"></span></span> | <span
                            class="small">Present: <span id="present"></span> | <span class="small">Absent: <span
                                    id="absent"></span> ]</h6>
                    <div id="modalStudents" class="row"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function() {
        var load_filter_flag = 0;
        var load_flag = 0;

        var FirstFilterValue = '';
        var startDate = '';
        var endDate = '';

        <?php if(isset($student_id)){?>
        var SecondFilterValue = '<?= $student_id;?>';
        <?php } else { ?>
        var SecondFilterValue = '';
        <?php } ?>

        // Initial unfiltered data load
        loadMore(load_flag);

        // Filter Button Click
        $("#filter").click(function() {
            FirstFilterValue = $('#FirstFilterValue').val();
            startDate = $('#startDate').val();
            endDate = $('#endDate').val();

            load_filter_flag = 0;
            load_flag = 0;

            $('#loadMoreBtn').show();
            $('#endMessage').hide();

            if (FirstFilterValue != '' || startDate != '' || endDate != '') {
                $.ajax({
                    url: 'workbill-student-ajax.php',
                    type: 'POST',
                    data: {
                        FirstFilterValue: FirstFilterValue,
                        SecondFilterValue: SecondFilterValue,
                        startDate: startDate,
                        endDate: endDate,
                        start: load_filter_flag
                    },
                    beforeSend: function() {
                        $("#loader").show();
                        $("#loadMoreBtn").hide();
                    },
                    success: function(result) {
                        $('#full-table').hide();
                        $('#filter-table').show();
                        $('#filter-table-data').html(result);

                        const newItems = $('<div>').html(result).find('li');
                        load_filter_flag += newItems.length;

                        if (newItems.length < 10) {
                            $('#loadMoreBtn').hide();
                            $('#endMessage').show();
                        } else {
                            $('#loadMoreBtn').show();
                            $('#endMessage').hide();
                        }
                    },
                    complete: function() {
                        $("#loader").hide();
                    }
                });
            } else {
                alert('Please select at least one filter option (Vendor/Hotel or Date Range).');
                $('#full-table').show();
                $('#filter-table').hide();
            }
        });

        // Load More Button Click
        $('#loadMoreBtn').click(function() {
            if ($('#filter-table').is(':visible')) {
                loadMoreFilter(load_filter_flag);
            } else {
                loadMore(load_flag);
            }
        });

        // Load more for filtered data
        function loadMoreFilter(start) {
            $.ajax({
                url: 'workbill-student-ajax.php',
                type: 'POST',
                data: {
                    FirstFilterValue: FirstFilterValue,
                    SecondFilterValue: SecondFilterValue,
                    startDate: startDate,
                    endDate: endDate,
                    start: start
                },
                beforeSend: function() {
                    $("#loader").show();
                    $("#loadMoreBtn").hide();
                },
                success: function(result) {
                    $('#filter-table-data').append(result);
                    const newItems = $('<div>').html(result).find('li');
                    load_filter_flag += newItems.length;

                    if (newItems.length < 10) {
                        $('#loadMoreBtn').hide();
                        $('#endMessage').show();
                    } else {
                        $('#loadMoreBtn').show();
                        $('#endMessage').hide();
                    }
                },
                complete: function() {
                    $("#loader").hide();
                }
            });
        }

        // Load more for unfiltered data
        function loadMore(start) {
            $.ajax({
                url: 'workbill-student-ajax.php',
                type: 'POST',
                data: {
                    SecondFilterValue: SecondFilterValue,
                    start: start
                },
                beforeSend: function() {
                    $("#loader").show();
                    $("#loadMoreBtn").hide();
                },
                success: function(result) {
                    $('#full-table-data').append(result);
                    const newItems = $('<div>').html(result).find('li');
                    load_flag += newItems.length;

                    if (newItems.length < 10) {
                        $('#loadMoreBtn').hide();
                        $('#endMessage').show();
                    } else {
                        $('#loadMoreBtn').show();
                        $('#endMessage').hide();
                    }
                },
                complete: function() {
                    $("#loader").hide();
                }
            });
        }
    });
    </script>


</body>

</html>