<div>
    @livewire('components.admin-sidebar')

	<!-- Main Content -->
    <div class="main-content side-content pt-0">

        <div class="container-fluid">
            <div class="inner-body">

                <div class="row row-sm mt-2">
                    <div class="col-lg-12 col-md-12">
                        <div class="card custom-card">
                            <div class="card-body">

                                <form wire:submit.prevent="store" enctype="multipart/form-data">

                                    <!-- Vehicle Information Section -->
                                    <div>
                                        <h6 class="main-content-label mb-3">Vehicle Information</h6>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Title" wire:model.lazy="title" type="text">
                                        @error('title')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Audit Price" wire:model.lazy="audit_price" type="text">
                                        @error('audit_price')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Old Price" wire:model.lazy="old_price" type="text">
                                        @error('old_price')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Price" wire:model.lazy="price" type="text">
                                        @error('price')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <textarea class="form-control" placeholder="Enter features, separated by commas" wire:model.lazy="features"></textarea>
                                        @error('features')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="make_id">
                                            <option value="">Select make</option>
                                            @foreach($makes as $make)
                                                <option value="{{ $make->id }}">{{ $make->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('make_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="category_id">
                                            <option value="">Select Category</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="images">Upload Images (multiple)</label>
                                        <input type="file" class="form-control" wire:model="images" multiple>
                                        @error('images')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror

                                        @if($images)
                                            <ul>
                                                @foreach($images as $index => $image)
                                                    <li>
                                                        @if(is_object($image))
                                                            <!-- Image is a new upload (temporary URL) -->
                                                            <img src="{{ $image->temporaryUrl() }}" alt="Car Image" style="width: 150px; margin: 10px;">
                                                        @else
                                                            <!-- Image is from the database (stored URL) -->
                                                            <img src="{{ asset($image) }}" alt="Car Image" style="width: 150px; margin: 10px;">
                                                        @endif
                                                        <button type="button" wire:click="removeImage({{ $index }})" class="btn btn-danger btn-sm">Remove</button>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </div>

                                    <!-- Vehicle Details Section -->
                                    <div>
                                        <h6 class="main-content-label mb-3 mt-5">Vehicle Details</h6>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Mileage" wire:model.lazy="mileage" type="text">
                                        @error('mileage')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="First Registration" wire:model.lazy="first_registration" type="text">
                                        @error('first_registration')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Power" wire:model.lazy="power" type="text">
                                        @error('power')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="transmission">
                                            <option value="">Select transmission</option>
                                            <option value="Manual">Manual</option>
                                            <option value="Automatic">Automatic</option>
                                        </select>
                                        @error('transmission')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="fuel">
                                            <option value="">Select Fuel Type</option>
                                            <option value="Petrol">Petrol</option>
                                            <option value="Diesel">Diesel</option>
                                            <option value="Electric">Electric</option>
                                            <option value="Hybrid">Hybrid</option>
                                            <option value="CNG">CNG</option>
                                        </select>
                                        @error('fuel')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="drive_type">
                                            <option value="">Select Drive Type</option>
                                            <option value="FWD">Front-Wheel Drive (FWD)</option>
                                            <option value="RWD">Rear-Wheel Drive (RWD)</option>
                                            <option value="AWD">All-Wheel Drive (AWD)</option>
                                            <option value="4WD">Four-Wheel Drive (4WD)</option>
                                        </select>
                                        @error('drive_type')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Consumption" wire:model.lazy="consumption" type="text">
                                        @error('consumption')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="CO2 Emissions" wire:model.lazy="co2_emissions" type="text">
                                        @error('co2_emissions')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Location" wire:model.lazy="location" type="text">
                                        @error('location')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <!-- Vehicle General Section -->
                                    <div>
                                        <h6 class="main-content-label mb-3 mt-5">Vehicle General</h6>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Vehicle ID" wire:model.lazy="vehicle_id" type="text">
                                        @error('vehicle_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Model" wire:model.lazy="model" type="text">
                                        @error('model')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Body Color" wire:model.lazy="body_color" type="text">
                                        @error('body_color')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Type of Finish" wire:model.lazy="type_of_finish" type="text">
                                        @error('type_of_finish')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Interior Color" wire:model.lazy="interior_color" type="text">
                                        @error('interior_color')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Interior Material" wire:model.lazy="interior_material" type="text">
                                        @error('interior_material')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Body" wire:model.lazy="body" type="text">
                                        @error('body')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="doors">
                                            <option value="">Select Number of Doors</option>
                                            <option value="2">2 Doors</option>
                                            <option value="4">4 Doors</option>
                                            <option value="5">5 Doors</option>
                                        </select>
                                        @error('doors')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control form-select" wire:model.lazy="seats">
                                            <option value="">Select Number of Seats</option>
                                            <option value="2">2 Seats</option>
                                            <option value="4">4 Seats</option>
                                            <option value="5">5 Seats</option>
                                            <option value="7">7 Seats</option>
                                            <option value="8">8 Seats</option>
                                        </select>
                                        @error('seats')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <!-- Vehicle Engine Section -->
                                    <div>
                                        <h6 class="main-content-label mb-3 mt-5">Vehicle Engine</h6>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Engine Capacity" wire:model.lazy="engine_capacity" type="text">
                                        @error('engine_capacity')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control" wire:model.lazy="speeds">
                                            <option value="">Select Number of Speeds</option>
                                            <option value="5">5 Speeds</option>
                                            <option value="6">6 Speeds</option>
                                            <option value="7">7 Speeds</option>
                                            <option value="8">8 Speeds</option>
                                            <option value="9">9 Speeds</option>
                                        </select>
                                        @error('speeds')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Emission Class" wire:model.lazy="emission_class" type="text">
                                        @error('emission_class')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    @if(session()->has('message'))
                                        <div class="alert alert-success fw-bold">{{ session('message') }}</div>
                                    @endif

                                    @if(session()->has('error'))
                                        <div class="alert alert-danger fw-bold">{{ session('error') }}</div>
                                    @endif

                                    @foreach ($errors->all() as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach

                                    <!-- Submit Button -->
                                    <div class="form-group btn btn-list">
                                        <button class="btn ripple btn-main-primary" type="submit">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script>
        function removeImage(index) {
            @this.call('removeImage', index); // Call Livewire method to remove image from array
        }
    </script>
</div>
