@extends('admin.layouts.layout')
@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-body">

                <!-- Basic Vertical form layout section start -->
                <section id="basic-vertical-layouts">
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Car Details</h4>
                                </div>
                                <div class="card-body">
                                    <form class="form form-vertical" method="post" action="{{ route('updateCarRental') }}"
                                        autocomplete="off" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="id" id="id" value="{{ $car->id }}">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="select-country1">Make</label>
                                                    <select class="form-select category" disabled id="make_id"
                                                        name="make_id" required>
                                                        <option value="">Select Make</option>
                                                        @if ($makes)
                                                            @foreach ($makes as $make)
                                                                <option value="{{ $make->id }}"
                                                                    {{ $make->id == $car->make_id ? 'selected' : '' }}>
                                                                    {{ $make->name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                                @error('make_id')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="select-country2">Model</label>
                                                    <select class="form-select subcategory" disabled id="model_id"
                                                        name="model_id" required>
                                                        <option value="">Select Model</option>
                                                        @foreach ($car->makeModel($car->make_id) as $model)
                                                            <option value="{{ $model->id }}"
                                                                {{ $model->id == $car->model_id ? 'selected' : '' }}>
                                                                {{ $model->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="exampleFormControlTextarea1">
                                                        Description</label>
                                                    <textarea class="form-control" id="description" readonly rows="3" name="description"
                                                        placeholder="Car Description">{{ $car->description ?? '' }}</textarea>
                                                </div>
                                                @error('description')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="select-year">Year</label>
                                                    <select class="form-select category" id="year" disabled
                                                        name="year" required>
                                                        <option value="">Select Year</option>
                                                        @foreach ($years as $year)
                                                            <option value="{{ $year }}"
                                                                {{ $year == $car->year ? 'selected' : '' }}>
                                                                {{ $year }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @error('year')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Color</label>
                                                    <input type="text" id="" readonly
                                                        value="{{ $car->color ?? '' }}" class="form-control" name="color"
                                                        placeholder="Car color" />
                                                </div>
                                                @error('color')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <!-- Feature Section -->
                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Feature</label>
                                                    @if ($car->feature)
                                                        @foreach ($car->feature as $feature)
                                                            <div class="item">
                                                                <input type="text" readonly name="feature[]" value="{{ $feature->feature }}" class="form-control" placeholder="Feature" />
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Front Image</label>
                                                    <img id="front_image_preview" src="{{ asset($car->front_image) }}"
                                                        alt="Front Image Preview"
                                                        style="max-height: 200px; margin-top: 10px;" />
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Back Image</label>
                                                    <img id="back_image_preview" src="{{ asset($car->back_image) }}"
                                                        alt="Back Image Preview"
                                                        style="max-height: 200px; margin-top: 10px;" />
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Right side
                                                        <img id="right_side_image_preview"
                                                            src="{{ asset($car->right_side_image) }}"
                                                            alt="Right Side Image Preview"
                                                            style="max-height: 200px; margin-top: 10px;" />
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-vertical">Left side
                                                        Image</label>
                                                    <img id="left_side_image_preview"
                                                        src="{{ asset($car->left_side_image) }}"
                                                        alt="Left Side Image Preview"
                                                        style="max-height: 200px; margin-top: 10px;" />
                                                </div>
                                            </div>

                                            {{-- <div class="col-12">
                                                <button type="submit" class="btn btn-primary me-1">Submit</button>
                                            </div> --}}
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Vertical form layout section end -->

            </div>
        </div>
    </div>
    <!-- END: Content-->
@endsection