@extends('user.layout')

@section('content')
@php

$hiddenAttributes = [

    'BRAND',
    'MODEL',
    'TRIM',
    'VEHICLE_YEAR',
    'KILOMETERS',
    'FUEL_TYPE',
    'TRANSMISSION',
    'COLOR',
    'BODY_TYPE',
    'TRUCK_TYPE',

    'ITEM_CONDITION',
    'VEHICLE_TYPE',
    'ENGINE',
    'VEHICLE_BODY_TYPE'
    ,'TRACTION_CONTROL'
];

$filteredMercadoAttributes =
    collect(
        $mercadoAttributesSaved
        ?? []
    )
    ->reject(function (
        $attribute
    ) use (
        $hiddenAttributes
    ) {

        return in_array(
            $attribute['id']
            ?? '',
            $hiddenAttributes
        );

    })
    ->values();

@endphp
    <div class="page-header">
    <div class="row w-100 align-items-center">
        
        <div class="col-md-8">
            <h4 class="page-title">{{ __('Edit Car') }}</h4>

            <ul class="breadcrumbs">
                <li class="nav-home">
                    <a href="{{ route('user-dashboard') }}">
                        <i class="flaticon-home"></i>
                    </a>
                </li>

                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>

                <li class="nav-item">
                    <a href="#">{{ __('Car Management') }}</a>
                </li>

                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>

                <li class="nav-item">
                    <a href="#">{{ __('Edit Car') }}</a>
                </li>
            </ul>
        </div>

        <div class="col-md-4 text-right">
            <a href="{{ route('user.property_management.pdf', $property->id) }}"
               target="_blank"
               class="btn btn-danger">
                <i class="fas fa-file-pdf"></i>
                Download PDF File
            </a>
        </div>

    </div>
