@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('cruds.invoice.title_singular') }}
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("admin.invoices.store") }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="required" for="user_id">{{ trans('cruds.invoice.fields.user') }}</label>
                <select class="form-control select2 {{ $errors->has('user') ? 'is-invalid' : '' }}" name="user_id" id="user_id" required>
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    @foreach($users as $id => $entry)
                        <option value="{{ $id }}" {{ old('user_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                    @endforeach
                </select>
                @if($errors->has('user'))
                    <div class="invalid-feedback">
                        {{ $errors->first('user') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.invoice.fields.user_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="billing_for">{{ trans('cruds.invoice.fields.billing_for') }}</label>
                <input class="form-control {{ $errors->has('billing_for') ? 'is-invalid' : '' }}" type="text" name="billing_for" id="billing_for" value="{{ old('billing_for', '') }}" required>
                @if($errors->has('billing_for'))
                    <div class="invalid-feedback">
                        {{ $errors->first('billing_for') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.invoice.fields.billing_for_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="amount">{{ trans('cruds.invoice.fields.amount') }}</label>
                <input class="form-control {{ $errors->has('amount') ? 'is-invalid' : '' }}" type="number" name="amount" id="amount" value="{{ old('amount', '') }}" step="0.01" required>
                @if($errors->has('amount'))
                    <div class="invalid-feedback">
                        {{ $errors->first('amount') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.invoice.fields.amount_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="due">{{ trans('cruds.invoice.fields.due') }}</label>
                <input class="form-control datetime {{ $errors->has('due') ? 'is-invalid' : '' }}" type="text" name="due" id="due" value="{{ old('due') }}" required>
                @if($errors->has('due'))
                    <div class="invalid-feedback">
                        {{ $errors->first('due') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.invoice.fields.due_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="unit_id">Unit</label>
                <select class="form-control select2 {{ $errors->has('unit_id') ? 'is-invalid' : '' }}" 
                        name="unit_id" 
                        id="unit_id" 
                        required>
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                </select>
                @if($errors->has('unit_id'))
                    <div class="invalid-feedback">{{ $errors->first('unit_id') }}</div>
                @endif
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    const userSelect = $('#user_id');
    const unitSelect = $('#unit_id');

    function fetchUnits(userId) {
        unitSelect.html('<option value="">{{ trans("global.pleaseSelect") }}</option>'); // Clear dropdown
        if (!userId) return;

        $.ajax({
            url: `/admin/units-by-user/${userId}`,
            type: 'GET',
            success: function (data) {
                data.forEach(function (unit) {
                    unitSelect.append(new Option(unit.name, unit.id));
                });
            },
            error: function () {
                alert('Failed to fetch units. Please try again.');
            }
        });
    }

    // Trigger on user selection
    userSelect.on('change', function () {
        fetchUnits($(this).val());
    });

    // Fetch units for pre-selected user on page load
    const preSelectedUserId = userSelect.val();
    if (preSelectedUserId) {
        fetchUnits(preSelectedUserId);
    }
});
</script>
@endsection