@extends('layouts.sidebar')

@section('content')
    <div class="p-6 mx-auto ">
        <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">
                        <a href="{{ url('bills') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Water
                            Billings</a>
                        <a href="{{ url('bills') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Light
                            Billings</a>
                        <a href="{{ route('lights.index') }}"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Light
                            Accounts</a>
                        <a href="{{ route('water1.index') }}"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Water
                            Accounts</a>
                    </div>
                </div>
            </div> <!-- Dropdown menu, show/hide based on menu state -->

        </div>
        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>
        <h1 class="mb-4 text-xl font-bold">Lights Monthly Bills for @foreach ($name->properties as $name)
                {{ $name->property_name }}
            @endforeach
        </h1>
        <div class="flex flex-col gap-10 md:flex-row ">
            <div class="mb-8 w-96 ">


                <form action="{{ route('monthlybill.post') }}" id="calculateTotalForm" method="POST">
                    @csrf
                    <div class="max-w-lg px-8 pt-6 pb-8 mx-auto mb-4 text-xs bg-white rounded shadow-md">
                        <h2 class="mb-6 text-xl font-bold text-gray-800">Create a New Bill</h2>

                        <!-- Account ID Input -->
                        <input type="text" name="account_id" id="account_id"
                            class="hidden w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="Enter Account ID" required value="{{ old('account_id', $account->id) }}">

                        <!-- Start Date Input -->

                        <div class="mb-4">
                            <label for="start_date" class="block mb-2 text-sm font-bold text-gray-700">Start Date:</label>
                            <input type="date" name="start_date" id="start_date"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                required>
                            <p id="startDateError" class="text-xs italic text-red-500"></p>
                            @error('start_date')
                                <p class="text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <!-- End Date Input -->

                        <div class="mb-4">
                            <label for="end_date" class="block mb-2 text-sm font-bold text-gray-700">End Date:</label>
                            <input type="date" name="end_date" id="end_date"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                required>
                            <p id="endDateError" class="text-xs italic text-red-500"></p>
                            @error('end_date')
                                <p class="text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Bill Amount Input -->
                        <div class="mb-4">
                            <label for="bill_amount" class="block mb-2 text-sm font-bold text-gray-700">Bill Amount:</label>
                            <input type="number" step="0.01" name="bill_amount" id="bill_amount"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter Bill Amount" required value="{{ old('bill_amount') }}"
                                oninput="calculateNetAmount()">
                            @error('bill_amount')
                                <p class="text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Tax Input -->
                        <div class="mb-4">
                            <label for="tax" class="block mb-2 text-sm font-bold text-gray-700">Tax (in %):</label>
                            <input type="number" step="0.01" name="tax" id="tax"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter Tax Percentage" value="{{ old('tax') }}"
                                oninput="calculateNetAmount()">
                            @error('tax')
                                <p class="text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Net Amount Input (Read-only) -->
                        <div class="mb-4">
                            <label for="net_amount" class="block mb-2 text-sm font-bold text-gray-700">Net Amount:</label>
                            <input type="number" step="0.01" name="net_amount" id="net_amount"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Net Amount" readonly value="{{ old('net_amount') }}">
                        </div>

                        <!-- Tenant Consumption Input -->
                        <div class="mb-4">
                            <label for="tenant_consumption" class="block mb-2 text-sm font-bold text-gray-700">Tenant
                                Consumption:</label>
                            <input type="number" step="0.01" name="tenant_consumtion" id="total_amount"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Enter Consumption Amount" required value="{{ old('tenant_consumption') }}"
                                oninput="calculateNetAmount()">
                            @error('tenant_consumption')
                                <p class="text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Losses Input (Read-only) -->
                        <div class="mb-4">
                            <label for="losses" class="block mb-2 text-sm font-bold text-gray-700">Losses:</label>
                            <input type="number" step="0.01" name="losses" id="losses"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Losses" readonly value="{{ old('losses') }}">
                        </div>

                        <!-- Hidden Bill Type Input -->
                        <input type="hidden" name="bill_type" id="bill_type" value="Light">

                        <!-- Submit Button -->
                        <div class="flex items-center justify-between">
                            <button type="submit"
                                class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline">
                                Submit
                            </button>
                        </div>
                    </div>
                </form>

            </div>
            <script>
                function calculateNetAmount() {
                    let billAmount = parseFloat(document.getElementById('bill_amount').value) || 0;
                    let taxAmount = parseFloat(document.getElementById('tax').value) || 0;
                    let tenantConsumption = parseFloat(document.getElementById('total_amount').value) || 0;

                    // Calculate the net amount (Bill Amount - Tax Amount)
                    let netAmount = billAmount - taxAmount;

                    // Calculate losses (Bill Amount - Tenant Consumption)
                    let losses = billAmount - tenantConsumption;

                    // Set the calculated values in the respective fields
                    document.getElementById('net_amount').value = netAmount.toFixed(2);
                    document.getElementById('losses').value = losses.toFixed(2);
                }
            </script>
            <!-- Lights Accounts Table -->
            <div class="w-full mt-8">
                <h2 class="mb-4 text-xl font-bold"></h2>

                <table id="light_M_Table" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="text-xs bg-gray-200">
                        <tr>

                            <th class="px-4 py-2 border">View</th>
                            <th class="px-4 py-2 border">Area</th>
                            <th class="px-4 py-2 border">DLPC Actual Bill</th>
                            <th class="px-4 py-2 border">Expanded Withholding Tax</th>
                            <th class="px-4 py-2 border">Net of Withholding Tax</th>
                            <th class="px-4 py-2 border">Actual Tenant Computation</th>
                            <th class="px-4 py-2 border">Losses</th>

                            <th class="px-4 py-2 border">Start Date</th>
                            <th class="px-4 py-2 border">End Date</th>
                            <th class="px-4 py-2 border">Delete</th>


                        </tr>
                    </thead>
                    <tbody class="text-xs">
                        <!-- DataTables will populate this -->
                    </tbody>
                    <tfoot class="text-xs bg-gray-200">
                        <tr>
                            <th class="px-4 py-2 border">Total</th>
                            <th class="px-4 py-2 border" id="total-bill">0.00</th>
                            <th class="px-4 py-2 border" id="total-tax">0.00</th>
                            <th class="px-4 py-2 border" id="total-net">0.00</th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>
                            <th class="px-4 py-2 border"></th>
                        </tr>
                    </tfoot>
                </table>


            </div>
        </div>
    </div>
    <div id="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
        <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
            <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="closeModal('deleteModal')" class="text-white">&times;</button>
            </div>
            <div class="px-4 py-4">
                <p>Are you sure you want to delete this data?</p>
            </div>
            <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                <button onclick="closeModal('deleteModal')" class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">
                    Cancel
                </button>
                <form id="deleteForm" action="" method="POST" style="display: inline;">
                    @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>
    <script>
        function openDeleteModal(deleteUrl) {
            $('#deleteForm').attr('action', deleteUrl); // Set the form's action to the delete route
            $('#deleteModal').removeClass('hidden'); // Show the modal by removing the hidden class
        }

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

    <script>
        $(document).ready(function() {
            // Use the account variable passed from the controller
            var accountId = {{ $account->id }};

            var table = $('#light_M_Table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ url('monthly-light-bills') }}/' +
                    accountId, // Construct the URL using the account ID
                columns: [{
                        data: 'view',
                        name: 'view',
                        width: "5%"
                    }, {
                        data: 'properties',
                        name: 'properties',
                        width: "5%"
                    },
                    {
                        data: 'bill_amount',
                        name: 'bill_amount',
                        width: "5%"
                    },
                    {
                        data: 'tax',
                        name: 'tax',
                        width: "5%"

                    },
                    {
                        data: 'net',
                        name: 'net',
                        width: "5%"
                    },
                    {
                        data: 'tenant_consumtion',
                        name: 'tenant_consumtion',
                        width: "5%"
                    },
                    {
                        data: 'loss',
                        name: 'loss',

                        width: "5%"
                    },

                    {
                        data: 'start_date',
                        name: 'start_date',
                        width: "5%",
                        render: function(data) {
                            return formatDate(data); // Call the formatDate function
                        }
                    },
                    {
                        data: 'end_date',
                        name: 'end_date',
                        width: "5%",
                        render: function(data) {
                            return formatDate(data); // Call the formatDate function
                        }
                    },
                    {
                        data: 'delete',
                        name: 'delete',
                        width: "5%"

                    },
                ],
                drawCallback: function(settings) {
                    calculateTotals();
                }
            });

            function formatDate(dateString) {
                // Create a new Date object
                const date = new Date(dateString);
                // Options for formatting the date
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                };
                // Return the formatted date
                return date.toLocaleDateString('en-US', options);
            }

            function calculateTotals() {
                let totalBill = 0;
                let totalNet = 0;
                let totalTax = 0;

                // Get data from the DataTable
                var data = table.rows().data(); // Use .rows().data() to get the correct data

                // Iterate over the data to calculate totals
                data.each(function(item) {
                    totalBill += parseFloat(item.bill_amount) || 0;
                    totalNet += parseFloat(item.net) || 0; // Corrected to totalNet
                    totalTax += parseFloat(item.tax) || 0;
                });

                // Update the footer totals
                $('#total-bill').text(totalBill.toFixed(2));
                $('#total-net').text(totalNet.toFixed(2)); // Corrected to totalNet
                $('#total-tax').text(totalTax.toFixed(2)); // Corrected to totalTax
            }
        });
    </script>


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

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



    <script>
        $(document).ready(function() {
            function calculateTotal() {
                let startDate = $('#start_date').val();
                let endDate = $('#end_date').val();
                let token = $('input[name="_token"]').val();
                let id = $('#account_id').val(); // Get the ID from an input field

                // Ensure both dates are selected
                if (startDate && endDate && id) { // Also check if ID is present
                    // Clear previous errors
                    $('#startDateError').text('');
                    $('#endDateError').text('');

                    $.ajax({
                        url: "{{ route('calculate.total.amount', '') }}/" +
                            id, // Adjusted URL to include ID
                        method: 'POST',
                        data: {
                            _token: token,
                            start_date: startDate,
                            end_date: endDate
                        },
                        success: function(response) {
                            if (response.success) {
                                // Set the total amount in the input field
                                $('#total_amount').val(response.total_amount.toFixed(2));
                            }
                        },
                        error: function(response) {
                            let errors = response.responseJSON.errors;
                            if (errors.start_date) {
                                $('#startDateError').text(errors.start_date[0]);
                            }
                            if (errors.end_date) {
                                $('#endDateError').text(errors.end_date[0]);
                            }
                        }
                    });
                }
            }

            // Trigger AJAX when both dates are selected
            $('#start_date, #end_date').on('change', function() {
                calculateTotal();
            });
        });
    </script>
@endsection