@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto mt-10">

        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif


        <!-- Button Group for Payment Ranges -->
        <div class="p-6 bg-white rounded-lg shadow-lg col-span-full">
            <div class="flex justify-center space-x-4">
            
                <button id="range4Btn" class="px-4 py-2 text-white bg-blue-500 rounded">0-30 Days</button>

                <button id="range2Btn" class="px-4 py-2 text-white bg-blue-500 rounded">31-90 Days</button>
                <button id="range3Btn" class="px-4 py-2 text-white bg-blue-500 rounded">91-180 Days</button>
            </div>
        </div>
        <div class="p-2 text-right">
            <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                onclick="openModal('addItemModal')">Add New Payment</button>
        </div>

        <div id="range4TableContainer" class=" p-6 bg-white rounded-lg shadow-lg">
            <h5 class="text-xl font-semibold">Due Billings within 0-30 Days</h5>
            <div>
                <table id="paymentsRange4Table" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">View</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing ID</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Client Name
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Type
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rent Amount
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing Date
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Due Date
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rent Status
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Action</th>

                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">

                        <!-- DataTables will populate this tbody -->
                    </tbody>
                </table>
            </div>
        </div>
<div id="range2TableContainer" class="hidden p-6 bg-white rounded-lg shadow-lg">
            <h5 class="text-xl font-semibold">Due Payments within 31-90 Days</h5>
            <div>
                <table id="paymentsRange2Table" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">View</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing ID</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Client Name
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Type
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rent Amount
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing Date
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Due Date
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rent Status
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">

                        <!-- DataTables will populate this tbody -->
                    </tbody>
                </table>
            </div>
        </div>


        <div id="range3TableContainer" class="hidden p-6 bg-white rounded-lg shadow-lg">
            <h5 class="text-xl font-semibold">Due Payments within 91-180 Days</h5>
            <div>
                <table id="paymentsRange3Table" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">View</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing ID</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Client Name
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Type
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rent Amount
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing Date
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Due Date
                            </th>
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Rent Status
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">

                        <!-- DataTables will populate this tbody -->
                    </tbody>
                </table>
            </div>
        </div>
       
        @include('CMS.Payment.paymentmodal')
    @endsection

    @section('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function() {
                // Function to initialize DataTables for each range table
                function initializeDataTable(tableId, ajaxUrl) {
                    var table = $(tableId).DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: ajaxUrl,
                        columns: [{
                                data: 'view',
                                name: 'view',
                                orderable: false,
                                searchable: false
                            }, {
                                data: 'payment_id',
                                name: 'payment_id'
                            },
                            {
                                data: 'client_name',
                                name: 'client_name'
                            },
                            {
                                data: 'type',
                                name: 'type'
                            }, {
                                data: 'Amount',
                                name: 'Amount'
                            },

                            {
                                data: 'payment_schedule',
                                name: 'payment_date'
                            },
                            {
                                data: 'due_date',
                                name: 'due_date'
                            },
                            {
                                data: 'payment_status',
                                name: 'payment_status'
                            },

                            {
                                data: 'Action',
                                name: 'Action',
                                orderable: false,
                                searchable: false
                            }
                        ]
                    });

                    // Open modal on row click
                    $(tableId + ' tbody').on('click', 'tr', function() {
                        var data = table.row(this).data();
                        if (data) {
                            openModal1('editItemModal' + data.payment_id);
                        }
                    });

                    return table;
                }



                var range3Table = initializeDataTable('#paymentsRange3Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange3Table");
                var range4Table = initializeDataTable('#paymentsRange4Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange4Table");
                var range2Table = initializeDataTable('#paymentsRange2Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange2Table");

                // Button click handlers to toggle visibility of tables


                $('#range3Btn').on('click', function() {
                    $('#range3TableContainer').removeClass('hidden');
                    $(' #range4TableContainer, #range2TableContainer')
                        .addClass('hidden');
                });

                $('#range4Btn').on('click', function() {
                    $('#range4TableContainer').removeClass('hidden');
                    $(' #range3TableContainer, #range2TableContainer')
                        .addClass('hidden');
                });

                $('#range2Btn').on('click', function() {
                    $('#range2TableContainer').removeClass('hidden');
                    $(' #range3TableContainer, #range4TableContainer')
                        .addClass('hidden');
                });

                // Modal control functions
                function openModal1(modalId) {
                    var modal = document.getElementById(modalId);
                    modal.style.display = 'flex'; // Change from 'none' to 'flex' to show the modal
                }

                function closeModal1(modalId) {
                    var modal = document.getElementById(modalId);
                    modal.style.display = 'none'; // Hide the modal
                }
                $(document).ready(function() {
                $('#paymentForm').on('submit', function(e) {
                    e.preventDefault();
                    var formData = $(this).serialize(); // Serialize the form data

                    $.ajax({
                        url: "{{ route('store.payment') }}", // Route URL
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                          
                         location.reload();

                            setTimeout(function() {
                                $('#successModal').addClass('hidden');
                            }, 2000); // 3000 ms = 3 seconds
                        },
                        error: function(xhr, status, error) {
                            var errors = xhr.responseJSON.errors;
                            // Handle the validation errors, display them to the user
                            alert('There was an error processing the payment.');
                            console.log(errors);
                        }
                    });
                });
                // Close the modal when the "OK" button is clicked
                $('#closeModal').on('click', function() {
                    $('#successModal').addClass('hidden');
                });

            });
            });
        </script>




        <script>
            function formatDate(dateString) {
                if (!dateString) return '';
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                };
                const date = new Date(dateString);
                return date.toLocaleDateString(undefined, options);
            }

            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        </script>
    @endsection