@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Create new car</h5>
                <form class="form-horizontal" action="{{ route('car-info.store', ['id' => $userId]) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
{{--
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Subscription</label>
                                <select name="subscription_id" id="subscription_id"
                                    class="form-control  @error('subscription_id') is-invalid @enderror">
                                    @forelse ($subscriptions as $subscription)
                                        <option value="{{ $subscription->id }}">{{ $subscription->allPackage->name_en }} (
                                            {{ $subscription->start_date . '/' . $subscription->end_date }} ) </option>
                                    @empty
                                        <option value="">No Subscription Found</option>
                                    @endforelse
                                </select>
                                @error('subscription_id')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div> --}}

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Brand</label>
                                <select name="car_brand_id" id="car_brand_id" required
                                    class="form-control  @error('car_brand_id') is-invalid @enderror">
                                    <option value="">Select</option>

                                    @foreach ($carbrands as $carbrand)
                                        <option value="{{ $carbrand->id }}">{{ $carbrand->name }}</option>
                                    @endforeach
                                </select>
                                @error('car_brand_id')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Type</label>
                                <select name="car_type_id" id="car_type_id"
                                    class="form-control  @error('car_type_id') is-invalid @enderror">
                                    @foreach ($cartypes as $cartype)
                                        <option value="{{ $cartype->id }}">{{ $cartype->name }}</option>
                                    @endforeach
                                </select>
                                @error('car_type_id')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Model</label>
                                <select name="car_model_id" id="car_model_id"
                                    class="form-control  @error('car_model_id') is-invalid @enderror">

                                </select>
                                @error('car_model_id')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Color</label>
                                <input type="color" name="color" id="color"
                                    class="form-control @error('color') is-invalid @enderror">
                                @error('color')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car Plate Number</label>
                                <input type="text" name="plate_number" id="plate_number"
                                    class="form-control @error('plate_number') is-invalid @enderror">
                                @error('plate_number')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Default Address</label>
                                <select name="default_address" id="default_address"
                                    class="form-control  @error('default_address') is-invalid @enderror">
                                    <option value="">Select Address</option>
                                    @foreach ($customerAddresses as $customerAddress)
                                        <option value="{{ $customerAddress->id }}">
                                            {{ $customerAddress->area . ', ' . $customerAddress->street_name . ', ' . $customerAddress->building_no }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('default_address')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Year Of Manufuture</label>
                                <input type="text" name="year_of_manufuture" id="year_of_manufuture"
                                    class="form-control @error('year_of_manufuture') is-invalid @enderror">
                                @error('year_of_manufuture')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Car image</label>
                                <input type="file" name="image" id="image"
                                    class="form-control  @error('image') is-invalid @enderror"
                                    accept="image/png, image/gif, image/jpeg" />
                                @error('image')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="submit" class="btn btn-info">Save Car</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#car_brand_id').on('change', function() {
                    var carId = $(this).val();
                    $.ajax({
                        url: '{{ route('car-info.getModal') }}',
                        type: 'POST',
                        data: {
                            id: carId
                        },
                        success: function(result) {
                            $('#car_model_id').empty();
                            if (result.data.length > 0) {
                                $.each(result.data, function(index, car) {
                                    $('#car_model_id').append($('<option>', {
                                        value: car.id,
                                        text: car.name + "-" + car.code
                                    }));
                                });
                            } else {
                                $('#car_model_id').append($('<option>', {
                                    value: "",
                                    text: "No Cars Found"
                                }));
                            }
                        }
                    });
                });
                $('#car_type_id').trigger('change');
            });


                 </script>
    @endpush
@endsection