@extends('agent.layout')

@section('content')
@php
$hiddenAttributes = ['BRAND','MODEL','TRIM','VEHICLE_YEAR','KILOMETERS','FUEL_TYPE','TRANSMISSION','COLOR','BODY_TYPE','TRUCK_TYPE','ITEM_CONDITION','VEHICLE_TYPE'];
$filteredMercadoAttributes = collect($mercadoAttributesSaved ?? [])
    ->reject(fn($v, $k) => in_array($k, $hiddenAttributes))
    ->all();
@endphp
<style>
    .ref-card { border:1px solid #f1f5f9 !important; border-radius:12px !important; background:#fff; }
    .ref-section-icon { width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
    .ref-form-label { font-size:12px; font-weight:700; color:#718096; letter-spacing:.3px; margin-bottom:4px; }
    .ref-form-control { height:42px; border-radius:8px; font-size:13px; border-color:#e2e8f0; }
    .ref-btn-toggle { cursor:pointer; border-radius:8px; padding:12px; border:1px solid #dee2e6; background:#fff; transition:all .2s; }
    .ref-btn-toggle.active-yes { border:2px solid #059669 !important; background:#f0fdf4 !important; }
    .ref-btn-toggle.active-no  { border:2px solid #dc3545 !important; background:#fdf2f2 !important; }
    .meli-package-wrapper { display:none; }
</style>

    <div class="page-header">
        <div class="row w-100 align-items-center">
            <div class="col-md-8">
                <h4 class="page-title">{{ __('Editar Auto') }}</h4>
                <ul class="breadcrumbs">
                    <li class="nav-home"><a href="{{ route('agent.dashboard', getParam()) }}"><i class="flaticon-home"></i></a></li>
                    <li class="separator"><i class="flaticon-right-arrow"></i></li>
                    <li class="nav-item"><a href="{{ route('agent.property_management.properties', getParam()) }}">{{ __('Mis Vehículos') }}</a></li>
                    <li class="separator"><i class="flaticon-right-arrow"></i></li>
                    <li class="nav-item"><a href="#">{{ __('Editar Auto') }}</a></li>
                </ul>
            </div>
            <div class="col-md-4 text-right">
                <a href="{{ route('agent.property_management.download-pdf', ['username' => getParam(), 'id' => $property->id]) }}"
                    target="_blank" class="btn btn-danger">
                    <i class="fas fa-file-pdf"></i> Descargar PDF
                </a>
            </div>
        </div>
    </div>

    <div class="card ref-card shadow-sm mb-4">
        <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>

            {{-- Gallery Images --}}
            <div class="col-lg-12 px-0 mb-4">
                <label class="mb-2"><strong>{{ __('Fotos del vehículo') }}</strong> <span class="text-danger">*</span></label>
                <div id="reload-slider-div" class="mb-3">
                    <table class="table table-striped" id="imgtable">
                        @foreach ($galleryImages as $item)
                        <tr class="trdb table-row" id="trdb{{ $item->id }}">
                            <td>
                                <img class="thumb-preview wf-150"
                                    src="{{ asset('assets/img/property/slider-images/' . $item->image) }}"
                                    alt="Foto" style="max-width:150px; border-radius:8px;">
                            </td>
                            <td><i class="fa fa-times rmvbtndb" data-indb="{{ $item->id }}" style="cursor:pointer; color:#dc3545;"></i></td>
                        </tr>
                        @endforeach
                    </table>
                </div>
                <form action="{{ route('agent.property.imagesstore', getParam()) }}" id="my-dropzone"
                    enctype="multipart/form-data" class="dropzone create"
                    style="border:2px dashed #dee2e6; border-radius:8px; background:#fafafa;">
                    @csrf
                    <div class="fallback"><input name="file" type="file" multiple /></div>
                    <input type="hidden" value="{{ $property->id }}" name="property_id">
                </form>
                <p class="em text-danger mb-0" id="errslider_images"></p>
            </div>

            <form id="propertyForm"
                action="{{ route('agent.property_management.update_property', [getParam(), $property->id]) }}"
                method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="property_id" value="{{ $property->id }}">
                <input type="hidden" name="type" value="{{ $property->type }}">
                <div id="sliders"></div>

                {{-- Thumbnail + Engine + Video images --}}
                <div class="row text-center mb-4">
                    <div class="col-md-4 mb-3 text-left">
                        <label class="fw-bold text-dark d-block mb-2" 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="{{ $property->featured_image ? asset('assets/img/property/featureds/' . $property->featured_image) : asset('assets/img/noimage.jpg') }}"
                                alt="..." class="uploaded-img" style="max-height:100%; max-width:100%; object-fit:contain;">
                        </div>
                        <div class="mt-2 text-center">
                            <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 class="col-md-4 mb-3 text-left">
                        <label class="fw-bold text-dark d-block mb-2" style="font-size:13px;">{{ __('Foto del motor') }}</label>
                        <div class="thumb-preview remove my-2 mx-auto d-flex align-items-center justify-content-center border position-relative"
                            style="border-radius:8px; max-width:220px; height:160px; background:#fbfbfb;">
                            <img src="{{ !empty($property->floor_planning_image) ? asset('assets/img/property/plannings/' . $property->floor_planning_image) : asset('assets/img/noimage.jpg') }}"
                                alt="..." class="uploaded-img2" style="max-height:100%; max-width:100%; object-fit:contain;">
                            @if (!empty($property->floor_planning_image))
                                <i class="fas fa-times text-danger rmvflrImg position-absolute" style="top:10px; right:10px; cursor:pointer;" data-indb="{{ $property->id }}"></i>
                            @endif
                        </div>
                        <div class="mt-2 text-center">
                            <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 class="col-md-4 mb-3 text-left">
                        <label class="fw-bold text-dark d-block mb-2" 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 position-relative"
                            style="border-radius:8px; max-width:220px; height:160px; background:#fbfbfb;">
                            <img src="{{ !empty($property->video_image) ? asset('assets/img/property/video/' . $property->video_image) : asset('assets/img/noimage.jpg') }}"
                                alt="..." class="uploaded-img3" style="max-height:100%; max-width:100%; object-fit:contain;">
                            @if (!empty($property->video_image))
                                <i class="fas fa-times text-danger rmvvdoImg position-absolute" style="top:10px; right:10px; cursor:pointer;" data-indb="{{ $property->id }}"></i>
                            @endif
                        </div>
                        <div class="mt-2 text-center">
                            <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 class="row mb-4">
                    <div class="col-lg-12">
                        <label class="ref-form-label">{{ __('URL del video') }}</label>
                        <input type="text" class="form-control ref-form-control" name="video_url" value="{{ old('video_url', $property->video_url) }}" placeholder="https://youtube.com/...">
                    </div>
                </div>

                {{-- ── Vehicle Info Card ── --}}
                <div class="card ref-card shadow-sm mb-4">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="ref-section-icon mr-3" style="background:#e3f2fd;">
                                <i class="fas fa-car text-primary 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">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">
                                <label class="ref-form-label">{{ __('Condición') }} <span class="text-danger">*</span></label>
                                <select name="purpose" class="form-control ref-form-control">
                                    <option disabled>{{ __('Seleccionar') }}</option>
                                    <option value="rent" {{ old('purpose', $property->purpose) == 'rent' ? 'selected' : '' }}>{{ __('Rent') }}</option>
                                    <option value="sale" {{ old('purpose', $property->purpose) == 'sale' ? 'selected' : '' }}>{{ __('Sale') }}</option>
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Carrocería') }} <span class="text-danger">*</span></label>
                                <select name="category_id" class="form-control ref-form-control category">
                                    <option disabled selected>{{ __('Seleccionar') }}</option>
                                    @foreach ($propertyCategories as $category)
                                        @php $catContent = $category->categoryContents()->first(); @endphp
                                        <option value="{{ $category->id }}" {{ old('category_id', $property->category_id) == $category->id ? 'selected' : '' }}>{{ $catContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            @if ($adminBs->property_country_status == 1)
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Departamento') }} <span class="text-danger">*</span></label>
                                <select name="country_id" class="form-control ref-form-control country">
                                    <option disabled selected>{{ __('Seleccionar') }}</option>
                                    @foreach ($propertyCountries as $country)
                                        @php $countryContent = $country->contents()->first(); @endphp
                                        <option value="{{ $country->id }}" {{ old('country_id', $property->country_id) == $country->id ? 'selected' : '' }}>{{ $countryContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            @if ($adminBs->property_country_status == 1 && $adminBs->property_state_status == 1)
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3 state" style="{{ is_null($property->state_id) ? 'display:none !important;' : 'display:block !important;' }}">
                                <label class="ref-form-label">{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                <select onchange="getCities(event)" name="state_id" class="form-control ref-form-control state_id states">
                                    <option disabled>{{ __('Seleccionar') }}</option>
                                    @if ($property->state_id)
                                        @foreach ($propertyStates as $state)
                                            @php $stateContent = $state->contents()->first(); @endphp
                                            <option value="{{ $state->id }}" {{ old('state_id', $property->state_id) == $state->id ? 'selected' : '' }}>{{ $stateContent?->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            @elseif ($adminBs->property_country_status == 0 && $adminBs->property_state_status == 1)
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3 state">
                                <label class="ref-form-label">{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                <select onchange="getCities(event)" name="state_id" class="form-control ref-form-control state_id states js-example-basic-single3">
                                    <option disabled selected>{{ __('Seleccionar') }}</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->id }}" {{ old('state_id', $property->state_id) == $state->id ? 'selected' : '' }}>{{ $state?->getContent($language->id)?->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3 city" style="{{ empty($property->city_id) ? 'display:none;' : 'display:block;' }}">
                                <label class="ref-form-label">{{ __('Zona') }}</label>
                                <select name="city_id" class="form-control ref-form-control city_id">
                                    <option value="" disabled>{{ __('Seleccionar') }}</option>
                                    @if ($property->city_id)
                                        @foreach ($propertyCities as $city)
                                            @php $cityContent = $city->contents()->first(); @endphp
                                            <option value="{{ $city->id }}" {{ old('city_id', $property->city_id) == $city->id ? 'selected' : '' }}>{{ $cityContent?->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Marca') }} <span class="text-danger">*</span></label>
                                <select id="brand_id" name="brand_id" class="form-control ref-form-control brand js-example-basic-single3" onchange="getModels(event)">
                                    <option disabled {{ !$property->brand_id ? 'selected' : '' }}>{{ __('Seleccionar marca') }}</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}" {{ old('brand_id', $property->brand_id) == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Modelo') }} <span class="text-danger">*</span></label>
                                <select name="model_id" id="model_id" class="form-control ref-form-control model_id js-example-basic-single3" onchange="getVersions(event)">
                                    <option disabled {{ !$property->model_id ? 'selected' : '' }}>{{ __('Seleccionar modelo') }}</option>
                                    @if($property->model_id)
                                        @foreach (\App\Models\User\UserCarModel::where('brand_id', $property->brand_id)->get() as $model)
                                            <option value="{{ $model->id }}" {{ old('model_id', $property->model_id) == $model->id ? 'selected' : '' }}>{{ $model->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Versión') }}</label>
                                <select name="version_id" id="version_id" class="form-control ref-form-control version_id js-example-basic-single3">
                                    <option disabled {{ !$property->version_id ? 'selected' : '' }}>{{ __('Seleccionar versión') }}</option>
                                    @if($property->version_id)
                                        @foreach (\App\Models\User\UserCarVersion::where('model_id', $property->model_id)->get() as $version)
                                            <option value="{{ $version->id }}" {{ old('version_id', $property->version_id) == $version->id ? 'selected' : '' }}>{{ $version->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Año') }} <span class="text-danger">*</span></label>
                                <input type="number" id="year" name="year" class="form-control ref-form-control" placeholder="{{ now()->year }}" min="1900" max="{{ now()->year }}" value="{{ old('year', $property->year) }}">
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Kilometraje') }} <span class="text-danger">*</span></label>
                                <input type="number" id="km_input" name="km" class="form-control ref-form-control" placeholder="45.000" min="0" value="{{ old('km', $property->km) }}">
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Combustible') }} <span class="text-danger">*</span></label>
                                <select id="fuel_input" name="area" class="form-control ref-form-control">
                                    <option value="" {{ !$property->area ? 'selected' : '' }} disabled>{{ __('Seleccionar') }}</option>
                                    @foreach(['Nafta','Diesel','Electrico','Hibrido','Hibrido/Diesel','Nafta/GNC'] as $fuel)
                                        <option value="{{ $fuel }}" {{ old('area', $property->area) == $fuel ? 'selected' : '' }}>{{ $fuel }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Transmisión') }} <span class="text-danger">*</span></label>
                                <select id="transmission_input" name="transmision" class="form-control ref-form-control">
                                    <option disabled {{ !$property->transmision ? 'selected' : '' }}>{{ __('Seleccionar') }}</option>
                                    <option value="Manual" {{ old('transmision', $property->transmision) == 'Manual' ? 'selected' : '' }}>Manual</option>
                                    <option value="Automática" {{ old('transmision', $property->transmision) == 'Automática' ? 'selected' : '' }}>Automática</option>
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Color') }} <span class="text-danger">*</span></label>
                                <select id="color_input" name="color" class="form-control ref-form-control">
                                    <option disabled {{ !$property->color ? 'selected' : '' }}>{{ __('Seleccionar') }}</option>
                                    @foreach(['Blanco','Negro','Rojo','Azul','Gris','Plata','Verde','Marrón','Beige','Dorado','Naranja','Amarillo','Rosado'] as $color)
                                        <option value="{{ $color }}" {{ old('color', $property->color) == $color ? 'selected' : '' }}>{{ $color }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Tracción') }}</label>
                                <select name="traction" class="form-control ref-form-control">
                                    <option disabled {{ !$property->traction ? 'selected' : '' }}>{{ __('Seleccionar') }}</option>
                                   <option value="4x2" {{ old('traction', $property->traction) == '4x2' ? 'selected' : '' }}>4x2</option>
    <option value="4x4" {{ old('traction', $property->traction) == '4x4' ? 'selected' : '' }}>4x4</option>
    <option value="6x2" {{ old('traction', $property->traction) == '6x2' ? 'selected' : '' }}>6x2</option>
    <option value="6x4" {{ old('traction', $property->traction) == '6x4' ? 'selected' : '' }}>6x4</option>
    <option value="6x6" {{ old('traction', $property->traction) == '6x6' ? 'selected' : '' }}>6x6</option>

    <option value="Delantera" {{ old('traction', $property->traction) == 'Delantera' ? 'selected' : '' }}>Delantera</option>
    <option value="Trasera" {{ old('traction', $property->traction) == 'Trasera' ? 'selected' : '' }}>Trasera</option>
    <option value="Integral" {{ old('traction', $property->traction) == 'Integral' ? 'selected' : '' }}>Integral</option>
                                </select>
                            </div>
                            
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
    <label class="ref-form-label">{{ __('Dirección') }}</label>
    <select name="steering" class="form-control ref-form-control">
        <option disabled {{ !$property->steering ? 'selected' : '' }}>
            {{ __('Seleccionar') }}
        </option>

        <option value="Asistencia hidráulica"
            {{ old('steering', $property->steering) == 'Asistencia hidráulica' ? 'selected' : '' }}>
            Asistencia hidráulica
        </option>

        <option value="Asistencia eléctrica"
            {{ old('steering', $property->steering) == 'Asistencia eléctrica' ? 'selected' : '' }}>
            Asistencia eléctrica
        </option>

        <option value="Asistencia electrohidráulica"
            {{ old('steering', $property->steering) == 'Asistencia electrohidráulica' ? 'selected' : '' }}>
            Asistencia electrohidráulica
        </option>

        <option value="Dirección mecánica"
            {{ old('steering', $property->steering) == 'Dirección mecánica' ? 'selected' : '' }}>
            Dirección mecánica
        </option>
    </select>
</div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Motor') }}</label>
                                <input type="number" id="engine_input" step="0.1" class="form-control ref-form-control" name="engine" placeholder="1.6" value="{{ old('engine', $property->engine) }}">
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Estado') }} <span class="text-danger">*</span></label>
                                <select name="status" class="form-control ref-form-control">
                                    <option value="1" {{ old('status', $property->status) == 1 ? 'selected' : '' }}>{{ __('Activo') }}</option>
                                    <option value="0" {{ old('status', $property->status) == 0 ? 'selected' : '' }}>{{ __('Inactivo') }}</option>
                                </select>
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label class="ref-form-label">{{ __('Características / Accesorios') }}</label>
                                <select name="amenities[]" class="form-control ref-form-control js-example-basic-single2 amenities-values" multiple="multiple">
                                    @foreach ($amenities as $amenity)
                                        @php $amContent = $amenity->contents()->first(); @endphp
                                        <option data-value="{{ $amContent?->name }}" value="{{ $amenity->id }}"
                                            {{ $propertyAmenities->contains('amenity_id', $amenity->id) ? 'selected' : '' }}>
                                            {{ $amContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Price & Publication Card ── --}}
                <div class="card ref-card shadow-sm mb-4">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="ref-section-icon mr-3" style="background:#e8f5e9;">
                                <i class="fas fa-dollar-sign text-success 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 y la configuración de publicación.</small>
                            </div>
                        </div>

                        <div class="row">
                            {{-- Left: price + share + status --}}
                            <div class="col-lg-8" style="padding-right:25px;">
                                <span class="fw-bold text-dark d-block mb-2" style="font-size:13px;">Precio de venta *</span>
                                <div class="row">
                                    <div class="col-lg-3 col-md-4 mb-3">
                                        <label class="ref-form-label">Precio *</label>
                                        <input type="number" class="form-control ref-form-control" name="price" value="{{ old('price', $property->price) }}" placeholder="18.500">
                                    </div>
                                    <div class="col-lg-3 col-md-4 mb-3">
                                        <label class="ref-form-label">Moneda *</label>
                                        <select name="currency_symbol" class="form-control ref-form-control">
                                            <option value="U$D" {{ old('currency_symbol', $property->currency_symbol) == 'U$D' ? 'selected' : '' }}>USD</option>
                                            <option value="UY$" {{ old('currency_symbol', $property->currency_symbol) == 'UY$' ? 'selected' : '' }}>UY$</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-md-4 mb-3">
                                        <label class="ref-form-label">Costo interno</label>
                                        <input type="number" step="0.01" class="form-control ref-form-control" name="cost" value="{{ old('cost', $property->cost) }}" placeholder="15.000">
                                    </div>
                                </div>

                                <div class="alert py-2 px-3 border-0 mb-4" style="background:#e3f2fd; color:#0d6efd; border-radius:6px; font-size:12px;">
                                    <i class="fas fa-info-circle mr-1"></i> El costo es solo para tu control interno.
                                </div>

                                {{-- Share toggle --}}
                                <span class="fw-bold text-dark d-block 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="{{ old('share', $property->shared ?? '1') }}">
                                <div class="row mb-4">
                                    <div class="col-md-6 mb-2">
                                        <div id="btn-share-allow" class="ref-btn-toggle d-flex align-items-center">
                                            <div class="text-start">
                                                <span class="fw-bold d-block" style="font-size:14px;"><i class="mr-1"></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="ref-btn-toggle d-flex align-items-center">
                                            <div class="text-start">
                                                <span class="fw-bold d-block" style="font-size:14px;"><i class="mr-1"></i> No Compartir</span>
                                                <small class="text-muted" style="font-size:11px;">No se compartirá este Auto</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Right: MercadoLibre card --}}
                            <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;">
                                            <span class="badge px-2 py-1" style="font-size:11px; background:#e8f5e9; color:#2e7d32; border-radius:4px; border:1px solid #c8e6c9;">
                                                <i class="fas fa-check-circle"></i> Cuenta conectada
                                            </span>
                                        </div>
                                        <p class="text-muted mb-3" style="font-size:11px;">{{ $meliAccount->email ?? ($meliAccount->user_email ?? 'Uruguay') }}</p>

                                        {{-- Account Status --}}
                                        <div class="alert border-0 mb-3" style="border-radius:10px; background:#eef7ff;">
                                            <div class="fw-bold text-dark mb-1">Estado de MercadoLibre</div>
                                            <small class="text-muted d-block mb-1">Tipo: <strong>{{ ucfirst(str_replace('_', ' ', $meliAccountType ?? 'N/A')) }}</strong></small>
                                            @if($meliCanPublish)
                                                <div class="text-success fw-bold" style="font-size:13px;"><i class="fas fa-check-circle"></i> Puede publicar vehículos</div>
                                            @else
                                                <div class="text-danger fw-bold" style="font-size:13px;"><i class="fas fa-times-circle"></i> No puede publicar vehículos</div>
                                            @endif
                                            @if($meliNeedsPayment)
                                            <div class="alert alert-warning border-0 mt-2 mb-0" style="border-radius:8px; background:#fff8e1;">
                                                <small><i class="fas fa-exclamation-triangle text-warning mr-1"></i> <strong>Sin paquete activo.</strong> Cualquier publicación requerirá pago.</small>
                                            </div>
                                            @endif
                                        </div>

                                        {{-- Current listing status --}}
                                        @if($hasMercadoListing)
                                            @if($isPendingPayment)
                                            <div class="alert alert-warning border-0 mb-3" style="border-radius:10px; background:#fff8e1;">
                                                <div class="fw-bold text-dark mb-1">Pago pendiente</div>
                                                <small class="text-muted d-block mb-2">Completar el pago para activar la publicación.</small>
                                                @if(!empty($meliPermalink))
                                                <a href="{{ !empty($property->meli_payment_link) ? $property->meli_payment_link : $property->meli_permalink }}" target="_blank" class="btn btn-warning btn-sm fw-bold">
                                                    Completar Pago
                                                </a>
                                                @endif
                                            </div>
                                            @else
                                            <div class="alert alert-success border-0 mb-3" style="border-radius:10px; background:#ecfdf3;">
                                                <div class="fw-bold text-dark mb-1">Publicado en MercadoLibre</div>
                                                <small class="text-muted d-block mb-2">Estado: <strong>{{ ucfirst($meliStatus ?? 'active') }}</strong></small>
                                                @if(!empty($meliPermalink))
                                                <a href="{{ $meliPermalink }}" target="_blank" class="btn btn-success btn-sm fw-bold">Ver Publicación</a>
                                                @endif
                                            </div>
                                            @endif
                                        @endif

                                        {{-- Publish toggle --}}
                                        <input type="hidden" name="publicar_mercado_libre" id="mercado_publish" value="{{ old('publicar_mercado_libre', $property->publicar_mercado_libre ?? '0') }}">
                                        <label class="fw-bold text-dark d-block mb-2" style="font-size:13px;">
                                            Publicar en Mercado Libre
                                            <span class="badge px-1" style="font-size:9px; background:#fff9db; color:#856404; border-radius:3px; margin-left:4px;">Opcional</span>
                                        </label>

                                        <div class="row mb-3">
                                            <div class="col-6">
                                                <div id="btn-meli-yes" class="ref-btn-toggle text-center" style="min-height:70px; display:flex; align-items:center; justify-content:center;">
                                                    <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 mr-1"></i> Publicar
                                                        </span>
                                                        <small class="text-muted" style="font-size:11px;">Se enviará a Meli</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div id="btn-meli-no" class="ref-btn-toggle text-center" style="min-height:70px; display:flex; align-items:center; justify-content:center;">
                                                    <div>
                                                        <span id="meli-no-text" class="fw-bold text-secondary d-block" style="font-size:14px;">
                                                            <i id="meli-no-icon" class="far fa-circle mr-1"></i> No Publicar
                                                        </span>
                                                        <small class="text-muted" style="font-size:11px;">No se enviará</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="meli-package-wrapper">
                                            <label class="ref-form-label">Tipo de Paquete</label>
                                            <select name="meli_package_type" class="form-control ref-form-control" {{ $isPendingPayment ? 'disabled' : '' }}>
                                                @if($isFreeAvailable)
                                                    <option value="free" {{ old('meli_package_type', $property->meli_package_type ?? '') == 'free' ? 'selected' : '' }}>Gratis</option>
                                                @else
                                                    <option value="free" disabled>Gratis (No disponible)</option>
                                                @endif
                                                <option value="plata" {{ old('meli_package_type', $property->meli_package_type ?? 'plata') == 'plata' ? 'selected' : '' }}>Plata</option>
                                                <option value="oro" {{ old('meli_package_type', $property->meli_package_type ?? '') == 'oro' ? 'selected' : '' }}>Oro</option>
                                                <option value="oro_premium" {{ old('meli_package_type', $property->meli_package_type ?? '') == 'oro_premium' ? 'selected' : '' }}>Oro Premium</option>
                                            </select>
                                            @if($isPendingPayment)
                                                <small class="text-danger d-block mt-1" style="font-size:11px;"><i class="fas fa-lock mr-1"></i> No puedes cambiar el paquete mientras el pago esté pendiente.</small>
                                                <input type="hidden" name="meli_package_type" value="{{ $property->meli_package_type }}">
                                            @endif
                                        </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 la cuenta para publicar automáticamente.</p>
                                        <a href="{{ url('/user/mercado-libre/configuracion') }}" class="btn btn-primary btn-sm px-3 fw-bold" style="border-radius:6px;">Conectar Cuenta</a>
                                        <input type="hidden" name="publicar_mercado_libre" id="mercado_publish" value="0">
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Dynamic Mercado Attributes (below full width) --}}
                        <div id="mercado-card" style="display:none;" class="col-12 mt-4 px-0">
                            <div id="mercado-loading" style="display:none;" class="text-center py-3 text-primary fw-medium">
                                <i class="fas fa-spinner fa-spin mr-2"></i> Cargando especificaciones de MercadoLibre...
                            </div>
                            <div id="mercado-dynamic-fields"></div>
                        </div>
                    </div>
                </div>

                {{-- ── Language / Content Card ── --}}
                <div class="card ref-card shadow-sm mb-4">
                    <div class="card-body p-4 pb-2">
                        <div id="accordion" class="mt-1">
                            @foreach ($tenantFrontLangs as $language)
                            @php $peopertyContent = $propertyContents->where('language_id', $language->id)->first(); @endphp
                            <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">
                                    <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' }}">
                                            <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' : '' }}"
                                    data-parent="#accordion">
                                    <div class="version-body p-4 bg-white">
                                        <div class="row">
                                            <div class="col-lg-12 mb-3">
                                                <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 ref-form-control" id="{{ $language->code }}_title"
                                                    name="{{ $language->code }}_title" placeholder="{{ __('Ingresar Título') }}"
                                                    value="{{ old($language->code . '_title', $peopertyContent?->title) }}">
                                            </div>
                                            <div class="col-lg-12 mb-3">
                                                <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 ref-form-control {{ $language->is_default == 1 ? 'search-address' : '' }}"
                                                    placeholder="{{ __('Ingresar Dirección') }}"
                                                    value="{{ old($language->code . '_address', $peopertyContent?->address) }}">
                                            </div>

                                            @if (!empty($userBs->google_map_api_status) && $userBs->google_map_api_status == 1 && $language->is_default == 1)
                                            <div class="col-lg-12 mb-3">
                                                <div id="map" style="height:380px; background:#f0f0f0; border-radius:8px; position:relative; overflow:hidden;">
                                                    <div id="map-loading" style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content: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;">Cargando mapa...</p>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif

                                            @if ($language->is_default == 1)
                                            <div class="col-lg-6 mb-3">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Latitud') }} *</label>
                                                <input type="text" class="form-control ref-form-control latitude" name="latitude" value="{{ old('latitude', $property->latitude) }}" placeholder="-34.9011">
                                            </div>
                                            <div class="col-lg-6 mb-3">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Longitud') }} *</label>
                                                <input type="text" class="form-control ref-form-control longitude" name="longitude" value="{{ old('longitude', $property->longitude) }}" placeholder="-56.1645">
                                            </div>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 mb-3">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Resumen (Opcional)') }}</label>
                                                <textarea id="{{ $language->code }}_summary" class="form-control" rows="4"
                                                    name="{{ $language->code }}_summary" style="border-radius:6px; font-size:13px;">{{ old($language->code . '_summary', $peopertyContent?->summary) }}</textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 mb-3">
                                                <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 generateDescriptionBtn"
                                                        data-lang="{{ $language->name }}" data-langcode="{{ $language->code }}" style="border-radius:6px;">
                                                        <i class="fas fa-magic mr-1"></i> Generar Descripción
                                                    </button>
                                                </div>
                                                <textarea id="{{ $language->code }}_description" class="form-control summernote"
                                                    name="{{ $language->code }}_description" data-height="300">{{ old($language->code . '_description', $peopertyContent?->description) }}</textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 mb-3">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Meta Keywords') }}</label>
                                                <input class="form-control ref-form-control" name="{{ $language->code }}_meta_keyword"
                                                    placeholder="{{ __('Enter Meta Keywords') }}" data-role="tagsinput"
                                                    value="{{ old($language->code . '_meta_keyword', $peopertyContent?->meta_keyword) }}">
                                            </div>
                                            <div class="col-lg-12 mb-3">
                                                <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Meta Description') }}</label>
                                                <textarea class="form-control" name="{{ $language->code }}_meta_description" rows="4" style="border-radius:6px;">{{ old($language->code . '_meta_description', $peopertyContent?->meta_description) }}</textarea>
                                            </div>
                                        </div>

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

                        {{-- Additional Features --}}
                        <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;">{{ __('Características adicionales') . ' (' . __('Opcional') . ')' }}</h4>
                                <table class="table table-bordered align-middle">
                                    <thead>
                                        <tr class="bg-light text-secondary" style="font-size:13px;">
                                            <th>{{ __('Etiqueta') }}</th>
                                            <th>{{ __('Valor') }}</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">
                                        @if (count($specifications) > 0)
                                            @foreach ($specifications as $specification)
                                            <tr>
                                                <td>
                                                    @foreach ($tenantFrontLangs as $language)
                                                    @php $sp_content = $specification->getContent($language->id); @endphp
                                                    <div class="form-group my-1 px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                        <input type="text" name="{{ $language->code }}_label[]" class="form-control" value="{{ $sp_content?->label }}" style="border-radius:4px; height:38px;">
                                                    </div>
                                                    @endforeach
                                                </td>
                                                <td>
                                                    @foreach ($tenantFrontLangs as $language)
                                                    @php $sp_content = $specification->getContent($language->id); @endphp
                                                    <div class="form-group my-1 px-0 {{ $language->direction == 1 ? 'rtl text-right' : '' }}">
                                                        <input type="text" name="{{ $language->code }}_value[]" class="form-control" value="{{ $sp_content?->value }}" style="border-radius:4px; height:38px;">
                                                    </div>
                                                    @endforeach
                                                </td>
                                                <td class="text-center">
                                                    <a href="javascript:void(0)" data-specification="{{ $specification->id }}" class="btn btn-sm btn-danger deleteSpecification"><i class="fas fa-minus"></i></a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td>
                                                    @foreach ($tenantFrontLangs 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" placeholder="{{ __('Etiqueta para') . ' ' . $language->name }}" style="border-radius:4px; height:38px;">
                                                    </div>
                                                    @endforeach
                                                </td>
                                                <td>
                                                    @foreach ($tenantFrontLangs 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 para') . ' ' . $language->name }}" 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>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Submit --}}
                <div class="card ref-card shadow-sm mb-5">
                    <div class="card-footer mb-3">
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="submit" id="propertySubmit" class="btn btn-success btn-lg px-5 fw-bold" style="border-radius:8px; min-width:200px;">
                                    {{ __('Actualizar') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

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

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

@php
    $labels = '';
    $values = '';
    foreach ($tenantFrontLangs as $language) {
        $label_name = $language->code . '_label[]';
        $value_name = $language->code . '_value[]';
        $dir = ($language->direction == 1) ? 'form-group rtl text-right' : 'form-group';
        $labels .= "<div class='$dir'><input type='text' name='$label_name' class='form-control' placeholder='Etiqueta para $language->name' style='border-radius:4px; height:38px;'></div>";
        $values .= "<div class='$dir'><input type='text' name='$value_name' class='form-control' placeholder='Valor para $language->name' style='border-radius:4px; height:38px;'></div>";
    }
@endphp

@section('script')
<script>
    'use strict';
    var labels    = "{!! $labels !!}";
    var values    = "{!! $values !!}";
    var stateUrl  = "{{ route('agent.property_specification.get_state_cities', getParam()) }}";
    var cityUrl   = "{{ route('agent.property_specification.get_cities', getParam()) }}";
    var storeUrl  = "{{ route('agent.property.imagesstore', getParam()) }}";
    var removeUrl = "{{ route('agent.property.imagermv', getParam()) }}";
    var rmvdbUrl  = "{{ route('agent.property.imgdbrmv', getParam()) }}";
    var specificationRmvUrl = "{{ route('agent.property_management.specification_delete', getParam()) }}";
    var galleryImages = 999999;
      var modelUrl  = "{{ route('agent.property_management.get_models', getParam()) }}";
    var versionUrl= "{{ route('agent.property_management.get_versions', getParam()) }}";
    var selectAmenLocal = "{{ __('Seleccionar Amenidades') }}";
    var flrimgrmv = "{{ route('agent.property_management.floorImgrmv', getParam()) }}";
    var vdoimgrmv = "{{ route('agent.property_management.videoImgrmv', getParam()) }}";
    var genPromptUrl  = "{{ route('generate.prompt') }}";
    var genContentUrl = "{{ route('generate.content') }}";
    window.savedMeliAttributes = {!! json_encode($filteredMercadoAttributes) !!};
</script>

@if (!empty($userBs->google_map_api_status) && $userBs->google_map_api_status == 1)
<script>
    var defaultLang = "{{ $language->code }}";
    var address = "{{ $propertyAddress->address ?? '' }}";
</script>
<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/edit-map-init.js') }}"></script>
@endif
<script src="{{ asset('assets/tenant/js/ai-generate.js') }}"></script>
<script src="{{ asset('assets/tenant/js/admin-dropzone.js') }}"></script>
<script src="{{ asset('assets/tenant/js/property.js') }}"></script>

<script>
$(document).ready(function () {

    $(document).on('click', '.addRow', function(e) { e.preventDefault(); });

    // ── Restore saved toggle states ───────────────────────────────────────────
    var shareVal = $('#share_input_tracker').val();
    if (shareVal == '1') {
        activateShare('#btn-share-allow', 'yes'); deactivateShare('#btn-share-deny');
    } else {
        activateShare('#btn-share-deny', 'no'); deactivateShare('#btn-share-allow');
    }

    var meliVal = $('#mercado_publish').val();
    if (meliVal == '1') {
        activateMeli('yes'); $('.meli-package-wrapper').show(); loadMercadoAttributes();
    } else {
        activateMeli('no'); $('.meli-package-wrapper').hide();
    }

    // ── Share toggle ──────────────────────────────────────────────────────────
    $('#btn-share-allow').on('click', function() {
        $('#share_input_tracker').val('1');
        activateShare('#btn-share-allow', 'yes'); deactivateShare('#btn-share-deny');
    });
    $('#btn-share-deny').on('click', function() {
        $('#share_input_tracker').val('0');
        activateShare('#btn-share-deny', 'no'); deactivateShare('#btn-share-allow');
    });

    function activateShare(el, type) {
        var color = type === 'yes' ? '#059669' : '#dc3545';
        var bg    = type === 'yes' ? '#f0fdf4' : '#fdf2f2';
        var cls   = type === 'yes' ? 'text-success' : 'text-danger';
        $(el).css({'border': '2px solid ' + color, 'background-color': bg});
        $(el).find('span').removeClass('text-secondary text-success text-danger').addClass(cls);
        $(el).find('i').removeClass('far fa-circle fas fa-check-circle').addClass('fas fa-check-circle');
    }
    function deactivateShare(el) {
        $(el).css({'border': '1px solid #dee2e6', 'background': '#fff'});
        $(el).find('span').removeClass('text-success text-danger').addClass('text-secondary');
        $(el).find('i').removeClass('fas fa-check-circle').addClass('far fa-circle');
    }

    // ── Meli toggle ──────────────────────────────────────────────────────────
    $('#btn-meli-yes').on('click', function() {
        $('#mercado_publish').val('1');
        activateMeli('yes'); $('.meli-package-wrapper').show(); loadMercadoAttributes();
    });
    $('#btn-meli-no').on('click', function() {
        $('#mercado_publish').val('0');
        activateMeli('no'); $('.meli-package-wrapper').hide(); $('#mercado-card').hide();
    });

    function activateMeli(which) {
        if (which === 'yes') {
            $('#btn-meli-yes').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': '#fff'});
            $('#meli-no-text').removeClass('text-danger').addClass('text-secondary');
            $('#meli-no-icon').removeClass('fas fa-check-circle').addClass('far fa-circle');
        } else {
            $('#btn-meli-no').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': '#fff'});
            $('#meli-yes-text').removeClass('text-success').addClass('text-secondary');
            $('#meli-yes-icon').removeClass('fas fa-check-circle').addClass('far fa-circle');
        }
    }

    $('#brand_id, #model_id, #version_id, #year').on('change', function () {
        if ($('#mercado_publish').val() == '1') setTimeout(loadMercadoAttributes, 400);
    });

    // ── Dynamic Meli Attributes ───────────────────────────────────────────────
    function loadMercadoAttributes() {
        if ($('#mercado_publish').val() !== '1') return;
        var brandId = $('#brand_id').val(), modelId = $('#model_id').val(), year = $('#year').val();
        if (!brandId || !modelId || !year) return;

        $('#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: $('#model_id').val(), version_id: $('#version_id').val(), year: year },
            success: function (response) {
                $('#mercado-loading').hide();
                $('#mercado-dynamic-fields').show();
                var html = '';
                var 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'];
                $.each(response.grouped_attributes, function (section, fields) {
                    html += '<div class="card border-0 shadow-sm mb-3" style="border-radius:12px; border:1px solid #eef1f6 !important;">';
                    html += '<div class="card-header bg-white d-flex justify-content-between align-items-center py-3" onclick="$(this).next().slideToggle()" style="cursor:pointer;"><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>';
                    html += '<div class="card-body pb-2" style="display:none; background:#fafafa;"><div class="row">';
                    $.each(fields, function (i, field) {
                        if (!field.id || hiddenFields.includes(field.id)) return;
                        var saved = (window.savedMeliAttributes && window.savedMeliAttributes[field.id] !== undefined) ? window.savedMeliAttributes[field.id] : '';
                        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 (j, opt) {
                                html += '<option value="' + opt.id + '" ' + (String(saved) === String(opt.id) ? 'selected' : '') + '>' + opt.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;">';
                            html += '<option value="">Select</option>';
                            html += '<option value="true" ' + (saved === 'true' || saved === '1' ? 'selected' : '') + '>Sí</option>';
                            html += '<option value="false" ' + (saved === 'false' || saved === '0' ? 'selected' : '') + '>No</option>';
                            html += '</select>';
                        } else {
                            html += '<input type="text" class="form-control" name="mercado_attributes[' + field.id + ']" value="' + saved + '" 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(); console.warn('No se pudieron cargar atributos de Mercado.'); }
        });
    }
});
</script>
@endsection