@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 class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="openModal('addItemModal')">Add New Water Bill</button>
                @php
                    $queryParams = http_build_query([
                        'property_id' => $propertyIds,
                        'start_date' => $startDate,
                        'end_date' => $endDate,
                    ]);
                @endphp

                <a href="{{ url('waterbilloutput') . '?' . $queryParams }}"
                    class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                    Water 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>
        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif
        <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>
                        {{-- <form method="POST" action="{{ route('waterbill.store') }}"> --}}
                        @csrf
                        <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 class="hidden mb-4">
                                <label for="property" class="block mb-2 text-sm font-bold text-gray-700">Select
                                    Property</label>
                                <select id="property" name="property_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">
                                    <option value="">All Properties</option>
                                    @foreach ($properties as $property)
                                        <option value="{{ $property->id }}"
                                            {{ request('property') == $property->id ? 'selected' : '' }}>
                                            {{ $property->property_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </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
                                :</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()">


                        </div>

                        </form>

                    </div>
                    <div>
                        <form action="{{ route('export.water.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>
                        <button class="px-4 py-2 text-white bg-blue-500 rounded" onclick="openModal('addItemModal')">
                            Water Bill History</button>
                    </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 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"></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">Percentage
                                    of
                                    Total
                                    Collection</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Percentage x
                                    Difference =
                                    Additonal Consumption</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Total</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">Payable</th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">0-10 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">11-20 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">21-30 </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300 0">31-40
                                </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">41-up </th>
                                <th class="px-4 py-2 text-xs font-medium uppercase border border-gray-300">total</th>
                            </tr>
                        </thead>
                        <tbody id="table-body" class="text-center bg-white divide-y divide-gray-200">
                            @forelse ($payments as $waterbill)
                                @php
                                    // Initialize rate variables
                                    $baseRate = 0;
                                    $bracket1Rate = 0;
                                    $bracket2Rate = 0;
                                    $bracket3Rate = 0;
                                    $bracket4Rate = 0;

                                    // Find the matching rate from the waterRates collection
                                    $rateInfo = $waterRates->firstWhere('name', $waterbill->rate);

                                    if ($rateInfo) {
                                        $baseRate = $rateInfo->{'0_10'}; // Assuming base_rate is the correct field name

                                        $bracket4Rate = $rateInfo->{'41_up'};
                                        $bracket3Rate = $rateInfo->{'31_40'};
                                        $bracket2Rate = $rateInfo->{'21_30'};
                                        $bracket1Rate = $rateInfo->{'11_20'};
                                    }

                                    $amount = 0;
                                    $details = [];

                                    if ($waterbill->consumption <= 10) {
                                        $amount = $baseRate;
                                        $details[] = number_format($baseRate, 2);
                                    } else {
                                        $amount = $baseRate;
                                        $details[] = number_format($baseRate, 2);

                                        if ($waterbill->consumption <= 20) {
                                            $additionalUnits = $waterbill->consumption - 10;
                                            $amount += $additionalUnits * $bracket1Rate;
                                            $details[] = number_format($additionalUnits * $bracket1Rate, 2);
                                        } elseif ($waterbill->consumption <= 30) {
                                            $additionalUnits1 = 10;
                                            $additionalUnits2 = $waterbill->consumption - 20;
                                            $amount +=
                                                $additionalUnits1 * $bracket1Rate + $additionalUnits2 * $bracket2Rate;
                                            $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                            $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                        } elseif ($waterbill->consumption <= 40) {
                                            $additionalUnits1 = 10;
                                            $additionalUnits2 = 10;
                                            $additionalUnits3 = $waterbill->consumption - 30;
                                            $amount +=
                                                $additionalUnits1 * $bracket1Rate +
                                                $additionalUnits2 * $bracket2Rate +
                                                $additionalUnits3 * $bracket3Rate;
                                            $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                            $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                            $details[] = number_format($additionalUnits3 * $bracket3Rate, 2);
                                        } else {
                                            $additionalUnits1 = 10;
                                            $additionalUnits2 = 10;
                                            $additionalUnits3 = 10;
                                            $additionalUnits4 = $waterbill->consumption - 40;
                                            $amount +=
                                                $additionalUnits1 * $bracket1Rate +
                                                $additionalUnits2 * $bracket2Rate +
                                                $additionalUnits3 * $bracket3Rate +
                                                $additionalUnits4 * $bracket4Rate;
                                            $details[] = number_format($additionalUnits1 * $bracket1Rate, 2);
                                            $details[] = number_format($additionalUnits2 * $bracket2Rate, 2);
                                            $details[] = number_format($additionalUnits3 * $bracket3Rate, 2);
                                            $details[] = number_format($additionalUnits4 * $bracket4Rate, 2);
                                        }
                                    }

                                    $totalCollection = $totalWaterAmountpaid ?? 0; // Ensure this is defined somewhere in your code
                                    $percentageOfTotalCollection =
                                        $totalCollection > 0 ? ($amount / $totalCollection) * 100 : 0;
                                @endphp
                                <tr>
                                    <td>
                                        <div class="flex items-center justify-center gap-2">
                                            @if ($waterbill->is_approve == null)
                                                <div> <button
                                                        onclick="openModaldelete('deleteModal{{ $waterbill->waterbill_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('waterbills.edit', $waterbill->waterbill_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
                                                {{ $waterbill->payment_id ?? 'N/A' }}
                                            @endif

                                        </div>


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

                                        @if ($waterbill->is_approve == null)
                                            Pending
                                        @else
                                            Approved
                                        @endif
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 text-nowrap">
                                        {{ $waterbill->billing->lease->unit->unit_name ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 text-nowrap">
                                        {{ $waterbill->billing->lease->client->owners_name ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $waterbill->previous_reading ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $waterbill->present_reading ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ number_format($waterbill->consumption, 2) ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ $waterbill->rate ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        {{ number_format($waterbill->amount, 2) ?? 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300">
                                        @if ($totalWaterAmountpaid > 0)
                                            {{ ($waterbill->amount / $totalWaterAmountpaid) * 100 }}%
                                        @else
                                            0.00%
                                        @endif
                                    </td>
                                    <td
                                        class="px-4 py-2 text-sm text-gray-800 border border-gray-300 percentage-difference">
                                        N/A</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 total-amount">N/A
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 border border-gray-300 payable">N/A</td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300 ">
                                        {{ isset($details[0]) ? $details[0] : 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                        {{ isset($details[1]) ? $details[1] : 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                        {{ isset($details[2]) ? $details[2] : 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                        {{ isset($details[3]) ? $details[3] : 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">
                                        {{ isset($details[4]) ? $details[4] : 'N/A' }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-800 bg-yellow-400 border border-gray-300">



                                        {{ number_format($amount, 2) ?: 'N/A' }}
                                    </td>
                                </tr>

                            @empty
                                <tr>
                                    <td colspan="14" class="px-4 py-2 text-sm text-center text-gray-800">No data
                                        available</td>
                                </tr>
                            @endforelse
                        </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">{{ $totalWaterAmountpaid }}</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>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>
                                <td class="px-4 py-2 text-sm text-gray-800"></td>

                            </tr>
                        </tfoot>
                    </table>
                    @if ($nextStartDate && $nextEndDate)
                        <form method="GET" action="{{ url('water-report') }}">
                            <input type="hidden" name="start_date" value="{{ $nextStartDate }}">
                            <input type="hidden" name="end_date" value="{{ $nextEndDate }}">
                            <button type="submit" class="btn btn-primary">Next</button>
                        </form>
                    @endif
                </div>
            </div>

            @php
                $hasPending = $payments->contains(function ($waterbill) {
                    return is_null($waterbill->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 water 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('waterbills.approveAll') }}">
                                @csrf
                                @foreach ($payments as $waterbill)
                                    <input type="hidden" name="waterbill_ids[]" value="{{ $waterbill->waterbill_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>



            <div class="mt-4">
                {{ $payments->links() }} <!-- This will render the pagination links -->
            </div>
            <!-- 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>

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

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

                let totalAmountPaid = 0;
                let totalPercentage = 0;
                let totalLosses = 0;
                let totalAmount = 0;
                let totalPayable = 0;

                copyToCurrentBill(); // Ensure previous values are copied properly

                document.querySelectorAll('#table-body tr').forEach(row => {
                    if (!row.querySelector('td:nth-child(1)')) return; // Skip empty rows

                    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;

                    totalAmountPaid += amount;
                    totalPercentage += percentage;

                    if (currentBill < totalWaterAmount) {

                        payableCell.textContent = amount.toFixed(2);
                        totalAmountCell.textContent = amount.toFixed(2);
                        totalAmount = totalAmountPaid;
                        totalPayable = totalAmountPaid;
                    } else {

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

                        const totalRowAmount = amount + percentageDifference;
                        totalAmountCell.textContent = totalRowAmount.toFixed(3);

                        const roundedPayable = Math.ceil(totalRowAmount);
                        payableCell.textContent = roundedPayable.toFixed(2);

                        totalLosses += percentageDifference;
                        totalAmount += totalRowAmount;
                        totalPayable += roundedPayable;
                    }
                });

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

                // Update total values 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);
            }

            // Automatically calculate when input changes
            document.getElementById('currentBill').addEventListener('input', calculateDifference);
        </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>

        @foreach ($bill as $bill)
            <div id="deleteModal{{ $bill->waterbill_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->waterbill_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->waterbill_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->waterbill_id }}"
                            action="{{ route('delete.water', $bill->waterbill_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




        <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-[30rem] h-[40rem] overflow-y-auto bg-white ml-10 mt-10 rounded-lg border-2 border-black">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Add New Bill</h5>
                    <button onclick="closeModal('addItemModal')" class="text-white">&times;</button>
                </div>

                <form id="water-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 ($property123 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() {
                            // Handle property selection change
                            $('#property_id').change(function() {
                                let propertyId = $(this).val();

                                console.log('Selected Property ID:', propertyId);

                                // Proceed only if propertyId is not empty
                                if (propertyId) {
                                    $.ajax({
                                        url: '{{ route('fetchBillings1') }}',
                                        method: 'GET',
                                        data: {
                                            property_id: propertyId
                                        },
                                        success: function(data) {
                                            let options = '<option value="">Select Billing</option>';
                                            $.each(data, function(index, billing) {
                                                let formattedDate = moment(billing.payment_date).format(
                                                    'D-MMMM-Y');
                                                options +=
                                                    `<option value="${billing.payment_id}" data-payment-id="${billing.payment_id}">Renter: ${billing.owners_name}, Location: ${billing.property_name} ${billing.unit_name}, Billing Date: ${formattedDate}</option>`;
                                            });

                                            $('#payment_id').html(options).select2({
                                                placeholder: 'Select Billing',
                                                allowClear: true,
                                                width: '100%',
                                            });
                                        },
                                        error: function(xhr) {
                                            console.log('AJAX Error (fetchBillings):', xhr.responseText);
                                        }
                                    });
                                } else {
                                    $('#payment_id').html('<option value="">Select Billing</option>').select2({
                                        placeholder: 'Select Billing',
                                        allowClear: true,
                                        width: '100%',
                                    });
                                }
                            });

                            // Handle payment selection change
                            $('#payment_id').change(function() {
                                let selectedPaymentId = $(this).val();

                                console.log('Selected Payment ID:', selectedPaymentId);

                                // Proceed only if selectedPaymentId is not empty
                                if (selectedPaymentId) {
                                    $.ajax({
                                        url: '{{ route('fetchLeaseIdFromPayment1') }}',
                                        method: 'GET',
                                        data: {
                                            payment_id: selectedPaymentId
                                        },
                                        success: function(data) {
                                            if (data && data.lease_id) {
                                                let leaseId = data.lease_id;
                                                console.log('Lease ID:', leaseId);

                                                // Fetch latest previous reading for the lease
                                                $.ajax({
                                                    url: '{{ route('fetchLatestPreviousReading1') }}',
                                                    method: 'GET',
                                                    data: {
                                                        lease_id: leaseId
                                                    },
                                                    success: function(data) {
                                                        if (data) {
                                                            $('#previous_reading').val(data
                                                                .present_reading);
                                                        } else {
                                                            $('#previous_reading').val(
                                                                'No previous reading available.'
                                                            );
                                                        }
                                                    },
                                                    error: function(xhr) {
                                                        console.log(
                                                            'AJAX Error (fetchLatestPreviousReading):',
                                                            xhr.responseText);
                                                    }
                                                });
                                            } else {
                                                $('#previous_reading').val('No lease found for this payment.');
                                            }
                                        },
                                        error: function(xhr) {
                                            console.log('AJAX Error (fetchLeaseIdFromPayment):', xhr
                                                .responseText);
                                        }
                                    });
                                } else {
                                    $('#previous_reading').val('');
                                }
                            });

                            // Initialize Select2 for billing dropdown
                            $('#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()">
                            </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">Select
                                    Rate</label>
                                <select id="rate" name="rate"
                                    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"
                                    onchange="fetchRateData(this.value)"required>
                                    <option value="">Select Rate</option>
                                    @foreach ($rate as $rate)
                                        <option value="{{ $rate->name }}">{{ $rate->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>


                            <div class="mb-4">
                                <label for="computation" class="block mb-2 text-sm font-bold text-gray-700">Computation
                                    Details</label>
                                <textarea id="computation" name="computation"
                                    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="Computation details" readonly rows="4"></textarea>
                            </div>
                            <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>
                                let currentRate = {}; // Store the rate data

                                function fetchRateData(selectedRate) {
                                    if (selectedRate) {
                                        $.ajax({
                                            url: `/waterrates/rates/${selectedRate}`, // Fetch the rate data
                                            method: 'GET',
                                            success: function(data) {
                                                currentRate = data; // Save the current rate data
                                                calculateAmount(); // Call the calculation after fetching the data
                                            },
                                            error: function() {
                                                alert('Error fetching rate data. Please try again.');
                                            }
                                        });
                                    } else {
                                        currentRate = {}; // Reset if no rate is selected
                                        document.getElementById('amount').value = '';
                                        document.getElementById('computation').value = '';
                                    }
                                }

                                function calculateAmount() {
                                    const previousReading = parseFloat(document.getElementById('previous_reading').value) || 0;
                                    const presentReading = parseFloat(document.getElementById('present_reading').value) || 0;

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

                                    let amount = 0;
                                    let computationDetails = "";

                                    if (currentRate) {
                                        // Use fetched rate values for calculation
                                        const baseRate = parseFloat(currentRate['0_10']) || 0; // Adjust baseRate based on your table structure
                                        const bracket1Rate = parseFloat(currentRate['41_up']) || 0;
                                        const bracket2Rate = parseFloat(currentRate['31_40']) || 0;
                                        const bracket3Rate = parseFloat(currentRate['21_30']) || 0;
                                        const bracket4Rate = parseFloat(currentRate['11_20']) || 0;

                                        amount = calculateBracketAmount(consumption, bracket4Rate, bracket3Rate, bracket2Rate, bracket1Rate,
                                            baseRate, (details) => {
                                                computationDetails = details;
                                            });
                                    }

                                    // Set the calculated amount
                                    document.getElementById('amount').value = amount.toFixed(2);

                                    // Set the computation details
                                    document.getElementById('computation').value = computationDetails;
                                }

                                function calculateBracketAmount(consumption, bracket1Rate, bracket2Rate, bracket3Rate, bracket4Rate, baseRate,
                                    setDetails) {
                                    let amount = 0;
                                    let details = "";

                                    if (consumption <= 10) {
                                        // Apply base rate for the first 10 units
                                        amount = baseRate;
                                        details = `  10 : ${baseRate}`;
                                    } else {
                                        // Apply base rate for the first 10 units
                                        amount = baseRate;
                                        details = ` 10 : ${baseRate}\n`;

                                        // Apply bracket rates for additional consumption
                                        if (consumption <= 20) {
                                            const additionalUnits = consumption - 10;
                                            amount += additionalUnits * bracket1Rate;
                                            details +=
                                                `11-20 units: ${additionalUnits} * ${bracket1Rate} = ${(additionalUnits * bracket1Rate).toFixed(2)}`;
                                        } else if (consumption <= 30) {
                                            const additionalUnits1 = 10; // Units from 11-20
                                            const additionalUnits2 = consumption - 20; // Units from 21-30
                                            amount += (additionalUnits1 * bracket1Rate) + (additionalUnits2 * bracket2Rate);
                                            details +=
                                                `11-20 units: ${additionalUnits1} * ${bracket1Rate} = ${(additionalUnits1 * bracket1Rate).toFixed(2)}\n`;
                                            details +=
                                                `21-30 units: ${additionalUnits2} * ${bracket2Rate} = ${(additionalUnits2 * bracket2Rate).toFixed(2)}`;
                                        } else if (consumption <= 40) {
                                            const additionalUnits1 = 10; // Units from 11-20
                                            const additionalUnits2 = 10; // Units from 21-30
                                            const additionalUnits3 = consumption - 30; // Units from 31-40
                                            amount += (additionalUnits1 * bracket1Rate) + (additionalUnits2 * bracket2Rate) + (additionalUnits3 *
                                                bracket3Rate);
                                            details +=
                                                `11-20 units: ${additionalUnits1} * ${bracket1Rate} = ${(additionalUnits1 * bracket1Rate).toFixed(2)}\n`;
                                            details +=
                                                `21-30 units: ${additionalUnits2} * ${bracket2Rate} = ${(additionalUnits2 * bracket2Rate).toFixed(2)}\n`;
                                            details +=
                                                `31-40 units: ${additionalUnits3} * ${bracket3Rate} = ${(additionalUnits3 * bracket3Rate).toFixed(2)}`;
                                        } else {
                                            const additionalUnits1 = 10; // Units from 11-20
                                            const additionalUnits2 = 10; // Units from 21-30
                                            const additionalUnits3 = 10; // Units from 31-40
                                            const additionalUnits4 = consumption - 40; // Units over 40
                                            amount += (additionalUnits1 * bracket1Rate) + (additionalUnits2 * bracket2Rate) + (additionalUnits3 *
                                                bracket3Rate) + (additionalUnits4 * bracket4Rate);
                                            details +=
                                                `11-20: ${additionalUnits1} * ${bracket1Rate} = ${(additionalUnits1 * bracket1Rate).toFixed(2)}\n`;
                                            details +=
                                                `21-30: ${additionalUnits2} * ${bracket2Rate} = ${(additionalUnits2 * bracket2Rate).toFixed(2)}\n`;
                                            details +=
                                                `31-40: ${additionalUnits3} * ${bracket3Rate} = ${(additionalUnits3 * bracket3Rate).toFixed(2)}\n`;
                                            details +=
                                                `40: ${additionalUnits4} * ${bracket4Rate} = ${(additionalUnits4 * bracket4Rate).toFixed(2)}`;
                                        }
                                    }

                                    // Pass the details to the callback function
                                    setDetails(details);

                                    return amount;
                                }
                            </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>





                    <!-- Submit Button -->
                    <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">Water 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>
    </div>
@endsection