@extends('layouts.sidebar')

@section('content')
    <div class="container p-6 mx-auto bg-white rounded shadow-md">
        <h2 class="mb-4 text-2xl font-bold">Edit Electric Bill</h2>

        <form action="{{ route('electricbills.update', $electricbill->electricbill_id) }}" method="POST">
            @csrf
            @method('PUT')

            <!-- Property Selection -->
            <div class="mb-4">
                <label for="property_id" class="block mb-2 text-sm font-bold text-gray-700"> 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="">{{ $electricbill->billing->lease->property->property_name }},</option>
                </select>
            </div>

            <!-- Billing Selection -->
            <div class="mb-4">
                <label for="payment_id" class="block mb-2 text-sm font-bold text-gray-700"> 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">
                    <option value="{{ $electricbill->payment_id }}" selected>
                        Renter: {{ $electricbill->billing->lease->client->owners_name }},
                        {{ $electricbill->billing->lease->property->property_name }},
                        {{ $electricbill->billing->lease->unit->unit_name }}, Billing Date:
                        {{ \Carbon\Carbon::parse($electricbill->billing->payment_date)->locale('fr')->translatedFormat('F j, Y') }}
                    </option>
                </select>
            </div>

            <!-- Previous Reading -->
            <div class="mb-4">
                <label for="previous_reading" class="block mb-2 text-sm font-bold text-gray-700">Previous Reading:</label>
                <input 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"
                    value="{{ $electricbill->previous_reading }}" required oninput="calculateAmount()">
            </div>

            <!-- Present Reading -->
            <div class="mb-4">
                <label for="present_reading" class="block mb-2 text-sm font-bold text-gray-700">Present Reading:</label>
                <input 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"
                    value="{{ $electricbill->present_reading }}" required oninput="calculateAmount()">
            </div>

            <!-- Consumption -->
            <div class="mb-4">
                <label for="consumption" class="block mb-2 text-sm font-bold text-gray-700">Consumption:</label>
                <input type="text" id="consumption" name="consumption" readonly
                    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"
                    value="{{ $electricbill->consumption }}">
            </div>

            <!-- Rate -->
            <div class="mb-4">
                <label for="rate" class="block mb-2 text-sm font-bold text-gray-700">Rate:</label>
                <input 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"
                    value="{{ $electricbill->rate }}" required oninput="calculateAmount()">
            </div>

            <!-- Amount -->
            <div class="mb-4">
                <label for="amount" class="block mb-2 text-sm font-bold text-gray-700">Amount:</label>
                <input type="text" id="amount" name="amount" readonly
                    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"
                    value="{{ $electricbill->amount }}">
            </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 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"
                    value="{{ $electricbill->start_date ? $electricbill->start_date->format('Y-m-d') : '' }}" required>
            </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 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"
                    value="{{ $electricbill->end_date ? $electricbill->end_date->format('Y-m-d') : '' }}" required>
            </div>

            <hr class="my-4">

            <!-- Submit Button -->
            <button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                Update Electric Bill
            </button>
        </form>

    </div>
@endsection