@extends('agent.layout')

@section('content')
<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">
        <h4 class="page-title">{{ __('Agregar 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="#">{{ __('Agregar Auto') }}</a></li>
        </ul>
    </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>
                <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>
                </form>
                <p class="em text-danger mb-0" id="errslider_images"></p>
            </div>

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

                {{-- Thumbnail + Engine + Video images --}}
                <div class="row text-center mb-4">
                    @foreach([
                        ['label' => 'Imagen miniatura *', 'input' => 'img-input', 'name' => 'featured_image', 'preview' => 'uploaded-img'],
                        ['label' => 'Foto del motor',     'input' => 'img-input2', 'name' => 'floor_planning_image', 'preview' => 'uploaded-img2'],
                        ['label' => 'Imagen del video',   'input' => 'img-input3', 'name' => 'video_image', 'preview' => 'uploaded-img3'],
                    ] as $imgSlot)
                    <div class="col-md-4 mb-3 text-left">
                        <label class="fw-bold text-dark d-block mb-2" style="font-size:13px;">{{ $imgSlot['label'] }}</label>
                        <div class="thumb-preview {{ in_array($imgSlot['input'], ['img-input2','img-input3']) ? '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="{{ $imgSlot['preview'] }}"
                                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="{{ $imgSlot['input'] }}" name="{{ $imgSlot['name'] }}">
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Video URL --}}
                <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" placeholder="{{ __('Ej. 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 bg-primary-subtle 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">Completa los datos principales. 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 selected disabled value="">{{ __('Seleccionar') }}</option>
                                    <option value="rent">{{ __('Rent') }}</option>
                                    <option value="sale">{{ __('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 }}">{{ $catContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- FIX: guarded with optional() so a missing $adminBs row doesn't
                                 throw "Attempt to read property on null" and break the whole page --}}
                            @if (optional($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 js-example-basic-single3">
                                    <option disabled selected>{{ __('Seleccionar') }}</option>
                                    @foreach ($propertyCountries as $country)
                                        @php $countryContent = $country->contents()->first(); @endphp
                                        <option value="{{ $country->id }}">{{ $countryContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            @if (optional($adminBs)->property_state_status == 1)
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <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 selected disabled>{{ __('Seleccionar') }}</option>
                                    @foreach ($states as $state)
                                        @php $stateContent = $state->contents()->first(); @endphp
                                        <option value="{{ $state->id }}">{{ $stateContent?->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3 city"
     style="{{ old('state_id') ? 'display:block;' : 'display:none;' }}">
    <label class="ref-form-label">{{ __('Zona') }}</label>

    <select name="city_id" class="form-control ref-form-control city_id">
        <option value="" disabled selected>{{ __('Seleccionar') }}</option>

        @if(old('state_id'))
            @foreach($cities as $city)
                @php $cityContent = $city->contents()->first(); @endphp

                @if($city->state_id == old('state_id'))
                    <option value="{{ $city->id }}"
                        {{ old('city_id') == $city->id ? 'selected' : '' }}>
                        {{ $cityContent?->name }}
                    </option>
                @endif
            @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 selected>{{ __('Seleccionar marca') }}</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $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 id="model_id" name="model_id" class="form-control ref-form-control model_id js-example-basic-single3" onchange="getVersions(event)">
                                    <option disabled selected>{{ __('Seleccionar modelo') }}</option>
                                </select>
                            </div>

                            <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Versión') }}</label>
                                <select id="version_id" name="version_id" class="form-control ref-form-control version_id js-example-basic-single3">
                                    <option disabled selected>{{ __('Seleccionar versión') }}</option>
                                </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="2020" min="1900" max="{{ now()->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">
                            </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="" selected disabled>{{ __('Seleccionar') }}</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 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 selected>{{ __('Seleccionar') }}</option>
                                    <option value="Manual">Manual</option>
                                    <option value="Automática">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 selected>{{ __('Seleccionar') }}</option>
                                    <option value="Blanco">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 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 selected>{{ __('Seleccionar') }}</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 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 selected>{{ __('Seleccionar') }}</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 class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                <label class="ref-form-label">{{ __('Motor') }}</label>
                                <input type="text" id="engine_input" class="form-control ref-form-control" name="engine" placeholder="1.6">
                            </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 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>

                {{-- ── 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" 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">USD</option>
                                            <option value="UY$">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" 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 y no será visible en la publicación.
                                </div>

                                <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="1">
                                <div class="row mb-4">
                                    <div class="col-md-6 mb-2">
                                        <div id="btn-share-allow" class="ref-btn-toggle active-yes d-flex align-items-center">
                                            <div class="text-start">
                                                <span class="fw-bold text-success d-block" style="font-size:14px;"><i class="fas fa-check-circle 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 text-secondary d-block" style="font-size:14px;"><i class="far fa-circle 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 class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="ref-form-label">Estado de publicación *</label>
                                        <select name="status" class="form-control ref-form-control">
                                            <option value="1">Activa</option>
                                            <option value="0">Inactiva</option>
                                        </select>
                                    </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-4" style="font-size:11px;">
                                            {{ optional($meliAccount)->email ?? optional($meliAccount)->user_email ?? 'Uruguay' }}
                                        </p>

                                        @if($isVehicleCategory)
                                        <div class="p-3 border bg-light mb-3" style="border-radius:10px; border-color:#eef1f4 !important;">
                                            <div class="fw-bold text-dark mb-1" style="font-size:13px;">
                                                Tipo: {{ ucfirst(str_replace('_', ' ', $meliAccountType ?? 'unknown')) }}
                                            </div>
                                            @if($meliCanPublish)
                                                <div class="text-success" style="font-size:12px;"><i class="fas fa-check-circle"></i> Puede publicar vehículos</div>
                                            @else
                                                <div class="text-danger" style="font-size:12px;"><i class="fas fa-times-circle"></i> No puede publicar vehículos</div>
                                            @endif
                                            @if($meliNeedsPayment)
                                                <div class="text-warning mt-1" style="font-size:11px;">
                                                    <i class="fas fa-exclamation-triangle"></i> Sin paquete activo para vehículos.
                                                </div>
                                            @endif
                                        </div>
                                        @endif

                                      <input type="hidden" name="publicar_mercado_libre" id="mercado_publish" value="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 active-no text-center" style="min-height:70px; display:flex; align-items:center; justify-content:center;">
    <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 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">
                                                @if($isFreeAvailable)
                                                    <option value="free">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 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 --}}
                        <div id="mercado-card" style="display:none;" class="mt-4">
                            {{-- FIX (issue 2): previously, if the toggle was on but brand/model/year
                                 weren't filled yet, loadMercadoAttributes() silently returned with
                                 no feedback at all, making the section look broken. This message
                                 fills that gap and is toggled by loadMercadoAttributes() in the
                                 script below. --}}
                            <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 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 ($tenantLangs 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' }}">
                                            <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">
                                                <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') }}">
                                            </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') }}">
                                            </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" 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" 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;"
                                                    placeholder="{{ __('Información adicional para la IA') }}"></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"></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">
                                            </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;" placeholder="{{ __('Enter Meta Description') }}"></textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col">
                                                @php $currLang = $language; @endphp
                                                @foreach ($tenantLangs 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">
                                        <tr>
                                            <td>
                                                @foreach ($tenantLangs 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="{{ __('Etiqueta para') . ' ' . $language->name }}" style="border-radius:4px; height:38px;">
                                                </div>
                                                @endforeach
                                            </td>
                                            <td>
                                                @foreach ($tenantLangs 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>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Submit --}}
                <div class="card ref-card shadow-sm mb-5">
                    <div class="card-body p-4 text-center">
                        <button type="submit" id="propertySubmit" class="btn btn-success btn-lg px-5 fw-bold" style="border-radius:8px; min-width:200px;">
                            {{ __('Guardar Auto') }}
                        </button>
                    </div>
                </div>

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

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

@php
    $labels = '';
    $values = '';
    foreach ($tenantLangs as $language) {
        $label_name = $language->code . '_label[]';
        $value_name = $language->code . '_value[]';
        $labels_placeholder = __('Etiqueta para') . ' ' . $language->name;
        $values_placeholder  = __('Valor para') . ' ' . $language->name;
        $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='$labels_placeholder' style='border-radius:4px; height:38px;'></div>";
        $values .= "<div class='$dir'><input type='text' name='$value_name' class='form-control' placeholder='$values_placeholder' style='border-radius:4px; height:38px;'></div>";
    }
@endphp

@section('script')
<script>
    'use strict';
    // FIX: create() has nothing saved yet — initialize this explicitly (empty object)
    // so ai-generate.js / the mercado-attributes renderer never hits an
    // "undefined" reference when checking window.savedMeliAttributes[field.id].
    window.savedMeliAttributes = {};

    var labels    = "{!! $labels !!}";
    var values    = "{!! $values !!}";
    var storeUrl  = "{{ route('agent.property.imagesstore', getParam()) }}";
    var removeUrl = "{{ route('agent.property.imagermv', getParam()) }}";
    var stateUrl  = "{{ route('agent.property_specification.get_state_cities', getParam()) }}";
    var cityUrl   = "{{ route('agent.property_specification.get_cities', getParam()) }}";
    var modelUrl  = "{{ route('agent.property_management.get_models', getParam()) }}";
    var versionUrl= "{{ route('agent.property_management.get_versions', getParam()) }}";
    var galleryImages = 999999;
    var selectAmenLocal = "{{ __('Seleccionar Amenidades') }}";
    var genPromptUrl = "{{ route('generate.prompt') }}";
    var genContentUrl = "{{ route('generate.content') }}";
</script>

@if (!empty($userBs->google_map_api_status) && $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 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(); });

    // ── Share toggle ──────────────────────────────────────────────────────────
    $('#btn-share-allow').on('click', function() {
        $('#share_input_tracker').val('1');
        $(this).addClass('active-yes').removeClass('active-no');
        $(this).find('span').removeClass('text-secondary').addClass('text-success');
        $(this).find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
        $('#btn-share-deny').removeClass('active-yes active-no').css({'border':'1px solid #dee2e6','background':'#fff'});
        $('#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).addClass('active-no').removeClass('active-yes');
        $(this).find('span').removeClass('text-secondary').addClass('text-danger');
        $(this).find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
        $('#btn-share-allow').removeClass('active-yes active-no').css({'border':'1px solid #dee2e6','background':'#fff'});
        $('#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');
    });

    // ── Meli toggle ──────────────────────────────────────────────────────────
   $('#btn-meli-yes').on('click', function () {
    $('#mercado_publish').val('1');

    $('#btn-meli-yes').addClass('active-yes').removeClass('active-no');
    $('#btn-meli-no').removeClass('active-yes active-no').css({
        border: '1px solid #dee2e6',
        background: '#fff'
    });

    $('#meli-yes-text').removeClass('text-secondary text-danger').addClass('text-success');
    $('#meli-yes-icon').removeClass('far fa-circle').addClass('fas fa-check-circle');

    $('#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');

    $('#btn-meli-no').addClass('active-no').removeClass('active-yes');
    $('#btn-meli-yes').removeClass('active-yes active-no').css({
        border: '1px solid #dee2e6',
        background: '#fff'
    });

    $('#meli-no-text').removeClass('text-secondary text-success').addClass('text-danger');
    $('#meli-no-icon').removeClass('far fa-circle').addClass('fas fa-check-circle');

    $('#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
if ($('#mercado_publish').val() == '1') {
    $('.meli-package-wrapper').show();
    loadMercadoAttributes();
} else {
    $('.meli-package-wrapper').hide();
    $('#mercado-card').hide();
}

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

    // FIX: #year is a plain number input — 'change' only fires on blur
    // (click away), so nothing happened while the agent was still typing.
    // 'input' fires on every keystroke instead. Debounced so we don't fire
    // an AJAX call after every single digit while they're still typing.
    var yearDebounceTimer = null;
    $('#year').on('input', function () {
        clearTimeout(yearDebounceTimer);
        yearDebounceTimer = setTimeout(function () {
            loadMercadoAttributes();
        }, 300);
    });

    // ── Dynamic Meli Attributes ───────────────────────────────────────────────
    function loadMercadoAttributes() {
        if ($('#mercado_publish').val() !== '1') return;

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

        // FIX (issue 2): always show the card once the toggle is on, so the
        // "complete basic info" message below is actually visible even
        // before brand/model/year are picked.
        $('#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();

        $.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();
                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','TRACTION_CONTROL'];
                $.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;">';
                    html += '<h6 class="mb-0 fw-bold text-dark" style="font-size:14px;">' + section + '</h6>';
                    html += '<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]) ? window.savedMeliAttributes[field.id] : '';
                        html += '<div class="col-lg-3 col-md-4 col-sm-6 mb-3">';
                        html += '<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) {
                                var sel = String(saved) === String(opt.id) ? 'selected' : '';
                                html += '<option value="' + opt.id + '" ' + sel + '>' + 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;"><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