@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <section class="content-header m-3">
        <h1>{{ __('Create New Invoice') }}</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">Invoice Details</h3>
                    </div>
                    <div class="box-body">
                        <form action="{{ route('invoices.store') }}" method="POST" id="invoiceForm">
                            @csrf
                            <div class="form-group">
                                <label for="amount">Amount</label>
                                <input type="number" class="form-control" id="amount" name="amount" placeholder="Enter amount" step="0.01" required>
                            </div>
                            <div class="form-group">
                                <label for="invoice_type">Invoice Type</label>
                                <select class="form-control" id="invoice_type" name="invoice_type" required>
                                    <option value="">Select type</option>
                                    <option value="standard">Standard</option>
                                    <option value="recurring">Recurring</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="customer_id">Customer</label>
                                <select class="form-control" id="customer_id" name="customer_id" required>
                                    <option value="">Select customer</option>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="meter_number">Meter Number</label>
                                <select class="form-control" id="meter_number" name="meter_number" required>
                                    <option value="">Select meter number</option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-success">Create Invoice</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Quick Tips -->
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Quick Tips</h3>
                    </div>
                    <div class="box-body">
                        <ul>
                            <li>Ensure the amount is correct before submitting.</li>
                            <li>Select the appropriate invoice type.</li>
                            <li>Choose a customer to load their associated meter numbers.</li>
                            <li>Select a meter number specific to the chosen customer.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function() {
        // When customer is selected, fetch their meter numbers
        $('#customer_id').change(function() {
            const customerId = $(this).val();
            if (customerId) {
                $.ajax({
                    url: '/get-meters/' + customerId, // Route to fetch meter numbers
                    method: 'GET',
                    success: function(response) {
                        let options = '<option value="">Select meter number</option>';
                        response.meters.forEach(meter => {
                            options += `<option value="${meter.meter_number}">${meter.meter_number}</option>`;
                        });
                        $('#meter_number').html(options);
                    },
                    error: function() {
                        alert('Failed to load meter numbers.');
                    }
                });
            } else {
                $('#meter_number').html('<option value="">Select meter number</option>');
            }
        });
    });
</script>
@endsection