@extends('private_seller.layout')

@section('content')
   <div class="page-header">
    <h4 class="page-title">{{ __('Add Car') }}</h4>

    <ul class="breadcrumbs">
        <li class="nav-home">
            <a href="{{ route('seller.dashboard') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>

        <li class="separator">
            <i class="fas fa-chevron-right"></i>
        </li>

        <li class="nav-item">
            <a href="#">
                <i class="fas fa-car"></i> {{ __('My Vehicles') }}
            </a>
        </li>

        <li class="separator">
            <i class="fas fa-chevron-right"></i>
        </li>

        <li class="nav-item active">
            <a href="#">
                <i class="fas fa-plus-circle"></i> {{ __('Add Car') }}
            </a>
        </li>
    </ul>
</div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title d-inline-block">{{ __('Add New Car') }}</div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-10 offset-lg-1">

                            {{-- Server side validation --}}
                            @if ($errors->any())
                                <div class="alert alert-danger ">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{-- Client side validation summary --}}
                            <div id="clientValidationBox" class="alert alert-danger  d-none">
                                <button type="button" class="close" id="closeClientValidationBox">×</button>
                                <strong>{{ __('Please complete the required fields before saving:') }}</strong>
                                <ul class="mb-0 mt-2" id="clientValidationList"></ul>
                            </div>

                            <form
                                id="sellerVehicleForm"
                                action="{{ route('seller.vehicles.store') }}"
                                method="POST"
                                enctype="multipart/form-data"
                            >
                                @csrf

                                <input type="hidden" name="car_type" id="car_type" value="{{ old('car_type') }}">

                                {{-- STEP 1 --}}
                                <div id="step-1">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group mb-4">
                                                <label class="mb-3 d-block">
                                                    <strong>{{ __('Choose car type') }}</strong>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="card border car-type-card car-type-option" data-type="car" role="button">
                                                <div class="card-body text-center">
                                                    <div class="mb-3">
                                                        <i class="fas fa-car fa-3x text-primary"></i>
                                                    </div>
                                                    <h4 class="mb-1">{{ __('Car') }}</h4>
                                                    <p class="text-muted mb-0">{{ __('CARS AND TRUCKS') }}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="card border car-type-card car-type-option" data-type="truck" role="button">
                                                <div class="card-body text-center">
                                                    <div class="mb-3">
                                                        <i class="fas fa-truck fa-3x text-primary"></i>
                                                    </div>
                                                    <h4 class="mb-1">{{ __('Truck') }}</h4>
                                                    <p class="text-muted mb-0">{{ __('TRUCKS') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- STEP 2 --}}
                                <div id="step-2" style="display:none;">
                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h4 class="mb-0">{{ __('Add Auto') }}</h4>
                                                <button type="button" class="btn btn-secondary btn-sm" id="backToStep1">
                                                    <i class="fas fa-arrow-left mr-1"></i> {{ __('Back') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Gallery --}}
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="mb-2 d-block">
                                                    <strong>{{ __('Image gallery') }}</strong> <span class="text-danger">*</span>
                                                </label>

                                                <input
                                                    type="file"
                                                    name="images[]"
                                                    id="vehicleImagesInput"
                                                    class="d-none"
                                                    multiple
                                                    accept="image/*"
                                                >

                                                <div id="imageUploadBox" class="image-upload-box">
                                                    <div class="upload-box-inner">
                                                        <div class="upload-icon-wrap">
                                                            <i class="fas fa-cloud-upload-alt fa-3x"></i>
                                                        </div>
                                                        <h6 class="mb-1" id="uploadTextTitle">{{ __('Click to upload images') }}</h6>
                                                        <p class="text-muted mb-0">{{ __('PNG, JPG, JPEG allowed') }}</p>
                                                    </div>
                                                </div>

                                                <small class="text-muted d-block mt-2">
                                                    {{ __('You can select multiple images.') }}
                                                </small>

                                                <div id="imagePreviewWrapper" class="row mt-3"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- Brand --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Mark') }} <span class="text-danger">*</span></label>
                                                <select name="brand_id" id="brand_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Brand') }}</option>
                                                    @foreach ($brands ?? [] as $brand)
                                                        <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                                            {{ $brand->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Model --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Model') }} <span class="text-danger">*</span></label>
                                                <select name="model_id" id="model_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Model') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Category --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Category') }}</label>
                                                <select name="category_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Category') }}</option>
                                                    @foreach ($categories ?? [] as $category)
                                                        @php
                                                            $categoryName = method_exists($category, 'categoryContents')
                                                                ? optional($category->categoryContents()->first())->name
                                                                : ($category->name ?? $category->title ?? null);
                                                        @endphp
                                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                            {{ $categoryName ?? ('Category #' . $category->id) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Version --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Version') }}</label>
                                                <select name="version_id" id="version_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Version') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Motor --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Motor') }}</label>
                                                <input type="text" name="motor" class="form-control" value="{{ old('motor') }}" placeholder="{{ __('Enter Motor') }}">
                                            </div>
                                        </div>

                                        {{-- Fuel --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Fuel type') }}</label>
                                                <select name="fuel_type" class="form-control">
                                                    <option value="" selected disabled>{{ __('Select Fuel type') }}</option>
                                                    <option value="Nafta" {{ old('fuel_type') == 'Nafta' ? 'selected' : '' }}>Nafta</option>
                                                    <option value="Diesel" {{ old('fuel_type') == 'Diesel' ? 'selected' : '' }}>Diésel</option>
                                                    <option value="Electrico" {{ old('fuel_type') == 'Electrico' ? 'selected' : '' }}>Eléctrico</option>
                                                    <option value="Hibrido" {{ old('fuel_type') == 'Hibrido' ? 'selected' : '' }}>Híbrido</option>
                                                    <option value="Hibrido/Diesel" {{ old('fuel_type') == 'Hibrido/Diesel' ? 'selected' : '' }}>Híbrido/Diesel</option>
                                                    <option value="Nafta/GNC" {{ old('fuel_type') == 'Nafta/GNC' ? 'selected' : '' }}>Nafta/GNC</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Transmission --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Transmission') }}</label>
                                                <select name="transmision" class="form-control">
                                                    <option value="" selected disabled>{{ __('Select Transmission') }}</option>
                                                    <option value="Manual" {{ old('transmision') == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                                    <option value="Automática" {{ old('transmision') == 'Automática' ? 'selected' : '' }}>{{ __('Automatic') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Year --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Year') }} <span class="text-danger">*</span></label>
                                                <input type="number" name="year" class="form-control" value="{{ old('year') }}" placeholder="{{ __('Enter Year') }}" min="1900" max="{{ date('Y') }}">
                                            </div>
                                        </div>

                                        {{-- Mileage --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Mileage') }}</label>
                                                <input type="number" name="mileage" class="form-control" value="{{ old('mileage') }}" placeholder="{{ __('Enter Mileage') }}" min="0">
                                            </div>
                                        </div>

                                        {{-- Price --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Price') }} <span class="text-danger">*</span></label>
                                                <input type="number" name="price" class="form-control" placeholder="{{ __('Enter price') }}" step="1" min="0" value="{{ old('price') }}">
                                            </div>
                                        </div>

                                        {{-- Currency --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Currency') }}</label>
                                                <select name="currency" class="form-control">
                                                    <option value="" selected disabled>{{ __('Select Currency') }}</option>
                                                    <option value="USD" {{ old('currency')=='USD'?'selected':'' }}>USD</option>
                                                    <option value="ARS" {{ old('currency')=='ARS'?'selected':'' }}>ARS</option>
                                                    <option value="EUR" {{ old('currency')=='EUR'?'selected':'' }}>EUR</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Color --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Color') }}</label>
                                                <select name="color" class="form-control">
                                                    <option value="" selected disabled>{{ __('Select Color') }}</option>
                                                    <option value="White" {{ old('color')=='White'?'selected':'' }}>White</option>
                                                    <option value="Black" {{ old('color')=='Black'?'selected':'' }}>Black</option>
                                                    <option value="Gray" {{ old('color')=='Gray'?'selected':'' }}>Gray</option>
                                                    <option value="Silver" {{ old('color')=='Silver'?'selected':'' }}>Silver</option>
                                                    <option value="Red" {{ old('color')=='Red'?'selected':'' }}>Red</option>
                                                    <option value="Blue" {{ old('color')=='Blue'?'selected':'' }}>Blue</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Traction --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Traction') }}</label>
                                                <select name="traction" class="form-control">
                                                    <option value="" selected disabled>{{ __('Select Traction') }}</option>
                                                    <option value="4x2" {{ old('traction')=='4x2'?'selected':'' }}>4x2</option>
                                                    <option value="4x4" {{ old('traction')=='4x4'?'selected':'' }}>4x4</option>
                                                    <option value="AWD" {{ old('traction')=='AWD'?'selected':'' }}>AWD</option>
                                                    <option value="4WD" {{ old('traction')=='4WD'?'selected':'' }}>4WD</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Title Owner --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Do you have a degree in your name?') }}</label>
                                                <select name="is_title_owner" class="form-control">
                                                    <option value="1" {{ old('is_title_owner') == '1' ? 'selected' : '' }}>{{ __('Yes') }}</option>
                                                    <option value="0" {{ old('is_title_owner') == '0' ? 'selected' : '' }}>{{ __('No') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Department --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Department') }} <span class="text-danger">*</span></label>
                                                <select name="country_id" id="country_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Department') }}</option>
                                                    @foreach ($countries ?? [] as $country)
                                                        @php
                                                            $countryName = method_exists($country, 'contents')
                                                                ? optional($country->contents()->first())->name
                                                                : ($country->name ?? $country->title ?? null);
                                                        @endphp
                                                        <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                                            {{ $countryName ?? ('Department #' . $country->id) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Ciudad --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                                <select name="state_id" id="state_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Ciudad') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Zona --}}
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label>{{ __('Zona') }}</label>
                                                <select name="city_id" id="city_id" class="form-control js-example-basic-single3">
                                                    <option value="" selected disabled>{{ __('Select Zona') }}</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Address --}}
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>{{ __('Address') }}</label>
                                                <input type="text" name="address" class="form-control"
                                                       value="{{ old('address') }}" placeholder="Vehicle location address">
                                            </div>
                                        </div>

                                        {{-- Title --}}
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>{{ __('Title') }} <span class="text-danger">*</span></label>
                                                <input type="text" name="title" class="form-control" value="{{ old('title') }}" placeholder="{{ __('Enter Title') }}">
                                            </div>
                                        </div>

                                        {{-- Description --}}
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>{{ __('Description / Details') }}</label>
                                                <textarea name="description" class="form-control" rows="5" placeholder="{{ __('Enter Description / Details') }}">{{ old('description') }}</textarea>
                                            </div>
                                        </div>

                                        {{-- Accessories --}}
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="d-block">{{ __('Accessories / Features') }}</label>
                                                <div class="row">
                                                    @php $oldAccessories = old('accessories', []); @endphp
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="accessories[]" value="air_conditioning" {{ in_array('air_conditioning', $oldAccessories) ? 'checked' : '' }}>
                                                            {{ __('Air-conditioning') }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="accessories[]" value="cameras" {{ in_array('cameras', $oldAccessories) ? 'checked' : '' }}>
                                                            {{ __('Cameras') }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="accessories[]" value="touch_screen" {{ in_array('touch_screen', $oldAccessories) ? 'checked' : '' }}>
                                                            {{ __('Touch screen') }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="accessories[]" value="electric_windows" {{ in_array('electric_windows', $oldAccessories) ? 'checked' : '' }}>
                                                            {{ __('Electric windows') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Conditions --}}
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="d-block">{{ __('Conditions (You can select multiple)') }}</label>
                                                <div class="row">
                                                    @php $oldConditions = old('conditions', []); @endphp
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="conditions[]" value="under_warranty" {{ in_array('under_warranty', $oldConditions) ? 'checked' : '' }}>
                                                            {{ __("It's under warranty.") }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="conditions[]" value="has_debts" {{ in_array('has_debts', $oldConditions) ? 'checked' : '' }}>
                                                            {{ __('He has debts') }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="conditions[]" value="sole_owner" {{ in_array('sole_owner', $oldConditions) ? 'checked' : '' }}>
                                                            {{ __('Sole Owner') }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-check-label d-block mb-2">
                                                            <input type="checkbox" name="conditions[]" value="never_shocked" {{ in_array('never_shocked', $oldConditions) ? 'checked' : '' }}>
                                                            {{ __('Never shocked') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>{{-- row --}}
                                </div>{{-- step-2 --}}
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 text-center">
                            <button type="submit" form="sellerVehicleForm" class="btn btn-success" id="sellerVehicleSubmitBtn">
                                {{ __('Save') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .car-type-card {
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid #e5e7eb !important;
            border-radius: 12px;
        }

        .car-type-card:hover,
        .car-type-card.active {
            border-color: #1572e8 !important;
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .image-upload-box {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            background-color: #f9fafb;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }

        .image-upload-box:hover {
            border-color: #1572e8;
            background-color: #f0f7ff;
        }

        .upload-icon-wrap {
            margin-bottom: 10px;
            color: #1572e8;
        }

        .preview-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-img-container {
            width: 100%;
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            background: #fff;
        }

        .preview-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .remove-img-btn {
            position: absolute;
            top: -5px;
            right: 10px;
            background: #ff4d4d;
            color: #fff;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .remove-img-btn:hover {
            background: #cc0000;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const step1 = document.getElementById('step-1');
            const step2 = document.getElementById('step-2');
            const carTypeInput = document.getElementById('car_type');
            const typeCards = document.querySelectorAll('.car-type-option');
            const backBtn = document.getElementById('backToStep1');

            const uploadBox = document.getElementById('imageUploadBox');
            const fileInput = document.getElementById('vehicleImagesInput');
            const uploadTitle = document.getElementById('uploadTextTitle');
            const previewWrapper = document.getElementById('imagePreviewWrapper');

            const form = document.getElementById('sellerVehicleForm');
            const submitBtn = document.getElementById('sellerVehicleSubmitBtn');
            const clientValidationBox = document.getElementById('clientValidationBox');
            const clientValidationList = document.getElementById('clientValidationList');
            const closeClientValidationBox = document.getElementById('closeClientValidationBox');

            let selectedFiles = new DataTransfer();

            function showClientValidation(errors) {
                clientValidationList.innerHTML = '';
                errors.forEach(function (error) {
                    const li = document.createElement('li');
                    li.textContent = error;
                    clientValidationList.appendChild(li);
                });

                clientValidationBox.classList.remove('d-none');
                window.scrollTo({ top: clientValidationBox.offsetTop - 120, behavior: 'smooth' });
            }

            function hideClientValidation() {
                clientValidationBox.classList.add('d-none');
                clientValidationList.innerHTML = '';
            }

            if (closeClientValidationBox) {
                closeClientValidationBox.addEventListener('click', function () {
                    hideClientValidation();
                });
            }

            function validateBeforeSubmit() {
                const errors = [];

                const brandId = document.getElementById('brand_id').value;
                const modelId = document.getElementById('model_id').value;
                const year = document.querySelector('[name="year"]').value.trim();
                const price = document.querySelector('[name="price"]').value.trim();
                const countryId = document.getElementById('country_id').value;
                const stateId = document.getElementById('state_id').value;
                const title = document.querySelector('[name="title"]').value.trim();

                if (!carTypeInput.value) {
                    errors.push("{{ __('Please choose a car type.') }}");
                }

                if (selectedFiles.files.length === 0) {
                    errors.push("{{ __('Please upload at least one vehicle image.') }}");
                }

                if (!brandId) {
                    errors.push("{{ __('Please select a brand.') }}");
                }

                if (!modelId) {
                    errors.push("{{ __('Please select a model.') }}");
                }

                if (!year) {
                    errors.push("{{ __('Please enter the vehicle year.') }}");
                }

                if (!price) {
                    errors.push("{{ __('Please enter the vehicle price.') }}");
                }

                if (!countryId) {
                    errors.push("{{ __('Please select the department.') }}");
                }

                if (!stateId) {
                    errors.push("{{ __('Please select the city.') }}");
                }

                if (!title) {
                    errors.push("{{ __('Please enter the vehicle title.') }}");
                }

                if (errors.length > 0) {
                    if (step1.style.display !== 'none') {
                        step1.style.display = 'none';
                        step2.style.display = 'block';
                    }

                    showClientValidation(errors);
                    return false;
                }

                hideClientValidation();
                return true;
            }

            typeCards.forEach(card => {
                card.addEventListener('click', function () {
                    typeCards.forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    carTypeInput.value = this.dataset.type;
                    step1.style.display = 'none';
                    step2.style.display = 'block';
                    hideClientValidation();
                });
            });

            if (backBtn) {
                backBtn.addEventListener('click', function () {
                    step2.style.display = 'none';
                    step1.style.display = 'block';
                    hideClientValidation();
                });
            }

            const oldType = @json(old('car_type'));
            if (oldType) {
                carTypeInput.value = oldType;
                step1.style.display = 'none';
                step2.style.display = 'block';

                typeCards.forEach(card => {
                    if (card.dataset.type === oldType) {
                        card.classList.add('active');
                    }
                });
            }

            if (uploadBox && fileInput) {
                uploadBox.addEventListener('click', () => fileInput.click());
            }

            if (fileInput) {
                fileInput.addEventListener('change', function () {
                    const files = Array.from(this.files);

                    files.forEach(file => {
                        selectedFiles.items.add(file);

                        const blobUrl = URL.createObjectURL(file);
                        const col = document.createElement('div');
                        col.className = 'col-md-3 col-sm-4 col-6 preview-item';

                        col.innerHTML = `
                            <button type="button" class="remove-img-btn"><i class="fas fa-times"></i></button>
                            <div class="preview-img-container">
                                <img src="${blobUrl}" alt="Preview">
                            </div>
                        `;

                        col.querySelector('.remove-img-btn').addEventListener('click', function () {
                            removeFile(file, col, blobUrl);
                        });

                        previewWrapper.appendChild(col);
                    });

                    fileInput.files = selectedFiles.files;
                    updateUploadStatus();
                    hideClientValidation();
                });
            }

            function removeFile(fileToRemove, element, blobUrl) {
                URL.revokeObjectURL(blobUrl);
                element.remove();

                const newDT = new DataTransfer();
                for (let i = 0; i < selectedFiles.files.length; i++) {
                    const file = selectedFiles.files[i];
                    if (file !== fileToRemove) {
                        newDT.items.add(file);
                    }
                }
                selectedFiles = newDT;
                fileInput.files = selectedFiles.files;
                updateUploadStatus();
            }

            function updateUploadStatus() {
                const count = selectedFiles.files.length;
                if (count > 0) {
                    uploadTitle.innerText = count + " {{ __('images selected') }}";
                    uploadTitle.style.color = "#1572e8";
                } else {
                    uploadTitle.innerText = "{{ __('Click to upload images') }}";
                    uploadTitle.style.color = "#374151";
                }
            }

            const brandSelect = document.getElementById('brand_id');
            const modelSelect = document.getElementById('model_id');
            const versionSelect = document.getElementById('version_id');

            const oldModelId = @json(old('model_id'));
            const oldVersionId = @json(old('version_id'));

            if (brandSelect) {
                brandSelect.addEventListener('change', function () {
                    const brandId = this.value;
                    modelSelect.innerHTML = '<option value="" selected disabled>Select Model</option>';
                    versionSelect.innerHTML = '<option value="" selected disabled>Select Version</option>';

                    if (!brandId) return;

                    fetch("{{ url('/seller/ajax/models') }}/" + brandId)
                        .then(r => r.json())
                        .then(data => {
                            data.forEach(item => {
                                const opt = document.createElement('option');
                                opt.value = item.id;
                                opt.textContent = item.name ?? ('Model #' + item.id);
                                if (oldModelId && String(oldModelId) === String(item.id)) {
                                    opt.selected = true;
                                }
                                modelSelect.appendChild(opt);
                            });

                            if (oldModelId) {
                                modelSelect.dispatchEvent(new Event('change'));
                            }
                        });
                });

                if (brandSelect.value) {
                    brandSelect.dispatchEvent(new Event('change'));
                }
            }

            if (modelSelect) {
                modelSelect.addEventListener('change', function () {
                    const modelId = this.value;
                    versionSelect.innerHTML = '<option value="" selected disabled>Select Version</option>';

                    if (!modelId) return;

                    fetch("{{ url('/seller/ajax/versions') }}/" + modelId)
                        .then(r => r.json())
                        .then(data => {
                            data.forEach(item => {
                                const opt = document.createElement('option');
                                opt.value = item.id;
                                opt.textContent = item.name ?? ('Version #' + item.id);
                                if (oldVersionId && String(oldVersionId) === String(item.id)) {
                                    opt.selected = true;
                                }
                                versionSelect.appendChild(opt);
                            });
                        });
                });
            }

            const countrySelect = document.getElementById('country_id');
            const stateSelect = document.getElementById('state_id');
            const citySelect = document.getElementById('city_id');

            const oldCountryId = @json(old('country_id'));
            const oldStateId = @json(old('state_id'));
            const oldCityId = @json(old('city_id'));

            if (countrySelect) {
                countrySelect.addEventListener('change', function () {
                    const countryId = this.value;

                    stateSelect.innerHTML = '<option value="" selected disabled>Select Ciudad</option>';
                    citySelect.innerHTML = '<option value="" selected disabled>Select Zona</option>';

                    if (!countryId) return;

                    fetch("{{ url('/seller/ajax/states') }}/" + countryId)
                        .then(r => r.json())
                        .then(response => {
                            if (response.states && response.states.length > 0) {
                                response.states.forEach(item => {
                                    const opt = document.createElement('option');
                                    opt.value = item.id;
                                    opt.textContent = item.name ?? ('Ciudad #' + item.id);
                                    if (oldStateId && String(oldStateId) === String(item.id)) {
                                        opt.selected = true;
                                    }
                                    stateSelect.appendChild(opt);
                                });
                            }

                            if (oldStateId) {
                                stateSelect.dispatchEvent(new Event('change'));
                            }
                        });
                });

                if (oldCountryId) {
                    countrySelect.dispatchEvent(new Event('change'));
                }
            }

            if (stateSelect) {
                stateSelect.addEventListener('change', function () {
                    const stateId = this.value;

                    citySelect.innerHTML = '<option value="" selected disabled>Select Zona</option>';

                    if (!stateId) return;

                    fetch("{{ url('/seller/ajax/cities') }}/" + stateId)
                        .then(r => r.json())
                        .then(response => {
                            if (response.cities && response.cities.length > 0) {
                                response.cities.forEach(item => {
                                    const opt = document.createElement('option');
                                    opt.value = item.id;
                                    opt.textContent = item.name ?? ('Zona #' + item.id);
                                    if (oldCityId && String(oldCityId) === String(item.id)) {
                                        opt.selected = true;
                                    }
                                    citySelect.appendChild(opt);
                                });
                            }
                        });
                });
            }

            if (form && submitBtn) {
                form.addEventListener('submit', function (e) {
                    if (!validateBeforeSubmit()) {
                        e.preventDefault();
                        return false;
                    }

                    submitBtn.disabled = true;
                    submitBtn.innerHTML = "{{ __('Saving...') }}";
                });
            }
        });
    </script>
@endsection