@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Edit car</h5>
                <form class="form-horizontal" action="{{ route('car-info.update', ['userId' => $userId, 'id' => $customercar->id]) }}" 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->id == $customercar->subscription_id) ? 'selected' : '' }}>{{ $subscription->allPackage->name_en }}</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" class="form-control  @error('car_brand_id') is-invalid @enderror">
                                    @foreach ($carbrands as $carbrand)
                                        <option value="{{ $carbrand->id }}" {{ ($carbrand->id == $customercar->car_brand_id) ? 'selected' : '' }}>{{ $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->id == $customercar->car_type_id) ? 'selected' : '' }}>{{ $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" value="{{ $customercar->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" value="{{ $customercar->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->id == $customercar->default_address) ? 'selected' : '' }}>{{ $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" value="{{ $customercar->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-12">
                            <div class="form-group">
                                <label>Car image</label>
                                <div class="image-upload">
                                    @if($customercar->image)
                                        <label for="image">
                                            <img id="output" src="{{ $customercar->image }}" width="120px" height="100px"/>
                                        </label>
                                    @else
                                        <label for="image">
                                            <img id="output" src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png" width="80px" height="80px"/>
                                        </label>
                                    @endif
                                    <input type="file" placeholder="banner image" onchange="loadFile(event)" name="image" id="image" class="form-control"  accept="image/png, image/gif, image/jpeg" style="display: none;"/>
                                </div>
                            </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>
@endsection

@push('scripts')

    <script>
        $(document).ready(function() {
            var modalId = "{{ $customercar->car_model_id }}";

            $('#car_type_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) {
                                var option = $('<option></option>', {
                                    value: car.id,
                                    text: car.name + "-" + car.code
                                });

                                // Check if the current car should be selected and set the selected attribute accordingly
                                if(modalId == car.id) {
                                    option.attr('selected', 'selected');
                                }

                                // Append the option to the select element
                                $('#car_model_id').append(option);
                            });
                        } else {
                            $('#car_model_id').append($('<option>', {
                                value: "",
                                text: "No Cars Found"
                            }));
                        }
                    }
                });
            });
            $('#car_type_id').trigger('change');
        });
    </script>
@endpush

<script type="text/javascript">
    function loadFile(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };
</script>