@extends('layouts.sidebar')

@section('content')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }

            .print-content,
            .print-content * {
                visibility: visible;
                font-size: 10px;
            }

            .print-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                height: 350mm;
                padding: 10mm;
                box-sizing: border-box;
            }

            .print-content table td,
            .print-content table th {
                padding: 2px;
            }
        }
    </style>
    @php
        use App\Models\AccountChannel;

        // Get all AccountChannels with their related properties
        $accountChannels = AccountChannel::with('property')->where('account_id', request('account_number'))->get();

        // Extract the property IDs safely from the related models
        $propertyIds = $accountChannels
            ->pluck('property')
            ->filter() // remove nulls
            ->pluck('id') // get the actual property IDs
            ->all();

        $startDate = request('start_date');
        $endDate = request('end_date');
    @endphp


    <div class="px-4 py-8 ">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h1 class="mb-4 text-2xl font-extrabold">Electric Report</h1>
            </div>
            <div class="gap-2">
                <button onclick="openModal('addItemModal')"
                    class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Add
                    Electric
                    Bill</button>
                @php
                    $queryParams = http_build_query([
                        'property_id' => $propertyIds,
                        'start_date' => $startDate,
                        'end_date' => $endDate,
                    ]);
                @endphp

                <a href="{{ url('electricbilloutput') . '?' . $queryParams }}"
                    class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                    Electric Bill Statement
                </a>
            </div>


        </div>
        @php

            $properties = AccountChannel::with('property')->where('account_id', request('account_number'))->get();
        @endphp

        <p class="text-center">
            @foreach ($properties as $prop)
                {{ $prop->property->property_name ?? 'No Property' }}<br>
            @endforeach
        </p>

        <!-- Filter Form -->
        <div class="container w-full mx-auto rounded-lg shadow-sm bg-gray-50">





        </div>

        <div class="print-content">
            <div class="col-span-2 p-4 rounded-lg shadow-sm bg-gray-50">
                <!-- Display Selected Filter Criteria -->
                @if (request('month') && request('year'))
                    <div class="p-4 mb-6 bg-gray-100 rounded-lg">
                        <h2 class="mb-2 text-lg font-semibold">Selected Filter Criteria</h2>
                        <p class="text-sm text-gray-700">Month:
                            {{ \DateTime::createFromFormat('!m', request('month'))->format('F') }}</p>
                        <p class="text-sm text-gray-700">Year: {{ request('year') }}</p>
                    </div>
                @endif
                <div class="flex items-center justify-center w-full gap-10 flex-col-1 md:flex-row">
                    <div>

                        <div class="grid grid-cols-1 gap-3 mb-6 md:grid-cols-4">
                            <div class="hidden mb-4">
                                <label for="start_date" class="block mb-2 text-sm font-bold text-gray-700">Start
                                    Date</label>
                                <input type="date" id="start_date" name="start_date"
                                    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"
                                    value="{{ request('start_date') }}">
                            </div>

                            <div class="hidden mb-4">
                                <label for="end_date" class="block mb-2 text-sm font-bold text-gray-700">End
                                    Date</label>
                                <input type="date" id="end_date" name="end_date"
                                    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"
                                    value="{{ request('end_date') }}">
                            </div>


                        </div>
                        <div class="flex items-center justify-center gap-10 mb-4">
                            <label for="currentBill" class="block text-sm font-medium text-gray-700">Current Bill from
                                Davao
                                Light:</label>
                            <input type="number" id="currentBill" name="bill_amount"
                                value="{{ request('billing_amount') }}"
                                class="block w-1/2 h-10 mt-1 border border-black rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                step="0.01" oninput="calculateDifference()" value="">

                        </div>

                    </div>

                    <div>
                        <form action="{{ route('export.electric.report') }}" method="GET">
                            <div class="hidden">
                                <div class="mb-4">
                                    <label for="start_date" class="block text-gray-700">Start Date</label>
                                    <input type="date" name="start_date" id="start_date"
                                        class="block w-full mt-1 form-input" required value="{{ request('start_date') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="end_date" class="block text-gray-700">End Date</label>
                                    <input type="date" name="end_date" id="end_date"
                                        class="block w-full mt-1 form-input" required value="{{ request('end_date') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="accountId" class="block text-gray-700">account_id</label>
                                    <input type="number" name="accountId" id="accountId"
                                        class="block w-full mt-1 form-input" value="{{ request('account_number') }}">
                                </div>

                                <div class="mb-4">
                                    <label for="current_bill" class="block text-gray-700">Current Bill</label>
                                    <input type="number" step="0.01" name="current_bill" id="current_bill"
                                        value="{{ request('billing_amount') }}" class="block w-full mt-1 form-input"
                                        required value="">
                                </div>
                            </div>


                            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Export to
                                Excel</button>
                        </form>
                    </div>

                </div>

                <script>
                    // Function to copy the value from currentBill to current_bill
                    function copyToCurrentBill() {
                        // Get the value from the currentBill input
                        let currentBillValue = document.getElementById('currentBill').value;

                        // Set the value to the current_bill input
                        document.getElementById('current_bill').value = currentBillValue;
                    }
                </script>
                <div class="overflow-x-auto">
                    <table id="electric-bill-table"
                        class="w-full bg-white border border-collapse border-gray-300 divide-y divide-gray-200">

                        <thead class="text-center text-red-500">
                            <tr>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Action</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Status</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Unit</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Renters</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Previous
                                    Reading
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Present
                                    Reading
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Consumption
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Rate (not
                                    Constant)
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable
                                    Before
                                    Additional
                                    Consumption</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable
                                    Before
                                    Additional
                                    Consumption / Total Collection</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Percentage x
                                    Difference
                                    Additional Consumption/Losses</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Total Amount
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable</th>
                            </tr>
                        </thead>
                        <tbody id="table-body" class="text-center bg-white divide-y divide-gray-200">

                            @foreach ($payments as $electricbill)
                                <tr>
                                    <td>
                                        <div class="flex items-center justify-center gap-2">
                                            @if ($electricbill->is_approve == null)
                                                <div> <button
                                                        onclick="openModaldelete('deleteModal{{ $electricbill->electricbill_id }}')"
                                                        class="px-2 py-1 font-bold text-white bg-red-500 rounded hover:bg-red-700">
                                                        <i class="bx bx-trash"></i>
                                                    </button>
                                                </div>

                                                <div> <a href="{{ route('electricbills.edit', $electricbill->electricbill_id) }}"
                                                        class="px-2 py-1 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                                        <i class="bx bx-edit"></i>
                                                    </a>
                                                </div>
                                            @else
                                                {{ $electricbill->payment_id ?? 'N/A' }}
                                            @endif
                                        </div>


                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">

                                        @if ($electricbill->is_approve == null)
                                            Pending
                                        @else
                                            Approved
                                        @endif
                                    </td>

                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->billing->lease->unit->unit_name ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->billing->lease->client->owners_name }}({{ $$electricbill->billing->lease->client->business_name ?? 'N/A' }})
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->previous_reading ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->present_reading ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->consumption ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->rate ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ number_format($electricbill->amount, 2) ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        @if ($totalElectricAmountpaid > 0)
                                            {{ number_format(($electricbill->amount / $totalElectricAmountpaid) * 100, 2) }}%
                                        @else
                                            0.00%
                                        @endif
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 percentage-difference">N/A</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 total-amount">N/A</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 payable">N/A</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $electricbill->start_date ?? 'N/A' }}
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                        <tfoot class="text-center bg-gray-100">
                            <tr class="font-semibold bg-gray-100">
                                <td colspan="8" class="px-4 py-2 text-sm text-right">Total:</td>

                                <td class="px-4 py-2 text-sm text-gray-800">{{ $totalElectricAmountpaid }}</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-collection-percentage">0.00%
                                </td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-losses">0.00</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-amount">0.00</td>
                                <td class="px-4 py-2 text-sm text-gray-800" id="total-payable">0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            @php
                $hasPending = $payments->contains(function ($electricbill) {
                    return is_null($electricbill->is_approve);
                });
            @endphp

            @if ($hasPending)
                <div class="flex items-center justify-center">
                    <!-- Trigger Button -->
                    <button onclick="document.getElementById('approveAllModal').classList.remove('hidden')"
                        class="mb-4 px-4 py-2 font-bold text-white bg-green-600 rounded hover:bg-green-700">
                        Approve All Displayed
                    </button>
                </div>

                <!-- Modal -->
                <div id="approveAllModal"
                    class="fixed inset-0 z-50 hidden bg-black bg-opacity-50 flex items-center justify-center">
                    <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                        <h2 class="text-lg font-bold mb-4">Confirm Approval</h2>
                        <p class="mb-6">Are you sure you want to approve all displayed electric bills?</p>

                        <div class="flex justify-end gap-2">
                            <button onclick="document.getElementById('approveAllModal').classList.add('hidden')"
                                class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
                                Cancel
                            </button>

                            <!-- The actual form inside the modal -->
                            <form method="POST" action="{{ route('electricbills.approveAll') }}">
                                @csrf
                                @foreach ($payments as $electricbill)
                                    <input type="hidden" name="electricbill_ids[]"
                                        value="{{ $electricbill->electricbill_id }}">
                                @endforeach

                                <button type="submit"
                                    class="px-4 py-2 font-bold text-white bg-green-600 rounded hover:bg-green-700">
                                    Yes, Approve All
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endif

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const openModalBtn = document.getElementById('openApproveAllModal');
                    const modal = document.getElementById('approveAllModal');
                    const cancelBtn = document.getElementById('cancelApproveAllModal');

                    if (openModalBtn && modal && cancelBtn) {
                        openModalBtn.addEventListener('click', () => {
                            modal.classList.remove('hidden');
                        });

                        cancelBtn.addEventListener('click', () => {
                            modal.classList.add('hidden');
                        });
                    }
                });
            </script>





            @foreach ($bill as $bill)
                <div id="deleteModal{{ $bill->electricbill_id }}"
                    class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                    <!-- Modal dialog -->
                    <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                            <h5 class="font-bold text-white">Confirm Delete</h5>
                            <button onclick="closeModaldelete('deleteModal{{ $bill->electricbill_id }}')"
                                class="text-white">&times;</button>
                        </div>

                        <!-- Modal body -->
                        <div class="px-4 py-4">
                            <p>Are you sure you want to delete this bill?</p>
                        </div>

                        <!-- Modal footer -->
                        <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                            <button onclick="closeModaldelete('deleteModal{{ $bill->electricbill_id }}')"
                                class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                            <!-- Form for delete -->
                            <form id="deleteForm{{ $bill->electricbill_id }}"
                                action="{{ route('delete.electric', $bill->electricbill_id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach


            <!-- Summary Section -->
            <div class="p-4 mt-6 rounded-lg shadow-sm bg-gray-50">
                <h2 class="text-lg font-semibold">Summary</h2>

                <p id="difference" class="text-lg font-semibold">Difference: 0.00</p>
            </div>
        </div>
        <div class="mb-4 p-3 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 rounded">
            <strong>Note:</strong> Electric bills that are <span class="font-semibold">not approved</span> (status ≠ 1 or
            is_approve ≠ 1) will <span class="font-semibold">not be displayed to clients</span> on their end.
        </div>

        <script>
            function calculateDifference() {
                const currentBill = parseFloat(document.getElementById('currentBill').value) || 0;
                const totalElectricAmount = @json($totalElectricAmount); // Pass the PHP variable to JavaScript

                const difference = currentBill - totalElectricAmount;
                document.getElementById('difference').textContent = `Difference: ${difference.toFixed(2)}`;

                let totalAmountPaid = 0;
                let totalPercentage = 0;
                let totalLosses = 0;
                let totalAmount = 0;
                let totalPayable = 0;
                copyToCurrentBill();


                // Calculate the percentage x difference, total amount, and total collection percentage for each row
                document.querySelectorAll('#table-body tr').forEach(row => {
                    if (row.querySelector('td:nth-child(1)') === null) return; // Skip the total row

                    const amountCell = row.querySelector('td:nth-child(9)');
                    const percentageCell = row.querySelector('td:nth-child(10)');
                    const totalAmountCell = row.querySelector('.total-amount');
                    const percentageDifferenceCell = row.querySelector('.percentage-difference');
                    const payableCell = row.querySelector('.payable');

                    const amount = parseFloat(amountCell.textContent.replace(/,/g, '')) || 0;
                    const percentage = parseFloat(percentageCell.textContent.replace('%', '').replace(/,/g, '')) || 0;

                    // Calculate the percentage difference
                    const percentageDifference = (percentage / 100) * difference;
                    percentageDifferenceCell.textContent = percentageDifference.toFixed(2);

                    // Calculate the total amount
                    const totalRowAmount = amount + percentageDifference;
                    totalAmountCell.textContent = totalRowAmount.toFixed(2);

                    // Round the payable to nearest integer but still display with two decimal places
                    const roundedPayable = Math.ceil(totalRowAmount);
                    payableCell.textContent = roundedPayable.toFixed(2); // Display with two decimals

                    // Accumulate totals
                    totalAmountPaid += amount;
                    totalPercentage += percentage;
                    totalLosses += percentageDifference;
                    totalAmount += totalRowAmount;
                    totalPayable += roundedPayable;
                });

                // Update total collection percentage
                const totalCollectionPercentageCell = document.getElementById('total-collection-percentage');
                totalCollectionPercentageCell.textContent = totalPercentage.toFixed(0) + '%'; // Display as integer percentage

                // Update totals in the footer
                document.getElementById('total-losses').textContent = totalLosses.toFixed(2);
                document.getElementById('total-amount').textContent = totalAmount.toFixed(2);
                document.getElementById('total-payable').textContent = totalPayable.toFixed(2);
            }
        </script>
        <script>
            $(document).ready(function() {
                $('#electric-bill-form').submit(function(e) {
                    e.preventDefault();
                    var formData = $(this).serialize();

                    $.ajax({
                        url: '{{ route('elect.add') }}',
                        method: 'POST',
                        data: formData,
                        success: function(response) {
                            $('#successMessage').text(response.message);

                            location.reload();
                        },
                        error: function(xhr) {
                            console.log('Error:', xhr.responseText);
                            alert('Failed to add electric bill. Please try again.');
                        }
                    });
                });

                $('#closeSuccessModal').on('click', function() {
                    $('#successModal').addClass('hidden');
                });
            });
        </script>



        <script>
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
            }

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

        <script>
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
            }

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

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

            // Function to close a modal
            function closeModaldelete(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        </script>

        <div id="addItemModal" class="absolute inset-0 z-50 flex items-start justify-start hidden ">
            <div class="w-[25rem] h-[40rem] overflow-y-auto bg-white rounded-lg mt-10 border-2 border-black ml-10">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Add eletriuc New Bill</h5>
                    <button onclick="closeModal('addItemModal')" class="text-white">&times;</button>
                </div>

                <form id="electric-bill-form" class="p-6 bg-white rounded shadow-md ">
                    @csrf







                    <div class="mb-4">
                        <label for="property_id" class="block mb-2 text-sm font-bold text-gray-700">Select
                            Property:</label>
                        <select id="property_id" name="property_id"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow-sm appearance-none focus:outline-none focus:shadow-outline">
                            <option value="">Select Property</option>
                            @foreach ($property as $prop)
                                <option value="{{ $prop->id }}">{{ $prop->property_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Billing Selection -->
                    <div class="mb-4">
                        <label for="payment_id" class="block mb-2 text-sm font-bold text-gray-700">Select
                            Billing:</label>
                        <select id="payment_id" name="payment_id"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow-sm appearance-none focus:outline-none focus:shadow-outline"
                            required>
                            <option value="">Select Billing</option>
                            <!-- Options will be dynamically populated by JavaScript based on selected property -->
                        </select>
                    </div>

                    <!-- Add Select2 CSS -->
                    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
                        rel="stylesheet" />
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

                    <script>
                        $(document).ready(function() {
                            $('#property_id').change(function() {
                                let propertyId = $(this).val();

                                // Log propertyId for debugging
                                console.log('Selected Property ID:', propertyId);

                                // Proceed only if propertyId is not empty
                                if (propertyId) {
                                    $.ajax({
                                        url: '{{ route('fetchBillings') }}',
                                        method: 'GET',
                                        data: {
                                            property_id: propertyId
                                        },
                                        success: function(data) {
                                            let options = '<option value="">Select Billing</option>';

                                            $.each(data, function(index, billing) {
                                                // Format the billing date as range
                                                let startDate = moment(billing.payment_date);
                                                let endDate = moment(billing.payment_date).add(1,
                                                    'months');
                                                let formattedDate =
                                                    `${startDate.format('MMM-YYYY')} to ${endDate.format('MMM-YYYY')}`;

                                                // Store all data as JSON string for access in template
                                                options += `<option value="${billing.payment_id}" 
                                                 data-payment-id="${billing.payment_id}"
                          data-billing='${JSON.stringify(billing)}' 
                          data-formatted-date="${formattedDate}">
                          ${formattedDate} - ${billing.owners_name}
                    </option>`;
                                            });

                                            $('#payment_id').html(options).select2({
                                                placeholder: 'Select Billing',
                                                allowClear: true,
                                                width: '100%',
                                                templateResult: function(data) {
                                                    if (!data.id) return data.text;

                                                    // Parse stored data
                                                    const billing = $(data.element).data('billing');
                                                    const formattedDate = $(data.element).data(
                                                        'formatted-date');

                                                    return $(`
                <div>
                    <strong>${formattedDate}</strong><br>
                    <span>Renter: ${billing.owners_name}</span><br>
                    <span>Location: ${billing.property_name} ${billing.unit_name}</span>
                </div>
            `);
                                                },
                                                templateSelection: function(data) {
                                                    if (!data.id) return data.text;

                                                    const formattedDate = $(data.element).data(
                                                        'formatted-date');
                                                    const billing = $(data.element).data('billing');

                                                    return `${formattedDate} - ${billing.owners_name}`;
                                                }
                                            });
                                        },
                                        error: function(xhr) {
                                            // Log error details
                                            console.log('AJAX Error:', xhr.responseText);
                                        }
                                    });
                                } else {
                                    // Handle case where propertyId is empty
                                    $('#payment_id').html('<option value="">Select Billing</option>').select2({
                                        placeholder: 'Select Billing',
                                        allowClear: true,
                                        width: '100%',
                                    });
                                }
                            }).trigger('change');

                            $('#payment_id').change(function() {
                                let paymentId = $(this).val();

                                // Retrieve payment_id (already selected)
                                let selectedPaymentId = $('#payment_id option:selected').data('payment-id');

                                // Log the payment_id for debugging
                                console.log('Selected Payment ID:', selectedPaymentId);

                                // Proceed only if selectedPaymentId is not empty
                                if (selectedPaymentId) {
                                    // Make AJAX request to get the lease_id from the selected payment_id
                                    $.ajax({
                                        url: '{{ route('fetchLeaseIdFromPayment') }}',
                                        method: 'GET',
                                        data: {
                                            payment_id: selectedPaymentId
                                        },
                                        success: function(data) {
                                            if (data && data.lease_id) {
                                                // Get lease_id from the payment record
                                                let leaseId = data.lease_id;
                                                console.log('Lease ID:', leaseId);

                                                // Now make a request to fetch the latest previous reading for the lease
                                                $.ajax({
                                                    url: '{{ route('fetchLatestPreviousReading') }}',
                                                    method: 'GET',
                                                    data: {
                                                        lease_id: leaseId
                                                    },
                                                    success: function(data) {
                                                        if (data && data.present_reading !== null &&
                                                            data.present_reading !== undefined) {
                                                            $('#previous_reading').val(data
                                                                .present_reading);
                                                            $('#reading-message').text('');
                                                        } else {
                                                            $('#previous_reading').val('');
                                                            $('#reading-message').text(
                                                                'No previous reading available.'
                                                            );
                                                        }
                                                    },
                                                    error: function(xhr) {
                                                        // Log error details
                                                        console.log('AJAX Error:', xhr
                                                            .responseText);
                                                    }
                                                });
                                            } else {
                                                $('#previous_reading').val(
                                                    'No lease found for this payment.');
                                            }
                                        },
                                        error: function(xhr) {
                                            // Log error details
                                            console.log('AJAX Error:', xhr.responseText);
                                        }
                                    });
                                }
                            });

                            $('#payment_id').select2({
                                placeholder: 'Select Billing',
                                allowClear: true,
                                width: '100%',
                            });
                        });
                    </script>

                    <div class="grid grid-cols-2 gap-10">
                        <div>

                            <div class="hidden mb-4">
                                <label for="location" class="block mb-2 text-sm font-bold text-gray-700">Location
                                </label>
                                <input required type="text" id="location" name="location"
                                    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"
                                    placeholder="Enter property name" value="test">

                            </div>


                            <div class="mb-4">
                                <label for="previous_reading" class="block mb-2 text-sm font-bold text-gray-700">Previous
                                    Reading</label>
                                <input required type="number" id="previous_reading" name="previous_reading"
                                    step="any"
                                    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"
                                    placeholder="Enter previous reading" oninput="calculateAmount()">
                                <small id="reading-message" class="text-muted" style="color: red;"></small>
                            </div>
                            <div class="mb-4">
                                <label for="present_reading" class="block mb-2 text-sm font-bold text-gray-700">Present
                                    Reading</label>
                                <input required type="number" id="present_reading" name="present_reading"
                                    step="any"
                                    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"
                                    placeholder="Enter present reading" oninput="calculateAmount()">
                            </div>
                            <div class="mb-4">
                                <label for="consumption"
                                    class="block mb-2 text-sm font-bold text-gray-700">Consumption</label>
                                <input required type="text" id="consumption" name="consumption"
                                    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"
                                    placeholder="Consumption" readonly>
                            </div>

                            <div class="mb-4">
                                <label for="rate" class="block mb-2 text-sm font-bold text-gray-700">Rate</label>
                                <input required type="number" id="rate" name="rate" step="any"
                                    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"
                                    placeholder="Enter rate" oninput="calculateAmount()">
                            </div>

                        </div>
                        <div>

                            <!-- Amount -->
                            <div class="mb-4">
                                <label for="amount" class="block mb-2 text-sm font-bold text-gray-700">Amount</label>
                                <input required type="text" id="amount" name="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"
                                    placeholder="Enter amount" readonly>
                            </div>


                            <script>
                                function calculateAmount() {
                                    // Get values from the inputs
                                    const previousReading = parseFloat(document.getElementById('previous_reading').value) || 0;
                                    const presentReading = parseFloat(document.getElementById('present_reading').value) || 0;
                                    const rate = parseFloat(document.getElementById('rate').value) || 0;

                                    // Calculate consumption as the difference
                                    const consumption = presentReading - previousReading;
                                    document.getElementById('consumption').value = consumption.toFixed(2);

                                    // Calculate amount and round off to the nearest whole number
                                    const amount = Math.round(consumption * rate); // Rounds to the nearest whole number
                                    document.getElementById('amount').value = amount; // No need for toFixed here
                                }
                            </script>



                            <!-- Start Date -->
                            <div class="mb-4">
                                <label for="start-date" class="block mb-2 text-sm font-bold text-gray-700">Start
                                    Date</label>
                                <input required type="date" id="start-date" name="start_date"
                                    value="{{ request('start_date') }}"
                                    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">
                            </div>

                            <!-- End Date -->
                            <div class="mb-4">
                                <label for="end-date" class="block mb-2 text-sm font-bold text-gray-700">End
                                    Date</label>
                                <input required type="date" id="end-date" name="end_date"
                                    value="{{ request('end_date') }}"
                                    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">
                            </div>

                        </div>


                    </div>

                    <!-- City, State, Zip -->


                    <hr class="my-4">

                    <button type="submit"
                        class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Save
                    </button>
                </form>
            </div>
        </div>
        <div id="successModal" class="fixed inset-0 z-50 flex items-start justify-center hidden bg-black bg-opacity-50">
            <div class="w-full max-w-sm p-6 mt-16 text-center bg-white rounded-lg shadow-lg">
                <h2 class="text-lg font-bold text-green-600">Success!</h2>
                <p id="successMessage">Electric Bill Inserted Successfully</p>
                <button id="closeSuccessModal"
                    class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600">Close</button>
            </div>
        </div>
    @endsection