@extends('user.layout')

@section('content')
    <div class="page-header">
        <h4 class="page-title">{{ __('Add Car') }}</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="{{ route('user-dashboard') }}">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">{{ __('Car Management') }}</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">{{ __('Add Car') }}</a>
            </li>
        </ul>
    </div>



        <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 12px;">
            <div class="card-body p-4">
                                            <div class="alert alert-danger pb-1 dis-none" id="propertyErrors">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <ul></ul>
                            </div>
                <div class="col-lg-12">
                                <label for="" class="mb-2"><strong> {{ __('Gallery Images') }}
                                    </strong> <span class="text-danger">{{ '*' }}</span> </label>
                                <form action="{{ route('user.property.imagesstore') }}" id="my-dropzone"
                                    enctype="multipart/form-data" class="dropzone create">
                                    @csrf
                                    <div class="fallback">
                                        <input name="file" type="file" multiple />
                                    </div>
                                </form>
                                <p class="em text-danger mb-0" id="errslider_images"></p>
                            </div>
                


    <form id="propertyForm" action="{{ route('user.property_management.store_property') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="type" value="{{ request()->type }}">
        <div id="sliders"></div>
                <div class="row text-center">
                    <div class="col-md-4 mb-3">
                        <div class="form-group px-0">
                            <label class="fw-bold text-dark d-block mb-2 text-left" style="font-size: 13px;">{{ __('Imagen miniatura') }} <span class="text-danger">{{ '*' }}</span></label>
                            <div class="thumb-preview my-2 mx-auto d-flex align-items-center justify-content-center border" style="border-radius: 8px; max-width: 220px; height: 160px; background: #fbfbfb;">
                                <img src="{{ asset('assets/img/noimage.jpg') }}" alt="..." class="uploaded-img" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                            </div>
                            <div class="mt-2">
                                <div role="button" class="btn btn-primary btn-sm upload-btn px-3" style="border-radius: 6px;">
                                    {{ __('Elegir imagen') }}
                                    <input type="file" class="img-input" name="featured_image">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <div class="form-group px-0">
                            <label class="fw-bold text-dark d-block mb-2 text-left" style="font-size: 13px;">{{ __('Engine photo') }}</label>
                            <div class="thumb-preview remove my-2 mx-auto d-flex align-items-center justify-content-center border" style="border-radius: 8px; max-width: 220px; height: 160px; background: #fbfbfb;">
                                <img src="{{ asset('assets/img/noimage.jpg') }}" alt="..." class="uploaded-img2" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                            </div>
                            <div class="mt-2">
                                <div role="button" class="btn btn-primary btn-sm upload-btn px-3" style="border-radius: 6px;">
                                    {{ __('Elegir imagen') }}
                                    <input type="file" class="img-input2" name="floor_planning_image">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <div class="form-group px-0">
                            <label class="fw-bold text-dark d-block mb-2 text-left" style="font-size: 13px;">{{ __('Imagen del video') }}</label>
                            <div class="thumb-preview remove my-2 mx-auto d-flex align-items-center justify-content-center border" style="border-radius: 8px; max-width: 220px; height: 160px; background: #fbfbfb;">
                                <img src="{{ asset('assets/img/noimage.jpg') }}" alt="..." class="uploaded-img3" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                            </div>
                            <div class="mt-2">
                                <div role="button" class="btn btn-primary btn-sm upload-btn px-3" style="border-radius: 6px;">
                                    {{ __('Elegir imagen') }}
                                    <input type="file" class="img-input3" name="video_image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-lg-12 px-0">
                        <div class="form-group mb-0">
                            <label class="fw-bold text-dark mb-1" style="font-size: 13px;">{{ __('URL del video') }}</label>
                            <input type="text" class="form-control" name="video_url" placeholder="{{ __('Ingresar URL del video') }}" style="height:42px; border-radius:8px; font-size:13px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 12px;">
            <div class="card-body p-4">
                <div class="d-flex align-items-center mb-4">
                    <div class="rounded-circle p-2 d-flex align-items-center justify-content-center text-primary" style="width: 40px; height: 40px; background-color: #e3f2fd; margin-right: 12px;">
                        <i class="fas fa-car fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="mb-0 fw-bold text-dark" style="font-size: 16px;">Información del vehículo</h5>
                        <small class="text-muted">Completa los datos principales de tu vehículo. Los campos marcados con * son obligatorios.</small>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Condición') }} <span class="text-danger">*</span></label>
                            <select name="purpose" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                <option selected disabled value="">{{ __('Select') }}</option>
                                @if ($bs->is_rent_active == 1) <option value="rent">{{ __('Rent') }}</option> @endif
                                @if ($bs->is_sale_active == 1) <option value="sale">{{ __('Sale') }}</option> @endif
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Carrocería') }} <span class="text-danger">*</span></label>
                            <select name="category_id" class="form-control category" style="height:42px; border-radius:8px; font-size:13px;">
                                <option disabled selected>{{ __('Select') }}</option>
                                @foreach ($propertyCategories as $category)
                                    @php $catContent = $category->categoryContents()->first(); @endphp
                                    <option value="{{ $category->id }}">{{ @$catContent->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    @if ($adminBs->property_country_status == 1)
                        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                            <div class="form-group px-0">
                                <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Departamento') }} <span class="text-danger">*</span></label>
                                <select name="country_id" class="form-control country js-example-basic-single3">
                                    <option disabled selected>{{ __('Select') }}</option>
                                    @foreach ($propertyCountries as $country)
                                        @php $countryContent = $country->contents()->first(); @endphp
                                        <option value="{{ $country->id }}">{{ @$countryContent->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    @if ($adminBs->property_state_status == 1)
                        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                            <div class="form-group px-0">
                                <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                <select onchange="getCities(event)" name="state_id" class="form-control state_id states js-example-basic-single3">
                                    <option selected disabled>{{ __('Select') }}</option>
                                    @foreach ($states as $state)
                                        @php $stateContent = $state->contents()->first(); @endphp
                                        <option value="{{ $state->id }}">{{ @$stateContent->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                  <div class="col-lg-3 col-md-4 col-sm-6 mb-3 zona-wrapper" style="display:none;">
    <div class="form-group px-0">
        <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Zona') }}</label>
        <select name="city_id" class="form-control city_id js-example-basic-single3">
            <option value="" selected disabled>{{ __('Select Area') }}</option>
        </select>
    </div>
</div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Marca') }} <span class="text-danger">*</span></label>
                            <select id="brand_id" name="brand_id" class="form-control brand js-example-basic-single3" onchange="getModels(event)">
                                <option disabled selected>{{ __('Select Brand') }}</option>
                                @if(isset($brands))
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Modelo') }} <span class="text-danger">*</span></label>
                            <select id="model_id" name="model_id" class="form-control model_id js-example-basic-single3" onchange="getVersions(event)">
                                <option disabled selected>{{ __('Select Model') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Versión') }}</label>
                            <select id="version_id" name="version_id" class="form-control version_id js-example-basic-single3">
                                <option disabled selected>{{ __('Select Version') }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Año') }} <span class="text-danger">*</span></label>
                            <input type="number" id="year" name="year" class="form-control" placeholder="2020" min="1900" max="{{ now()->year }}" style="height:42px; border-radius:8px; font-size:13px;">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Kilometraje') }} <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" id="km_input" name="km" class="form-control" placeholder="45.000" min="0" style="height:42px; border-radius:8px 0 0 8px; font-size:13px;">
                                <div class="input-group-append"><span class="input-group-text bg-light text-muted" style="height:42px; border-radius:0 8px 8px 0;">km</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Tipo de combustible') }} <span class="text-danger">*</span></label>
                            <select id="fuel_input" name="area" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                <option value="" selected disabled>{{ __('Select') }}</option>
                                                                    <option value="Nafta">Nafta</option>
                                    <option value="Diesel">Diésel</option>
                                    <option value="Electrico">Eléctrico</option>
                                    <option value="Hibrido">Híbrido</option>
                                    <option value="Hibrido/Diesel">Híbrido/Diesel</option>
                                    <option value="Nafta/GNC">Nafta/GNC</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Transmisión') }} <span class="text-danger">*</span></label>
                            <select id="transmission_input" name="transmision" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                <option disabled selected>{{ __('Select') }}</option>
                                <option value="Manual">Manual</option>
                                <option value="Automática">Automática (CVT)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Tracción') }} <span class="text-danger">*</span></label>
                            <select name="traction" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                <option disabled selected>{{ __('Select') }}</option>
<option value="4x2">4x2</option>
<option value="4x4">4x4</option>
<option value="6x2">6x2</option>
<option value="6x4">6x4</option>
<option value="6x6">6x6</option>
<option value="Delantera">Delantera</option>
<option value="Trasera">Trasera</option>
<option value="Integral">Integral</option>

                            </select>
                        </div>
                    </div>
                    
                    
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
    <div class="form-group px-0">
        <label class="text-secondary mb-1" style="font-size: 12px;">
            {{ __('Dirección') }}
        </label>

        <select name="steering"
                class="form-control"
                style="height:42px; border-radius:8px; font-size:13px;">
            <option value="" selected>{{ __('Select') }}</option>

            <option value="Asistencia hidráulica">Asistencia hidráulica</option>

            <option value="Asistencia eléctrica">Asistencia eléctrica</option>

            <option value="Asistencia electrohidráulica">Asistencia electrohidráulica</option>

            <option value="Dirección mecánica">Dirección mecánica</option>
        </select>
    </div>
</div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Motor') }}</label>
                            <input type="text" id="engine_input" class="form-control" name="engine" placeholder="1.6" style="height:42px; border-radius:8px; font-size:13px;">
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Color') }} <span class="text-danger">*</span></label>
                            <select id="color_input" name="color" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                <option disabled selected>{{ __('Select') }}</option>
                                 <option value="Blanco" selected="">Blanco</option>
                                                                            <option value="Negro">Negro</option>
                                                                            <option value="Rojo">Rojo</option>
                                                                            <option value="Azul">Azul</option>
                                                                            <option value="Gris">Gris</option>
                                                                            <option value="Plata">Plata</option>
                                                                            <option value="Verde">Verde</option>
                                                                            <option value="Marrón">Marrón</option>
                                                                            <option value="Beige">Beige</option>
                                                                            <option value="Dorado">Dorado</option>
                                                                            <option value="Naranja">Naranja</option>
                                                                            <option value="Amarillo">Amarillo</option>
                                                                            <option value="Rosado">Rosado</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <div class="form-group px-0">
                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Características / Accesorios') }}</label>
                            <select name="amenities[]" class="form-control amenities-values js-example-basic-single2" multiple="multiple">
                                @foreach ($amenities as $amenity)
                                    @php $amContent = $amenity->contents()->first(); @endphp
                                    <option value="{{ $amenity->id }}" data-value="{{ $amContent?->name }}">{{ @$amContent->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 12px;">
            <div class="card-body p-4 pb-2">
                <div class="d-flex align-items-center mb-4">
                    <div class="rounded-circle p-2 d-flex align-items-center justify-content-center text-success" style="width: 40px; height: 40px; background-color: #e8f5e9; margin-right: 12px;">
                        <i class="fas fa-dollar-sign fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="mb-0 fw-bold text-dark">Precio y publicación</h5>
                        <small class="text-muted">Define el precio de venta, el costo de compra y la configuración de publicación.</small>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8" style="padding-right: 25px;">
                        <span class="text-dark d-block fw-bold mb-2" style="font-size: 13px;">Precio de venta *</span>
                        <div class="row">
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <div class="form-group px-0">
                                    <label class="text-muted mb-1" style="font-size: 11px;">Precio *</label>
                                    <input type="number" class="form-control" name="price" placeholder="18.500" style="height:42px; border-radius:8px; font-size:13px;">
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <div class="form-group px-0">
                                    <label class="text-muted mb-1" style="font-size: 11px;">Moneda *</label>
                                    <select name="currency_symbol" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="U$D">USD</option>
                                        <option value="UY$">UY$</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <div class="form-group px-0">
                                    <label class="text-muted mb-1" style="font-size: 11px;">Costo de compra <i class="fas fa-info-circle text-muted" title="Costo interno corporativo"></i></label>
                                    <input type="number" step="0.01" class="form-control" name="cost" placeholder="15.000" style="height:42px; border-radius:8px; font-size:13px;">
                                </div>
                            </div>
                        </div>

                        <div class="alert py-2 px-3 border-0 mb-4" style="background-color: #e3f2fd; color: #0d6efd; border-radius: 6px; font-size: 12px;">
                            <i class="fas fa-info-circle me-1" style="margin-right: 4px;"></i> El costo de compra es solo para tu control interno y no será visible en la publicación.
                        </div>

                        <span class="text-dark d-block fw-bold mb-1" style="font-size: 13px;">Compartir con Otras Automotoras *</span>
                        <small class="text-muted d-block mb-3" style="font-size: 12px;">Define si la publicación va a ser compartida con más automotoras</small>
                        
                        <input type="hidden" name="share" id="share_input_tracker" value="1">
                        
                        <div class="row mb-4">
                            <div class="col-md-6 mb-2">
                                <div id="btn-share-allow" class="p-3 border text-center rounded d-flex align-items-center justify-content-center" style="cursor: pointer; border: 2px solid #059669; background-color: #f0fdf4; border-radius: 8px;">
                                    <div class="text-start">
                                        <span class="fw-bold text-success d-block" style="font-size: 14px;"><i class="fas fa-check-circle me-1" style="margin-right:4px;"></i> Compartir</span>
                                        <small class="text-muted" style="font-size: 11px;">Estás compartiendo este Auto</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div id="btn-share-deny" class="p-3 border text-center rounded d-flex align-items-center justify-content-center" style="cursor: pointer; border: 1px solid #dee2e6; background-color: #ffffff; border-radius: 8px;">
                                    <div class="text-start">
                                        <span class="fw-bold text-secondary d-block" style="font-size: 14px;"><i class="far fa-circle me-1" style="margin-right:4px;"></i> No Compartir</span>
                                        <small class="text-muted" style="font-size: 11px;">No se compartirá este Auto</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group px-0">
                                    <label class="fw-bold text-dark mb-1" style="font-size: 12px;">Estado de publicación *</label>
                                    <select name="status" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="1">Activa</option>
                                        <option value="0">Inactiva</option>
                                    </select>
                                    <small class="text-muted mt-1 d-block" style="font-size: 11px;">Define si la publicación estará visible</small>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group px-0">
                                    <label class="fw-bold text-dark mb-1" style="font-size: 12px;">Agente</label>
                                    <select name="agent_id" class="form-control agent_id js-example-basic-single1">
                                        <option value="" selected>{{ __('Select Agent') }}</option>
                                        @foreach ($agents as $agent)
                                            <option value="{{ $agent->id }}">{{ $agent->username }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted mt-1 d-block" style="font-size: 11px;">Si no seleccionas un agente, el auto quedará asignado a ti</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mt-4 mt-lg-0">
                        @if($isMeliConnected)
                            <div class="p-4 border bg-white shadow-sm" style="border-radius: 12px; border-color: #eef1f4 !important;">
                                <div class="d-flex align-items-center mb-2">
                                    <img src="https://http2.mlstatic.com/frontend-assets/ml-web-navigation/ui-navigation/6.6.92/mercadolibre/logo__large_plus.png" alt="Meli" style="height: 22px; object-fit: contain; margin-right: 12px;">
                                    <div>
                                        <span class="badge px-2 py-1" style="font-size: 11px; background-color: #e8f5e9; color: #2e7d32 !important; border-radius: 4px; border: 1px solid #c8e6c9;">
                                            <i class="fas fa-check-circle"></i> Cuenta conectada
                                        </span>
                                    </div>
                                </div>
                                <p class="text-muted mb-4" style="font-size: 11px; line-height: 1.3;">
                                    {{ $meliAccount->email ?? ($meliAccount->user_email ?? 'Uruguay') }}
                                </p>
                                
                                @if($isVehicleCategory)

    <div class="mb-3">

        <div class="p-3 border bg-light"
             style="border-radius:10px; border-color:#eef1f4 !important;">

            <div class="d-flex align-items-start">

                <i class="fas fa-car text-primary mt-1 me-2"></i>

                <div>

                    <div class="fw-bold text-dark mb-1"
                         style="font-size:13px;">

                        Tipo de cuenta:
                        {{ ucfirst(str_replace('_', ' ', $meliAccountType ?? 'unknown')) }}

                    </div>

                    @if($meliCanPublish)

                        <div class="text-success fw-medium mb-1"
                             style="font-size:12px;">
                            <i class="fas fa-check-circle"></i>
                            Puede publicar vehículos
                        </div>

                    @else

                        <div class="text-danger fw-medium mb-1"
                             style="font-size:12px;">
                            <i class="fas fa-times-circle"></i>
                            No puede publicar vehículos
                        </div>

                    @endif

                    @if($meliNeedsPayment)

                        <div class="text-warning"
                             style="font-size:11px; line-height:1.4;">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>No tienes un paquete activo para vehículos.</strong>
                            Cualquier vehículo publicado en MercadoLibre
                            requerirá un pago antes de activarse.
                        </div>

                    @else

                        <div class="text-muted"
                             style="font-size:11px; line-height:1.4;">
                            Es posible que algunos anuncios aún requieran pago en MercadoLibre, dependiendo del uso de su paquete.
                        </div>

                    @endif

                </div>

            </div>

        </div>

    </div>

@endif

                                <div class="mb-4">
                                    <input type="hidden" name="publicar_mercado_libre" id="mercado_publish" value="0">
                                    <label class="text-dark fw-bold d-block mb-2" style="font-size:13px;">
                                        Publicar en Mercado Libre
                                        <span class="badge bg-warning text-dark px-1" style="font-size:9px; vertical-align:middle; background-color:#fff9db !important; margin-left:4px; border-radius:3px;">
                                            Opcional
                                        </span>
                                    </label>

                                    <div class="row">
                                        <div class="col-6">
                                           <div id="btn-meli-yes"
     class="p-3 border rounded text-center d-flex align-items-center justify-content-center"
     style="cursor:pointer; border:1px solid #dee2e6; background-color:#ffffff; border-radius:8px; min-height:70px;">
                                                <div>
                                                  <span id="meli-yes-text"
      class="fw-bold text-secondary d-block"
      style="font-size:14px;">
    <i id="meli-yes-icon" class="far fa-circle me-1"></i>
    Publicar
</span>
                                                    <small class="text-muted" style="font-size:11px;">Se enviará a ML</small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div id="btn-meli-no"
     class="p-3 border rounded text-center d-flex align-items-center justify-content-center"
     style="cursor:pointer; border:2px solid #dc3545; background-color:#fdf2f2; border-radius:8px; min-height:70px;">
                                                <div>
                                                    <span id="meli-no-text"
      class="fw-bold text-danger d-block"
      style="font-size:14px;">
    <i id="meli-no-icon" class="fas fa-check-circle me-1"></i>
    No Publicar
</span>
                                                    <small class="text-muted" style="font-size:11px;">No se enviará</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group px-0 mb-0 meli-package-wrapper">
                                    <label class="fw-bold text-dark mb-1" style="font-size: 12px;">Tipo de Paquete</label>
                                   <select name="meli_package_type"
        class="form-control"
        style="height:42px; border-radius:8px; font-size:13px;">

    @if($isFreeAvailable)
        <option value="free"
            {{ old('meli_package_type') == 'free' ? 'selected' : '' }}>
            Gratis
        </option>
    @else
        <option value="free" disabled>
            Gratis (No disponible)
        </option>
    @endif

    <option value="plata" selected>Plata</option>
    <option value="oro">Oro</option>
    <option value="oro_premium">Oro Premium</option>

</select>
                                </div>
                            </div>
                        @else
                            <div class="p-4 border bg-light text-center" style="border-radius: 12px; border: 2px dashed #dee2e6 !important;">
                                <img src="https://http2.mlstatic.com/frontend-assets/ml-web-navigation/ui-navigation/6.6.92/mercadolibre/logo__large_plus.png" alt="Meli" style="height: 22px; margin-bottom: 12px;">
                                <p class="text-danger fw-bold mb-2" style="font-size: 14px;">MercadoLibre no conectado</p>
                                <p class="text-muted mb-3" style="font-size: 11px; line-height: 1.4;">Vincule su cuenta para automatizar publicaciones simultáneas.</p>
                                <a href="{{ url('/user/mercado-libre/configuracion') }}" class="btn btn-primary btn-sm px-3 fw-bold" style="border-radius: 6px; background-color: #0d6efd;">
                                    Conectar Cuenta
                                </a>
                                <input type="hidden" name="publicar_mercado_libre" id="mercado_publish" value="0">
                            </div>
                        @endif
                    </div>
                </div>

              <div id="mercado-card" style="display:none;" class="mb-4 text-left">

    <div id="mercado-incomplete"
         style="display:none;"
         class="text-center py-3 text-muted">
        <i class="fas fa-info-circle mr-2"></i>
        {{ __('Debes completar Marca, Modelo y Año para cargar los campos de MercadoLibre.') }}
    </div>

    <div id="mercado-loading"
         style="display:none;"
         class="text-center py-3 text-primary fw-medium">
        <i class="fas fa-spinner fa-spin me-2"></i>
        Cargando especificaciones dinámicas de MercadoLibre...
    </div>

    <div id="mercado-dynamic-fields"></div>

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

        <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 12px;">
            <div class="card-body p-4 pb-2">
                <div id="accordion" class="mt-1">
                    @foreach ($languages as $language)
                        <div class="version mb-3" style="border: 1px solid #eef1f6; border-radius: 8px; overflow: hidden;">
                            <div class="version-header bg-light py-2 px-3" id="heading{{ $language->id }}">
                                <h5 class="mb-0">
                                    <button type="button" class="btn btn-link fw-bold text-dark text-decoration-none d-flex align-items-center justify-content-between w-100" data-toggle="collapse" data-target="#collapse{{ $language->id }}" aria-expanded="{{ $language->is_default == 1 ? 'true' : 'false' }}" aria-controls="collapse{{ $language->id }}">
                                        <span>Datos de Ubicación y Descripción del Vehículo</span>
                                        <i class="fas fa-chevron-down text-muted" style="font-size: 12px;"></i>
                                    </button>
                                </h5>
                            </div>

                            <div id="collapse{{ $language->id }}" class="collapse {{ $language->is_default == 1 ? 'show' : '' }}" aria-labelledby="heading{{ $language->id }}" data-parent="#accordion">
                                <div class="version-body p-4 bg-white">
                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Título del Anuncio') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="{{ $language->code }}_title" name="{{ $language->code }}_title" placeholder="{{ __('Ingresar Título') }}" style="height:42px; border-radius:8px; font-size:13px;">
                                            </div>
                                        </div>

                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Dirección') }} <span class="text-danger">*</span></label>
                                                <input type="text" name="{{ $language->code }}_address" class="form-control {{ $language->is_default == 1 ? 'search-address' : '' }} " placeholder="{{ __('Ingresar Dirección') }}" style="height:42px; border-radius:8px; font-size:13px;">
                                            </div>
                                        </div>

                                        @if ($userBs->google_map_api_status == 1 && $language->is_default == 1)
                                            <div class="col-lg-12 mb-3">
                                                <div class="form-group px-0">
                                                    <div id="map" style="height:380px; background:#f0f0f0; position:relative; overflow:hidden; border-radius: 8px;">
                                                        <div id="map-loading" style="position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#f8f9fa; z-index:10;">
                                                            <div style="border:4px solid #f3f3f3; border-top:4px solid #3498db; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite;"></div>
                                                            <p style="margin-top:15px; color:#666;">{{ __('Loading Map') }}...</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($language->is_default == 1)
                                            <div class="col-lg-6 mb-3">
                                                <div class="form-group px-0">
                                                    <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Latitud') }} *</label>
                                                    <input type="text" class="form-control latitude" name="latitude" placeholder="{{ __('Ingresar Latitud') }}" style="height:42px; border-radius:8px; font-size:13px;">
                                                    <p class="mt-1 mb-0"><span class="text-warning" style="font-size:11px;">La latitud debe estar entre -90 y 90</span> • <a href="https://tinyurl.com/2hjtmtvc" target="_blank" style="font-size:11px;"><i class="fas fa-eye"></i> Ver ejemplo</a></p>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mb-3">
                                                <div class="form-group px-0">
                                                    <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Longitud') }} *</label>
                                                    <input type="text" class="form-control longitude" name="longitude" placeholder="{{ __('Ingresar Longitud') }}" style="height:42px; border-radius:8px; font-size:13px;">
                                                    <p class="mt-1 mb-0"><span class="text-warning" style="font-size:11px;">La longitud debe estar entre -180 y 180</span> • <a href="https://tinyurl.com/2hjtmtvc" target="_blank" style="font-size:11px;"><i class="fas fa-eye"></i> Ver ejemplo</a></p>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Resumen para Generar Descripción (Opcional)') }}</label>
                                                <textarea id="{{ $language->code }}_summary" class="form-control" rows="4" placeholder="{{ __('Ingrese información adicional si desea que nuestra IA la incluya en la descripción') }}" name="{{ $language->code }}_summary" style="border-radius:6px; font-size:13px;"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <label class="mb-0 fw-bold text-dark" style="font-size:13px;">{{ __('Descripción') }} *</label>
                                                    <button type="button" class="btn btn-sm btn-outline-primary d-flex align-items-center generateDescriptionBtn" data-lang="{{ $language->name }}" data-langcode="{{ $language->code }}" style="border-radius: 6px;">
                                                        <i class="fas fa-magic" style="margin-right: 4px;"></i> Generar Descripción
                                                    </button>
                                                </div>
                                                <textarea id="{{ $language->code }}_description" class="form-control summernote" placeholder="{{ __('Enter Description') }}" name="{{ $language->code }}_description" data-height="300"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <label class="fw-bold text-dark" style="font-size:13px;"> {{ __('Meta Keywords') }} </label>
                                                <input class="form-control" name="{{ $language->code }}_meta_keyword" placeholder="{{ __('Enter Meta Keywords') }}" data-role="tagsinput">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <label class="fw-bold text-dark" style="font-size:13px;"> {{ __('Meta Description') }} </label>
                                                <textarea class="form-control" name="{{ $language->code }}_meta_description" rows="4" placeholder=" {{ __('Enter Meta Description') }}"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            @php $currLang = $language; @endphp
                                            @foreach ($languages as $language)
                                                @continue($language->id == $currLang->id)
                                                <div class="form-check py-0 ps-0">
                                                    <label class="form-check-label" style="cursor: pointer; user-select: none;">
                                                        <input class="form-check-input" type="checkbox" style="margin-right:6px;" onchange="cloneInput('collapse{{ $currLang->id }}', 'collapse{{ $language->id }}', event)">
                                                        <span class="form-check-sign">{{ __('Clone for') }} <strong class="text-capitalize text-secondary">{{ $language->name }}</strong> {{ __('language') }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row">
                    <div class="col-lg-12 px-3" id="variation_pricing">
                        <h4 class="mt-4 mb-3" style="font-size:15px; font-weight: bold; color:#2b2b2b;">{{ __('Additional Features') . ' (' . __('Optional') . ')' }}</h4>
                        <table class="table table-bordered align-middle">
                            <thead>
                                <tr class="bg-light text-secondary" style="font-size:13px;">
                                    <th>{{ __('Label') }}</th>
                                    <th>{{ __('Value') }}</th>
                                    <th class="text-center" style="width: 60px;"><a href="javascript:void(0)" class="btn btn-sm btn-success addRow"><i class="fas fa-plus-circle"></i></a></th>
                                </tr>
                            </thead>
                            <tbody id="tbody">
                                <tr>
                                    <td>
                                        @foreach ($languages as $language)
                                            <div class="form-group my-1 px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <input type="text" name="{{ $language->code }}_label[]" class="form-control {{ $language->code }}_features" placeholder="Nombre de etiqueta" style="border-radius:4px; height:38px;">
                                            </div>
                                        @endforeach
                                    </td>
                                    <td>
                                        @foreach ($languages as $language)
                                            <div class="form-group my-1 px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                <input type="text" name="{{ $language->code }}_value[]" class="form-control" placeholder="Valor del campo" style="border-radius:4px; height:38px;">
                                            </div>
                                        @endforeach
                                    </td>
                                    <td class="text-center">
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm deleteRow"><i class="fas fa-minus"></i></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                    </form>

            </div>
        </div>

        <div class="card border-0 shadow-sm bg-white mb-5" style="border-radius: 12px;">
            <div class="card-body p-4 text-center">
              <button type="submit" id="propertySubmit" class="btn btn-success">
                                {{ __('Save') }}
                            </button>
            </div>
        </div>

    @include('map.generate-prompt-modal')
    @include('map.generate-content-modal')
@endsection

@php
    $labels = '';
    $values = '';

    foreach ($languages as $language) {
        $labels_placeholder = __('Nombre de etiqueta');
        $values_placeholder = __('Valor del campo');

        $label_name = $language->code . '_label[]';
        $value_name = $language->code . '_value[]';
        $direction = ($language->direction == 1) ? 'form-group rtl text-right' : 'form-group';

        $labels .= "<div class='$direction'><input type='text' name='".$label_name."' class='form-control' placeholder='$labels_placeholder' style='border-radius:4px; height:38px;'></div>";
        $values .= "<div class='$direction'><input type='text' name='$value_name' class='form-control' placeholder='$values_placeholder' style='border-radius:4px; height:38px;'></div>";
    }
@endphp

@section('scripts')
    <script>
        'use strict';
        var labels = "{!! $labels !!}";
        var values = "{!! $values !!}";
        var storeUrl = "{{ route('user.property.imagesstore') }}";
        var removeUrl = "{{ route('user.property.imagermv') }}";
        var stateUrl = "{{ route('user.property_management.get_state_cities') }}";
        let cityUrl = "{{ route('user.property_management.get_cities') }}";
        let modelUrl = "{{ route('user.property_management.get_models') }}";
        let versionUrl = "{{ route('user.property_management.get_versions') }}";
        let galleryImages = "{{ $userCurrentPackage->number_of_property_gallery_images }}";
        var selectAmenLocal = "{{ __('Select Amenities') }}";
        var genPromptUrl = "{{ route('generate.prompt') }}";
        var genContentUrl = "{{ route('generate.content') }}";
    </script>

    @if ($userBs->google_map_api_status == 1)
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key={{ $userBs->google_map_api_key }}&libraries=places" async defer></script>
        <script src="{{ asset('assets/tenant/js/map/map-init.js') }}"></script>
    @endif
    <script type="text/javascript" src="{{ asset('assets/tenant/js/ai-generate.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/admin-partial.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/admin-dropzone.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/property.js') }}"></script>

    <script>
    $(document).ready(function () {
        /* Show Zona only if the selected Ciudad actually has zones */
$(document).on('change', 'select[name="state_id"]', function () {
    const stateId = $(this).val();
    const $zonaWrapper = $('.zona-wrapper');
    const $zonaSelect = $('.city_id');

    // Reset while we check
    $zonaSelect.html('<option value="" selected disabled>{{ __('Select Area') }}</option>');
    $zonaWrapper.hide();

    if (!stateId) {
        return;
    }

    $.ajax({
        url: cityUrl,
        type: 'GET',
        data: { state_id: stateId },
        success: function (response) {
            // Handle either a plain array or { cities: [...] } shape
            const cities = Array.isArray(response) ? response : (response.cities || []);

            if (cities.length > 0) {
                let options = '<option value="" selected disabled>{{ __('Select Area') }}</option>';
                $.each(cities, function (i, city) {
                    const name = city.name || (city.contents && city.contents.name) || '';
                    options += `<option value="${city.id}">${name}</option>`;
                });
                $zonaSelect.html(options);
                $zonaWrapper.show();
            } else {
                $zonaWrapper.hide();
            }
        },
        error: function () {
            $zonaWrapper.hide();
        }
    });
});
        /* Prevent addRow button default action (reloads page) if bound improperly */
        $(document).on('click', '.addRow', function(e) {
            e.preventDefault();
        });

        /* Interactive click mapping configuration for toggling 'Compartir con Otras Automotoras' cards */
        $('#btn-share-allow').on('click', function() {
            $('#share_input_tracker').val('1');
            $(this).css({ 'border': '2px solid #059669', 'background-color': '#f0fdf4' });
            $(this).find('span').removeClass('text-secondary').addClass('text-success');
            $(this).find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');

            $('#btn-share-deny').css({ 'border': '1px solid #dee2e6', 'background-color': '#ffffff' });
            $('#btn-share-deny').find('span').removeClass('text-danger').addClass('text-secondary');
            $('#btn-share-deny').find('i').removeClass('fas fa-check-circle').addClass('far fa-circle');
        });

        $('#btn-share-deny').on('click', function() {
            $('#share_input_tracker').val('0');
            $(this).css({ 'border': '2px solid #dc3545', 'background-color': '#fdf2f2' });
            $(this).find('span').removeClass('text-secondary').addClass('text-danger');
            $(this).find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');

            $('#btn-share-allow').css({ 'border': '1px solid #dee2e6', 'background-color': '#ffffff' });
            $('#btn-share-allow').find('span').removeClass('text-success').addClass('text-secondary');
            $('#btn-share-allow').find('i').removeClass('fas fa-check-circle').addClass('far fa-circle');
        });

        /* Handling button events and toggling packages visibility dynamically */
        $('#btn-meli-yes').on('click', function() {
            $('#mercado_publish').val('1');
            $(this).css({ 'border': '2px solid #059669', 'background-color': '#f0fdf4' });
            $('#meli-yes-text').removeClass('text-secondary').addClass('text-success');
            $('#meli-yes-icon').removeClass('far fa-circle').addClass('fas fa-check-circle');

            $('#btn-meli-no').css({ 'border': '1px solid #dee2e6', 'background-color': '#ffffff' });
            $('#meli-no-text').removeClass('text-danger').addClass('text-secondary');
            $('#meli-no-icon').removeClass('fas fa-check-circle').addClass('far fa-circle');

            $('.meli-package-wrapper').show();
            loadMercadoAttributes();
        });

        $('#btn-meli-no').on('click', function() {
            $('#mercado_publish').val('0');
            $(this).css({ 'border': '2px solid #dc3545', 'background-color': '#fdf2f2' });
            $('#meli-no-text').removeClass('text-secondary').addClass('text-danger');
            $('#meli-no-icon').removeClass('far fa-circle').addClass('fas fa-check-circle');

            $('#btn-meli-yes').css({ 'border': '1px solid #dee2e6', 'background-color': '#ffffff' });
            $('#meli-yes-text').removeClass('text-success').addClass('text-secondary');
            $('#meli-yes-icon').removeClass('fas fa-check-circle').addClass('far fa-circle');

            $('.meli-package-wrapper').hide();
            $('#mercado-card').hide();
        });

        // Initialize state view behaviors safely on page context execution
$('#mercado_publish').val('0');
$('.meli-package-wrapper').hide();
$('#mercado-card').hide();

        /* MercadoLibre attributes fetch logic and vertical collapse panel generation structure */
        function loadMercadoAttributes() {
            if ($('#mercado_publish').val() !== '1') {
                return;
            }

            let brandId = $('#brand_id').val();
            let modelId = $('#model_id').val();
            let versionId = $('#version_id').val();
            let year = $('#year').val();

           $('#mercado-card').show();

if (!brandId || !modelId || !year) {

    $('#mercado-incomplete').show();
    $('#mercado-loading').hide();
    $('#mercado-dynamic-fields').hide().empty();

    return;
}

$('#mercado-incomplete').hide();
$('#mercado-loading').show();
$('#mercado-dynamic-fields').hide();

            $('#mercado-card').show();
            $('#mercado-loading').show();
            $('#mercado-dynamic-fields').hide();

            $.ajax({
                url: "{{ route('reda.integraciones.mercado_libre.user.attributes') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    brand_id: brandId,
                    model_id: modelId,
                    version_id: versionId,
                    year: year
                },
                success: function (response) {
                    $('#mercado-loading').hide();
                    $('#mercado-dynamic-fields').show();

                    let html = '';

                    $.each(response.grouped_attributes, function (section, fields) {
                        html += `
                            <div class="card border-0 shadow-sm mb-3" style="border-radius:12px; overflow:hidden; border: 1px solid #eef1f6 !important;">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center py-3" 
                                     onclick="$(this).next().slideToggle()" 
                                     style="cursor:pointer; user-select:none;">
                                    <h6 class="mb-0 fw-bold text-dark" style="font-size:14px;">${section}</h6>
                                    <i class="fas fa-chevron-down text-muted" style="font-size:11px;"></i>
                                </div>
                                <div class="card-body pb-2" style="display:none; background-color:#fafafa;">
                                    <div class="row">
                        `;

                        $.each(fields, function (index, field) {
                            if (!field.id) return;

                            const hiddenFields = [
                                'BRAND', 'MODEL', 'TRIM', 'VEHICLE_YEAR', 'FUEL_TYPE', 
                                'TRANSMISSION', 'BODY_TYPE', 'DOORS', 'KILOMETERS', 
                                'ENGINE_DISPLACEMENT', 'COLOR', 'VEHICLE_TYPE', 'MARKET', 
                                'FIPE_CODE', 'MOLICAR_CODE','ENGINE','VEHICLE_BODY_TYPE','TRACTION_CONTROL'
                            ];

                            if (hiddenFields.includes(field.id)) {
                                return;
                            }

                            let selectedValue = '';
                            if (field.id === 'BRAND') {
                                selectedValue = $('#brand_id option:selected').text().trim();
                            } else if (field.id === 'MODEL') {
                                selectedValue = $('#model_id option:selected').text().trim();
                            } else if (field.id === 'TRIM') {
                                selectedValue = $('#version_id option:selected').text().trim();
                            } else if (field.id === 'VEHICLE_YEAR') {
                                selectedValue = $('#year').val();
                            } else if (field.id === 'FUEL_TYPE') {
                                selectedValue = $('#fuel_input option:selected').text().trim();
                            } else if (field.id === 'TRANSMISSION') {
                                selectedValue = $('#transmission_input option:selected').text().trim();
                            } else if (field.id === 'ENGINE_DISPLACEMENT') {
                                selectedValue = $('#engine_input').val();
                            } else if (field.id === 'COLOR') {
                                selectedValue = $('#color_input option:selected').text().trim();
                            } else if (field.id === 'KILOMETERS') {
                                selectedValue = $('#km_input').val();
                            }

                            html += `
                                <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                    <label class="fw-bold text-secondary mb-1 d-block" style="font-size:12px;">
                                        ${field.name}
                                    </label>
                            `;

                            if (field.values && field.values.length) {
                                html += `
                                    <select name="mercado_attributes[${field.id}]" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="">Select</option>
                                `;
                                $.each(field.values, function (i, value) {
                                    let isSelected = (selectedValue.toLowerCase() === value.name.toLowerCase()) ? 'selected' : '';
                                    html += `<option value="${value.id}" ${isSelected}>${value.name}</option>`;
                                });
                                html += `</select>`;
                            } else if (field.value_type === 'boolean') {
                                html += `
                                    <select name="mercado_attributes[${field.id}]" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="">Select</option>
                                        <option value="true">Yes</option>
                                        <option value="false">No</option>
                                    </select>
                                `;
                            } else {
                                html += `
                                    <input type="text" class="form-control" name="mercado_attributes[${field.id}]" value="${selectedValue}" placeholder="${field.name}" style="height:42px; border-radius:8px; font-size:13px;">
                                `;
                            }

                            html += `</div>`;
                        });

                        html += `
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    $('#mercado-dynamic-fields').html(html);
                },
                error: function () {
                    $('#mercado-loading').hide();
                    alert('Could not load Mercado attributes.');
                }
            });
        }

        $('#brand_id, #model_id, #version_id').on('change', function () {
    loadMercadoAttributes();
});

var yearDebounceTimer = null;

$('#year').on('input', function () {

    clearTimeout(yearDebounceTimer);

    yearDebounceTimer = setTimeout(function () {
        loadMercadoAttributes();
    }, 300);

});
    });
    </script>
@endsection