@extends('layouts.sidebar')

@section('content')
    <div class="p-6 mx-auto ">
        <div class="text-right">
            <a href="{{ route('water1.index') }}" class="p-2 text-white bg-blue-500 rounded-xl hover:bg-blue-900">Water
                Accounts</a>
        </div>
        <h1 class="mb-4 text-xl font-bold">Water 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') }}" 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="Water">

                        <!-- 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">Building</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">Expense</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>
                </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 }};

            $('#light_M_Table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ url('monthly-water-bills') }}/' +
                    accountId, // Construct the URL using the account ID
                columns: [{
                        data: 'view',
                        name: 'view'
                    }, {
                        data: 'properties',
                        name: 'properties'
                    },
                    {
                        data: 'bill_amount',
                        name: 'bill_amount'
                    },

                    {
                        data: 'tax',
                        name: 'tax'
                    },
                    {
                        data: 'net',
                        name: 'net'
                    },
                    {
                        data: 'tenant_consumtion',
                        name: 'tenant_consumtion'
                    },
                    {
                        data: 'loss',
                        name: 'loss'
                    },
                    {
                        data: 'tax',
                        name: 'tax'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'delete',
                        name: 'delete',
                        width: "5%"

                    },

                ]
            });
        });
    </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.amount1', '') }}/" +
                            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