@extends('agent.layout')

@includeIf('backend.partials.rtl_style')

@section('content')
<style>
    /* ── Design tokens (mirrors user panel exactly) ── */
    .ref-main-card {
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        background-color: #ffffff;
    }
    .ref-table th {
        background-color: #fafbfe !important;
        color: #718096 !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px;
        padding: 16px 24px !important;
        border-bottom: 1px solid #edf2f9 !important;
        border-top: none !important;
    }
    .ref-table td {
        padding: 24px 24px !important;
        vertical-align: middle !important;
        border-top: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .ref-table tr:last-child td { border-bottom: none !important; }
    .custom-bg-light-success { background-color: #e6f6ec !important; color: #28a745 !important; }
    .custom-bg-light-danger  { background-color: #fde8e8 !important; color: #dc3545 !important; }
    .custom-bg-light-warning { background-color: #fff8eb !important; color: #f5a623 !important; }
    .ref-action-btn {
        border-radius: 8px !important;
        font-weight: 500;
        font-size: 0.875rem;
        padding: 8px 16px;
    }
    .style-select-all-box {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 0 16px;
        background-color: #fff;
        height: 42px;
        display: inline-flex;
        align-items: center;
    }
    .ref-search-input {
        height: 42px;
        border-color: #e2e8f0;
        font-size: 0.9rem;
    }
    .ref-badge-meli {
        border-radius: 6px;
        padding: 8px 14px;
        font-weight: 600;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
    }
    .ref-btn-edit {
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        color: #4a5568;
        padding: 6px 16px;
        height: 36px;
    }
    .ref-btn-edit:hover { background: #f8fafc; color: #0061f2; }
    .ref-btn-star {
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        background: #fff8e7;
        border: 1px solid #ffeeba;
        color: #e0a800;
        padding: 6px 14px;
        height: 36px;
    }
    .ref-btn-pdf {
        border-radius: 6px;
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #fde8e8;
        border: 1px solid #f8d7da;
        color: #dc3545;
    }
    .ref-btn-pdf:hover { background-color: #dc3545; color: #ffffff; border-color: #dc3545; }
    .filter-toggle-btn.active {
        background-color: #e6f0ff !important;
        border-color: #0061f2 !important;
        color: #0061f2 !important;
    }
    .filter-badge-count {
        background-color: #0061f2;
        color: #fff;
        border-radius: 50%;
        font-size: 0.7rem;
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
    }
    /* Filter panel */
    #filterPanel .card {
        border: 1px solid #edf2f9;
        border-radius: 10px;
        box-shadow: none;
    }
    #filterPanel .form-control {
        border-color: #e2e8f0;
        font-size: 0.875rem;
        height: 38px;
    }
    #filterPanel label {
        font-size: 0.775rem;
        font-weight: 700;
        color: #718096;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        margin-bottom: 4px;
    }
</style>

    {{-- ── Page heading ── --}}
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-4 px-1">
        <div>
            <h2 class="font-weight-bold text-dark mb-1" style="font-size: 1.65rem; letter-spacing: -0.5px;">{{ __('Mis Vehículos') }}</h2>
            <p class="text-muted mb-0" style="font-size: 0.9rem;">{{ __('Administra tus publicaciones de vehículos.') }}</p>
        </div>
        <div class="d-flex align-items-center mt-3 mt-md-0">
            <button type="button" id="exportExcelBtn"
                class="btn btn-white border ref-action-btn bg-white text-secondary mr-2 shadow-sm">
                <i class="fas fa-file-excel mr-2 text-muted"></i>{{ __('Exportar') }}
            </button>
            <a href="{{ route('agent.property_management.type', getParam()) }}"
                class="btn btn-primary ref-action-btn shadow-sm" style="background-color: #0061f2; border-color: #0061f2;">
                <i class="fas fa-plus mr-2"></i>{{ __('Nuevo Auto') }}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card ref-main-card shadow-sm">

                {{-- ── Toolbar strip ── --}}
                <div class="card-header bg-white border-bottom-0 pt-4 pb-3 px-4">
                    <div class="d-flex align-items-center justify-content-between w-100">

                        {{-- Left: select-all + bulk delete --}}
                        <div class="d-flex align-items-center">
                            <div class="style-select-all-box mr-2">
                                <input type="checkbox" class="bulk-check mr-2" data-val="all" id="selectAllMain"
                                    style="transform: scale(1.1); cursor:pointer;">
                                <label for="selectAllMain" class="mb-0 text-secondary font-weight-normal"
                                    style="cursor: pointer; font-size: 0.9rem; color: #4a5568 !important;">{{ __('Seleccionar todo') }}</label>
                            </div>

                            <button class="btn btn-white border text-danger ref-action-btn bulk-delete d-none"
                                data-href="{{ route('agent.property_management.bulk_delete_property', getParam()) }}"
                                style="height: 42px; background-color: #fff; border-color: #e2e8f0;">
                                <i class="far fa-trash-alt mr-2"></i>{{ __('Eliminar seleccionados') }}
                            </button>
                        </div>

                        {{-- Right: filter toggle + search + language --}}
                        <div class="d-flex align-items-center">
                            @php $activeFilterCount = !empty($filters) ? count(array_filter($filters, fn($v) => $v !== null && $v !== '')) : 0; @endphp
                            <button class="btn btn-white border ref-action-btn text-secondary mr-2 filter-toggle-btn {{ $activeFilterCount > 0 ? 'active' : '' }}"
                                type="button" data-toggle="collapse" data-target="#filterPanel"
                                aria-expanded="{{ $activeFilterCount > 0 ? 'true' : 'false' }}" aria-controls="filterPanel"
                                style="height: 42px; background-color: #fff; border-color: #e2e8f0; padding: 0 20px;">
                                <i class="fas fa-filter mr-2 text-muted"></i>{{ __('Filtros') }}
                                @if($activeFilterCount > 0)
                                    <span class="filter-badge-count">{{ $activeFilterCount }}</span>
                                @endif
                            </button>

                            <form action="{{ route('agent.property_management.properties', getParam()) }}"
                                method="get" id="carSearchForm" class="mb-0 mr-2">
                                <div class="input-group" style="width: 280px;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white border-right-0" style="border-color: #e2e8f0;">
                                            <i class="fas fa-search text-muted"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="title" value="{{ request()->input('title') }}"
                                        class="form-control border-left-0 text-muted ref-search-input"
                                        placeholder="{{ __('Buscar autos...') }}"
                                        onchange="document.getElementById('carSearchForm').submit();">
                                </div>
                            </form>

                            @if(View::exists('agent.partials.languages'))
                                <div style="height: 42px; display: inline-block;">
                                    @includeIf('agent.partials.languages')
                                </div>
                            @endif
                        </div>

                    </div>
                </div>

                {{-- ── Collapsible filter panel ── --}}
                <div class="collapse px-4 pb-2 {{ $activeFilterCount > 0 ? 'show' : '' }}" id="filterPanel">
                    <div class="card card-body mb-3 mt-1" style="background: #fafbfe;">
                        <form action="{{ route('agent.property_management.properties', getParam()) }}" method="get" id="agentFilterForm">

                            <div class="row">
                                {{-- Status --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Estado') }}</label>
                                    <select name="status" class="form-control">
                                        <option value="">{{ __('Todos') }}</option>
                                        <option value="1" {{ ($filters['status'] ?? '') == '1' ? 'selected' : '' }}>{{ __('Activo') }}</option>
                                        <option value="0" {{ ($filters['status'] ?? '') === '0' ? 'selected' : '' }}>{{ __('Inactivo') }}</option>
                                    </select>
                                </div>

                                {{-- Price min --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Precio mín.') }}</label>
                                    <input type="number" name="price_min" class="form-control"
                                        placeholder="0" value="{{ $filters['price_min'] ?? '' }}">
                                </div>

                                {{-- Price max --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Precio máx.') }}</label>
                                    <input type="number" name="price_max" class="form-control"
                                        placeholder="999999" value="{{ $filters['price_max'] ?? '' }}">
                                </div>

                                {{-- Year min --}}
                                <div class="col-md-1 mb-3">
                                    <label>{{ __('Año desde') }}</label>
                                    <input type="number" name="year_min" class="form-control"
                                        placeholder="2000" value="{{ $filters['year_min'] ?? '' }}">
                                </div>

                                {{-- Year max --}}
                                <div class="col-md-1 mb-3">
                                    <label>{{ __('Año hasta') }}</label>
                                    <input type="number" name="year_max" class="form-control"
                                        placeholder="{{ date('Y') }}" value="{{ $filters['year_max'] ?? '' }}">
                                </div>

                                {{-- Transmission --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Transmisión') }}</label>
                                    <select name="transmision" class="form-control">
                                        <option value="">{{ __('Todas') }}</option>
                                        <option value="manual"    {{ ($filters['transmision'] ?? '') == 'manual'    ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                        <option value="automatica" {{ ($filters['transmision'] ?? '') == 'automatica' ? 'selected' : '' }}>{{ __('Automática') }}</option>
                                    </select>
                                </div>

                                {{-- Fuel type --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Combustible') }}</label>
                                    <select name="fuel_type" class="form-control">
                                        <option value="">{{ __('Todos') }}</option>
                                        <option value="nafta"   {{ ($filters['fuel_type'] ?? '') == 'nafta'   ? 'selected' : '' }}>{{ __('Nafta') }}</option>
                                        <option value="diesel"  {{ ($filters['fuel_type'] ?? '') == 'diesel'  ? 'selected' : '' }}>{{ __('Diesel') }}</option>
                                        <option value="gnc"     {{ ($filters['fuel_type'] ?? '') == 'gnc'     ? 'selected' : '' }}>{{ __('GNC') }}</option>
                                        <option value="electrico" {{ ($filters['fuel_type'] ?? '') == 'electrico' ? 'selected' : '' }}>{{ __('Eléctrico') }}</option>
                                        <option value="hibrido" {{ ($filters['fuel_type'] ?? '') == 'hibrido' ? 'selected' : '' }}>{{ __('Híbrido') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                {{-- Brand --}}
                                <div class="col-md-3 mb-3">
                                    <label>{{ __('Marca') }}</label>
                                    <select name="brand_id" class="form-control" id="agentBrandSelect">
                                        <option value="">{{ __('Todas las marcas') }}</option>
                                        @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}" {{ ($filters['brand_id'] ?? '') == $brand->id ? 'selected' : '' }}>
                                                {{ $brand->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Model --}}
                                <div class="col-md-3 mb-3">
                                    <label>{{ __('Modelo') }}</label>
                                    <select name="model_id" class="form-control" id="agentModelSelect">
                                        <option value="">{{ __('Todos los modelos') }}</option>
                                        @foreach($selectedModels as $model)
                                            <option value="{{ $model->id }}" {{ ($filters['model_id'] ?? '') == $model->id ? 'selected' : '' }}>
                                                {{ $model->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Version --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Versión') }}</label>
                                    <select name="version_id" class="form-control" id="agentVersionSelect">
                                        <option value="">{{ __('Todas las versiones') }}</option>
                                        @foreach($selectedVersions as $version)
                                            <option value="{{ $version->id }}" {{ ($filters['version_id'] ?? '') == $version->id ? 'selected' : '' }}>
                                                {{ $version->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- MercadoLibre status --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('MercadoLibre') }}</label>
                                    <select name="meli_status" class="form-control">
                                        <option value="">{{ __('Todos') }}</option>
                                        <option value="published"       {{ ($filters['meli_status'] ?? '') == 'published'       ? 'selected' : '' }}>{{ __('Publicado') }}</option>
                                        <option value="payment_required" {{ ($filters['meli_status'] ?? '') == 'payment_required' ? 'selected' : '' }}>{{ __('Pendiente pago') }}</option>
                                        <option value="not_published"   {{ ($filters['meli_status'] ?? '') == 'not_published'   ? 'selected' : '' }}>{{ __('No publicado') }}</option>
                                    </select>
                                </div>

                                {{-- Engine --}}
                                <div class="col-md-2 mb-3">
                                    <label>{{ __('Motor') }}</label>
                                    <input type="text" name="engine" class="form-control"
                                        placeholder="{{ __('Ej. 1.6') }}" value="{{ $filters['engine'] ?? '' }}">
                                </div>
                            </div>

                            <div class="row">
                                {{-- Country --}}
                                <div class="col-md-3 mb-3">
                                    <label>{{ __('País') }}</label>
                                    <select name="country_id" class="form-control" id="agentCountrySelect">
                                        <option value="">{{ __('Todos los países') }}</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->country_id }}" {{ ($filters['country_id'] ?? '') == $country->country_id ? 'selected' : '' }}>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- State --}}
                                <div class="col-md-3 mb-3">
                                    <label>{{ __('Provincia') }}</label>
                                    <select name="state_id" class="form-control" id="agentStateSelect">
                                        <option value="">{{ __('Todas las provincias') }}</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state->id }}" {{ ($filters['state_id'] ?? '') == $state->id ? 'selected' : '' }}>
                                                {{ $state->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- City --}}
                                <div class="col-md-3 mb-3">
                                    <label>{{ __('Ciudad') }}</label>
                                    <select name="city_id" class="form-control" id="agentCitySelect">
                                        <option value="">{{ __('Todas las ciudades') }}</option>
                                        @foreach($selectedCities as $city)
                                            <option value="{{ $city->id }}" {{ ($filters['city_id'] ?? '') == $city->id ? 'selected' : '' }}>
                                                {{ $city->name ?? $city->id }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Filter actions --}}
                                <div class="col-md-3 mb-3 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary mr-2" style="height: 38px; border-radius: 8px; background:#0061f2; border-color:#0061f2; font-weight:600; font-size:0.875rem;">
                                        <i class="fas fa-search mr-1"></i>{{ __('Aplicar') }}
                                    </button>
                                    <a href="{{ route('agent.property_management.properties', getParam()) }}"
                                        class="btn btn-white border text-secondary"
                                        style="height: 38px; border-radius: 8px; font-weight:600; font-size:0.875rem; border-color:#e2e8f0; background:#fff; display:inline-flex; align-items:center;">
                                        <i class="fas fa-times mr-1"></i>{{ __('Limpiar') }}
                                    </a>
                                </div>
                            </div>

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

                {{-- ── Table ── --}}
                <div class="card-body p-0">
                    @if (count($properties) == 0)
                        <h3 class="text-center py-5 text-muted font-weight-normal">{{ __('NO SE ENCONTRARON VEHÍCULOS') }}</h3>
                    @else
                        <div class="table-responsive">
                            <table class="table ref-table mb-0">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 60px;" class="text-center"></th>
                                        <th scope="col" style="min-width: 260px;">{{ __('AUTO') }}</th>
                                        <th scope="col">{{ __('CONDICIÓN Y PRECIO') }}</th>
                                        <th scope="col" style="width: 140px;">{{ __('ESTADO') }}</th>
                                        <th scope="col" style="min-width: 180px;">{{ __('MERCADOLIBRE') }}</th>
                                        <th scope="col" class="text-center" style="width: 200px;">{{ __('ACCIONES') }}</th>
                                        <th scope="col" class="text-center" style="width: 80px;">{{ __('PDF') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($properties as $property)
                                        <tr>
                                            {{-- Checkbox --}}
                                            <td class="text-center">
                                                <input type="checkbox" class="bulk-check" data-val="{{ $property->id }}"
                                                    style="transform: scale(1.1); cursor:pointer;">
                                            </td>

                                            {{-- Thumbnail + title --}}
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($property->featured_image)
                                                        <img src="{{ asset('assets/img/property/featureds/' . $property->featured_image) }}"
                                                             alt="Vehicle image"
                                                             class="rounded border mr-3"
                                                             style="width: 85px; height: 64px; object-fit: cover; border-color: #e2e8f0 !important;">
                                                    @else
                                                        <div class="rounded border bg-light d-flex align-items-center justify-content-center mr-3"
                                                            style="width: 85px; height: 64px; border-color: #e2e8f0 !important;">
                                                            <i class="fas fa-car text-muted" style="font-size: 1.2rem;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <h6 class="mb-1 font-weight-bold" style="color: #1a202c; font-size: 0.95rem; line-height: 1.4;">
                                                            {{ strlen($property->title) > 45 ? mb_substr($property->title, 0, 45, 'utf-8') . '...' : $property->title }}
                                                        </h6>
                                                        <small class="text-muted font-weight-normal" style="font-size: 0.825rem; color: #718096 !important;">Autos y Camionetas</small>
                                                    </div>
                                                </div>
                                            </td>

                                            {{-- Condition + price --}}
                                            <td>
                                                <div class="text-muted small mb-1 font-weight-normal" style="color: #718096 !important;">
                                                    {{ $property->year ? 'Usado' : 'Nuevo' }}
                                                </div>
                                                <div class="font-weight-bold text-success" style="font-size: 1rem; color: #38a169 !important;">
                                                    {{ $property->currency_symbol ?? 'US$' }} {{ number_format($property->price, 0, '', '.') }}
                                                </div>
                                            </td>

                                            {{-- Status dropdown --}}
                                            <td>
                                                <form id="statusForm{{ $property->id }}" class="d-inline-block"
                                                    action="{{ route('agent.property_management.update_status', getParam()) }}"
                                                    method="post">
                                                    @csrf
                                                    <input type="hidden" name="propertyId" value="{{ $property->id }}">
                                                    <select class="form-control form-control-sm border-0 font-weight-bold py-1 px-2 {{ $property->status == 1 ? 'custom-bg-light-success text-success' : 'custom-bg-light-danger text-danger' }}"
                                                        name="status"
                                                        onchange="document.getElementById('statusForm{{ $property->id }}').submit();"
                                                        style="border-radius: 6px; cursor: pointer; width: 105px; font-size: 0.85rem; height: 34px; display: inline-block;">
                                                        <option value="1" {{ $property->status == 1 ? 'selected' : '' }}>{{ __('Activo') }}</option>
                                                        <option value="0" {{ $property->status == 0 ? 'selected' : '' }}>{{ __('Inactivo') }}</option>
                                                    </select>
                                                </form>
                                            </td>

                                            {{-- MercadoLibre --}}
                                            <td>
                                                <div class="d-flex flex-column align-items-start">
                                                    @if($property->meli_item_id && $property->meli_status == 'active')
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="badge ref-badge-meli custom-bg-light-success text-success mr-2">
                                                                <i class="fas fa-check-circle mr-1" style="font-size: 0.75rem;"></i> Publicado
                                                            </span>
                                                            @if($property->meli_permalink)
                                                                <a href="{{ $property->meli_permalink }}" target="_blank" class="text-muted small d-inline-flex align-items-center">
                                                                    <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                        @if($property->meli_listing_type)
                                                            <div class="text-capitalize d-flex align-items-center"
                                                                style="font-size: 0.85rem; font-weight: 600; color: #4a5568 !important; letter-spacing: 0.2px; margin-top: 6px; padding-left: 4px;">
                                                                <svg viewBox="0 0 24 24" fill="none" stroke="#4a5568" stroke-width="2.5"
                                                                    stroke-linecap="round" stroke-linejoin="round"
                                                                    style="width: 16px; height: 16px; flex-shrink: 0; margin-right: 6px;">
                                                                    <circle cx="12" cy="12" r="10"></circle>
                                                                    <path d="M9 11l3 3 5-5"></path>
                                                                </svg>
                                                                {{ str_replace('_', ' ', $property->meli_listing_type) }}
                                                            </div>
                                                        @endif
                                                    @elseif($property->meli_status == 'payment_required')
                                                        <div class="d-flex align-items-center">
                                                            <span class="badge ref-badge-meli custom-bg-light-warning text-warning mr-2">
                                                                <i class="fas fa-exclamation-triangle mr-1" style="font-size: 0.75rem;"></i> Pendiente Pago
                                                            </span>
                                                            <a href="{{ !empty($property->meli_payment_link) ? $property->meli_payment_link : $property->meli_permalink }}"
                                                                target="_blank" class="text-muted small d-inline-flex align-items-center">
                                                                <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                            </a>
                                                        </div>
                                                    @else
                                                        <div class="d-flex align-items-center">
                                                            <span class="badge ref-badge-meli custom-bg-light-warning text-warning mr-2">
                                                                <i class="far fa-clock mr-1" style="font-size: 0.75rem;"></i> No publicado
                                                            </span>
                                                            @if($property->meli_permalink)
                                                                <a href="{{ $property->meli_permalink }}" target="_blank"
                                                                    class="text-muted small d-inline-flex align-items-center">
                                                                    <i class="fas fa-external-link-alt" style="font-size: 0.8rem; color: #a0aec0;"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>

                                            {{-- Actions --}}
                                            <td class="text-center">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    {{-- Edit --}}
                                                    <a class="btn btn-sm ref-btn-edit d-inline-flex align-items-center mr-2"
                                                       href="{{ route('agent.property_management.edit', ['username' => getParam(), 'id' => $property->id]) }}">
                                                        <i class="fas fa-pencil-alt text-primary mr-2" style="font-size: 0.75rem;"></i>{{ __('Editar') }}
                                                    </a>

                                                    {{-- Featured toggle --}}
                                                    <form id="featureForm{{ $property->id }}" class="d-inline-block m-0 mr-2"
                                                        action="{{ route('agent.property_management.update_featured', getParam()) }}"
                                                        method="post">
                                                        @csrf
                                                        <input type="hidden" name="requestId" value="{{ $property->id }}">
                                                        <input type="hidden" name="featured" value="{{ $property->featured == 1 ? '0' : '1' }}">
                                                        <button type="submit" class="btn btn-sm ref-btn-star d-inline-flex align-items-center"
                                                            title="{{ $property->featured == 1 ? __('Quitar Destacado') : __('Destacar') }}">
                                                            <i class="fas fa-star mr-1" style="font-size: 0.8rem;"></i>
                                                            <span>{{ __('Destacar') }}</span>
                                                        </button>
                                                    </form>

                                                    {{-- Delete --}}
                                                    <form class="d-inline-block deleteForm m-0"
                                                        action="{{ route('agent.property_management.delete_property', getParam()) }}"
                                                        method="post">
                                                        @csrf
                                                        <input type="hidden" name="property_id" value="{{ $property->id }}">
                                                        <button type="submit"
                                                            class="btn btn-sm btn-white text-muted d-inline-flex align-items-center justify-content-center deletebtn"
                                                            style="border-radius: 6px; width: 36px; height: 36px; padding: 0; background: #fff; border: 1px solid #e2e8f0;">
                                                            <i class="fas fa-trash-alt text-danger" style="font-size: 0.8rem;"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>

                                            {{-- PDF --}}
                                            <td class="text-center">
                                               <a href="{{ route('agent.property_management.download-pdf', ['id' => $property->id]) }}"
   class="btn ref-btn-pdf shadow-sm"
   target="_blank">
    <i class="fas fa-file-pdf"></i>
</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination --}}
                        <div class="card-footer bg-white border-top-0 py-4 px-4">
                            <div class="d-flex align-items-center justify-content-between flex-column flex-sm-row">
                                <div class="text-muted font-weight-normal mb-3 mb-sm-0"
                                    style="font-size: 0.9rem; color: #718096 !important;">
                                    {{ __('Mostrando') }} {{ $properties->firstItem() }}
                                    {{ __('a') }} {{ $properties->lastItem() }}
                                    {{ __('de') }} {{ $properties->total() }} {{ __('resultados') }}
                                </div>
                                <div>
                                    {{ $properties->appends(array_merge($filters ?? [], ['title' => request()->input('title')]))->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- SheetJS (same CDN as user panel) --}}
    <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"
        onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';"></script>

    <script>
    // ── Select-all checkbox ──────────────────────────────────────────────────
    document.getElementById('selectAllMain').addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('.table tbody .bulk-check');
        checkboxes.forEach(cb => cb.checked = this.checked);
        const deleteBulkBtn = document.querySelector('.bulk-delete');
        if (this.checked && checkboxes.length > 0) {
            deleteBulkBtn.classList.remove('d-none');
        } else {
            deleteBulkBtn.classList.add('d-none');
        }
    });

    // ── Per-row checkbox: show/hide bulk-delete ──────────────────────────────
    document.querySelectorAll('.table tbody .bulk-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
            const anyChecked = document.querySelectorAll('.table tbody .bulk-check:checked').length > 0;
            document.querySelector('.bulk-delete').classList.toggle('d-none', !anyChecked);
        });
    });

    // ── Export to Excel ──────────────────────────────────────────────────────
    document.getElementById('exportExcelBtn').addEventListener('click', function () {
        if (typeof XLSX === 'undefined') {
            alert('{{ __('No se pudo cargar la librería de exportación. Revisa tu conexión e inténtalo de nuevo.') }}');
            return;
        }
        const table = document.querySelector('.ref-table');
        if (!table) return;
        const rows = table.querySelectorAll('tbody tr');
        if (rows.length === 0) {
            alert('{{ __('No hay vehículos para exportar.') }}');
            return;
        }
        try {
            const data = [['ID', 'Auto', 'Categoría', 'Condición', 'Moneda', 'Precio', 'Estado', 'MercadoLibre']];
            rows.forEach(function (row) {
                const checkbox    = row.querySelector('.bulk-check');
                const id          = checkbox ? checkbox.getAttribute('data-val') : '';
                const titleEl     = row.querySelector('td:nth-child(2) h6');
                const title       = titleEl ? titleEl.textContent.trim() : '';
                const categoryEl  = row.querySelector('td:nth-child(2) small');
                const category    = categoryEl ? categoryEl.textContent.trim() : '';
                const conditionEl = row.querySelector('td:nth-child(3) div:first-child');
                const condition   = conditionEl ? conditionEl.textContent.trim() : '';
                const priceEl     = row.querySelector('td:nth-child(3) div:nth-child(2)');
                const priceText   = priceEl ? priceEl.textContent.trim() : '';
                const priceParts  = priceText.split(/\s+/);
                const currency    = priceParts.shift() || '';
                const price       = priceParts.join(' ').replace(/\./g, '');
                const statusEl    = row.querySelector('td:nth-child(4) select');
                const status      = statusEl ? statusEl.options[statusEl.selectedIndex].text.trim() : '';
                const meliEl      = row.querySelector('td:nth-child(5) .ref-badge-meli');
                const meli        = meliEl ? meliEl.textContent.trim() : '';
                data.push([id, title, category, condition, currency, price, status, meli]);
            });
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            worksheet['!cols'] = [
                { wch: 8 }, { wch: 45 }, { wch: 20 }, { wch: 12 },
                { wch: 10 }, { wch: 14 }, { wch: 12 }, { wch: 18 }
            ];
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Autos');
            const today = new Date().toISOString().slice(0, 10);
            XLSX.writeFile(workbook, 'autos_agente_' + today + '.xlsx');
        } catch (err) {
            console.error('Export failed:', err);
            alert('{{ __('Ocurrió un error al exportar. Revisa la consola para más detalles.') }}');
        }
    });

    // ── Cascading dropdowns: Brand → Model → Version ─────────────────────────
    const agentBrandSelect   = document.getElementById('agentBrandSelect');
    const agentModelSelect   = document.getElementById('agentModelSelect');
    const agentVersionSelect = document.getElementById('agentVersionSelect');

    if (agentBrandSelect) {
        agentBrandSelect.addEventListener('change', function () {
            const brandId = this.value;
            agentModelSelect.innerHTML = '<option value="">{{ __("Todos los modelos") }}</option>';
            agentVersionSelect.innerHTML = '<option value="">{{ __("Todas las versiones") }}</option>';
            if (!brandId) return;
            fetch(`/ajax/car-models?brand_id=${brandId}`)
                .then(r => r.json())
                .then(models => {
                    models.forEach(m => {
                        const opt = document.createElement('option');
                        opt.value = m.id;
                        opt.textContent = m.name;
                        agentModelSelect.appendChild(opt);
                    });
                });
        });
    }

    if (agentModelSelect) {
        agentModelSelect.addEventListener('change', function () {
            const modelId = this.value;
            agentVersionSelect.innerHTML = '<option value="">{{ __("Todas las versiones") }}</option>';
            if (!modelId) return;
            fetch(`/ajax/car-versions?model_id=${modelId}`)
                .then(r => r.json())
                .then(versions => {
                    versions.forEach(v => {
                        const opt = document.createElement('option');
                        opt.value = v.id;
                        opt.textContent = v.name;
                        agentVersionSelect.appendChild(opt);
                    });
                });
        });
    }

    // ── Cascading dropdowns: State → City ────────────────────────────────────
    const agentStateSelect = document.getElementById('agentStateSelect');
    const agentCitySelect  = document.getElementById('agentCitySelect');

    if (agentStateSelect) {
        agentStateSelect.addEventListener('change', function () {
            const stateId = this.value;
            agentCitySelect.innerHTML = '<option value="">{{ __("Todas las ciudades") }}</option>';
            if (!stateId) return;
            fetch(`/ajax/cities?state_id=${stateId}`)
                .then(r => r.json())
                .then(cities => {
                    cities.forEach(c => {
                        const opt = document.createElement('option');
                        opt.value = c.id;
                        opt.textContent = c.name || c.id;
                        agentCitySelect.appendChild(opt);
                    });
                });
        });
    }
    </script>

@endsection