@extends('layouts.app')
@section('title', __('Muestras'))

@section('content')

{{-- ── Alertas ── --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show py-2 mb-3" style="font-size:.84rem">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show py-2 mb-3" style="font-size:.84rem">
    <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<style>
.imagen-container{
    width: 100%;
    max-width: 100%;
    min-height: 260px;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.img-articulo{
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
</style>


{{-- ── Cabecera página ── --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h1 style="font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:700;color:var(--primary);margin:0">
            <i class="bi bi-collection me-2" style="color:#0284c7"></i>{{ __('Muestras') }}
        </h1>
        <p class="text-muted mb-0" style="font-size:.82rem">{{ __('Catálogo de artículos con tallas y precios') }}</p>
    </div>
    <button onclick="toggleNuevo()" class="btn-guardar" style="font-size:.82rem">
        <i class="bi bi-plus-lg me-1"></i>{{ __('Nuevo Artículo') }}
    </button>
</div>

{{-- ── Panel nuevo artículo ── --}}
<div id="panelNuevo" class="panel-nuevo mb-3" style="display:none">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span style="font-weight:700;font-size:.88rem;color:var(--primary)">
            <i class="bi bi-plus-circle me-1"></i>{{ __('Nuevo Artículo') }}
        </span>
        <button type="button" onclick="toggleNuevo()" class="btn-close" style="font-size:.7rem"></button>
    </div>
    <form method="POST" action="{{ route('muestra.store') }}" enctype="multipart/form-data">
        @csrf
        @include('muestra._form_articulo', ['articulo' => null, 'prefix' => 'nuevo'])
        <div class="mt-3">
            <button type="submit" class="btn-guardar"><i class="bi bi-check-lg me-1"></i>{{ __('Crear Artículo') }}</button>
        </div>
    </form>
</div>

{{-- ── Layout dos paneles ── --}}
<div class="diseno-layout">

    {{-- ══ LISTA ══ --}}
    <div class="panel-lista">
        <div class="lista-header">
            <h6><i class="bi bi-list-ul me-1"></i>{{ __('Artículos') }}</h6>
            <form method="GET" action="{{ route('muestra.index') }}" class="search-box" id="searchForm">
                @if($articulo)
                <input type="hidden" name="id" value="{{ $articulo->Id }}">
                @endif
                <input type="text" name="buscar" id="searchInput"
                       placeholder="{{ __('Buscar…') }}" value="{{ $buscar }}"
                       oninput="debounceSearch()">
                <button type="button" class="btn-search" onclick="clearSearch()">
                    <i class="bi bi-x"></i>
                </button>
            </form>
        </div>
        <div class="lista-count">
            {{ $articulos->count() }}
            {{ $articulos->count() !== 1 ? __('artículos') : __('artículo') }}
            {{ $buscar ? __(' · filtrado') : '' }}
        </div>
        <div class="lista-scroll">
            @forelse($articulos as $item)
            <a href="{{ route('muestra.index', array_filter(['id' => $item->Id, 'buscar' => $buscar])) }}"
               class="lista-item {{ $articulo && $articulo->Id == $item->Id ? 'active' : '' }}">
                <span class="item-id">#{{ $item->Id }}</span>
                <span class="text-truncate">{{ $item->Nombre }}</span>
            </a>
            @empty
            <div class="text-center text-muted py-4" style="font-size:.8rem">
                <i class="bi bi-inbox d-block opacity-25 mb-1" style="font-size:1.5rem"></i>{{ __('Sin resultados') }}
            </div>
            @endforelse
        </div>
    </div>

    {{-- ══ DETALLE ══ --}}
    <div class="panel-detalle">
        @if($articulo)

        {{-- Header --}}
        <div class="detalle-header">
            <div>
                <div style="font-size:.7rem;color:var(--text-muted)">ID #{{ $articulo->Id }}</div>
                <h4>{{ $articulo->Nombre }}</h4>
            </div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                {{-- Badge estado --}}
                @if($articulo->estadoMuestra)
                <span class="badge" style="background:#0284c71a;color:#0284c7;border-radius:6px;padding:5px 10px;font-size:.75rem">
                    {{ $articulo->estadoMuestra->Estado }}
                </span>
                @endif
                <button onclick="toggleEdit()" class="btn btn-sm btn-outline-primary" style="border-radius:7px;font-size:.8rem">
                    <i class="bi bi-pencil me-1"></i>{{ __('Editar') }}
                </button>
                <form method="POST" action="{{ route('muestra.destroy', $articulo->Id) }}"
                      onsubmit="return confirm(@js(__('¿Eliminar «:name»?\nSe eliminarán también sus tallas y precios.', ['name' => $articulo->Nombre])))">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-peligro"><i class="bi bi-trash me-1"></i>{{ __('Eliminar') }}</button>
                </form>
            </div>
        </div>

        <div class="detalle-body">

            {{-- ── TABS ── --}}
            <ul class="nav nav-tabs mb-4" id="articuloTabs" style="border-bottom:2px solid var(--border)">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabDatos"
                            style="font-size:.83rem;font-weight:600;color:var(--text-muted);border:none;padding:8px 16px">
                        <i class="bi bi-card-text me-1"></i>{{ __('Datos') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabTallas"
                            style="font-size:.83rem;font-weight:600;color:var(--text-muted);border:none;padding:8px 16px">
                        <i class="bi bi-rulers me-1"></i>{{ __('Medidas') }}
                        <span class="badge bg-secondary ms-1" style="font-size:.65rem">{{ $articulo->tallas->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPrecios"
                            style="font-size:.83rem;font-weight:600;color:var(--text-muted);border:none;padding:8px 16px">
                        <i class="bi bi-currency-euro me-1"></i>{{ __('Precios') }}
                        <span class="badge bg-secondary ms-1" style="font-size:.65rem">{{ $articulo->precios->count() }}</span>
                    </button>
                </li>
            </ul>

            <div class="tab-content">

                {{-- ════ TAB DATOS ════ --}}
                <div class="tab-pane fade show active" id="tabDatos">

                    {{-- Formulario editar (oculto) --}}
                    <div id="editForm" style="display:none" class="mb-4">
                        <div class="seccion-label"><i class="bi bi-pencil-square me-1"></i>{{ __('Editar artículo') }}</div>
                        <form method="POST" action="{{ route('muestra.update', $articulo->Id) }}" enctype="multipart/form-data">
                            @csrf @method('PUT')
                            @include('muestra._form_articulo', ['articulo' => $articulo, 'prefix' => 'edit'])
                            <div class="d-flex gap-2 mt-3">
                                <button type="submit" class="btn-guardar"><i class="bi bi-check-lg me-1"></i>{{ __('Guardar') }}</button>
                                <button type="button" onclick="toggleEdit()"
                                        class="btn btn-sm btn-outline-secondary" style="border-radius:8px">{{ __('Cancelar') }}</button>
                            </div>
                        </form>
                    </div>

                    {{-- Vista lectura --}}
                    <div id="infoView">
                        <div class="row g-3">
                            {{-- Columna datos + imagen --}}
                            <div class="col-lg-8">
                                {{-- Bloque rojo: datos principales --}}
                                <div class="info-block mb-3" style="border-left:3px solid  #ef4444; padding-left:14px; margin-left:6px;">      
                                    <div class="seccion-label" style="color:#ef4444;border-color:#fca5a5">
                                        <i class="bi bi-tag me-1"></i>{{ __('Datos Principales') }}
                                    </div>
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Nombre') }}</label>
                                            <div class="form-control bg-light fw-semibold">{{ $articulo->Nombre }}</div>
                                        </div>
                                        <div class="field-group" style="max-width:90px">
                                            <label>{{ __('Familia') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->Familia->Familia ?? __('—') }}</div>
                                        </div>
                                    </div>
                                    @if($articulo->{'Descripción'})
                                    <div class="field-group mb-2">
                                        <label>{{ __('Descripción') }}</label>
                                        <div class="form-control bg-light">{{ $articulo->{'Descripción'} }}</div>
                                    </div>
                                    @endif
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Estado') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->estadoMuestra->Estado ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('F. Estado') }}</label>
                                            <div class="form-control bg-light" style="font-size:.8rem">
                                                {{ $articulo->fechaCambioEstado ? \Carbon\Carbon::parse($articulo->fechaCambioEstado)->format('d/m/Y') : __('—') }}
                                            </div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Sección') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->seccion->Seccion ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Campaña') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->campanha->Campanha ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Versión') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->version->Version ?? __('—') }}</div>
                                        </div>
                                    </div>
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Tipo Artículo') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->tipoArticulo->TipoArticulo ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Categoría') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->categoria->Categorias ?? __('—') }}</div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Atributos --}}
                                <div class="info-block mb-3" style="border-left:3px solid  #7c3aed; padding-left:14px; margin-left:6px;">
                                    <div class="seccion-label" style="color:#7c3aed;border-color:#c4b5fd">
                                        <i class="bi bi-sliders me-1"></i>{{ __('Atributos') }}
                                    </div>
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Largo Pantalón') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->largoPantalon->LargoPantalon ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Corte Manga') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->corteManga->CorteManga ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Cuello') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->cuello->Cuello ?? __('—') }}</div>
                                        </div>
                                    </div>
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Largo Vestido/Falda/Otros') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->largoVestido->LargoVestido ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Otros Atributos') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->otroAtributo->OtrosAtributos ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Otros Atributos 2') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->otroAtributo2->OtrosAtributos ?? __('—') }}</div>
                                        </div>
                                    </div>


                                </div>


                                {{-- JerarquiaSAP --}}
                                <div class="info-block mb-3" style="border-left:3px solid  #16a34a; padding-left:14px; margin-left:6px;">                                    
                                    <div class="seccion-label" style="color:#16a34a;border-color:#86efac">
                                        <i class="bi bi-signpost-split me-1"></i>{{ __('Jerarquía SAP') }}
                                    </div>

                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Departamento') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->jersapN1Dpto->JerSapDpto ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Sección SAP') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->jersapN2Seccion->JerSapSeccion ?? __('—') }}</div>
                                        </div>
                                    </div>
                                    <div class="field-row">
                                        <div class="field-group">
                                            <label>{{ __('Categoría SAP') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->jersapN3Categoria->JerSapCategoria ?? __('—') }}</div>
                                        </div>
                                        <div class="field-group">
                                            <label>{{ __('Familia SAP') }}</label>
                                            <div class="form-control bg-light">{{ $articulo->jersapN4Familia->JerSapFamilia ?? __('—') }}</div>
                                        </div>
                                    </div>
                                </div>
                                

                            </div>

                            {{-- Imagen --}}
                            <div class="col-lg-4">
                                <div class="seccion-label"><i class="bi bi-image me-1"></i>{{ __('Imagen') }}</div>
                                <div class="imagen-container mb-3">
                                    @if($articulo->Imagen)
                                    <img src="{{ asset('storage/articulos/'.$articulo->Imagen) }}"
                                         alt="{{ $articulo->Nombre }}" class="img-articulo">
                                    @else
                                    <div class="img-placeholder">
                                        <i class="bi bi-image" style="font-size:2.5rem;opacity:.25"></i>
                                        <span style="font-size:.78rem;color:var(--text-muted)">{{ __('Sin imagen') }}</span>
                                    </div>
                                    @endif
                                </div>
                                <form method="POST" action="{{ route('muestra.updateImagen', $articulo->Id) }}"
                                      enctype="multipart/form-data">
                                    @csrf @method('PUT')
                                    <input type="file" name="imagen" accept="image/*" class="file-input-hidden"
                                           id="imgInput" onchange="this.form.submit()">
                                    <label for="imgInput" class="btn-guardar w-100 text-center"
                                           style="cursor:pointer;display:block;font-size:.8rem">
                                        <i class="bi bi-camera me-1"></i>
                                        {{ $articulo->Imagen ? __('Cambiar imagen') : __('Subir imagen') }}
                                    </label>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ════ TAB TALLAS / MEDIDAS ════ --}}
                <div class="tab-pane fade" id="tabTallas">
                    <div class="seccion-label" style="border-left:3px solid #16a34a;padding-left:8px;color:#16a34a;border-bottom-color:#bbf7d0">
                        <i class="bi bi-rulers me-1"></i>{{ __('Medidas por Talla') }}
                    </div>

                    @if($articulo->tallas->isNotEmpty())
                    <div class="table-responsive mb-4">
                        <table class="table table-sm table-hover align-middle" style="font-size:.82rem">
                            <thead style="background:#f8fafc;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)">
                                <tr>
                                    <th class="ps-2">{{ __('Talla') }}</th>
                                    <th>{{ __('Alto') }}</th><th>{{ __('Largo') }}</th><th>{{ __('Ancho') }}</th><th>{{ __('Peso (kg.)') }}</th>
                                    <th>{{ __('Uds/Caja') }}</th><th>{{ __('AltoCaja') }}</th><th>{{ __('LargoCaja') }}</th><th>{{ __('AnchoCaja') }}</th><th>{{ __('PesoCaja (kg.)') }}</th>
                                    <th>{{ __('CBM/Uds') }}</th><th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($articulo->tallas as $t)
                                <tr id="rowTalla_{{ $t->IdTalla }}">
                                    <td class="ps-2"><span class="badge bg-primary" style="border-radius:6px">{{ $t->Talla->Talla }}</span></td>
                                    <td>{{ $t->Alto }}</td><td>{{ $t->Largo }}</td><td>{{ $t->Ancho }}</td>
                                    <td>{{ $t->Peso }}</td><td>{{ $t->UdsCaja }}</td><td>{{ $t->AltoCaja }}</td>
                                    <td>{{ $t->LargoCaja }}</td><td>{{ $t->AnchoCaja }}</td><td>{{ $t->PesoCaja }}</td>
                                    <td>{{ $t->UdsPacks }}</td>
                                    <td class="text-end pe-2">
                                        <button onclick="editTalla('{{ $t->IdTalla }}')"
                                                class="btn btn-xs btn-outline-primary me-1"
                                                style="border-radius:5px;padding:2px 8px;font-size:.72rem">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form method="POST"
                                              action="{{ route('muestra.talla.destroy', [$articulo->Id, $t->IdTalla]) }}"
                                              style="display:inline"
                                              onsubmit="return confirm(@js(__('¿Eliminar talla :id?', ['id' => $t->IdTalla])))">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-xs btn-outline-danger"
                                                    style="border-radius:5px;padding:2px 8px;font-size:.72rem">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {{-- Fila edición inline --}}
                                <tr id="editTalla_{{ $t->IdTalla }}" style="display:none;background:#f0f7ff">
                                    <td colspan="12" class="p-2">
                                        <form method="POST"
                                              action="{{ route('muestra.talla.update', [$articulo->Id, $t->IdTalla]) }}">
                                            @csrf @method('PUT')
                                            <div class="d-flex flex-wrap gap-2 align-items-end">
                                                <span class="badge bg-primary" style="border-radius:6px;padding:6px 10px">{{ $t->IdTalla }}</span>
                                                @foreach(['Alto','Largo','Ancho','Peso','UdsCaja','AltoCaja','LargoCaja','AnchoCaja','PesoCaja','UdsPacks'] as $campo)
                                                <div>
                                                    <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __($campo) }}</div>
                                                    <input type="number" step="0.001" name="{{ $campo }}"
                                                           value="{{ $t->$campo }}"
                                                           class="form-control form-control-sm"
                                                           style="width:80px;border:1.5px solid var(--border);border-radius:6px">
                                                </div>
                                                @endforeach
                                                <button type="submit" class="btn-guardar" style="padding:6px 14px;font-size:.78rem">
                                                    <i class="bi bi-check-lg"></i>
                                                </button>
                                                <button type="button" onclick="editTalla('{{ $t->IdTalla }}')"
                                                        class="btn btn-sm btn-outline-secondary" style="border-radius:7px;font-size:.78rem">
                                                    {{ __('Cancelar') }}
                                                </button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center text-muted py-3 mb-3" style="font-size:.84rem">
                        <i class="bi bi-rulers d-block opacity-25 mb-1" style="font-size:1.8rem"></i>
                        {{ __('Sin tallas registradas') }}
                    </div>
                    @endif

                    {{-- Añadir talla --}}
                <div class="add-color-form">
                    <div class="seccion-label mb-2"><i class="bi bi-plus-circle me-1"></i>{{ __('Añadir talla') }}</div>
                    <form method="POST" action="{{ route('muestra.talla.store', $articulo->Id) }}">
                        @csrf
                        <div class="d-flex flex-wrap gap-2 align-items-end">
                            <div>
                                <div style="font-size:.77rem;font-weight:600;margin-bottom:3px">
                                    {{ __('Talla') }} <span style="color:red">*</span>
                                </div>
                                <select name="IdTalla" class="form-select form-select-sm" required
                                        style="border:1.5px solid var(--border);border-radius:8px;min-width:90px">
                                    <option value="">{{ __('—') }}</option>
                                    @foreach($tallas as $t)
                                    <option value="{{ $t->IdTalla }}">{{ $t->Talla }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('Alto') }}</div>
                                <input type="number" step="0.001" name="Alto" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('Largo') }}</div>
                                <input type="number" step="0.001" name="Largo" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('Ancho') }}</div>
                                <input type="number" step="0.001" name="Ancho" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('Peso (Kg.)') }}</div>
                                <input type="number" step="0.001" name="Peso" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('UdsCaja') }}</div>
                                <input type="number" step="0.001" name="UdsCaja" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('AltoCaja') }}</div>
                                <input type="number" step="0.001" name="AltoCaja" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('LargoCaja') }}</div>
                                <input type="number" step="0.001" name="LargoCaja" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('AnchoCaja') }}</div>
                                <input type="number" step="0.001" name="AnchoCaja" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('PesoCaja (Kg.)') }}</div>
                                <input type="number" step="0.001" name="PesoCaja" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <div>
                                <div style="font-size:.68rem;color:var(--text-muted);margin-bottom:2px">{{ __('CBM/Uds') }}</div>
                                <input type="number" step="0.001" name="UdsPacks" placeholder="{{ __('0') }}"
                                    class="form-control form-control-sm"
                                    style="width:75px;border:1.5px solid var(--border);border-radius:6px">
                            </div>

                            <button type="submit" class="btn-guardar" style="padding:7px 16px;font-size:.8rem">
                                <i class="bi bi-plus-lg me-1"></i>{{ __('Añadir') }}
                            </button>
                        </div>
                    </form>
                </div>
                </div>

                {{-- ════ TAB PRECIOS ════ --}}
                <div class="tab-pane fade" id="tabPrecios">
                    <div class="seccion-label" style="border-left:3px solid #d97706;padding-left:8px;color:#d97706;border-bottom-color:#fde68a">
                        <i class="bi bi-currency-euro me-1"></i>{{ __('Precios por Proveedor') }}
                    </div>

                    @if($articulo->precios->isNotEmpty())
                    <div class="table-responsive mb-4">
                        <table class="table table-sm table-hover align-middle" style="font-size:.8rem">
                            <thead style="background:#f8fafc;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)">
                                <tr>
                                    <th class="ps-2">{{ __('Proveedor') }}</th>
                                    <th>{{ __('Fecha') }}</th>
                                    <th class="text-center">{{ __('Aprobado') }}</th>
                                    <th>{{ __('Cantidad') }}</th>
                                    <th>{{ __('Precio') }}</th>
                                    <th>{{ __('Divisa') }}</th>
                                    <th>{{ __('Comentario') }}</th>
                                    <th>{{ __('Talla') }}</th>
                                    <th>{{ __('Origen') }}</th>
                                    <th>{{ __('Tipo') }}</th>
                                    <th>{{ __('Composición') }}</th>
                                    <th>{{ __('GSM') }}</th>
                                    <th>{{ __('Campaña') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($articulo->precios as $p)
                               <tr id="rowPrecio_{{ $p->id }}">
    <td class="ps-2 fw-semibold" style="max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
        {{ $p->proveedor->Proveedor ?? __('—') }}
    </td>
    <td>{{ $p->fecha ? \Carbon\Carbon::parse($p->fecha)->format('d/m/Y') : __('—') }}</td>
    <td class="text-center">
        @if($p->Aprobado)
            <i class="bi bi-check-circle-fill text-success"></i>
        @else
            <i class="bi bi-circle text-muted"></i>
        @endif
    </td>
    <td>{{ number_format($p->cantidad) }}</td>
    <td class="fw-semibold">{{ number_format($p->precio, 4) }}</td>
    <td><span class="badge bg-secondary bg-opacity-25 text-dark" style="border-radius:5px">{{ $p->divisaap }}</span></td>
    <td style="max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $p->Comentario }}">
        {{ Str::limit($p->Comentario, 30) }}
    </td>
    <td>{{ $p->talla->Talla ?? __('—') }}</td>
    <td>{{ $p->origen->Pais ?? __('—') }}</td>
    <td>{{ $p->tipo->Tipo ?? __('—') }}</td>
    <td>{{ $p->composicion->Composicion ?? __('—') }}</td>
    <td>{{ $p->calidad->Calidad ?? __('—') }}</td>
    <td>{{ $p->campaniaPrecio->Campaña ?? __('—') }}</td>
    <td class="text-end pe-2">
        <button type="button"
                onclick="editPrecio('{{ $p->id }}')"
                class="btn btn-xs btn-outline-primary me-1"
                style="border-radius:5px;padding:2px 8px;font-size:.72rem">
            <i class="bi bi-pencil"></i>
        </button>

        <form method="POST"
              action="{{ route('muestra.precio.destroy', [$articulo->Id, $p->id]) }}"
              style="display:inline"
              onsubmit="return confirm(@js(__('¿Eliminar este precio?')))">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-xs btn-outline-danger"
                    style="border-radius:5px;padding:2px 8px;font-size:.72rem">
                <i class="bi bi-trash"></i>
            </button>
        </form>
    </td>
</tr>

<tr id="editPrecio_{{ $p->id }}" style="display:none;background:#f0f7ff">
    <td colspan="14" class="p-2">
        <form method="POST" action="{{ route('muestra.precio.update', [$articulo->Id, $p->id]) }}">
            @csrf
            @method('PUT')

            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label-sm">{{ __('Proveedor') }} *</label>
                    <select name="idProveedor" class="form-select form-select-sm" required>
                        <option value="">{{ __('—') }}</option>
                        @foreach($proveedores as $pv)
                            <option value="{{ $pv->idProveedor }}" {{ $p->idProveedor == $pv->idProveedor ? 'selected' : '' }}>
                                {{ $pv->Proveedor }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Fecha') }} *</label>
                    <input type="date" name="fecha" class="form-control form-control-sm"
                           value="{{ $p->fecha ? \Carbon\Carbon::parse($p->fecha)->format('Y-m-d') : '' }}" required>
                </div>

                <div class="col-md-1">
                    <label class="form-label-sm">{{ __('Precio') }} *</label>
                    <input type="number" step="0.0001" name="precio" class="form-control form-control-sm"
                           value="{{ $p->precio }}" required>
                </div>

                <div class="col-md-1">
                    <label class="form-label-sm">{{ __('Cantidad') }}</label>
                    <input type="number" name="cantidad" class="form-control form-control-sm"
                           value="{{ $p->cantidad }}">
                </div>

                <div class="col-md-1">
                    <label class="form-label-sm">{{ __('Divisa') }}</label>
                    <select name="divisaap" class="form-select form-select-sm">
                        <option value="USD" {{ $p->divisaap == 'USD' ? 'selected' : '' }}>USD</option>
                        <option value="EUR" {{ $p->divisaap == 'EUR' ? 'selected' : '' }}>EUR</option>
                        <option value="GBP" {{ $p->divisaap == 'GBP' ? 'selected' : '' }}>GBP</option>
                        <option value="CNY" {{ $p->divisaap == 'CNY' ? 'selected' : '' }}>CNY</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Origen') }}</label>
                    <select name="idOrigen" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($paises as $pa)
                            <option value="{{ $pa->IdPais }}" {{ $p->idOrigen == $pa->IdPais ? 'selected' : '' }}>
                                {{ $pa->Pais }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Talla') }}</label>
                    <select name="idTalla" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($tallas as $t)
                            <option value="{{ $t->IdTalla }}" {{ $p->idTalla == $t->IdTalla ? 'selected' : '' }}>
                                {{ $t->Talla }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Tipo') }}</label>
                    <select name="idTipo" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($tiposPrecio as $tp)
                            <option value="{{ $tp->idTipoMustraPrecio }}" {{ $p->idTipo == $tp->idTipoMustraPrecio ? 'selected' : '' }}>
                                {{ $tp->Tipo }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Composición') }}</label>
                    <select name="idComposicion" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($composiciones as $co)
                            <option value="{{ $co->IdComposicion }}" {{ $p->idComposicion == $co->IdComposicion ? 'selected' : '' }}>
                                {{ $co->Composicion }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('GSM') }}</label>
                    <select name="idCalidad" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($calidades as $ca)
                            <option value="{{ $ca->idCalidad }}" {{ $p->idCalidad == $ca->idCalidad ? 'selected' : '' }}>
                                {{ $ca->Calidad }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label-sm">{{ __('Campaña') }}</label>
                    <select name="idCampaña" class="form-select form-select-sm">
                        <option value="">{{ __('—') }}</option>
                        @foreach($campanhasPrecio as $cp)
                            <option value="{{ $cp->IdCampaña }}" {{ $p->idCampaña == $cp->IdCampaña ? 'selected' : '' }}>
                                {{ $cp->Campaña }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label-sm">{{ __('Comentario') }}</label>
                    <input type="text" name="Comentario" class="form-control form-control-sm"
                           value="{{ $p->Comentario }}">
                </div>

                <div class="col-md-1">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="Aprobado" value="1"
                               id="Aprobado_{{ $p->id }}" {{ $p->Aprobado ? 'checked' : '' }}>
                        <label class="form-check-label" for="Aprobado_{{ $p->id }}" style="font-size:.77rem">
                            {{ __('Aprobado') }}
                        </label>
                    </div>
                </div>

                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn-guardar" style="padding:6px 14px;font-size:.78rem">
                        <i class="bi bi-check-lg me-1"></i>{{ __('Guardar') }}
                    </button>
                    <button type="button" onclick="editPrecio('{{ $p->id }}')"
                            class="btn btn-sm btn-outline-secondary" style="border-radius:7px;font-size:.78rem">
                        {{ __('Cancelar') }}
                    </button>
                </div>
            </div>
        </form>
    </td>
</tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center text-muted py-3 mb-3" style="font-size:.84rem">
                        <i class="bi bi-currency-euro d-block opacity-25 mb-1" style="font-size:1.8rem"></i>
                        {{ __('Sin precios registrados') }}
                    </div>
                    @endif

                    {{-- Añadir precio --}}
                    <div class="add-color-form">
                        <div class="seccion-label mb-3"><i class="bi bi-plus-circle me-1"></i>{{ __('Añadir precio') }}</div>
                        <form method="POST" action="{{ route('muestra.precio.store', $articulo->Id) }}">
                            @csrf
                            <div class="row g-2">
                                <div class="col-md-3">
                                    <label class="form-label-sm">{{ __('Proveedor') }} <span style="color:red">*</span></label>
                                    <select name="idProveedor" class="form-select form-select-sm" required
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('— Seleccionar —') }}</option>
                                        @foreach($proveedores as $pv)
                                        <option value="{{ $pv->idProveedor }}">{{ $pv->Proveedor }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Fecha') }} <span style="color:red">*</span></label>
                                    <input type="date" name="fecha" class="form-control form-control-sm" required
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                </div>

                                <div class="col-md-1">
                                    <label class="form-label-sm">{{ __('Precio') }} <span style="color:red">*</span></label>
                                    <input type="number" step="0.0001" name="precio" class="form-control form-control-sm" required
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                </div>

                                <div class="col-md-1">
                                    <label class="form-label-sm">{{ __('Cantidad') }}</label>
                                    <input type="number" name="cantidad" class="form-control form-control-sm"
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                </div>

                                <div class="col-md-1">
                                    <label class="form-label-sm">{{ __('Divisa') }}</label>
                                    <select name="divisaap" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                        <option value="GBP">GBP</option>
                                        <option value="CNY">CNY</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Origen') }}</label>
                                    <select name="idOrigen" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($paises as $pa)
                                        <option value="{{ $pa->IdPais }}">{{ $pa->Pais }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Talla') }}</label>
                                    <select name="idTalla" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($tallas as $t)
                                        <option value="{{ $t->IdTalla }}">{{ $t->Talla }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Tipo') }}</label>
                                    <select name="idTipo" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($tiposPrecio as $tp)
                                            <option value="{{ $tp->idTipoMustraPrecio }}">{{ $tp->Tipo }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Composición') }}</label>
                                    <select name="idComposicion" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($composiciones as $co)
                                        <option value="{{ $co->IdComposicion }}">{{ $co->Composicion }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('GSM') }}</label>
                                    <select name="idCalidad" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($calidades as $ca)
                                        <option value="{{ $ca->idCalidad }}">{{ $ca->Calidad }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label-sm">{{ __('Campaña') }}</label>
                                    <select name="idCampaña" class="form-select form-select-sm"
                                            style="border:1.5px solid var(--border);border-radius:8px">
                                        <option value="">{{ __('—') }}</option>
                                        @foreach($campanhasPrecio as $cp)
                                        <option value="{{ $cp->IdCampaña }}">{{ $cp->Campaña }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label-sm">{{ __('Comentario') }}</label>
                                    <input type="text" name="Comentario" class="form-control form-control-sm"
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                </div>

                                <div class="col-md-1 d-flex align-items-end">
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox" name="Aprobado" value="1" id="chkAprobado">
                                        <label class="form-check-label" for="chkAprobado" style="font-size:.77rem">{{ __('Aprobado') }}</label>
                                    </div>
                                </div>

                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="submit" class="btn-guardar w-100" style="padding:6px;font-size:.8rem">
                                        <i class="bi bi-plus-lg"></i> {{ __('Añadir') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    </div>


                </div>

            </div>{{-- /tab-content --}}
        </div>{{-- /detalle-body --}}

        @else
        <div class="d-flex flex-column align-items-center justify-content: center h-100 text-muted" style="gap:8px;justify-content:center">
            <i class="bi bi-collection" style="font-size:3rem;opacity:.2"></i>
            <p style="font-size:.88rem">{{ __('Selecciona un artículo de la lista') }}</p>
        </div>
        @endif
    </div>{{-- /panel-detalle --}}
</div>{{-- /diseno_layout --}}

@endsection

@push('scripts')
<script>
function toggleNuevo() {
    const p = document.getElementById('panelNuevo');
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
}
function toggleEdit() {
    const e = document.getElementById('editForm');
    const v = document.getElementById('infoView');
    const open = e.style.display !== 'none';
    e.style.display = open ? 'none' : 'block';
    v.style.display = open ? 'block' : 'none';
    if (!open) {
        document.querySelector('[data-bs-target="#tabDatos"]').click();
    }
}
function editTalla(id) {
    const row  = document.getElementById('rowTalla_'  + id);
    const edit = document.getElementById('editTalla_' + id);
    const open = edit.style.display !== 'none';
    edit.style.display = open ? 'none' : 'table-row';
    row.style.display  = open ? '' : 'none';
}
document.addEventListener('DOMContentLoaded', () => {
    const a = document.querySelector('.lista-item.active');
    if (a) a.scrollIntoView({ block: 'nearest' });

    // Inicializar cascada Jersap en todos los formularios de la página
    document.querySelectorAll('.jersap-dpto').forEach(sel => {
        initJersapDpto(sel);
    });
});
let st;
function debounceSearch() {
    clearTimeout(st);
    st = setTimeout(() => document.getElementById('searchForm').submit(), 420);
}
function clearSearch() {
    document.getElementById('searchInput').value = '';
    document.getElementById('searchForm').submit();
}

// ── Cascada Jerarquía SAP ───────────────────────────────────────────
function initJersapDpto(dptoSel) {
    dptoSel.addEventListener('change', function () {
        const prefix = this.dataset.prefix;
        const val    = this.value;
        resetSelect('jersap_seccion_'   + prefix, true);
        resetSelect('jersap_categoria_' + prefix, true);
        resetSelect('jersap_familia_'   + prefix, true);
        if (!val) return;
        fetchJersap('/muestra/jersap/secciones?dpto=' + val,
            'jersap_seccion_' + prefix,
            'idJerSapSeccion',
            'JerSapSeccion',
            false
        );
    });
}

document.addEventListener('change', function (e) {
    // Sección cambia → recargar Categoría
    if (e.target.matches('.jersap-seccion')) {
        const prefix = e.target.dataset.prefix;
        const val    = e.target.value;
        resetSelect('jersap_categoria_' + prefix, true);
        resetSelect('jersap_familia_'   + prefix, true);
        if (!val) return;
        fetchJersap('/muestra/jersap/categorias?seccion=' + val,
            'jersap_categoria_' + prefix,
            'idJerSapCategoria',
            'JerSapCategoria',
            false
        );
    }
    // Categoría cambia → recargar Familia
    if (e.target.matches('.jersap-categoria')) {
        const prefix = e.target.dataset.prefix;
        const val    = e.target.value;
        resetSelect('jersap_familia_' + prefix, true);
        if (!val) return;
        fetchJersap('/muestra/jersap/familias?categoria=' + val,
            'jersap_familia_' + prefix,
            'idJerSapFamilia',
            'JerSapFamilia',
            false
        );
    }
});

function fetchJersap(url, targetId, valKey, labelKey, disabled) {
    const sel = document.getElementById(targetId);
    if (!sel) return;
    sel.disabled = true;
    sel.innerHTML = '<option value="">{{ __("Cargando…") }}</option>';
    fetch(url, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        sel.innerHTML = '<option value="">{{ __("—") }}</option>';
        data.forEach(item => {
            const opt = document.createElement('option');
            opt.value       = item[valKey];
            opt.textContent = item[labelKey];
            sel.appendChild(opt);
        });
        sel.disabled = data.length === 0;
    })
    .catch(() => {
        sel.innerHTML = '<option value="">{{ __("Error al cargar") }}</option>';
        sel.disabled = false;
    });
}

function resetSelect(id, disable) {
    const sel = document.getElementById(id);
    if (!sel) return;
    sel.innerHTML = '<option value="">{{ __("—") }}</option>';
    sel.disabled  = disable;
}

function editPrecio(id) {
    const row  = document.getElementById('rowPrecio_' + id);
    const edit = document.getElementById('editPrecio_' + id);
    const open = edit.style.display !== 'none';
    edit.style.display = open ? 'none' : 'table-row';
    row.style.display  = open ? '' : 'none';
}
</script>
@endpush