@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="range1Btn" class="px-4 py-2 text-white bg-blue-500 rounded">Billings</button>
                <button id="range5Btn" class="px-4 py-2 text-white bg-blue-500 rounded">Paid</button>
                <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="hidden 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">Rent Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Electricbill
                                Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Waterbill
                                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="range1TableContainer" class="p-6 bg-white rounded-lg shadow-lg ">
            <h5 class="text-xl font-semibold">Billings </h5>
            <div>
                <table id="paymentsRange1Table" 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">Rent Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Electricbill
                                Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Waterbill
                                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">Rent Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Electricbill
                                Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Waterbill
                                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">Rent Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Electricbill
                                Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Waterbill
                                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>
        <div id="range5TableContainer" 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="paymentsRange5Table" 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">Rent Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Electricbill
                                Amount
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Waterbill
                                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">

                    </tbody>
                </table>
            </div>
        </div>

        @foreach ($payments as $payment)
            <div id="editPaymentModal{{ $payment->payment_id }}"
                class="fixed inset-0 flex items-center justify-center hidden overflow-auto bg-gray-500 bg-opacity-75">
                <div class="w-full h-auto max-h-screen bg-white rounded-lg shadow-lg md:w-1/2">

                    <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                        <h5 class="font-bold text-white">Edit Billings</h5>
                        <button onclick="closeModal('editPaymentModal{{ $payment->payment_id }}')"
                            class="text-white">&times;</button>
                    </div>
                    <form id="editPaymentForm{{ $payment->payment_id }}"
                        action="{{ route('allpayment.update', $payment->payment_id) }}" method="POST"
                        class="p-6 bg-white rounded shadow-md ">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2">
                            <div class="hidden">
                                <label for="lease_id" class="block mb-2 text-sm font-bold text-gray-700">Lease
                                    ID:</label>
                                <input type="" id="lease_id" name="lease_id"
                                    value="{{ old('lease_id', $payment->lease_id) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    required>
                                @error('lease_id')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="amount" class="block mb-2 text-sm font-bold text-gray-700">Amount:</label>
                                <input type="text" id="amount" name="amount"
                                    value="{{ old('amount', $payment->Amount) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    required>
                                @error('amount')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="payment_date" class="block mb-2 text-sm font-bold text-gray-700">Payment
                                    Date:</label>
                                <input type="date" id="payment_date" name="payment_date"
                                    value="{{ old('payment_date', $payment->payment_date->format('Y-m-d')) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    required>
                                @error('payment_date')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="status" class="block mb-2 text-sm font-bold text-gray-700">Status:</label>
                                <input type="text" id="status" name="status"
                                    value="{{ old('status', $payment->status) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    required>
                                @error('status')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <label for="billing_notes" class="block mb-2 text-sm font-bold text-gray-700">Notes</label>
                            <textarea id="billing_notes" name="billing_notes"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">{{ old('billing_notes', $payment->billing_notes) }}</textarea>
                            @error('billing_notes')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>



                        <button type="submit"
                            class="col-span-2 px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Update</button>
                    </form>
                </div>
            </div>
        @endforeach
    @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: 'Amount',
                                name: 'Amount'
                            },
                            {
                                data: 'electric_amount',
                                name: 'electric_amount'
                            },
                            {
                                data: 'water_amount',
                                name: 'water_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 range1Table = initializeDataTable('#paymentsRange1Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange1Table");
                var range2Table = initializeDataTable('#paymentsRange2Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange2Table");
                var range3Table = initializeDataTable('#paymentsRange3Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange3Table");
                var range4Table = initializeDataTable('#paymentsRange4Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange4Table");
                var range5Table = initializeDataTable('#paymentsRange5Table',
                    "{{ url('Alllpaymentlist') }}?table=paymentsRange5Table");

                // Button click handlers to toggle visibility of tables
                $('#range1Btn').on('click', function() {
                    $('#range1TableContainer').removeClass('hidden');
                    $('#range2TableContainer, #range3TableContainer, #range4TableContainer, #range5TableContainer')
                        .addClass('hidden');
                });

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

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

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

                $('#range5Btn').on('click', function() {
                    $('#range5TableContainer').removeClass('hidden');
                    $('#range1TableContainer, #range2TableContainer, #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
                }
            });
        </script>

        <div id="addItemModal"
            class="fixed inset-0 flex items-center justify-center hidden overflow-auto bg-gray-500 bg-opacity-75">
            <div class="w-full h-auto max-h-screen bg-white rounded-lg shadow-lg md:w-1/2">

                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Add Payment</h5>
                    <button onclick="closeModal('addItemModal')" class="text-white">&times;</button>
                </div>
                <form method="POST" action="{{ url('/newpayments') }}" class="">
                    @csrf

                    <div class="col-span-1 p-3">
                        <label for="search_payment" class="block mb-2 text-sm font-bold text-gray-700">Soa No:</label>
                        <input type="text" id="search_payment"
                            class="w-full py-1 mb-2 border-2 border-gray-300 rounded-md shadow-sm"
                            placeholder="Search...">
                        <div class="relative">
                            <select id="payment_id" name="payment_id"
                                class="absolute z-10 hidden w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                size="5" required>
                                <option value="">Select Client</option>
                                @foreach ($payment1 as $payment)
                                    <option value="{{ $payment->payment_id }}">Billing No.{{ $payment->payment_id }},
                                        Renter: {{ $payment->lease->client->owners_name }}, Billing Date:
                                        {{ date('F j, Y', strtotime($payment->payment_date)) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <script>
                        document.getElementById('search_payment').addEventListener('focus', function() {
                            document.getElementById('payment_id').classList.remove('hidden');
                        });

                        document.getElementById('search_payment').addEventListener('blur', function() {
                            setTimeout(function() {
                                document.getElementById('payment_id').classList.add('hidden');
                            }, 200);
                        });

                        document.getElementById('search_payment').addEventListener('input', function() {
                            var searchValue = this.value.toLowerCase();
                            var select = document.getElementById('payment_id');
                            var options = select.options;
                            var found = false;

                            for (var i = 0; i < options.length; i++) {
                                var optionText = options[i].text.toLowerCase();
                                if (optionText.includes(searchValue)) {
                                    options[i].style.display = '';
                                    found = true;
                                } else {
                                    options[i].style.display = 'none';
                                }
                            }

                            select.size = found ? options.length : 1;
                        });

                        document.getElementById('payment_id').addEventListener('change', function() {
                            var selectedOption = this.options[this.selectedIndex];
                            document.getElementById('search_payment').value = selectedOption.text;
                            this.classList.add('hidden');
                        });
                    </script>




                    <div class="p-4 overflow-x-auto bg-white border border-gray-300 rounded shadow-md">
                        <div class="grid grid-cols-2 ">
                            <table class="min-w-full text-sm divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th
                                            class="px-3 py-2 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                            Outstanding Balance</th>
                                        <th
                                            class="px-3 py-2 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200 ">
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Tenant Name</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="ownersName" name="ownersName"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Property Name</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="propertyName" name="propertyName"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Unit Name</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="unitName" name="unitName"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Advance Payment</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="advancepayment" name="advance_payment"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Rent Amount</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="rentalAmount" name="rentalAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Rental Penalty</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="penaltyAmount" name="penaltyAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Vat Amount</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="vatAmount" name="vatAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">With Holding Tax</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="withholdingTaxAmount" name="withholdingTaxAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Total Rental Amount</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="rentaltotalAmount" name="rentalAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" required
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Water Bill Amount</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="waterAmount" name="waterAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Electric Bill Amount</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="electricAmount" name="electricAmount"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Billing Date</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="billing_date" name="billing_date"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Due Date</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="due_date" name="due_date"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 font-medium text-gray-900">Additional Fees</td>
                                        <td class="px-3 py-2">
                                            <input type="number" id="additionalfees" name="additionalfees"
                                                class="w-full px-2 py-1 border-gray-300 rounded-md shadow-sm" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 text-xl font-bold text-gray-900">Total</td>
                                        <td class="px-3 py-2">
                                            <input type="text" id="grandtotal" name="grandtotal"
                                                class="w-full px-2 py-1 font-bold border border-gray-300 rounded-md shadow-sm"
                                                readonly>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="overflow-x-auto bg-white rounded-lg shadow-lg">
                                <table class="min-w-full divide-y divide-gray-300">
                                    <thead class="bg-gray-100">
                                        <tr>
                                            <th class="px-4 py-2 text-sm font-medium text-left text-gray-700">Payment</th>
                                            <th class="px-4 py-2 text-sm font-medium text-left text-gray-700"></th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Rental Amount</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="rental_amount" name="rental_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                                    oninput="limitInput(this, 'rentaltotalAmount')">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Water Bill Amount</td>
                                            <td class="px-4 py-2">
                                                <input type="number" id="waterbill_amount" name="waterbill_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                                    oninput="limitInput(this, 'waterAmount')">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Electric Bill Amount
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="number" id="electricbill_amount" name="electricbill_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                                    oninput="limitInput(this, 'electricAmount')">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Additional Fees</td>
                                            <td class="px-4 py-2">
                                                <input type="number" id="additionalfees_amount"
                                                    name="additionalfees_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                                    oninput="limitInput(this, 'additionalfees')">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Advance Payment</td>
                                            <td class="px-4 py-2">
                                                <input type="number" id="advance_payment_amount"
                                                    name="advance_payment_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Payment Method</td>
                                            <td class="px-4 py-2">
                                                <select id="payment_method" name="payment_method"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm"
                                                    required onchange="togglePaymentFields()">
                                                    <option value="" disabled selected>Select a payment method
                                                    </option>
                                                    <option value="Cash">Cash</option>
                                                    <option value="Check">Check</option>
                                                    <option value="PDC">PDC</option>
                                                    <option value="E-Wallet">E-Wallet</option>
                                                    <option value="Online Transfer">Online Transfer</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr id="bankInput" class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Bank Name</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="bank" name="bank"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <!-- Check Number Input -->
                                        <tr id="checkNoInput" class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Check No.</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="check_no" name="check_no"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <!-- Amount Input -->
                                        <tr id="amountInputRow" class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Check Amount</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="check_amount" name="check_amount"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <!-- Date Input -->

                                        <!-- Name Input -->
                                        <tr id="nameInputRow" class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Cheque Name</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="cheque_name" name="cheque_name"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <!-- Voucher Number Input -->
                                        <tr id="voucherNumberInputRow"
                                            class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Voucher #</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="voucher_number" name="voucher_number"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <!-- Deposit Date Input -->
                                        <tr id="depositDateInputRow"
                                            class="hidden transition-all duration-300 ease-in-out">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700"> Check Date</td>
                                            <td class="px-4 py-2">
                                                <input type="date" id="check_date" name="check_date"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>
                                        <tr class="transition-all duration-300 ease-in-out ">
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Date</td>
                                            <td class="px-4 py-2">
                                                <input type="date" id="date_of_payment" name="date_of_payment"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Remarks</td>
                                            <td class="px-4 py-2">
                                                <input type="text" id="remarks" name="remarks"
                                                    class="w-full py-1 border-2 border-gray-300 rounded-md shadow-sm">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 text-sm font-medium text-gray-700">Notes</td>
                                            <td class="px-4 py-2">
                                                <textarea id="notes" name="notes" class="w-full h-20 py-1 border-2 border-gray-300 rounded-md shadow-sm"></textarea>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-span-2 p-10 text-center">
                            <button type="submit"
                                class="px-4 py-2 mt-4 text-white bg-blue-500 rounded w-72 hover:bg-blue-700">Save</button>
                        </div>
                </form>

            </div>






        </div>

        <script>
            function togglePaymentFields() {
                const paymentMethod = document.getElementById('payment_method').value;
                const bankInput = document.getElementById('bankInput');
                const checkNoInput = document.getElementById('checkNoInput');
                const amountInputRow = document.getElementById('amountInputRow');

                const nameInputRow = document.getElementById('nameInputRow');
                const voucherNumberInputRow = document.getElementById('voucherNumberInputRow');
                const depositDateInputRow = document.getElementById('depositDateInputRow');

                if (paymentMethod === 'Check' || paymentMethod === 'PDC') {
                    // Show relevant fields
                    bankInput.classList.remove('hidden');
                    checkNoInput.classList.remove('hidden');
                    amountInputRow.classList.remove('hidden');

                    nameInputRow.classList.remove('hidden');
                    voucherNumberInputRow.classList.remove('hidden');
                    depositDateInputRow.classList.remove('hidden');
                } else {
                    // Hide all fields
                    bankInput.classList.add('hidden');
                    checkNoInput.classList.add('hidden');
                    amountInputRow.classList.add('hidden');

                    nameInputRow.classList.add('hidden');
                    voucherNumberInputRow.classList.add('hidden');
                    depositDateInputRow.classList.add('hidden');
                }
            }

            function limitInput(input, limitId) {
                const limitValue = parseFloat(document.getElementById(limitId).value) || 0;

                if (parseFloat(input.value) > limitValue) {
                    input.value = limitValue; // Reset to the limit
                }
            }
        </script>
        <script>
            document.getElementById('payment_id').addEventListener('change', function() {
                var paymentId = this.value;

                if (paymentId) {
                    fetch(`/Hermanas/public/get-payment-amount/${paymentId}`)
                        .then(response => response.json())
                        .then(data => {
                            // Format dates

                            document.getElementById('grandtotal').value = data.grandtotal;
                            document.getElementById('vatAmount').value = data.vatAmount;
                            document.getElementById('withholdingTaxAmount').value = data.withholdingTaxAmount;


                            document.getElementById('billing_date').value = formatDate(data.billingdate);
                            document.getElementById('due_date').value = formatDate(data.dueDate);

                            // Update fields
                            document.getElementById('rentaltotalAmount').value = data.adjustedPaymentAmount;
                            document.getElementById('rentalAmount').value = data.paymentAmount;
                            document.getElementById('penaltyAmount').value = data.penaltyAmount;
                            document.getElementById('waterAmount').value = data.waterAmount;
                            document.getElementById('electricAmount').value = data.electricAmount;
                            document.getElementById('additionalfees').value = data.additionalFeesAmount;
                            document.getElementById('ownersName').value = data.client;
                            document.getElementById('propertyName').value = data.property;
                            document.getElementById('unitName').value = data.unit;
                            document.getElementById('advancepayment').value = data.advancePayment;
                        })
                        .catch(error => console.error('Error:', error));
                } else {
                    // Clear all fields
                    document.getElementById('grandtotal').value = '';
                    document.getElementById('vatAmount').value = '';
                    document.getElementById('withholdingTaxAmount').value = '';
                    document.getElementById('rentaltotalAmount').value = '';
                    document.getElementById('penaltyAmount').value = '';
                    document.getElementById('rentalAmount').value = '';
                    document.getElementById('waterAmount').value = '';
                    document.getElementById('electricAmount').value = '';
                    document.getElementById('additionalfees').value = '';
                    document.getElementById('billing_date').value = '';
                    document.getElementById('due_date').value = '';
                    document.getElementById('ownersName').value = '';
                    document.getElementById('propertyName').value = '';
                    document.getElementById('unitName').value = '';
                    document.getElementById('advance_payment').value = '';
                }
            });

            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