</div>

    <div class="row">
        <div class="col-md-12">
            <div class="card border-0 shadow-sm bg-white" style="border-radius: 12px;">
                <div class="card-body p-4">
                    
                    <div class="alert alert-danger pb-1 dis-none" id="propertyErrors">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <ul></ul>
                    </div>

                    <div class="col-lg-12 px-0 mb-4">
                        <label for="" class="mb-2"><strong>{{ __('Gallery Images') }}</strong> <span class="text-danger">{{ '*' }}</span> </label>
                        <div id="reload-slider-div" class="mb-3">
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-striped" id="imgtable">
                                        @foreach ($galleryImages as $item)
                                            <tr class="trdb table-row" id="trdb{{ $item->id }}">
                                                <td>
                                                    <div class="">
                                                        <img class="thumb-preview wf-150" src="{{ asset('assets/img/property/slider-images/' . $item->image) }}" alt="Ad Image" style="max-width: 150px; border-radius: 8px;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <i class="fa fa-times rmvbtndb" data-indb="{{ $item->id }}" style="cursor: pointer; color: #dc3545;"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            </div>
                        </div>

                        <form action="{{ route('user.property.imagesstore') }}" 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('user.property_management.update_property', $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 }}">
                        <input type="hidden" name="vendor_id" value="{{ $property->vendor_id }}">
                        <div id="sliders"></div>

                        <div class="row text-center mb-4">
                            <div class="col-md-4 mb-3 text-left">
                                <div class="form-group px-0">
                                    <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>

                            <div class="col-md-4 mb-3 text-left">
                                <div class="form-group px-0">
                                    <label class="fw-bold text-dark d-block mb-2" style="font-size: 13px;">{{ __('Engine photo') }}</label>
                                    <div class="thumb-preview remove my-2 mx-auto d-flex align-items-center justify-content-center border 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>

                            <div class="col-md-4 mb-3 text-left">
                                <div class="form-group px-0">
                                    <label class="fw-bold text-dark d-block mb-2" style="font-size: 13px;">{{ __('Video Image') }}</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>

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

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

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Condición') }} <span class="text-danger">*</span></label>
                                            <select name="purpose" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled>{{ __('Select') }}</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>

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

                                    @if ($adminBs->property_country_status == 1)
                                        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                            <div class="form-group px-0">
                                                <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Departamento') }} <span class="text-danger">*</span></label>
                                                <select name="country_id" class="form-control country" style="height:42px; border-radius:8px; font-size:13px;">
                                                    <option disabled selected>{{ __('Select') }}</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>
                                        </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;' }}">
                                            <div class="form-group px-0">
                                                <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                                <select onchange="getCities(event)" name="state_id" class="form-control state_id states" style="height:42px; border-radius:8px; font-size:13px;">
                                                    <option disabled>{{ __('Select City') }}</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>
                                        </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">
                                            <div class="form-group px-0">
                                                <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Ciudad') }} <span class="text-danger">*</span></label>
                                                <select onchange="getCities(event)" name="state_id" class="form-control state_id states js-example-basic-single3" style="height:42px; border-radius:8px; font-size:13px;">
                                                    <option disabled selected>{{ __('Select City') }}</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>
                                        </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;' }}">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Zona') }} </label>
                                            <select name="city_id" class="form-control city_id" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option value="" disabled>{{ __('Select Area') }}</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>

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

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Modelo') }} <span class="text-danger">*</span></label>
                                            <select name="model_id" id="model_id" class="form-control model_id js-example-basic-single3" onchange="getVersions(event)" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled {{ !$property->model_id ? 'selected' : '' }}>{{ __('Select Model') }}</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>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Versión') }}</label>
                                            <select name="version_id" id="version_id" class="form-control version_id js-example-basic-single3" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled {{ !$property->version_id ? 'selected' : '' }}>{{ __('Select Version') }}</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>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Año') }} <span class="text-danger">*</span></label>
                                            <input type="number" id="year" name="year" class="form-control" placeholder="{{ __('Enter Year') }}" min="1900" max="{{ now()->year }}" value="{{ old('year', $property->year) }}" style="height:42px; border-radius:8px; font-size:13px;">
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Kilometraje') }} <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                            <input type="number" id="km_input" name="km" class="form-control" placeholder="{{ __('Enter Mileage in km') }}" min="0" value="{{ old('km', $property->km) }}" style="height:42px; border-radius:8px; font-size:13px;">
                                            <div class="input-group-append"><span class="input-group-text bg-light text-muted" style="height:42px; border-radius:0 8px 8px 0;">km</span></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Fuel type') }} <span class="text-danger">*</span></label>
                                            <select id="fuel_input" name="area" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option value="" {{ !$property->area ? 'selected' : '' }} disabled>{{ __('Select Fuel type') }}</option>
                                                <option value="Nafta" {{ old('area', $property->area) == 'Nafta' ? 'selected' : '' }}>Nafta</option>
                                                <option value="Diesel" {{ old('area', $property->area) == 'Diesel' ? 'selected' : '' }}>Diésel</option>
                                                <option value="Electrico" {{ old('area', $property->area) == 'Electrico' ? 'selected' : '' }}>Eléctrico</option>
                                                <option value="Hibrido" {{ old('area', $property->area) == 'Hibrido' ? 'selected' : '' }}>Híbrido</option>
                                                <option value="Hibrido/Diesel" {{ old('area', $property->area) == 'Hibrido/Diesel' ? 'selected' : '' }}>Híbrido/Diesel</option>
                                                <option value="Nafta/GNC" {{ old('area', $property->area) == 'Nafta/GNC' ? 'selected' : '' }}>Nafta/GNC</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Transmisión') }} <span class="text-danger">*</span></label>
                                            <select id="transmission_input" name="transmision" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled {{ !$property->transmision ? 'selected' : '' }}>{{ __('Select Transmission') }}</option>
                                                <option value="Manual" {{ old('transmision', $property->transmision) == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                                <option value="Automática" {{ old('transmision', $property->transmision) == 'Automática' ? 'selected' : '' }}>{{ __('Automatic') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Tracción') }}</label>
                                           <select name="traction" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled {{ !$property->traction ? 'selected' : '' }}>{{ __('Select Traction') }}</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>
                                    
                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                        <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Dirección') }}</label>
                                          <select name="steering" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                             <option disabled {{ !$property->steering ? 'selected' : '' }}>{{ __('Seleccionar Dirección') }}</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>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Motor') }}</label>
                                            <input type="number" id="engine_input" step="0.1" class="form-control" name="engine" placeholder="{{ __('Enter Engine Size') }}" value="{{ old('engine', $property->engine) }}" style="height:42px; border-radius:8px; font-size:13px;">
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Color') }} <span class="text-danger">*</span></label>
                                            <select id="color_input" name="color" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                                <option disabled {{ !$property->color ? 'selected' : '' }}>{{ __('Select Color') }}</option>
                                                <option value="Blanco" {{ old('color', $property->color) == 'Blanco' ? 'selected' : '' }}>{{ __('White') }}</option>
                                                <option value="Negro" {{ old('color', $property->color) == 'Negro' ? 'selected' : '' }}>{{ __('Black') }}</option>
                                                <option value="Rojo" {{ old('color', $property->color) == 'Rojo' ? 'selected' : '' }}>{{ __('Red') }}</option>
                                                <option value="Azul" {{ old('color', $property->color) == 'Azul' ? 'selected' : '' }}>{{ __('Blue') }}</option>
                                                <option value="Gris" {{ old('color', $property->color) == 'Gris' ? 'selected' : '' }}>{{ __('Gray') }}</option>
                                                <option value="Plata" {{ old('color', $property->color) == 'Plata' ? 'selected' : '' }}>{{ __('Silver') }}</option>
                                                <option value="Verde" {{ old('color', $property->color) == 'Verde' ? 'selected' : '' }}>{{ __('Green') }}</option>
                                                <option value="Marrón" {{ old('color', $property->color) == 'Marrón' ? 'selected' : '' }}>{{ __('Brown') }}</option>
                                                <option value="Beige" {{ old('color', $property->color) == 'Beige' ? 'selected' : '' }}>{{ __('Beige') }}</option>
                                                <option value="Dorado" {{ old('color', $property->color) == 'Dorado' ? 'selected' : '' }}>{{ __('Gold') }}</option>
                                                <option value="Naranja" {{ old('color', $property->color) == 'Naranja' ? 'selected' : '' }}>{{ __('Orange') }}</option>
                                                <option value="Amarillo" {{ old('color', $property->color) == 'Amarillo' ? 'selected' : '' }}>{{ __('Yellow') }}</option>
                                                <option value="Rosado" {{ old('color', $property->color) == 'Rosado' ? 'selected' : '' }}>{{ __('Pink') }}</option>
                                            </select>
                                        </div>
                                    </div>                           

                                    <div class="col-lg-6 mb-3">
                                        <div class="form-group px-0">
                                            <label class="text-secondary mb-1" style="font-size: 12px;">{{ __('Amenities') }} <span class="text-danger">*</span></label>
                                            <select name="amenities[]" class="form-control js-example-basic-single2 amenities-values" multiple="multiple" style="width: 100%;">
                                                @foreach ($amenities as $amenity)
                                                    @php $amContent = $amenity->contents()->first(); @endphp
                                                    <option data-value="{{ $amContent?->name }}" value="{{ $amenity->id }}" 
                                                        @if(is_array(old('amenities')))
                                                            {{ in_array($amenity->id, old('amenities')) ? 'selected' : '' }}
                                                        @else
                                                            {{ $propertyAmenities->contains('amenity_id', $amenity->id) ? 'selected' : '' }}
                                                        @endif>
                                                        {{ $amContent?->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

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

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

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

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

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

{{-- Mercado Account Status --}}
<div class="alert border-0 mb-3"
     style="border-radius:10px; background:#eef7ff;">

    <div class="fw-bold text-dark mb-2">
        Estado de MercadoLibre
    </div>

    <small class="text-muted d-block mb-2">
        Tipo de cuenta:
        <strong>
            {{ ucfirst(str_replace('_', ' ', $meliAccountType ?? 'N/A')) }}
        </strong>
    </small>

    @if($meliCanPublish)

        <div class="text-success fw-bold">
            <i class="fas fa-check-circle"></i>
            Puede publicar vehículos
        </div>

    @else

        <div class="text-danger fw-bold">
            <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 class="text-dark d-block" style="line-height:1.5;">
            <i class="fas fa-exclamation-triangle text-warning me-1"></i>
            <strong>No tienes un paquete activo para vehículos.</strong>
            Cualquier vehículo publicado en MercadoLibre
            requerirá un pago antes de activarse.
        </small>
    </div>

@endif
</div>

{{-- Mercado Listing Status --}}
@if($hasMercadoListing)

    @if($isPendingPayment)

        <div class="alert alert-warning border-0 mb-3"
             style="border-radius:10px; background:#fff8e1;">

            <div class="d-flex align-items-start">
                <i class="fas fa-exclamation-triangle text-warning mt-1 me-2"></i>

                <div>
                    <div class="fw-bold text-dark mb-1">
                        Pago pendiente en MercadoLibre
                    </div>

                    <small class="text-muted d-block mb-2">
                        Este vehículo fue enviado a MercadoLibre,
                        pero requiere completar el pago para activarse.
                    </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>
            </div>
        </div>

    @else

        <div class="alert alert-success border-0 mb-3"
             style="border-radius:10px; background:#ecfdf3;">

            <div class="d-flex align-items-start">
                <i class="fas fa-check-circle text-success mt-1 me-2"></i>

                <div>
                    <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>
            </div>
        </div>

    @endif

@endif

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

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

                                                        <div class="col-6">
                                                            <div id="btn-meli-no" class="p-3 border rounded text-center d-flex align-items-center justify-content-center" style="cursor:pointer; border:1px solid #dee2e6; background-color:#ffffff; border-radius:8px; min-height:70px;">
                                                                <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 me-1"></i> No Publicar
                                                                    </span>
                                                                    <small class="text-muted" style="font-size:11px;">No se enviará</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                             <div class="form-group px-0 mb-0 meli-package-wrapper">

    <label class="fw-bold text-dark mb-1"
           style="font-size: 12px;">
        Tipo de Paquete
    </label>

    <select name="meli_package_type"
        class="form-control"
        style="height:42px; border-radius:8px; font-size:13px;"
        {{ $isPendingPayment ? 'disabled' : '' }}>

    {{-- GRATIS --}}
    @if($isFreeAvailable)

        <option value="gratis"
            {{ old('meli_package_type', $property->meli_package_type ?? 'plata') == 'gratis' ? 'selected' : '' }}>
            Gratis
        </option>

    @else

        <option value="gratis" disabled>
            Gratis (No disponible)
        </option>

    @endif


    {{-- PLATA --}}
    <option value="plata"
        {{ old('meli_package_type', $property->meli_package_type ?? 'plata') == 'plata' ? 'selected' : '' }}>
        Plata
    </option>


    {{-- ORO --}}
    <option value="oro"
        {{ old('meli_package_type', $property->meli_package_type ?? '') == 'oro' ? 'selected' : '' }}>
        Oro
    </option>


    {{-- ORO PREMIUM --}}
    <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-2"
               style="font-size:11px;">

            <i class="fas fa-lock me-1"></i>

            No puedes cambiar el tipo de paquete
            mientras el pago esté pendiente
            en MercadoLibre.

        </small>

        {{-- Keep selected value when select is disabled --}}
        <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 su cuenta para automatizar
        publicaciones simultáneas.

    </p>

    <a href="{{ url('/user/mercado-libre/configuracion') }}"
       class="btn btn-primary btn-sm px-3 fw-bold"
       style="border-radius: 6px;
              background-color: #0d6efd;">

        Conectar Cuenta

    </a>

    <input type="hidden"
           name="publicar_mercado_libre"
           id="mercado_publish"
           value="0">

</div>

@endif

                               
                        </div>
                         <div id="mercado-card" style="display:none;" class="col-12 mt-4 text-left 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 me-2"></i> Cargando especificaciones dinámicas de MercadoLibre...
                                    </div>
                                    <div id="mercado-dynamic-fields"></div>
                                </div>
                            </div>

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

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

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

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

                                                        @if ($language->is_default == 1)
                                                            <div class="col-lg-6 mb-3">
                                                                <div class="form-group px-0">
                                                                    <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Latitud') }} *</label>
                                                                    <input type="text" class="form-control latitude" name="latitude" placeholder="{{ __('Ingresar Latitud') }}" value="{{ old('latitude', $property->latitude) }}" style="height:42px; border-radius:8px; font-size:13px;">
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-6 mb-3">
                                                                <div class="form-group px-0">
                                                                    <label class="fw-bold text-dark" style="font-size:13px;">{{ __('Longitud') }} *</label>
                                                                    <input type="text" class="form-control longitude" name="longitude" placeholder="{{ __('Ingresar Longitud') }}" value="{{ old('longitude', $property->longitude) }}" style="height:42px; border-radius:8px; font-size:13px;">
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>

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

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

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

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

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

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

                <div class="card-footer mb-3">
                    <div class="row">
                        <div class="col-12 text-center">
                            <button type="submit" id="propertySubmit" class="btn btn-success px-5 font-weight-bold btn-lg" style="border-radius: 8px; height: 46px; min-width: 200px;">
                                {{ __('Update') }}
                            </button>
                        </div>
                    </div>
                </div>

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

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

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

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

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

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

@section('scripts')
    <script>
        'use strict';
        var labels = "{!! $labels !!}";
        var values = "{!! $values !!}";
        var stateUrl = "{{ route('user.property_management.get_state_cities') }}";
        var cityUrl = "{{ route('user.property_management.get_cities') }}";
        var storeUrl = "{{ route('user.property.imagesupdate') }}";
        var removeUrl = "{{ route('user.property.imagermv') }}";
        var rmvdbUrl = "{{ route('user.property.imgdbrmv') }}";
        var specificationRmvUrl = "{{ route('user.property_management.specification_delete') }}";
        let galleryImages = "{{ $userCurrentPackage->number_of_property_gallery_images }}";
        let flrimgrmv = "{{ route('user.property_management.floorImgrmv') }}";
        let vdoimgrmv = "{{ route('user.property_management.videoImgrmv') }}";
        var selectAmenLocal = "{{ $keywords['Select Amenities'] ?? __('Select Amenities') }}";
        var genPromptUrl = "{{ route('generate.prompt') }}";
        var genContentUrl = "{{ route('generate.content') }}";
        var modelUrl = "{{ route('user.property_management.get_models') }}";
var versionUrl = "{{ route('user.property_management.get_versions') }}";


        // Expose cached dictionary database variables array object to script environment trees securely
        window.savedMeliAttributes =
{!! json_encode(
    $filteredMercadoAttributes
) !!};
    </script>

    @if ($userBs->google_map_api_status == 1)
        <script>
            var defaultLang = "{{ $currentLang->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 type="text/javascript" src="{{ asset('assets/tenant/js/ai-generate.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/admin-partial.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/admin-dropzone.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/tenant/js/property.js') }}"></script>

    <script>
    $(document).ready(function () {
        
        /* Prevent addRow button default action if bound improperly */
        $(document).on('click', '.addRow', function(e) {
            e.preventDefault();
        });

        /* Sync structural selectors styling parameters context arrays matching save statuses */
        if ($('#share_input_tracker').val() == '1') {
            $('#btn-share-allow').css({ 'border': '2px solid #059669', 'background-color': '#f0fdf4' });
            $('#btn-share-allow').find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
            $('#btn-share-allow').find('span').removeClass('text-secondary').addClass('text-success');
        } else {
            $('#btn-share-deny').css({ 'border': '2px solid #dc3545', 'background-color': '#fdf2f2' });
            $('#btn-share-deny').find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
            $('#btn-share-deny').find('span').removeClass('text-secondary').addClass('text-danger');
        }

        if ($('#mercado_publish').val() == '1') {
            $('#btn-meli-yes').css({ 'border': '2px solid #059669', 'background-color': '#f0fdf4' });
            $('#btn-meli-yes').find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
            $('#btn-meli-yes').find('span').removeClass('text-secondary').addClass('text-success');
            $('.meli-package-wrapper').show();
            loadMercadoAttributes();
        } else {
            $('#btn-meli-no').css({ 'border': '2px solid #dc3545', 'background-color': '#fdf2f2' });
            $('#btn-meli-no').find('i').removeClass('far fa-circle').addClass('fas fa-check-circle');
            $('#btn-meli-no').find('span').removeClass('text-secondary').addClass('text-danger');
            $('.meli-package-wrapper').hide();
        }

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

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

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

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

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

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

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

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

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

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

        // Trigger change refresh events safely matching layout choices updates
        $('#brand_id, #model_id, #version_id, #year').on('change', function () {
            if($('#mercado_publish').val() == '1') {
                setTimeout(function () {
                    loadMercadoAttributes();
                }, 400);
            }
        });

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

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

            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: modelId,
                    version_id: versionId,
                    year: year
                },
                success: function (response) {
                    $('#mercado-loading').hide();
                    $('#mercado-dynamic-fields').show();

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

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

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

                            // Hydrate initial selection status using exposed globally cached values object mapping array
                        // Get saved MercadoLibre value
let savedValue = '';

if (Array.isArray(window.savedMeliAttributes)) {
    const saved = window.savedMeliAttributes.find(function (item) {
        return String(item.id) === String(field.id);
    });

    if (saved) {
        savedValue = saved.value;
    }
}

console.log('Field ID:', field.id);
console.log('Saved Value:', savedValue);

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

                            if (field.values && field.values.length) {
                                html += `
                                    <select name="mercado_attributes[${field.id}]" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="">Select</option>
                                `;
                               $.each(field.values || [], function (i, option) {

    let isSelected =
        String(savedValue) === String(option.id)
            ? 'selected'
            : '';

    html += `
        <option
            value="${option.id}"
            ${isSelected}
        >
            ${option.name}
        </option>
    `;
});
                                html += `</select>`;
                            } else if (field.value_type === 'boolean') {
                                html += `
                                    <select name="mercado_attributes[${field.id}]" class="form-control" style="height:42px; border-radius:8px; font-size:13px;">
                                        <option value="">Select</option>
                                        <option value="true" ${savedValue === 'true' || savedValue === '1' ? 'selected' : ''}>Yes</option>
                                        <option value="false" ${savedValue === 'false' || savedValue === '0' ? 'selected' : ''}>No</option>
                                    </select>
                                `;
                            } else {
                                html += `
                                    <input type="text" class="form-control" name="mercado_attributes[${field.id}]" value="${savedValue}" 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.log('Could not load Mercado attributes.');
                }
            });
        }
        
    });
    </script>
@endsection