@extends('private_seller.layout')

@section('content')
  <div class="page-header">
    <h4 class="page-title">{{ __('Edit 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> {{ __('Vehicle Management') }}
            </a>
        </li>

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

        <li class="nav-item active">
            <a href="#">
                <i class="fas fa-edit"></i> {{ __('Edit 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">{{ __('Edit Car') }}</div>
                </div>

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

                            @if ($errors->any())
                                <div class="alert alert-danger pb-1">
                                    <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

                            <form
                                id="sellerVehicleEditForm"
                                action="{{ route('seller.vehicles.update', $vehicle->id) }}"
                                method="POST"
                                enctype="multipart/form-data"
                            >
                                @csrf

                                <div class="row">
                                    <div class="col-lg-12 mb-3">
                                        <h4 class="mb-0">{{ __('Vehicle Details') }}</h4>
                                    </div>
                                </div>

                                {{-- Image gallery --}}
                                <div class="row mb-4">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="mb-2 d-block">
                                                <strong>{{ __('Vehicle Images') }}</strong>
                                            </label>

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

                                            <div id="imageUploadBox" class="image-upload-box mb-3">
                                                <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 add more images') }}</h6>
                                                    <p class="text-muted mb-0">{{ __('PNG, JPG, JPEG allowed') }}</p>
                                                </div>
                                            </div>

                                            <div id="imagePreviewWrapper" class="row mt-3">
                                                @if (isset($vehicle->images) && count($vehicle->images) > 0)
                                                    @foreach ($vehicle->images as $img)
                                                        <div class="col-md-3 col-sm-4 col-6 preview-item" id="existing-img-{{ $img->id }}">
                                                            <button type="button" class="remove-img-btn" onclick="removeExistingImage({{ $img->id }})">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                            <div class="preview-img-container">
                                                                <img src="{{ asset('uploads/vehicles/' . $img->image) }}" alt="">
                                                            </div>
                                                            <input type="hidden" name="remove_images[]" id="input-remove-{{ $img->id }}" value="">
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    {{-- Car Type --}}
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>{{ __('Car Type') }}</label>
                                            <select name="car_type" class="form-control">
                                                <option value="car" {{ old('car_type', $vehicle->car_type) == 'car' ? 'selected' : '' }}>{{ __('Car') }}</option>
                                                <option value="truck" {{ old('car_type', $vehicle->car_type) == 'truck' ? 'selected' : '' }}>{{ __('Truck') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- 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="" disabled>{{ __('Select Brand') }}</option>
                                                @foreach ($brands as $brand)
                                                    <option value="{{ $brand->id }}" {{ old('brand_id', $vehicle->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="" disabled>{{ __('Select Model') }}</option>
                                                @if (isset($models))
                                                    @foreach ($models as $model)
                                                        <option value="{{ $model->id }}" {{ old('model_id', $vehicle->model_id) == $model->id ? 'selected' : '' }}>
                                                            {{ $model->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </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="" 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', $vehicle->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="" disabled>{{ __('Select Version') }}</option>
                                                @if (isset($versions))
                                                    @foreach ($versions as $version)
                                                        <option value="{{ $version->id }}" {{ old('version_id', $vehicle->version_id) == $version->id ? 'selected' : '' }}>
                                                            {{ $version->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </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', $vehicle->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="" disabled>{{ __('Select Fuel type') }}</option>
                                                <option value="Nafta" {{ old('fuel_type', $vehicle->fuel_type) == 'Nafta' ? 'selected' : '' }}>Nafta</option>
                                                <option value="Diesel" {{ old('fuel_type', $vehicle->fuel_type) == 'Diesel' ? 'selected' : '' }}>Diésel</option>
                                                <option value="Electrico" {{ old('fuel_type', $vehicle->fuel_type) == 'Electrico' ? 'selected' : '' }}>Eléctrico</option>
                                                <option value="Hibrido" {{ old('fuel_type', $vehicle->fuel_type) == 'Hibrido' ? 'selected' : '' }}>Híbrido</option>
                                                <option value="Hibrido/Diesel" {{ old('fuel_type', $vehicle->fuel_type) == 'Hibrido/Diesel' ? 'selected' : '' }}>Híbrido/Diesel</option>
                                                <option value="Nafta/GNC" {{ old('fuel_type', $vehicle->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="" disabled>{{ __('Select Transmission') }}</option>
                                                <option value="Manual" {{ old('transmision', $vehicle->transmision) == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                                <option value="Automática" {{ old('transmision', $vehicle->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', $vehicle->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', $vehicle->mileage) }}" placeholder="{{ __('Enter Mileage') }}" min="0">
                                        </div>
                                    </div>

                                    {{-- Price --}}
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>{{ __('Price') }}</label>
                                            <input type="number" name="price" class="form-control" placeholder="{{ __('Enter price') }}" step="0.01" value="{{ old('price', $vehicle->price) }}">
                                        </div>
                                    </div>

                                    {{-- Currency --}}
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>{{ __('Currency') }}</label>
                                            <select name="currency" class="form-control">
                                                <option value="" disabled>{{ __('Select Currency') }}</option>
                                                <option value="USD" {{ old('currency', $vehicle->currency) == 'USD' ? 'selected' : '' }}>USD</option>
                                                <option value="ARS" {{ old('currency', $vehicle->currency) == 'ARS' ? 'selected' : '' }}>ARS</option>
                                                <option value="EUR" {{ old('currency', $vehicle->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="" disabled>{{ __('Select Color') }}</option>
                                                <option value="White" {{ old('color', $vehicle->color) == 'White' ? 'selected' : '' }}>White</option>
                                                <option value="Black" {{ old('color', $vehicle->color) == 'Black' ? 'selected' : '' }}>Black</option>
                                                <option value="Gray" {{ old('color', $vehicle->color) == 'Gray' ? 'selected' : '' }}>Gray</option>
                                                <option value="Silver" {{ old('color', $vehicle->color) == 'Silver' ? 'selected' : '' }}>Silver</option>
                                                <option value="Red" {{ old('color', $vehicle->color) == 'Red' ? 'selected' : '' }}>Red</option>
                                                <option value="Blue" {{ old('color', $vehicle->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="" disabled>{{ __('Select Traction') }}</option>
                                                <option value="4x2" {{ old('traction', $vehicle->traction) == '4x2' ? 'selected' : '' }}>4x2</option>
                                                <option value="4x4" {{ old('traction', $vehicle->traction) == '4x4' ? 'selected' : '' }}>4x4</option>
                                                <option value="AWD" {{ old('traction', $vehicle->traction) == 'AWD' ? 'selected' : '' }}>AWD</option>
                                                <option value="4WD" {{ old('traction', $vehicle->traction) == '4WD' ? 'selected' : '' }}>4WD</option>
                                            </select>
                                        </div>
                                    </div>



                                    {{-- Title owner --}}
                                    <div class="col-lg-6">
                                        <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', $vehicle->is_title_owner) == 1 ? 'selected' : '' }}>{{ __('Yes') }}</option>
                                                <option value="0" {{ old('is_title_owner', $vehicle->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="" 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', $vehicle->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="" 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="" disabled>{{ __('Select Zona') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Status --}}
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>{{ __('Status') }}</label>
                                            <select name="status" class="form-control">
                                                <option value="active" {{ old('status', $vehicle->status) == 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                                <option value="inactive" {{ old('status', $vehicle->status) == 'inactive' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                                <option value="closed" {{ old('status', $vehicle->status) == 'closed' ? 'selected' : '' }}>{{ __('Closed') }}</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', $vehicle->address) }}" placeholder="{{ __('Vehicle location address') }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <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', $vehicle->title) }}" placeholder="{{ __('Enter Title') }}">
                                        </div>
                                    </div>

                                    <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', $vehicle->description) }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                {{-- Accessories --}}
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="d-block">{{ __('Accessories / Features') }}</label>
                                            @php
                                                $selectedAccessories = old('accessories', $vehicle->accessories ?? []);
                                                if (!is_array($selectedAccessories)) $selectedAccessories = [];
                                            @endphp
                                            <div class="row">
                                                <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', $selectedAccessories) ? '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', $selectedAccessories) ? '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', $selectedAccessories) ? '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', $selectedAccessories) ? 'checked' : '' }}>
                                                        {{ __('Electric windows') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Conditions --}}
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="d-block">{{ __('Conditions (You can select multiple)') }}</label>
                                            @php
                                                $selectedConditions = old('conditions', $vehicle->conditions ?? []);
                                                if (!is_array($selectedConditions)) $selectedConditions = [];
                                            @endphp
                                            <div class="row">
                                                <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', $selectedConditions) ? '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', $selectedConditions) ? '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', $selectedConditions) ? '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', $selectedConditions) ? 'checked' : '' }}>
                                                        {{ __('Never shocked') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 text-center">
                            <button type="submit" form="sellerVehicleEditForm" class="btn btn-primary">
                                {{ __('Update Vehicle') }}
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .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: -8px;
            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>
function removeExistingImage(id) {
    if (confirm("{{ __('Are you sure you want to remove this image?') }}")) {
        const input = document.getElementById('input-remove-' + id);
        input.value = id;
        document.getElementById('existing-img-' + id).style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function () {

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

    let newFilesDT = new DataTransfer();

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

    if (fileInput) {
        fileInput.addEventListener('change', function() {
            Array.from(this.files).forEach(file => {
                newFilesDT.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="">
                    </div>
                `;

                col.querySelector('.remove-img-btn').addEventListener('click', () => {
                    URL.revokeObjectURL(blobUrl);
                    col.remove();

                    const newDT = new DataTransfer();
                    for (let f of newFilesDT.files) {
                        if (f !== file) newDT.items.add(f);
                    }

                    newFilesDT = newDT;
                    fileInput.files = newFilesDT.files;
                    updateUploadStatus();
                });

                previewWrapper.appendChild(col);
            });

            fileInput.files = newFilesDT.files;
            updateUploadStatus();
        });
    }

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

    /* -----------------------------
       BRAND / MODEL / VERSION
    ----------------------------- */
    const brandSelect = document.getElementById('brand_id');
    const modelSelect = document.getElementById('model_id');
    const versionSelect = document.getElementById('version_id');

    const currentModelId = @json(old('model_id', $vehicle->model_id));
    const currentVersionId = @json(old('version_id', $vehicle->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 (String(currentModelId) === String(item.id)) {
                            opt.selected = true;
                        }

                        modelSelect.appendChild(opt);
                    });

                    if (currentModelId) {
                        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 (String(currentVersionId) === String(item.id)) {
                            opt.selected = true;
                        }

                        versionSelect.appendChild(opt);
                    });
                });
        });
    }

    /* -----------------------------
       DEPARTMENT / CIUDAD / ZONA
    ----------------------------- */
    const countrySelect = document.getElementById('country_id');
    const stateSelect = document.getElementById('state_id');
    const citySelect = document.getElementById('city_id');

    const currentCountryId = @json(old('country_id', $vehicle->country_id));
    const currentStateId = @json(old('state_id', $vehicle->state_id));
    const currentCityId = @json(old('city_id', $vehicle->city_id));

    function loadStates(countryId, selectedStateId = null, callback = null) {
        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 => {
                const states = response.states ?? [];

                states.forEach(item => {
                    const opt = document.createElement('option');
                    opt.value = item.id;
                    opt.textContent = item.name ?? ('Ciudad #' + item.id);

                    if (selectedStateId && String(selectedStateId) === String(item.id)) {
                        opt.selected = true;
                    }

                    stateSelect.appendChild(opt);
                });

                if (callback) callback();
            });
    }

    function loadCities(stateId, selectedCityId = null) {
        citySelect.innerHTML = '<option value="" selected disabled>Select Zona</option>';

        if (!stateId) return;

        fetch("{{ url('/seller/ajax/cities') }}/" + stateId)
            .then(r => r.json())
            .then(response => {
                const cities = response.cities ?? [];

                cities.forEach(item => {
                    const opt = document.createElement('option');
                    opt.value = item.id;
                    opt.textContent = item.name ?? ('Zona #' + item.id);

                    if (selectedCityId && String(selectedCityId) === String(item.id)) {
                        opt.selected = true;
                    }

                    citySelect.appendChild(opt);
                });
            });
    }

    if (countrySelect) {
        countrySelect.addEventListener('change', function () {
            loadStates(this.value);
        });
    }

    if (stateSelect) {
        stateSelect.addEventListener('change', function () {
            loadCities(this.value);
        });
    }

    /* preload selected state/city on edit */
    if (currentCountryId) {
        loadStates(currentCountryId, currentStateId, function () {
            if (currentStateId) {
                loadCities(currentStateId, currentCityId);
            }
        });
    }
});
</script>
@endsection