@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">

    <!-- DataTables Buttons CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.2/css/buttons.dataTables.css">

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>

    <!-- DataTables Buttons Extension -->
    <script src="https://cdn.datatables.net/buttons/3.2.2/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.dataTables.js"></script>

    <!-- JSZip for Excel Export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <!-- PDFMake for PDF Export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

    <!-- Buttons for Exporting -->
    <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.print.min.js"></script>


    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

    <style>
        .dataTables_wrapper .dataTables_filter input {
            width: 150px;
            height: 30px;
            padding: 5px;
            font-size: 14px;
        }
        .dataTables_wrapper .dataTables_filter input {
            width: 350px;
            height: 30px;
            padding: 5px;
            font-size: 14px;
        }
    </style>
    <div class="container">
        <div class="tab-content" id="myTabContent">
            <div class="row">
                <div class="col-12">
                    <div class="card my-2; padding-inline: auto;" style="border-radius: 0 10px 10px 10px">
                        <!-- Main CONTENT -->
                        <div class="container-fluid py-1 mx-0 px-0">
                            <div class="row mx-1 mb-3 me-2">
                                <div class="col-md-12 g-1 mx-0 px-1">
                                    <div class="container px-0 mx-1 ps-1">
                                        <div class="card">
                                            <div class="card-header p-0 position-relative">
                                                <div class="shadow-dark rounded-2" style="background-color: #0071bd; padding: 5px 5px 3px 5px">
                                                    <h5 class="text-white text-capitalize ps-3">Borrow Logs</h5>
                                                </div>
                                            </div>
                                            <div class="container-fluid pt-3">
                                                <div class="container mb-2">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="division">Division<span class="text-danger">*</span></label>
                                                            <div class="input-group input-group-outline mb-1">
                                                                <select id="division" name="division" class="form-select">
                                                                    <option selected disabled>Select Division</option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label for="district">District<span class="text-danger">*</span></label>
                                                            <div class="input-group input-group-outline mb-1">
                                                                <select id="district" name="district" class="form-select">
                                                                    <option selected disabled>Select District</option>
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label for="school">School<span class="text-danger">*</span></label>
                                                            <div class="input-group input-group-outline mb-1">
                                                                <select id="school" name="school" class="form-select">
                                                                    <option selected disabled>Select School</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <table id="lr_logs" class="table table-hover" width="auto">
                                                    <thead>
                                                        <tr>
                                                            <th>View</th>
                                                            <th>Title</th>
                                                            <th>No. of times borrowed</th>
                                                            <th>Average Rating</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>

    <!-- Add this modal HTML inside your card div, before the last </div> -->
    <div class="modal fade" id="pieceDetailsModal" tabindex="-1" aria-labelledby="pieceDetailsModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="pieceDetailsModalLabel">Piece Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table id="pieceDetailsTable" class="table table-hover" width="100%">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Station Name</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </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() {
            const fetchOptions = (url, data, target, placeholder) => {
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: data,
                    dataType: 'json',
                    success: function(response) {
                        let options = `<option selected disabled>${placeholder}</option>`;
                        $.each(response, function(_, item) {
                            options += `<option value="${item.id}">${item.station_name || item.school_name}</option>`;
                        });
                        $(target).empty().append(options);
                    },
                    error: function(xhr, status, error) {
                        console.error(`Error fetching data from ${url}:`, error);
                    }
                });
            };

            fetchOptions('/getDiv', {}, '#division', 'Select Division');

            $('#division').change(function() {
                let division_id = $(this).val();
                $('#district, #school').empty().append('<option selected disabled>Select</option>');
                if (division_id) fetchOptions('/api/districts', { division_id }, '#district', 'Select District');
                updateTableDisplay();
            });

            $('#district').change(function() {
                let district_id = $(this).val();
                $('#school').empty().append('<option selected disabled>Select School</option>');
                if (district_id) fetchOptions('/api/schools', { district_id }, '#school', 'Select School');
                updateTableDisplay();
            });

            $('#school').change(function() {
                updateTableDisplay();
            });


            let isInitialLoad = true;
            let dataTable = $('#lr_logs').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                responsive: true,
                scrollX: true,
                layout: {
                    topStart: {
                        buttons: [
                            {
                                extend: 'excelHtml5',
                                text: 'Export to Excel',
                                filename: 'Borrow_Logs_Report',
                                title: 'Borrow Logs Report',
                                exportOptions: {
                                    columns: [1, 2, 3]
                                }
                            }
                        ],
                    }
                },
                language: {
                    infoFiltered: "",
                    emptyTable: "Please select a station to load data"
                },
                ajax: {
                    url: '/get-logs-only-ro',
                    type: 'GET',
                    data: function(d) {
                        d.division_id = $('#division').val();
                        d.district_id = $('#district').val();
                        d.school_id = $('#school').val();
                    },
                    dataSrc: function(json) {
                        if (isInitialLoad) {
                            isInitialLoad = false;
                            dataTable.settings()[0].oLanguage.sEmptyTable = "No data available in table";
                        }
                        if (!($('#division').val() || $('#district').val() || $('#school').val())) {
                            return [];
                        }
                        return json.data;
                    }
                },
                columns: [
                    { data: 'action', orderable: false, searchable: false },
                    { data: 'title' },
                    { data: 'no_of_times_borrowed' },
                    { data: 'rating' }
                ]
            });


            let pieceTable = $('#pieceDetailsTable').DataTable({
                searching: false,
                paging: false,
                info: false,
                ordering: false,
                scrollX: true,
                columns: [
                    { data: "lr_title", title: "Title" },
                    { data: "station_name", title: "Station Name" },
                    { data: "remarks", title: "Remarks", defaultContent: "No remarks" }
                ]
            });

            // Handle view button clicks
            $('#lr_logs').on('click', '.view-btn', function() {
                var titleId = $(this).data('title_id');
                var regionId = $('#region').val();
                var divisionId = $('#division').val();
                var districtId = $('#district').val();
                var schoolId = $('#school').val();

                $.ajax({
                    url: "/fetch-per-piece",
                    type: "GET",
                    data: {
                        title_id: titleId,
                        region_id: regionId,
                        division_id: divisionId,
                        district_id: districtId,
                        school_id: schoolId
                    },
                    dataType: "json",
                    success: function(response) {
                        //console.log("Received Data:", response);

                        // If response is an object with a "data" array, extract it
                        let data = Array.isArray(response) ? response : response.data;

                        // Clear and reload DataTable with new data
                        pieceTable.clear().rows.add(data).draw();

                        // Show the modal
                        $('#pieceDetailsModal').modal('show');
                    },
                    error: function(error) {
                        console.log("Error fetching data:", error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Failed to load piece details!'
                        });
                    }
                });
            });
            // Function to update table display
            function updateTableDisplay() {
                let division = $('#division').val();
                let district = $('#district').val();
                let school = $('#school').val();
                dataTable.ajax.reload();
            }
        });
    </script>
@endsection