<?php include '../header.php'; ?> 
<?php include '../sidemenu.php'; ?> 

<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col d-flex justify-content-between">
                <h2 class="page-title">Customer Report</h2>
            </div>
        </div>
    </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-12">
                <div class="row">
                    <div class="col-3 mb-3 row">
                        <label class="col-4 col-form-label text-end">Date From</label>
                        <div class="col">
                            <input type="text" class="flatpickr flatpickr-input active form-control" id="dateFrom" required>
                        </div>
                    </div>
                    <div class="col-3 mb-3 row">
                        <label class="col-4 col-form-label text-end">Date To</label>
                        <div class="col">
                            <input type="text" class="flatpickr flatpickr-input active form-control" id="dateTo" required>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="myTable" class="table card-table table-vcenter text-nowrap datatable" >
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th style="text-align: left;">Name<span class="searchable">🔍</span></th>
                                        <th style="text-align: left;">Phone<span class="searchable">🔍</span></th>
                                        <th>Email<span class="searchable">🔍</span></th>
                                        <th>Country<span class="searchable">🔍</span></th>
                                        <th>ID No.<span class="searchable">🔍</span></th>
                                        <th>Address<span class="searchable">🔍</span></th>
                                        <th>Vehicle No.<span class="searchable">🔍</span></th>
                                        <th>Pickup</th>
                                        <th>Return</th>
                                        <!-- <th class="w-1">Action</th> -->
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- <div class="d-flex justify-content-end text-bold">All Total Charges: <span id="totalAmount">0.00</span></div> -->
                    </div>
                </div>

                <!-- Modal Structure -->
                <div class="modal fade" id="checkinModal" tabindex="-1" aria-labelledby="checkinModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="checkinModalLabel">Pickup Details</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Rental Rate</th>
                                            <th>Add-on Qty</th>
                                            <th>Add-on Rate</th>
                                            <th>Extra Driver</th>
                                            <th>Extra Driver Fee</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody id="modalTableBody">
                                        <!-- Rows will be added here dynamically -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>



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

 
<?php include '../footer.php'; ?>

<script>
	var today = new Date().toISOString().split('T')[0];
$(function() {
	flatpickr("#dateFrom", {
        dateFormat: "Y-m-d", 
        defaultDate: today,  
        maxDate: today,      
    });
	flatpickr("#dateTo", {
        dateFormat: "Y-m-d", 
        defaultDate: today,  
        maxDate: today,      
    });
    getAll();
});

$("#dateFrom, #dateTo").change(function() {
    getAll();
});


function getAll() {
    var df = $("#dateFrom").val();
    var dt = $("#dateTo").val();

    $('#myTable').DataTable().destroy();
    let table = $('#myTable').DataTable({
        ajax: {
            url: APP_URL + "api/check_in/search_guest.php",
            method: "GET",
            dataType: "json",
            data: {
                df: df,
                dt: dt
            },
            dataSrc: function(json) {
                // if (json.total) {
                //     $("#totalAmount").text(parseFloat(json.total).toLocaleString(undefined, { minimumFractionDigits: 2 }));
                // }
                return json.records;
            }
        },
        columns: [
            { data: 0 },
            { data: 1 },
            { data: 2 }, // Vehicle No column
            { data: 3 },
            { data: 4 },
            { data: 5 },
            { data: 6 },
            { data: 7 },
            { data: 8 },
            { data: 9 },
        ],

        columnDefs: [
            {
                targets: 2, 
                createdCell: function(td, cellData, rowData, row, col) {
                    $(td).css({
                        'text-align': 'left',
                        'cursor': 'pointer',
                        'color': '#007bff', // Bootstrap's link color
                        'text-decoration': 'underline'
                    });
                    $(td).attr('title', 'Click to view details'); // Tooltip
                    $(td).on('click', function() {
                        $.ajax({
                            url: APP_URL + "api/check_in/get_one_for_checkin_report.php",
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({ checkin_id: rowData[0] })
                        }).done(function(data) {
                            // Clear previous table rows
                            $("#modalTableBody").empty();

                            // Iterate over records and populate table rows
                            data.records.forEach(function(record) {
                                $("#modalTableBody").append(`
                                    <tr>
                                        <td>${record.date}</td>
                                        <td>${parseFloat(record.room_rate).toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                                        <td>${record.extra_bed}</td>
                                        <td>${parseFloat(record.extra_bed_rate).toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                                        <td>${record.extra_person}</td>
                                        <td>${parseFloat(record.extra_person_rate).toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                                        <td>${parseFloat(record.total).toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                                    </tr>
                                `);
                            });

                            // Show modal
                            $("#checkinModal").modal("show");
                        });
                    });
                }
            },
            {
                targets: [1, 2, 3,4,5,6,7], // Make columns 1, 2, and 3 searchable
                searchable: true
            },
            {
                targets: [0,8,9], // Disable search functionality for columns 4, 5, 6
                searchable: false
            }
        ],

        paging: true,
        language: {
            emptyTable: "No records found",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            lengthMenu: "Show _MENU_ entries",
            search: "Search:",
            zeroRecords: "No records found"
        },
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    });
}


// Function to show the modal
function showModal(roomNo, rowData) {
    // Example: Populate modal content
    $("#modalRoomNo").text("Vehicle No: " + roomNo);
    // $("#modalDetails").text(JSON.stringify(rowData)); // Display additional details if needed

    // // Show the modal
    $("#myModal").modal('show');
}


</script>
