@extends('layouts.sidebar')

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

        <div class="flex justify-between py-5 ">
            <div>
                <h2 class="text-2xl font-bold"> Water Bill</h2>
            </div>
            <div>
                <div class="flex items-center justify-center gap-10"><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>
                    <div class="relative flex flex-col items-end justify-end mr-10 text-center">
                        <div>
                            <button type="button"
                                class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                                id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                                Menu
                                <!-- Dropdown icon -->
                                <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                    fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                            <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                                role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                                id="dropdown-menu">
                                <div class="py-1" role="none">
                                    <div class="mb-4">
                                        <a href="{{ url('waterbilloutput') }}" class="px-4 py-2 ">Water
                                            Bill
                                            Statement.</a>
                                    </div>
                                    <a href="{{ url('waterrates') }}" class="px-4 py-2 mb-2 ">Water
                                        Rates.</a>
                                </div>
                            </div>
                        </div> <!-- Dropdown menu, show/hide based on menu state -->

                    </div>
                </div>
                <script>
                    // Dropdown toggle
                    document.getElementById('menu-button').addEventListener('click', function() {
                        const menu = document.getElementById('dropdown-menu');
                        menu.classList.toggle('hidden');
                    });
                </script>


                <form action="{{ route('export.Wbill') }}" method="GET" class="mb-4">
                    <div class="flex items-center space-x-4">
                        <div>
                            <label for="month" class="block text-sm font-medium text-gray-700">Month</label>
                            <select id="month" name="month"
                                class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                @foreach (range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ $m == date('m') ? 'selected' : '' }}>
                                        {{ DateTime::createFromFormat('!m', $m)->format('F') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="year" class="block text-sm font-medium text-gray-700">Year</label>
                            <select id="year" name="year"
                                class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                @foreach (range(date('Y') - 10, date('Y') + 10) as $y)
                                    <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <button type="submit" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                            Export
                        </button>
                    </div>
                </form>
            </div>
        </div>




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

        <div class="overflow-x-auto">
            <table id="waterbillsTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                <thead class="bg-orange-500">
                    <tr>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing No.</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Renters</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Present Reading
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Previous Reading
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Location</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Consumption</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rate</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Amount</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Date from to</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-600">

                    <!-- Table rows will be populated dynamically by DataTables -->
                </tbody>
            </table>
        </div>

    </div>
    @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
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize the DataTable
            var atable = $('#waterbillsTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ url('waterbill') }}", // Ensure this route is correct
                "columns": [{
                        "data": "payment_id"
                    },
                    {
                        "data": "renters"
                    },
                    {
                        "data": "present_reading"
                    },
                    {
                        "data": "previous_reading"
                    },
                    {
                        "data": "unit_location"
                    },
                    {
                        "data": "consumption"
                    },
                    {
                        "data": "rate"
                    },
                    {
                        "data": "amount"
                    },
                    {
                        "data": "date_range"
                    },
                    {
                        "data": "actions"
                    },
                    {
                        "data": "created_at",
                        "visible": false
                    } // Hide created_at field
                ],
                "order": [
                    [10, "desc"] // Sort by hidden created_at column (index 10)
                ],
                "pageLength": 20 // Set default number of entries per page
            });

            // Form submission for adding electric bills
            $('#water-bill-form').submit(function(e) {
                e.preventDefault(); // Prevent default form submission

                // Serialize form data
                var formData = $(this).serialize();

                // Send AJAX request
                $.ajax({
                    url: '{{ route('water.store') }}', // The route handling the form submission
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#successMessage').text(response.message); // Update success message
                        $('#successModal').removeClass('hidden'); // Show success modal

                        // Reload the DataTable after successful form submission
                        atable.ajax.reload();
                    },
                    error: function(xhr) {
                        // Handle the error by logging or showing an error message
                        console.log('Error:', xhr.responseText);
                        alert('Failed to add electric bill. Please try again.');
                    }
                });
            });

            // Close the success modal
            $('#closeSuccessModal').on('click', function() {
                $('#successModal').addClass('hidden'); // Hide modal
            });
        });
    </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-center justify-center hidden bg-black bg-opacity-50">
        <div class="w-1/2 h-[40rem] overflow-y-auto bg-white rounded-lg">
            <!-- 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 ($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) {
                                            let formattedDate = moment(billing.payment_date).format(
                                                'D-MMMM-Y');
                                            options +=
                                                `<option value="${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) {
                                        // 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').select2({
                            placeholder: 'Select Billing',
                            allowClear: true,
                            width: '100%',
                        });
                    });
                </script>
                <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 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"
                        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"
                        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>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const startDateInput = document.getElementById('start-date');
                        const endDateInput = document.getElementById('end-date');

                        function updateEndDate() {
                            const startDate = new Date(startDateInput.value);
                            const endDate = new Date(startDate);
                            endDate.setDate(startDate.getDate() + 29);
                            endDateInput.value = endDate.toISOString().split('T')[0];
                        }

                        // Set initial values
                        const today = new Date().toISOString().split('T')[0];
                        startDateInput.value = today;
                        updateEndDate();

                        // Add event listener to update end date when start date changes
                        startDateInput.addEventListener('change', updateEndDate);
                    });
                </script>

                <!-- 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>
@endsection