@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}
.pub-status-panel {
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.pub-status-panel.active { background: #d1e7dd; border: 1px solid #a3cfbb; }
.pub-status-panel.paused { background: #fff3cd; border: 1px solid #ffecb3; }
.pub-status-panel.closed { background: #f8d7da; border: 1px solid #f1aeb5; }
.pub-status-panel.draft { background: #e9ecef; border: 1px solid #dee2e6; }
.img-slot {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
    text-align: center;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.img-slot.has-image { border-style: solid; border-color: #adb5bd; }
.img-slot.is-main { border-color: #0d6efd; }
.img-slot img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    border-radius: 0.25rem;
}
.img-slot .img-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
}
.img-slot .img-actions .btn {
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 1.4;
}
.img-slot .img-label {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.25rem;
}
.img-slot .img-reorder {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}
.img-slot .img-empty {
    color: #adb5bd;
    font-size: 0.8rem;
}
.listing-type-card {
    border: 2px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.listing-type-card:hover { border-color: #adb5bd; }
.listing-type-card.selected { border-color: #0d6efd; background: #f0f6ff; }
.listing-type-card .type-name { font-weight: 600; font-size: 0.85rem; }
.listing-type-card .type-desc { font-size: 0.75rem; color: #6c757d; }
.ml-info-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.9rem; }
.ml-info-row i { width: 18px; color: #666; }
.attr-row .form-select, .attr-row .form-control { font-size: 0.85rem; }
.attr-row:hover { background: #f8f9fa; border-radius: 0.25rem; }
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">
                Editar Publicación
                @if($publication->ml_id)
                    <small class="text-muted">({{ $publication->ml_id }})</small>
                @endif
            </h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.publications.index') }}">Publicaciones</a></li>
                    <li class="breadcrumb-item active">Editar</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Columna principal --}}
    <div class="col-lg-8">
        <form action="{{ route('admin.meli.publications.update', $publication->id) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Datos de publicación --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-edit-line me-1"></i> Datos de Publicación</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="titu_publ" class="form-label">Título <span class="text-danger">*</span></label>
                        <input type="text" name="titu_publ" id="titu_publ" class="form-control @error('titu_publ') is-invalid @enderror"
                               value="{{ old('titu_publ', $publication->titu_publ) }}" maxlength="70">
                        <div class="d-flex justify-content-between mt-1">
                            <small class="text-muted">El título es lo primero que ven los compradores</small>
                            <small class="text-muted"><span id="titleCount">0</span>/70</small>
                        </div>
                        @error('titu_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="subt_publ" class="form-label">Subtítulo</label>
                        <input type="text" name="subt_publ" id="subt_publ" class="form-control @error('subt_publ') is-invalid @enderror"
                               value="{{ old('subt_publ', $publication->subt_publ) }}" maxlength="67">
                        @error('subt_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="deta_publ" class="form-label">Descripción</label>
                        <textarea name="deta_publ" id="deta_publ" class="form-control @error('deta_publ') is-invalid @enderror"
                                  rows="6">{{ old('deta_publ', $publication->deta_publ) }}</textarea>
                        @error('deta_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="gara_publ" class="form-label">Garantía</label>
                        <input type="text" name="gara_publ" id="gara_publ" class="form-control @error('gara_publ') is-invalid @enderror"
                               value="{{ old('gara_publ', $publication->gara_publ) }}" maxlength="65">
                        @error('gara_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="condition" class="form-label">Condición</label>
                                <select name="condition" id="condition" class="form-select @error('condition') is-invalid @enderror">
                                    <option value="new" {{ old('condition', $publication->condition) == 'new' ? 'selected' : '' }}>Nuevo</option>
                                    <option value="used" {{ old('condition', $publication->condition) == 'used' ? 'selected' : '' }}>Usado</option>
                                    <option value="not_specified" {{ old('condition', $publication->condition) == 'not_specified' ? 'selected' : '' }}>No especificado</option>
                                </select>
                                @error('condition') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label d-block">Envío gratis</label>
                                <div class="form-check form-switch mt-2">
                                    <input type="hidden" name="free_shipping" value="0">
                                    <input class="form-check-input" type="checkbox" name="free_shipping" id="free_shipping" value="1"
                                           {{ old('free_shipping', $publication->free_shipping) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="free_shipping" id="freeShippingLabel">
                                        {{ old('free_shipping', $publication->free_shipping) ? 'Envío gratis activado' : 'Sin envío gratis' }}
                                    </label>
                                </div>
                                @error('free_shipping') <span class="invalid-feedback d-block">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Imágenes --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="ri-image-line me-1"></i> Imágenes <small class="text-muted fw-normal">(máx. 7)</small></h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addImagePrompt()">
                        <i class="ri-add-line me-1"></i> Agregar
                    </button>
                </div>
                <div class="card-body">
                    <div class="row g-2" id="imgSlotsContainer">
                        @for($i = 0; $i <= 6; $i++)
                            @php
                                $field = $i == 0 ? 'url_image' : 'url_image' . $i;
                                $val = old($field, $publication->$field);
                            @endphp
                            <div class="col-md-3 col-sm-4 col-6">
                                <div class="img-slot {{ $val ? 'has-image' : '' }} {{ $i == 0 ? 'is-main' : '' }}" id="slot-{{ $i }}">
                                    <input type="hidden" name="{{ $field }}" id="img-{{ $i }}" value="{{ $val }}" class="img-hidden-input">

                                    @if($val)
                                        <div class="img-actions">
                                            @if($i > 0)
                                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage({{ $i }}, -1)" title="Mover izquierda">
                                                    <i class="ri-arrow-left-s-line"></i>
                                                </button>
                                            @endif
                                            @if($i < 6)
                                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage({{ $i }}, 1)" title="Mover derecha">
                                                    <i class="ri-arrow-right-s-line"></i>
                                                </button>
                                            @endif
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="clearImage({{ $i }})" title="Quitar">
                                                <i class="ri-close-line"></i>
                                            </button>
                                        </div>
                                        <img src="{{ $val }}" onerror="this.style.display='none'">
                                    @else
                                        <div class="img-empty">
                                            <i class="ri-image-add-line fs-4 d-block"></i>
                                            <span>Vacío</span>
                                        </div>
                                    @endif

                                    <div class="img-label">{{ $i == 0 ? 'Principal' : 'Imagen ' . $i }}</div>
                                </div>
                            </div>
                        @endfor
                    </div>

                    <hr>
                    <div class="mb-0">
                        <label for="url_video" class="form-label"><i class="ri-video-line me-1"></i> URL de Video</label>
                        <input type="text" name="url_video" id="url_video" class="form-control"
                               value="{{ old('url_video', $publication->url_video) }}" placeholder="https://www.youtube.com/watch?v=...">
                    </div>

                    @if($publication->url_video)
                        @php
                            preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?.*v=|embed\/|v\/))([^&?\s]+)/', $publication->url_video, $ytMatch);
                            $ytId = $ytMatch[1] ?? null;
                        @endphp
                        @if($ytId)
                            <div class="mt-2 ratio ratio-16x9" style="max-width:320px">
                                <iframe src="https://www.youtube.com/embed/{{ $ytId }}" allowfullscreen></iframe>
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            {{-- Observaciones --}}
            <div class="card">
                <div class="card-body">
                    <label for="observaciones" class="form-label">Observaciones internas</label>
                    <textarea name="observaciones" id="observaciones" class="form-control" rows="2">{{ old('observaciones', $publication->observaciones) }}</textarea>
                </div>
            </div>

            {{-- Atributos ML (solo publicaciones publicadas) --}}
            @if($publication->isPublished())
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="ri-list-check-2 me-1"></i> Atributos ML</h5>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-info" id="btnSyncAttrs">
                            <i class="ri-refresh-line me-1"></i> Sync desde ML
                        </button>
                        <button type="button" class="btn btn-sm btn-primary" id="btnSaveAttrs" {{ count($publication->attributes_list) == 0 ? 'disabled' : '' }}>
                            <i class="ri-save-line me-1"></i> Guardar en ML
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="attrsLoading" class="text-center py-3" style="display:none;">
                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                        <small class="text-muted ms-2">Cargando atributos...</small>
                    </div>

                    <div id="attrsContainer">
                        @if(count($publication->attributes_list) > 0)
                            @foreach($publication->attributes_list as $attr)
                                @php
                                    $attrId = $attr['id'] ?? '';
                                    $attrName = $attr['name'] ?? $attrId;
                                    $attrValue = $attr['value_name'] ?? '';
                                    $attrValueId = $attr['value_id'] ?? '';
                                    $catAttr = collect($categoryAttributes ?? [])->firstWhere('id', $attrId);
                                    $allowedValues = $catAttr['values'] ?? [];
                                    $tags = $catAttr['tags'] ?? [];
                                    $isReadonly = isset($tags['read_only']) && $tags['read_only'];
                                @endphp
                                <div class="row g-2 mb-2 attr-row align-items-center" data-attr-id="{{ $attrId }}">
                                    <div class="col-md-4">
                                        <label class="form-label mb-0 small fw-semibold">{{ $attrName }}</label>
                                        @if($attrName !== $attrId && $attrId)
                                            <br><code class="text-muted" style="font-size:0.65rem;">{{ $attrId }}</code>
                                        @endif
                                    </div>
                                    <div class="col-md-8">
                                        @if($isReadonly)
                                            <input type="text" class="form-control form-control-sm bg-light" value="{{ $attrValue }}" readonly>
                                        @elseif(count($allowedValues) > 0)
                                            <select class="form-select form-select-sm attr-input" data-attr-id="{{ $attrId }}">
                                                <option value="">-- Seleccionar --</option>
                                                @foreach($allowedValues as $val)
                                                    <option value="{{ $val['id'] ?? '' }}" data-name="{{ $val['name'] ?? '' }}"
                                                            {{ ($val['id'] ?? '') == $attrValueId || ($val['name'] ?? '') == $attrValue ? 'selected' : '' }}>
                                                        {{ $val['name'] ?? $val['id'] ?? '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <input type="text" class="form-control form-control-sm attr-input"
                                                   data-attr-id="{{ $attrId }}" value="{{ $attrValue }}" placeholder="Valor...">
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="text-center text-muted py-4" id="attrsEmpty">
                                <i class="ri-list-check-2" style="font-size:2.5rem;"></i>
                                <p class="mt-2 mb-0">Sin atributos. Hacé click en <strong>"Sync desde ML"</strong> para cargar las características.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            {{-- Precio, Stock, Tipo, Categoría en el form --}}
            <input type="hidden" name="tipo_publ" id="tipo_publ" value="{{ old('tipo_publ', $publication->tipo_publ) }}">

            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="prec_publ" class="form-label">Precio <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" name="prec_publ" id="prec_publ" class="form-control @error('prec_publ') is-invalid @enderror"
                                   value="{{ old('prec_publ', $publication->prec_publ) }}" step="0.01" min="0">
                        </div>
                        @error('prec_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="cant_publ" class="form-label">Cantidad <span class="text-danger">*</span></label>
                        <input type="number" name="cant_publ" id="cant_publ" class="form-control @error('cant_publ') is-invalid @enderror"
                               value="{{ old('cant_publ', $publication->cant_publ) }}" min="0">
                        @error('cant_publ') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="list_publ" class="form-label">Lista de Precios</label>
                        <select name="list_publ" id="list_publ" class="form-select">
                            <option value="">Sin lista</option>
                            @foreach(range('A', 'F') as $letter)
                                <option value="{{ $letter }}" {{ old('list_publ', $publication->list_publ) == $letter ? 'selected' : '' }}>Lista {{ $letter }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Categoría ML inline --}}
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Categoría</label>
                        <select name="cate_publ" id="cate_publ" class="form-select form-select-sm">
                            <option value="">Ninguna</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->ml_categor }}" {{ old('cate_publ', $publication->cate_publ) == $cat->ml_categor ? 'selected' : '' }}>
                                    {{ $cat->ml_categor }} - {{ $cat->de_categor }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">SubCategoría</label>
                        <select name="scat_publ" id="scat_publ" class="form-select form-select-sm">
                            <option value="{{ $publication->scat_publ }}">{{ $publication->scat_publ ?: 'Ninguna' }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Variedad</label>
                        <select name="vari_publ" id="vari_publ" class="form-select form-select-sm">
                            <option value="{{ $publication->vari_publ }}">{{ $publication->vari_publ ?: 'Ninguna' }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">SubVariedad</label>
                        <select name="svar_publ" id="svar_publ" class="form-select form-select-sm">
                            <option value="{{ $publication->svar_publ }}">{{ $publication->svar_publ ?: 'Ninguna' }}</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Costos y Margen --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="ri-money-dollar-circle-line text-success me-1"></i>
                        Costos y Margen
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Precio ML --}}
                        <div class="col-md-3">
                            <div class="card border mb-0">
                                <div class="card-body text-center">
                                    <p class="text-muted mb-1 small">Precio ML</p>
                                    <h4 class="text-primary mb-0">
                                        ${{ number_format($publication->prec_publ ?? 0, 2, ',', '.') }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                        {{-- Costo con IVA --}}
                        <div class="col-md-3">
                            <div class="card border mb-0">
                                <div class="card-body text-center">
                                    <p class="text-muted mb-1 small">Costo (c/IVA)</p>
                                    <h4 class="mb-0">
                                        @if($publication->cost_snapshot > 0)
                                            ${{ number_format($publication->cost_snapshot, 2, ',', '.') }}
                                            <br><small class="text-muted">{{ $publication->cost_snapshot_at ? $publication->cost_snapshot_at->format('d/m/Y H:i') : '' }}</small>
                                        @else
                                            <span class="text-muted">Sin datos</span>
                                        @endif
                                    </h4>
                                </div>
                            </div>
                        </div>
                        {{-- Margen --}}
                        <div class="col-md-3">
                            <div class="card border mb-0">
                                <div class="card-body text-center">
                                    <p class="text-muted mb-1 small">Margen</p>
                                    @if($publication->cost_snapshot > 0)
                                        @php $margin = $publication->computed_margin; @endphp
                                        <h4 class="mb-0 {{ $margin < 0 ? 'text-danger' : ($margin < 15 ? 'text-warning' : 'text-success') }}">
                                            {{ number_format($margin, 1, ',', '.') }}%
                                        </h4>
                                    @else
                                        <h4 class="text-muted mb-0">—</h4>
                                    @endif
                                </div>
                            </div>
                        </div>
                        {{-- Ganancia por unidad --}}
                        <div class="col-md-3">
                            <div class="card border mb-0">
                                <div class="card-body text-center">
                                    <p class="text-muted mb-1 small">Ganancia x Unidad</p>
                                    @if($publication->cost_snapshot > 0)
                                        @php $ganancia = ($publication->prec_publ ?? 0) - $publication->cost_snapshot; @endphp
                                        <h4 class="mb-0 {{ $ganancia < 0 ? 'text-danger' : 'text-success' }}">
                                            ${{ number_format($ganancia, 2, ',', '.') }}
                                        </h4>
                                    @else
                                        <h4 class="text-muted mb-0">—</h4>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Refresh button --}}
                    @if(isset($publication->id))
                    <div class="mt-3">
                        <form action="{{ route('admin.meli.publications.refreshCost', $publication->id) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-info">
                                <i class="ri-refresh-line me-1"></i> Actualizar Costos
                            </button>
                        </form>
                        <small class="text-muted ms-2">
                            Toma el costo actual del producto desde el sistema desktop.
                        </small>
                    </div>
                    @endif

                    {{-- Info about ML commissions --}}
                    <div class="alert alert-light mt-3 mb-0 small">
                        <i class="ri-information-line me-1"></i>
                        <strong>Nota:</strong> El margen mostrado es bruto (Precio ML - Costo).
                        No incluye comisiones de MercadoLibre (~11-13% según tipo de publicación) ni costos de envío.
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg mb-4">
                <i class="ri-save-line me-1"></i> Guardar Cambios
            </button>
        </form>
    </div>

    {{-- Columna lateral --}}
    <div class="col-lg-4">
        {{-- Estado --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-information-line me-1"></i> Estado</h5>
            </div>
            <div class="card-body">
                <div class="pub-status-panel {{ $publication->estado }}">
                    <div class="d-flex align-items-center mb-2">
                        @switch($publication->estado)
                            @case('active')
                                <span class="badge bg-success fs-6 me-2">Activa</span>
                                @break
                            @case('paused')
                                <span class="badge bg-warning fs-6 me-2">Pausada</span>
                                @break
                            @case('closed')
                                <span class="badge bg-danger fs-6 me-2">Cerrada</span>
                                @break
                            @default
                                <span class="badge bg-secondary fs-6 me-2">Borrador</span>
                        @endswitch
                        @if($publication->fe_estado)
                            <small class="text-muted">desde {{ $publication->fe_estado->format('d/m/Y') }}</small>
                        @endif
                    </div>

                    @if($publication->isPublished())
                        <div class="ml-info-row">
                            <i class="ri-hashtag"></i> <strong>ML ID:</strong>
                            @if($publication->ml_link)
                                <a href="{{ $publication->ml_link }}" target="_blank">{{ $publication->ml_id }} <i class="ri-external-link-line"></i></a>
                            @else
                                {{ $publication->ml_id }}
                            @endif
                        </div>
                    @endif

                    <div class="ml-info-row">
                        <i class="ri-shopping-bag-line"></i> <strong>Producto:</strong> {{ $publication->co_arti }}
                    </div>

                    @if($publication->stock)
                        <div class="ml-info-row">
                            <i class="ri-box-3-line"></i> <strong>Stock físico:</strong> {{ $publication->stock->WW_STCK ?? 0 }}
                        </div>
                    @endif

                    <div class="ml-info-row">
                        <i class="ri-bar-chart-2-line"></i> <strong>Vendidas:</strong> {{ number_format($publication->cant_vend) }}
                    </div>

                    <div class="ml-info-row">
                        <i class="ri-refresh-line"></i> <strong>Sync:</strong>
                        @if($publication->sincro == 1)
                            <span class="text-success"><i class="ri-checkbox-circle-fill"></i> OK</span>
                        @elseif($publication->sincro == 2)
                            <span class="text-danger"><i class="ri-error-warning-fill"></i> Error</span>
                        @else
                            <span class="text-muted">Pendiente</span>
                        @endif
                    </div>

                    @if($publication->last_synced_at)
                    <div class="ml-info-row">
                        <i class="ri-time-line"></i> <strong>Último sync:</strong>
                        <span class="text-muted">{{ $publication->last_synced_at->format('d/m/Y H:i') }}</span>
                    </div>
                    @endif

                    @if($publication->shipping_mode)
                    <div class="ml-info-row">
                        <i class="ri-truck-line"></i> <strong>Envío:</strong>
                        {{ $publication->free_shipping ? 'Gratis' : 'A cargo del comprador' }}
                        <small class="text-muted">({{ $publication->shipping_mode }})</small>
                    </div>
                    @endif

                    @if($publication->isPublished())
                    <hr class="my-2">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="fw-medium"><i class="ri-box-3-line me-1"></i>Sync Stock</small>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="toggleSyncStock"
                                   {{ $publication->sync_stock ? 'checked' : '' }}
                                   onchange="toggleSyncFlag({{ $publication->id }}, 'stock', this.checked)">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="fw-medium"><i class="ri-money-dollar-circle-line me-1"></i>Sync Precio</small>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="toggleSyncPrice"
                                   {{ $publication->sync_price ? 'checked' : '' }}
                                   onchange="toggleSyncFlag({{ $publication->id }}, 'price', this.checked)">
                        </div>
                    </div>
                    @endif
                </div>

                {{-- Acciones según estado --}}
                <div class="d-flex flex-column gap-2">
                    @if(!$publication->isPublished())
                        <form id="formPublish" action="{{ route('admin.meli.publications.publish', $publication->id) }}" method="POST">
                            @csrf
                            <button type="button" class="btn btn-success w-100" onclick="confirmPublish()">
                                <i class="ri-upload-2-line me-1"></i> Publicar en MercadoLibre
                            </button>
                        </form>
                    @endif

                    @if($publication->estado == 'active')
                        <form action="{{ route('admin.meli.publications.pause', $publication->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-warning w-100">
                                <i class="ri-pause-line me-1"></i> Pausar
                            </button>
                        </form>
                    @endif

                    @if($publication->estado == 'paused')
                        <form action="{{ route('admin.meli.publications.activate', $publication->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-success w-100">
                                <i class="ri-play-line me-1"></i> Activar
                            </button>
                        </form>
                    @endif

                    @if($publication->isPublished() && $publication->estado != 'closed')
                        <form action="{{ route('admin.meli.publications.close', $publication->id) }}" method="POST">
                            @csrf
                            <button type="button" class="btn btn-outline-danger w-100" onclick="confirmClose(this.form)">
                                <i class="ri-close-circle-line me-1"></i> Cerrar Publicación
                            </button>
                        </form>
                    @endif

                    @if($publication->isPublished())
                        <hr>
                        <a href="{{ route('admin.meli.publications.images', $publication->id) }}" class="btn btn-outline-primary btn-sm w-100 mb-2">
                            <i class="ri-image-line me-1"></i> Gestionar Imágenes en ML
                        </a>
                        <div class="d-flex gap-2">
                            <form id="formSyncStock" action="{{ route('admin.meli.publications.syncStock', $publication->id) }}" method="POST" class="flex-fill">
                                @csrf
                                <button type="button" class="btn btn-outline-info btn-sm w-100" onclick="confirmSync('formSyncStock', 'stock')">
                                    <i class="ri-refresh-line"></i> Sync Stock
                                </button>
                            </form>
                            <form id="formSyncPrice" action="{{ route('admin.meli.publications.syncPrice', $publication->id) }}" method="POST" class="flex-fill">
                                @csrf
                                <button type="button" class="btn btn-outline-info btn-sm w-100" onclick="confirmSync('formSyncPrice', 'precio')">
                                    <i class="ri-money-dollar-circle-line"></i> Sync Precio
                                </button>
                            </form>
                        </div>
                    @endif

                    @if(!$publication->isPublished())
                        <hr>
                        <form action="{{ route('admin.meli.publications.destroy', $publication->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="btn btn-outline-danger btn-sm w-100" onclick="confirmDelete(this.form)">
                                <i class="ri-delete-bin-line me-1"></i> Eliminar Borrador
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        {{-- Tipo publicación --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-medal-line me-1"></i> Tipo</h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-column gap-2">
                    @php $currentType = old('tipo_publ', $publication->tipo_publ); @endphp
                    <div class="listing-type-card {{ $currentType == 'gold_special' ? 'selected' : '' }}" onclick="selectListingType('gold_special', this)">
                        <div class="type-name text-primary"><i class="ri-vip-crown-line"></i> Premium</div>
                    </div>
                    <div class="listing-type-card {{ $currentType == 'gold_pro' ? 'selected' : '' }}" onclick="selectListingType('gold_pro', this)">
                        <div class="type-name text-warning"><i class="ri-medal-line"></i> Gold Pro</div>
                    </div>
                    <div class="listing-type-card {{ $currentType == 'gold' ? 'selected' : '' }}" onclick="selectListingType('gold', this)">
                        <div class="type-name text-secondary"><i class="ri-award-line"></i> Gold</div>
                    </div>
                    <div class="listing-type-card {{ $currentType == 'free' ? 'selected' : '' }}" onclick="selectListingType('free', this)">
                        <div class="type-name text-muted"><i class="ri-price-tag-line"></i> Gratis</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Producto asociado --}}
        @if($publication->stock)
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-shopping-bag-line me-1"></i> Producto</h5>
            </div>
            <div class="card-body">
                <div class="ml-info-row"><i class="ri-barcode-line"></i> <strong>Código:</strong> {{ $publication->co_arti }}</div>
                <div class="ml-info-row"><i class="ri-file-text-line"></i> <strong>Descripción:</strong> {{ $publication->stock->DESCRI ?? '-' }}</div>
                <div class="ml-info-row"><i class="ri-barcode-box-line"></i> <strong>Barras:</strong> {{ $publication->stock->CO_BARRA ?? '-' }}</div>
                <div class="ml-info-row"><i class="ri-box-3-line"></i> <strong>Stock:</strong> {{ $publication->stock->WW_STCK ?? 0 }}</div>
                <div class="ml-info-row"><i class="ri-money-dollar-circle-line"></i> <strong>Precio Unitario:</strong> ${{ number_format($publication->stock->IM_UNITA ?? 0, 2, ',', '.') }}</div>
                <div class="ml-info-row"><i class="ri-store-2-line"></i> <strong>Precio MLA:</strong> ${{ number_format($publication->stock->IM_MLA_VTA ?? 0, 2, ',', '.') }}</div>
                <a href="{{ route('products.edit', $publication->co_arti) }}" class="btn btn-sm btn-outline-primary mt-2" target="_blank">
                    <i class="ri-external-link-line me-1"></i> Ver Producto
                </a>
            </div>
        </div>
        @endif

        {{-- Métricas / Visitas --}}
        @if($publication->isPublished())
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0"><i class="ri-bar-chart-2-line me-1"></i> Métricas</h5>
                <button type="button" class="btn btn-sm btn-outline-primary" id="btnLoadVisits">
                    <i class="ri-refresh-line me-1"></i> Cargar
                </button>
            </div>
            <div class="card-body">
                <div id="visitasLoading" class="text-center py-3" style="display:none;">
                    <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                    <small class="text-muted ms-2">Consultando API...</small>
                </div>
                <div id="visitasResult" style="display:none;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">Visitas (30 días)</span>
                        <span class="fw-semibold fs-5" id="totalVisits">0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">Vendidos</span>
                        <span class="fw-semibold">{{ number_format($publication->cant_vend) }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted small">Conversión</span>
                        <span class="fw-semibold" id="conversionRate">-</span>
                    </div>
                </div>
                <div id="visitasEmpty" class="text-center text-muted py-2">
                    <small>Click en "Cargar" para consultar visitas desde ML.</small>
                </div>
                <div id="visitasError" class="alert alert-warning alert-sm py-1 px-2 mb-0 small" style="display:none;"></div>

                {{-- Links a ML --}}
                @php $mlItemClean = str_replace('-', '', $publication->ml_id); @endphp
                <hr class="my-2">
                <div class="d-grid gap-1">
                    <a href="https://www.mercadolibre.com.ar/ventas/publicaciones/{{ $mlItemClean }}/rendimiento" target="_blank" class="btn btn-sm btn-outline-primary">
                        <i class="ri-line-chart-line me-1"></i> Rendimiento en ML
                    </a>
                    <a href="https://www.mercadolibre.com.ar/ventas/publicaciones/{{ $mlItemClean }}/costos" target="_blank" class="btn btn-sm btn-outline-warning">
                        <i class="ri-money-dollar-circle-line me-1"></i> Costos en ML
                    </a>
                </div>
            </div>
        </div>
        @endif

        {{-- Costos por tipo de publicación --}}
        @if($publication->isPublished())
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-money-dollar-circle-line me-1"></i> Costos</h5>
            </div>
            <div class="card-body">
                @php
                    $tipoActual = $publication->tipo_publ;
                    $costos = [
                        'gold_special' => ['label' => 'Gold Special', 'pct' => '~13% + envío', 'color' => 'primary', 'icon' => 'ri-vip-crown-line'],
                        'gold_pro'     => ['label' => 'Gold Pro', 'pct' => '~11% + envío', 'color' => 'warning', 'icon' => 'ri-medal-line'],
                        'gold'         => ['label' => 'Gold', 'pct' => '~10%', 'color' => 'secondary', 'icon' => 'ri-award-line'],
                        'silver'       => ['label' => 'Silver', 'pct' => '~8%', 'color' => 'info', 'icon' => 'ri-copper-coin-line'],
                        'free'         => ['label' => 'Gratis', 'pct' => 'Sin cargo', 'color' => 'success', 'icon' => 'ri-price-tag-line'],
                    ];
                @endphp
                <div class="list-group list-group-flush">
                    @foreach($costos as $tipo => $info)
                    <div class="list-group-item d-flex justify-content-between align-items-center px-0 {{ $tipoActual == $tipo ? 'fw-semibold' : 'text-muted' }}">
                        <span>
                            <i class="{{ $info['icon'] }} me-1"></i> {{ $info['label'] }}
                            @if($tipoActual == $tipo)
                                <span class="badge bg-{{ $info['color'] }} ms-1">Actual</span>
                            @endif
                        </span>
                        <span>{{ $info['pct'] }}</span>
                    </div>
                    @endforeach
                </div>
                <div class="alert alert-info py-1 px-2 mt-2 mb-0 small">
                    <i class="ri-information-line me-1"></i> Porcentajes aproximados. ML calcula costos exactos por cada venta (cargos, cuotas, envío e impuestos).
                </div>
                @php $mlItemClean2 = $mlItemClean ?? str_replace('-', '', $publication->ml_id); @endphp
                <a href="https://www.mercadolibre.com.ar/ventas/publicaciones/{{ $mlItemClean2 }}/costos" target="_blank" class="btn btn-sm btn-outline-warning w-100 mt-2">
                    <i class="ri-external-link-line me-1"></i> Ver costos exactos en ML
                </a>
            </div>
        </div>
        @endif
    </div>
</div>

@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Title counter
    const titleInput = document.getElementById('titu_publ');
    const titleCount = document.getElementById('titleCount');
    titleInput.addEventListener('input', function() { titleCount.textContent = this.value.length; });
    titleCount.textContent = titleInput.value.length;

    // Image slots initialized on load

    // Free shipping toggle label
    var freeShipCb = document.getElementById('free_shipping');
    if (freeShipCb) {
        freeShipCb.addEventListener('change', function() {
            document.getElementById('freeShippingLabel').textContent =
                this.checked ? 'Envío gratis activado' : 'Sin envío gratis';
        });
    }

    // Cascading selects
    const cateSelect = document.getElementById('cate_publ');
    const scatSelect = document.getElementById('scat_publ');
    const variSelect = document.getElementById('vari_publ');
    const svarSelect = document.getElementById('svar_publ');

    cateSelect.addEventListener('change', function() {
        loadCascade('{{ url("admin/meli/categories") }}/' + this.value + '/subcategories', scatSelect, 'ml_subcate', 'de_subcate');
        variSelect.innerHTML = '<option value="">-</option>';
        svarSelect.innerHTML = '<option value="">-</option>';
    });

    scatSelect.addEventListener('change', function() {
        loadCascade('{{ url("admin/meli/categories") }}/' + cateSelect.value + '/' + this.value + '/varieties', variSelect, 'ml_varieda', 'de_varieda');
        svarSelect.innerHTML = '<option value="">-</option>';
    });

    variSelect.addEventListener('change', function() {
        loadCascade('{{ url("admin/meli/categories") }}/' + cateSelect.value + '/' + scatSelect.value + '/' + this.value + '/subvarieties', svarSelect, 'ml_subvari', 'de_subvari');
    });
});

function selectListingType(type, el) {
    document.getElementById('tipo_publ').value = type;
    document.querySelectorAll('.listing-type-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
}

// ── Image Management ──
function renderImageSlots() {
    for (var i = 0; i <= 6; i++) {
        var input = document.getElementById('img-' + i);
        var slot = document.getElementById('slot-' + i);
        var val = input.value;
        var isMain = (i === 0);

        slot.className = 'img-slot' + (val ? ' has-image' : '') + (isMain ? ' is-main' : '');

        // Build slot HTML
        var html = '<input type="hidden" name="' + (i === 0 ? 'url_image' : 'url_image' + i) + '" id="img-' + i + '" value="' + escapeAttr(val) + '" class="img-hidden-input">';

        if (val) {
            html += '<div class="img-actions">';
            if (i > 0) html += '<button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage(' + i + ', -1)" title="Mover izquierda"><i class="ri-arrow-left-s-line"></i></button>';
            if (i < 6) html += '<button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage(' + i + ', 1)" title="Mover derecha"><i class="ri-arrow-right-s-line"></i></button>';
            html += '<button type="button" class="btn btn-outline-danger btn-sm" onclick="clearImage(' + i + ')" title="Quitar"><i class="ri-close-line"></i></button>';
            html += '</div>';
            html += '<img src="' + escapeAttr(val) + '" onerror="this.style.display=\'none\'">';
        } else {
            html += '<div class="img-empty"><i class="ri-image-add-line fs-4 d-block"></i><span>Vacío</span></div>';
        }
        html += '<div class="img-label">' + (isMain ? 'Principal' : 'Imagen ' + i) + '</div>';
        slot.innerHTML = html;
    }
}

function clearImage(index) {
    document.getElementById('img-' + index).value = '';
    renderImageSlots();
}

function moveImage(index, direction) {
    var target = index + direction;
    if (target < 0 || target > 6) return;
    var srcInput = document.getElementById('img-' + index);
    var dstInput = document.getElementById('img-' + target);
    var temp = srcInput.value;
    srcInput.value = dstInput.value;
    dstInput.value = temp;
    renderImageSlots();
}

function addImagePrompt() {
    // Buscar primer slot vacío
    var emptyIndex = -1;
    for (var i = 0; i <= 6; i++) {
        if (!document.getElementById('img-' + i).value) { emptyIndex = i; break; }
    }
    if (emptyIndex === -1) {
        Swal.fire({ icon: 'warning', title: 'Máximo alcanzado', text: 'Ya hay 7 imágenes. Quitá una para agregar otra.', timer: 3000 });
        return;
    }
    Swal.fire({
        title: 'Agregar imagen',
        input: 'url',
        inputPlaceholder: 'https://...',
        inputLabel: 'URL de la imagen (posición ' + (emptyIndex === 0 ? 'Principal' : emptyIndex) + ')',
        showCancelButton: true,
        confirmButtonText: 'Agregar',
        cancelButtonText: 'Cancelar',
        inputValidator: function(value) {
            if (!value) return 'Ingresá una URL';
            if (!value.match(/^https?:\/\/.+/)) return 'La URL debe empezar con http:// o https://';
        }
    }).then(function(result) {
        if (result.isConfirmed && result.value) {
            document.getElementById('img-' + emptyIndex).value = result.value;
            renderImageSlots();
        }
    });
}

function escapeAttr(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function loadCascade(url, select, valueField, textField) {
    select.innerHTML = '<option value="">Cargando...</option>';
    fetch(url).then(r => r.json()).then(data => {
        select.innerHTML = '<option value="">Seleccionar...</option>';
        data.forEach(item => {
            const opt = document.createElement('option');
            opt.value = item[valueField];
            opt.textContent = item[valueField] + ' - ' + item[textField];
            select.appendChild(opt);
        });
    }).catch(() => { select.innerHTML = '<option value="">Error</option>'; });
}

function confirmPublish() {
    Swal.fire({
        title: '¿Publicar en MercadoLibre?',
        text: 'Esta acción enviará la publicación a MercadoLibre.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, publicar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Publicando...',
                html: 'Enviando publicación a MercadoLibre.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formPublish').submit();
        }
    });
}

function confirmClose(form) {
    Swal.fire({
        title: '¿Cerrar publicación?',
        text: 'Esta acción es IRREVERSIBLE. La publicación se cerrará definitivamente en MercadoLibre.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Sí, cerrar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Cerrando publicación...',
                html: 'Procesando en MercadoLibre.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            form.submit();
        }
    });
}

function confirmSync(formId, tipo) {
    Swal.fire({
        title: 'Sincronizando ' + tipo + '...',
        html: 'Actualizando en MercadoLibre.<br>Esto puede tardar unos segundos.',
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: function() { Swal.showLoading(); }
    });
    document.getElementById(formId).submit();
}

function confirmDelete(form) {
    Swal.fire({
        title: '¿Eliminar borrador?',
        text: 'Se eliminará permanentemente este borrador.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => { if (result.isConfirmed) form.submit(); });
}

// Toggle Sync flags
function toggleSyncFlag(pubId, type, checked) {
    var url = '{{ url("admin/meli/publications") }}/' + pubId + '/toggle-sync-' + type;
    fetch(url, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    }).then(function(r) {
        var contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            throw new Error('El servidor respondió HTML en vez de JSON.');
        }
        return r.json();
    }).then(function(data) {
        if (!data.success) {
            Swal.fire({ icon: 'error', title: 'Error', text: data.message, timer: 2500 });
        }
    }).catch(function(err) {
        Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error de conexión', timer: 2500 });
    });
}

// ── Atributos ML ──
var btnSaveAttrs = document.getElementById('btnSaveAttrs');
var btnSyncAttrs = document.getElementById('btnSyncAttrs');

if (btnSaveAttrs) {
    btnSaveAttrs.addEventListener('click', function() {
        var attrs = [];
        document.querySelectorAll('.attr-input').forEach(function(input) {
            var attrId = input.dataset.attrId;
            if (!attrId) return;
            if (input.tagName === 'SELECT') {
                var opt = input.options[input.selectedIndex];
                if (opt && opt.value) {
                    attrs.push({ id: attrId, value_id: opt.value, value_name: opt.dataset.name || opt.text });
                }
            } else {
                if (input.value.trim()) {
                    attrs.push({ id: attrId, value_name: input.value.trim() });
                }
            }
        });

        if (attrs.length === 0) { Swal.fire({ icon: 'info', text: 'No hay atributos para guardar.' }); return; }

        var btn = this;
        btn.disabled = true;
        Swal.fire({ title: 'Guardando atributos...', html: 'Enviando a MercadoLibre.', allowOutsideClick: false, didOpen: function() { Swal.showLoading(); } });

        fetch('{{ route("admin.meli.publications.updateAttributes", $publication->id) }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
            body: JSON.stringify({ attributes: attrs })
        }).then(function(r) {
            var ct = r.headers.get('content-type') || '';
            if (!ct.includes('application/json')) throw new Error('El servidor respondió HTML en vez de JSON.');
            return r.json();
        }).then(function(d) {
            btn.disabled = false;
            Swal.fire({ icon: d.success ? 'success' : 'error', text: d.message || 'Error desconocido', timer: d.success ? 2500 : undefined })
                .then(function() { if (d.success) location.reload(); });
        }).catch(function(err) {
            btn.disabled = false;
            Swal.fire({ icon: 'error', text: err.message || 'Error de conexión' });
        });
    });
}

if (btnSyncAttrs) {
    btnSyncAttrs.addEventListener('click', function() {
        var btn = this;
        btn.disabled = true;
        document.getElementById('attrsLoading').style.display = 'block';
        document.getElementById('attrsContainer').style.display = 'none';

        fetch('{{ route("admin.meli.publications.syncAttributes", $publication->id) }}', {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(function(r) {
            var ct = r.headers.get('content-type') || '';
            if (!ct.includes('application/json')) throw new Error('El servidor respondió HTML en vez de JSON.');
            return r.json();
        }).then(function(d) {
            btn.disabled = false;
            document.getElementById('attrsLoading').style.display = 'none';

            if (d.success) {
                // Rebuild attributes UI from response
                var container = document.getElementById('attrsContainer');
                container.style.display = 'block';
                var catAttrs = d.category_attributes || [];
                var attrs = d.attributes || [];

                if (attrs.length === 0) {
                    container.innerHTML = '<div class="text-center text-muted py-4"><i class="ri-list-check-2" style="font-size:2.5rem;"></i><p class="mt-2 mb-0">Esta publicación no tiene atributos en ML.</p></div>';
                    return;
                }

                var html = '';
                attrs.forEach(function(attr) {
                    var catAttr = catAttrs.find(function(c) { return c.id === attr.id; }) || {};
                    var allowedValues = catAttr.values || [];
                    var tags = catAttr.tags || {};
                    var isReadonly = tags.read_only === true;

                    html += '<div class="row g-2 mb-2 attr-row align-items-center" data-attr-id="' + escapeAttr(attr.id) + '">';
                    html += '<div class="col-md-4"><label class="form-label mb-0 small fw-semibold">' + escapeAttr(attr.name || attr.id) + '</label>';
                    if (attr.name && attr.name !== attr.id) html += '<br><code class="text-muted" style="font-size:0.65rem;">' + escapeAttr(attr.id) + '</code>';
                    html += '</div><div class="col-md-8">';

                    if (isReadonly) {
                        html += '<input type="text" class="form-control form-control-sm bg-light" value="' + escapeAttr(attr.value_name || '') + '" readonly>';
                    } else if (allowedValues.length > 0) {
                        html += '<select class="form-select form-select-sm attr-input" data-attr-id="' + escapeAttr(attr.id) + '">';
                        html += '<option value="">-- Seleccionar --</option>';
                        allowedValues.forEach(function(v) {
                            var sel = (v.id == attr.value_id || v.name == attr.value_name) ? ' selected' : '';
                            html += '<option value="' + escapeAttr(v.id || '') + '" data-name="' + escapeAttr(v.name || '') + '"' + sel + '>' + escapeAttr(v.name || v.id || '') + '</option>';
                        });
                        html += '</select>';
                    } else {
                        html += '<input type="text" class="form-control form-control-sm attr-input" data-attr-id="' + escapeAttr(attr.id) + '" value="' + escapeAttr(attr.value_name || '') + '" placeholder="Valor...">';
                    }
                    html += '</div></div>';
                });

                container.innerHTML = html;
                document.getElementById('btnSaveAttrs').disabled = false;
                Swal.fire({ icon: 'success', text: d.message, timer: 2000 });
            } else {
                document.getElementById('attrsContainer').style.display = 'block';
                Swal.fire({ icon: 'error', text: d.message });
            }
        }).catch(function(err) {
            btn.disabled = false;
            document.getElementById('attrsLoading').style.display = 'none';
            document.getElementById('attrsContainer').style.display = 'block';
            Swal.fire({ icon: 'error', text: err.message || 'Error de conexión' });
        });
    });
}

// Cargar Métricas (Visitas)
var btnLoadVisits = document.getElementById('btnLoadVisits');
if (btnLoadVisits) {
    btnLoadVisits.addEventListener('click', function() {
        var btn = this;
        btn.disabled = true;
        document.getElementById('visitasLoading').style.display = 'block';
        document.getElementById('visitasEmpty').style.display = 'none';
        document.getElementById('visitasError').style.display = 'none';
        document.getElementById('visitasResult').style.display = 'none';

        fetch('{{ route("admin.meli.publications.visits", $publication->id) }}', {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(function(r) {
            var contentType = r.headers.get('content-type') || '';
            if (!contentType.includes('application/json')) {
                throw new Error('El servidor respondió HTML en vez de JSON.');
            }
            return r.json();
        }).then(function(d) {
            document.getElementById('visitasLoading').style.display = 'none';
            btn.disabled = false;

            if (d.success) {
                document.getElementById('visitasResult').style.display = 'block';
                document.getElementById('totalVisits').textContent = d.total_visits.toLocaleString('es-AR');

                var sold = {{ (int) $publication->cant_vend }};
                var conversion = d.total_visits > 0 ? ((sold / d.total_visits) * 100).toFixed(1) : '0';
                document.getElementById('conversionRate').textContent = conversion + '%';
            } else {
                document.getElementById('visitasError').style.display = 'block';
                document.getElementById('visitasError').innerHTML = '<i class="ri-alert-line me-1"></i> ' + d.message;
            }
        }).catch(function(err) {
            document.getElementById('visitasLoading').style.display = 'none';
            document.getElementById('visitasError').style.display = 'block';
            document.getElementById('visitasError').innerHTML = '<i class="ri-alert-line me-1"></i> ' + (err.message || 'Error de conexión');
            btn.disabled = false;
        });
    });
}
</script>
@endpush