@extends('layouts.sidebar')

@section('content')
    <div class="p-6 mx-auto ">
        <div class="mb-8 ">
            <form action="{{ route('123_update', $monthlyBill->id) }}" id="calculateTotalForm" method="POST">
                @csrf
                @method('PUT')
                <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">Update 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', $monthlyBill->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
                            value="{{ old('start_date', $monthlyBill->start_date ? \Illuminate\Support\Carbon::parse($monthlyBill->start_date)->format('Y-m-d') : '') }}">
                        <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
                            value="{{ old('end_date', $monthlyBill->end_date ? \Illuminate\Support\Carbon::parse($monthlyBill->end_date)->format('Y-m-d') : '') }}">
                        <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', $monthlyBill->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', $monthlyBill->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', $monthlyBill->net_amount) }}">
                    </div>

                    <!-- Tenant Consumption Input -->
                    <div class="mb-4">
                        <label for="tenant_consumtion" class="block mb-2 text-sm font-bold text-gray-700">Tenant
                            Consumption:</label>
                        <input type="number" step="0.01" name="tenant_consumtion" id="tenant_consumtion"
                            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_consumtion', $monthlyBill->tenant_consumtion) }}"
                            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', $monthlyBill->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">
                            Update
                        </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('tenant_consumption').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>

    </div>



    <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