@extends('layouts.sidebar')

@section('content')
    <div class="container p-6 mx-auto bg-white rounded shadow-md">
        <h2 class="mb-4 text-2xl font-bold">Edit Water Bill</h2>

        <form id="water-bill-form" class="p-6 bg-white rounded shadow-md"
            action="{{ route('waterbills.update', $waterbill->waterbill_id) }}" method="POST">
            @csrf
            @method('PUT') <!-- Make sure to use PUT or PATCH method for update actions -->

            <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="">{{ $waterbill->billing->lease->property->property_name }},</option>

                </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="{{ $waterbill->payment_id }}" selected>
                        Renter: {{ $waterbill->billing->lease->client->owners_name }},
                        {{ $waterbill->billing->lease->property->property_name }},
                        {{ $waterbill->billing->lease->unit->unit_name }}, Billing Date:
                        {{ \Carbon\Carbon::parse($waterbill->billing->payment_date)->locale('fr')->translatedFormat('F j, Y') }}
                    </option>
                </select>
            </div>

            <!-- Pre-populate the fields with the existing data from $waterBill -->
            <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="{{ $waterbill->location }}">
            </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" value="{{ $waterbill->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" value="{{ $waterbill->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 value="{{ $waterbill->consumption }}">
            </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 == $waterbill->rate ? 'selected' : '' }}>
                            {{ $rate->name }}
                        </option>
                    @endforeach
                </select>
            </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">{{ $waterbill->computation }}</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 value="{{ $waterbill->amount }}">
            </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>

            <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"
                    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="{{ $waterbill->start_date ? $waterbill->start_date->format('Y-m-d') : '' }}">
            </div>

            <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"
                    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="{{ $waterbill->end_date ? $waterbill->end_date->format('Y-m-d') : '' }}">
            </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>
@endsection