@extends('layout.app')
@section('title',"- Report")
@section('style')
    <style>
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .spinner {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endsection
@section('main')
    <div id="loader" class="loader" style="display: none;">
        <div class="spinner"></div>
    </div>
    <div class="card">
        <div class="card-body">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-style2 mb-0">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item active">Report</li>
                </ol>
            </nav>
            <hr/>
            <div class="row">
                <div class="col-lg-12 mx-auto">
                    <h5 class="mb-4">Filter or Search Data Here:</h5>
                    <form id="search-form">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-4 col-12 mb-4">
                                <label for="org-code" class="form-label">Select Org Code</label>
                                <select class="form-select" id="org-code" name="org_code" aria-label="Select Org Code">
                                    <option selected disabled>Select Org Name Here</option>
                                    <!-- Add options dynamically -->
                                </select>
                            </div>
                            <div class="col-md-4 col-12 mb-4">
                                <label for="start-date" class="form-label">Start Date</label>
                                <input type="text" class="form-control" placeholder="DD-MM-YYYY" name="start_date" id="start-date" />
                            </div>
                            <div class="col-md-4 col-12 mb-4">
                                <label for="end-date" class="form-label">End Date</label>
                                <input type="text" class="form-control" placeholder="DD-MM-YYYY" name="end_date" id="end-date" />
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <button type="button" id="btnSearch" class="btn btn-outline-primary">Load Data</button>
                                <button type="button" id="btnExcel" class="btn btn-outline-info">Download Excel</button>
                                <button type="button" disabled class="btn btn-outline-warning" id="loadingSpinner" style="display:none;">Loading...</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-3 d-none" id="data-card">
        <div class="text-nowrap  table-responsive">
            <table  id="resultsTable" class="table">
                <thead>
                <tr>
                    <th>SL</th>
                    <th>Organization</th>
                    <th>Transaction ID</th>
                    <th>Account Number</th>
                    <th>Bill Number</th>
                    <th>Bill Month</th>
                    <th>Consumer Name</th>
                    <th>Mobile Number</th>
                    <th>Pay Date</th>
                    <th>Principal Amount</th>
                    <th>VAT Amount</th>
                    <th>Total Amount</th>
                </tr>
                </thead>
                <tbody>
                <!-- Data will be injected here dynamically -->
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-2">
                    <div id="totalEntries"></div>
                </div>
                <div class="col-md-10 table-responsive" >
                    <div id="pagination">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                                <li class="page-item" id="prevPage"><a class="page-link" href="#">Previous</a></li>
                                <!-- Dynamic page numbers will be inserted here -->
                                <li class="page-item" id="nextPage"><a class="page-link" href="#">Next</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#btnExcel').on('click', function() {
                // Collect your parameters from the form or input fields
                let orgCode = $('#org-code').val(); // Adjust selector as needed
                let startDate = $('#start-date').val(); // Adjust selector as needed
                let endDate = $('#end-date').val(); // Adjust selector as needed

                // Show loading state
                $(this).prop('disabled', true);
                $('#loadingSpinner').show();
                $('#btnExcel').hide();

                // Make AJAX request
                $.ajax({
                    url: '/payment-data', // Adjust the URL as needed
                    type: 'POST',
                    data: {
                        org_code: orgCode,
                        start_date: startDate,
                        end_date: endDate,
                        _token: '{{ csrf_token() }}' // Include CSRF token for security
                    },
                    xhrFields: {
                        responseType: 'blob' // Set the response type to blob
                    },
                    success: function(blob, textStatus, xhr) {
                        // Get the filename from the response headers or set a default name
                        const disposition = xhr.getResponseHeader('Content-Disposition');
                        let filename = 'payments.xlsx'; // Default file name

                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
                            if (matches != null && matches[1]) {
                                filename = matches[1].replace(/['"]/g, ''); // Remove quotes
                            }
                        }

                        // Create a link element
                        const link = document.createElement('a');
                        const url = window.URL.createObjectURL(blob);
                        link.href = url;
                        link.download = filename; // Use the dynamic filename
                        document.body.appendChild(link);
                        link.click(); // Programmatically click the link to trigger the download
                        link.remove(); // Clean up
                        window.URL.revokeObjectURL(url); // Release the object URL

                        // Reset the button state
                        $('#btnExcel').prop('disabled', false); // Re-enable the button
                        $('#loadingSpinner').hide(); // Hide loading spinner
                        $('#btnExcel').show();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error('Download failed: ', textStatus, errorThrown);

                        // Reset the button state on error
                        $('#btnExcel').prop('disabled', false); // Re-enable the button
                        $('#loadingSpinner').hide(); // Hide loading spinner
                        $('#btnExcel').show();
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('#org-code').select2({
                placeholder: "Select an Org Code", // Placeholder text
                allowClear: false // Option to allow clearing the selection
            });

            // Fetch organization list from the API
            $.ajax({
                url: '/getOrgList', // Your API route
                method: 'GET',
                success: function(data) {
                    // Check if data is returned successfully
                    if (data && !data.error) {
                        // Clear existing options
                        $('#org-code').empty();

                        // Add an initial placeholder option
                        $('#org-code').append('<option selected disabled>Select Org Name Here</option>');

                        // Populate the select with options
                        $.each(data, function(index, org) {
                            $('#org-code').append('<option value="' + org.org_code + '">' + org.org_name +' - '+org.org_code+ '</option>');
                        });

                        // Refresh Select2 to show the new options
                        $('#org-code').trigger('change');
                    } else {
                        console.error('Failed to load organization list:', data.error);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX error:', error);
                }
            });
        });
        document.getElementById("end-date").removeAttribute("readonly");

        document.addEventListener('DOMContentLoaded', function () {
            flatpickr("#start-date", {
                dateFormat: "d-m-Y",
            });

            flatpickr("#end-date", {
                dateFormat: "d-m-Y",maxDate: "today"
            });
        });

        $(document).ready(function() {
            let currentPage = 1;
            const limit = 500;
            let table;

            $('#btnSearch').click(function() {
                currentPage = 1;
                fetchData(currentPage);
            });

            function fetchData(page) {
                const orgCode = $('#org-code').val();
                const startDate = $('#start-date').val();
                const endDate = $('#end-date').val();

                if (!orgCode || !startDate || !endDate) {
                    alert('Please fill in all fields.');
                    return;
                }

                $('#loader').show();

                $.ajax({
                    url: '/your-api-endpoint',
                    type: 'POST',
                    data: {
                        org_code: orgCode,
                        start_date: startDate,
                        end_date: endDate,
                        page: page,
                        limit: limit,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#resultsTable tbody').empty();
                        response.data.forEach(function(item,index) {
                            $('#resultsTable tbody').append(`
                                <tr>
                                    <td>${index + 1}</td>
                                    <td>${item.ORG_CODE || ''}</td>
                                    <td>${item.BKASH_TRANS_ID || ''}</td>
                                    <td>${item.ACC_NUM || ''}</td>
                                    <td>${item.BILL_NUM || ''}</td>
                                    <td>${item.BILL_MON || ''}</td>
                                    <td>${item.CONS_NAME || ''}</td>
                                    <td>${item.USER_MOBILE || ''}</td>
                                    <td>${item.PAY_DATE || ''}</td>
                                    <td>${item.PRIN_AMT || ''}</td>
                                    <td>${item.VAT_AMT || ''}</td>
                                    <td>${item.TOT_AMT || ''}</td>
                                </tr>
                            `);
                        });

                        if ($.fn.DataTable.isDataTable('#resultsTable')) {
                            table.clear().rows.add($('#resultsTable tbody tr')).draw();
                        } else {
                            table = $('#resultsTable').DataTable({
                                destroy: true,
                                paging: false,
                                ordering: false,
                                info: false,
                                scrollY:"400px",
                                searching: true
                            });
                        }
                        $('#data-card').removeClass('d-none');

                        updatePagination(response.total_count, page);
                        $('#loader').hide();
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('An error occurred while fetching data.');
                        $('#loader').hide();
                    }
                });
            }

            function updatePagination(totalCount, currentPage) {
                const totalPages = Math.ceil(totalCount / limit);
                $('#pagination .pagination').empty();

                // Create Previous button
                const prevPageItem = $('<li class="page-item"><a class="page-link" href="#">Previous</a></li>');
                $('#pagination .pagination').append(prevPageItem);

                // Create page links
                for (let i = 1; i <= totalPages; i++) {
                    const pageItem = $(`<li class="page-item ${i === currentPage ? 'active' : ''}"><a class="page-link" href="#">${i}</a></li>`);
                    $('#pagination .pagination').append(pageItem);
                }

                // Create Next button
                const nextPageItem = $('<li class="page-item"><a class="page-link" href="#">Next</a></li>');
                $('#pagination .pagination').append(nextPageItem);

                // Handle pagination button clicks
                $('.page-item:not(#prevPage):not(#nextPage)').click(function() {
                    currentPage = parseInt($(this).text());
                    fetchData(currentPage);
                });

                // Handle Previous button click
                prevPageItem.click(function() {
                    if (currentPage > 1) {
                        currentPage--;
                        fetchData(currentPage);
                    }
                });

                // Handle Next button click
                nextPageItem.click(function() {
                    if (currentPage < totalPages) {
                        currentPage++;
                        fetchData(currentPage);
                    }
                });

                $('#totalEntries').text(`Total Entries: ${totalCount}`);
            }
        });

    </script>
@endsection