@extends('layouts.sidebar')

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



        <div class="w-full mt-8">
            <div class="flex justify-between items-center">
                <h2 class="mb-4 text-xl font-bold">Existing DLPC Accounts</h2>
                <a href="{{ url('electricbilloutput') }}"
                    class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Electric
                    Bill Statement</a>
            </div>


            <table id="lightTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="px-4 py-2 border">Account Number</th>
                        <th class="px-4 py-2 border">Property</th>
                        <th class="px-4 py-2 border">Actions</th>
                    </tr>
                </thead>

            </table>
        </div>

        <script>
            $(document).ready(function() {
                $('#lightTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('lights.index') }}', // Ensure this route is defined in your web.php
                    columns: [{
                            data: 'account_number',
                            name: 'account_number'
                        },
                        {
                            data: 'property',
                            name: 'property'
                        },

                        {
                            data: 'actions2',
                            name: 'actions2',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });
            });
        </script>

    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize the DataTable but don't auto-load data
            var atable = $('#waterbillsTable').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": true,
                "ajax": {
                    url: "{{ url('electricbill') }}",
                    data: function(d) {
                        // Custom filter logic (optional)
                        d.custom_filter = $('#customFilterInput').val(); // if you have a custom input
                    },
                    type: 'GET',
                    dataSrc: function(json) {
                        // Only load data if there is a filter/search
                        if ($('#waterbillsTable_filter input').val() || $('#customFilterInput').val()) {
                            return json.data;
                        }
                        return []; // Return empty array if no search
                    }
                },
                "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
                    }
                ],
                "order": [
                    [10, "desc"]
                ],
                "pageLength": 20,
                "deferLoading": 0 // Prevent initial load
            });

            // Optional: trigger search manually if not relying on built-in DataTable search box
            $('#customSearchBtn').on('click', function() {
                atable.ajax.reload();
            });

            // Form submission stays the same
            $('#electric-bill-form').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    url: '{{ route('elect.add') }}',
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#successMessage').text(response.message);
                        $('#successModal').removeClass('hidden');
                        atable.ajax.reload();
                    },
                    error: function(xhr) {
                        console.log('Error:', xhr.responseText);
                        alert('Failed to add electric bill. Please try again.');
                    }
                });
            });

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

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

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

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

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

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

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

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

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

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

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

                            // Proceed only if propertyId is not empty
                            if (propertyId) {
                                $.ajax({
                                    url: '{{ route('fetchBillings') }}',
                                    method: 'GET',
                                    data: {
                                        property_id: propertyId
                                    },
                                    success: function(data) {
                                        let options = '<option value="">Select Billing</option>';
                                        $.each(data, function(index, billing) {
                                            let formattedDate = moment(billing.payment_date).format(
                                                '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}, 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').change(function() {
                            let paymentId = $(this).val();

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

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

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

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

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

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

                        <div class="hidden mb-4">
                            <label for="location" class="block mb-2 text-sm font-bold text-gray-700">Location
                            </label>
                            <input required type="text" id="location" name="location"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter property name" value="test">

                        </div>


                        <div class="mb-4">
                            <label for="previous_reading" class="block mb-2 text-sm font-bold text-gray-700">Previous
                                Reading</label>
                            <input required type="number" id="previous_reading" name="previous_reading" step="any"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter previous reading" oninput="calculateAmount()">
                            <small id="reading-message" class="text-muted" style="color: red;"></small>
                        </div>
                        <div class="mb-4">
                            <label for="present_reading" class="block mb-2 text-sm font-bold text-gray-700">Present
                                Reading</label>
                            <input required type="number" id="present_reading" name="present_reading" step="any"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter present reading" oninput="calculateAmount()">
                        </div>
                        <div class="mb-4">
                            <label for="consumption" class="block mb-2 text-sm font-bold text-gray-700">Consumption</label>
                            <input required type="text" id="consumption" name="consumption"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Consumption" readonly>
                        </div>

                        <div class="mb-4">
                            <label for="rate" class="block mb-2 text-sm font-bold text-gray-700">Rate</label>
                            <input required type="number" id="rate" name="rate" step="any"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter rate" oninput="calculateAmount()">
                        </div>

                    </div>
                    <div>

                        <!-- Amount -->
                        <div class="mb-4">
                            <label for="amount" class="block mb-2 text-sm font-bold text-gray-700">Amount</label>
                            <input required type="text" id="amount" name="amount"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter amount" readonly>
                        </div>


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

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

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




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


                </div>

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


                <hr class="my-4">

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