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

@push('styles')
<style>
.filtros-bar{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.filtros-bar .form-select,.filtros-bar .form-control{font-size:.83rem;border:1.5px solid var(--border);border-radius:8px;padding:6px 10px}
.tabla-pack{font-size:.78rem}
.tabla-pack thead th{background:#f1f5f9;font-size:.65rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:700;padding:7px 8px;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:5}
.tabla-pack tbody tr{transition:background .1s}
.tabla-pack tbody tr:hover{background:#f8fafc}
.tabla-pack tbody tr.editing{background:#fffbeb!important}
.tabla-pack td{padding:6px 8px;border-bottom:1px solid #f1f5f9;vertical-align:middle;white-space:nowrap}
.badge-pack{border-radius:6px;padding:2px 8px;font-size:.7rem;font-weight:600}
.pack-aprobado{background:#dcfce7;color:#16a34a}
.pack-pendiente{background:#fef9c3;color:#a16207}
.pack-rechazado{background:#fee2e2;color:#dc2626}

.btn-accion{border:none;border-radius:6px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;transition:opacity .15s}
.btn-accion:hover{opacity:.8}
.btn-accion.edit{background:#dbeafe;color:#1d4ed8}
.btn-accion.del{background:#fee2e2;color:#dc2626}
.edit-row td{background:#fffbeb;padding:6px 5px}
.edit-row .form-select,.edit-row .form-control{font-size:.76rem;border:1.5px solid #fbbf24;border-radius:6px;padding:3px 6px}
.tabla-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff}

.tabla-pack thead tr:nth-child(2) th{
    background:#fff;
    padding:6px;
    position:sticky;
    top:31px;
    z-index:4
}
.tabla-pack thead tr:nth-child(2) .form-control,
.tabla-pack thead tr:nth-child(2) .form-select{
    min-width:90px;
    font-size:.72rem;
    padding:4px 6px;
    border-radius:6px
}
.paginacion-wrap .pagination{margin-bottom:0;gap:4px}
.paginacion-wrap .page-link{
    border-radius:8px!important;border:1px solid var(--border);color:var(--primary);
    font-size:.8rem;padding:6px 10px;min-width:34px;text-align:center;box-shadow:none!important
}
.paginacion-wrap .page-link:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.paginacion-wrap .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}
.paginacion-wrap .page-item.disabled .page-link{color:#94a3b8;background:#f8fafc;border-color:#e2e8f0}
</style>
@endpush

@section('content')

<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-box-seam-fill me-2" style="color:#dc2626"></i>{{ __('Lista Packaging') }}
        </h1>
        <p class="text-muted mb-0" style="font-size:.82rem">
            {{ $registros->total() }} {{ __('registros') }}
            @if(request()->hasAny([
                'idMuestra','idProveedor','idPedido','idOrigen','buscar',
                'f_id','f_muestra','f_proveedor','f_pedido','f_marca','f_categoria',
                'f_version','f_diseno_ok','f_talla','f_top','f_filling','f_bottom',
                'f_origen','f_fecha','f_fecha_embarque','f_brand_label',
                'f_washing_label','f_packaging_exterior','f_estado_pack_ext',
                'f_lavado','f_lejia','f_planchado','f_lavado_seco','f_secadora',
                'f_comentario'
            ]))
                <span class="badge bg-warning text-dark ms-1" style="font-size:.7rem;border-radius:6px">{{ __('filtrado') }}</span>
            @endif
        </p>
    </div>

    <div class="d-flex gap-2">
        <a href="{{ route('lista-packaging.export', request()->query()) }}"
           class="btn btn-success"
           style="font-size:.82rem;border-radius:8px">
            <i class="bi bi-file-earmark-excel me-1"></i>{{ __('Exportar') }}
        </a>

        <button onclick="toggleNuevo()" class="btn-guardar" style="font-size:.82rem">
            <i class="bi bi-plus-lg me-1"></i>{{ __('Nuevo Registro') }}
        </button>
    </div>
</div>

@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

{{-- Panel nuevo --}}
<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 Registro') }}
        </span>
        <button type="button" onclick="toggleNuevo()" class="btn-close" style="font-size:.7rem"></button>
    </div>
    <form method="POST" action="{{ route('lista-packaging.store') }}">
        @csrf
        @include('lista-packaging._form', ['reg' => null])
        <div class="mt-3">
            <button type="submit" class="btn-guardar"><i class="bi bi-check-lg me-1"></i>{{ __('Crear') }}</button>
        </div>
    </form>
</div>

{{-- Filtros --}}
<div class="filtros-bar">
    <form method="GET" action="{{ route('lista-packaging.index') }}">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Muestra') }}</label>
                <select name="idMuestra" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todas') }} —</option>
                    @foreach($muestras as $m)
                    <option value="{{ $m->Id }}" {{ request('idMuestra') == $m->Id ? 'selected':'' }}>{{ $m->Nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Proveedor') }}</label>
                <select name="idProveedor" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($proveedores as $p)
                    <option value="{{ $p->idProveedor }}" {{ request('idProveedor') == $p->idProveedor ? 'selected':'' }}>{{ $p->Proveedor }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Pedido') }}</label>
                <select name="idPedido" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($pedidos as $p)
                    <option value="{{ $p->IdPedidos }}" {{ request('idPedido') == $p->IdPedidos ? 'selected':'' }}>{{ $p->Pedidos }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Origen') }}</label>
                <select name="idOrigen" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($paises as $p)
                    <option value="{{ $p->IdPais }}" {{ request('idOrigen') == $p->IdPais ? 'selected':'' }}>{{ $p->Pais }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-1 align-items-end">
                <input type="text" name="buscar" class="form-control"
                       placeholder="{{ __('Muestra, proveedor, comentario...') }}"
                       value="{{ request('buscar') }}">
                <button type="submit" class="btn btn-sm btn-primary" style="background:var(--primary);border:none;border-radius:8px;padding:7px 12px">
                    <i class="bi bi-search"></i>
                </button>
                @if(request()->hasAny(['idMuestra','idProveedor','idPedido','idOrigen','buscar']))
                <a href="{{ route('lista-packaging.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                    <i class="bi bi-x"></i>
                </a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Tabla --}}
<div class="tabla-wrap">
    <table class="table tabla-pack mb-0">
       <thead>
    <tr>
        <th>Id</th>
        <th>{{ __('Muestra') }}</th>
        <th>{{ __('Proveedor') }}</th>
        <th>{{ __('Pedido') }}</th>
        <th>{{ __('Marca') }}</th>
        <th>{{ __('Cat. Muestra') }}</th>
        <th>{{ __('Versión Muestra') }}</th>
        <th>{{ __('Diseño OK') }}</th>
        <th>{{ __('Talla') }}</th>
        <th>{{ __('Top') }}</th>
        <th>{{ __('Filling') }}</th>
        <th>{{ __('Bottom') }}</th>
        <th>{{ __('Origen') }}</th>
        <th>{{ __('F. Envío') }}</th>
        <th>{{ __('F. Embarque') }}</th>
        <th>{{ __('Brand label') }}</th>
        <th>{{ __('Washing label') }}</th>
        <th>{{ __('Pack. exterior') }}</th>
        <th>{{ __('Edo. Pack. ext.') }}</th>
        <th>{{ __('Lavado') }}</th>
        <th>{{ __('Lejía') }}</th>
        <th>{{ __('Planchado') }}</th>
        <th>{{ __('Lav. Seco') }}</th>
        <th>{{ __('Secadora') }}</th>
        <th>{{ __('Comentarios') }}</th>
        <th style="min-width:70px"></th>
    </tr>
    <tr>
        <form method="GET" action="{{ route('lista-packaging.index') }}">
            <th><input type="text" name="f_id" value="{{ request('f_id') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_muestra" value="{{ request('f_muestra') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_proveedor" value="{{ request('f_proveedor') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_pedido" value="{{ request('f_pedido') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_marca" value="{{ request('f_marca') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_categoria" value="{{ request('f_categoria') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_version" value="{{ request('f_version') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_diseno_ok" value="{{ request('f_diseno_ok') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_talla" value="{{ request('f_talla') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_top" value="{{ request('f_top') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_filling" value="{{ request('f_filling') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_bottom" value="{{ request('f_bottom') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_origen" value="{{ request('f_origen') }}" class="form-control form-control-sm"></th>
            <th><input type="date" name="f_fecha" value="{{ request('f_fecha') }}" class="form-control form-control-sm"></th>
            <th><input type="date" name="f_fecha_embarque" value="{{ request('f_fecha_embarque') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_brand_label" value="{{ request('f_brand_label') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_washing_label" value="{{ request('f_washing_label') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_packaging_exterior" value="{{ request('f_packaging_exterior') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_estado_pack_ext" value="{{ request('f_estado_pack_ext') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_lavado" value="{{ request('f_lavado') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_lejia" value="{{ request('f_lejia') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_planchado" value="{{ request('f_planchado') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_lavado_seco" value="{{ request('f_lavado_seco') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_secadora" value="{{ request('f_secadora') }}" class="form-control form-control-sm"></th>
            <th><input type="text" name="f_comentario" value="{{ request('f_comentario') }}" class="form-control form-control-sm"></th>
            <th>
                <div class="d-flex gap-1">
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                    <a href="{{ route('lista-packaging.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>
            </th>

            @if(request('idMuestra'))<input type="hidden" name="idMuestra" value="{{ request('idMuestra') }}">@endif
            @if(request('idProveedor'))<input type="hidden" name="idProveedor" value="{{ request('idProveedor') }}">@endif
            @if(request('idPedido'))<input type="hidden" name="idPedido" value="{{ request('idPedido') }}">@endif
            @if(request('idOrigen'))<input type="hidden" name="idOrigen" value="{{ request('idOrigen') }}">@endif
            @if(request('buscar'))<input type="hidden" name="buscar" value="{{ request('buscar') }}">@endif
        </form>
    </tr>
</thead>
        <tbody>
            @forelse($registros as $r)
            <tr id="row_{{ $r->Id }}">
                <td style="color:var(--text-muted);font-size:.72rem">#{{ $r->Id }}</td>
                <td class="fw-semibold" style="max-width:140px;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $r->muestra->Nombre ?? '' }}">
                    {{ $r->muestra->Nombre ?? '—' }}
                </td>
                <td style="max-width:120px;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $r->proveedor->Proveedor ?? '' }}">
                    {{ $r->proveedor->Proveedor ?? '—' }}
                </td>
                <td>{{ $r->pedido->Pedidos ?? '—' }}</td>
                <td>{{ $r->marca->TipoArticulo ?? '—' }}</td>
                

                <td>{{ $r->muestra->Categoria->Categorias ?? '—' }}</td>
                <td>{{ $r->muestra->Version->Version ?? '—' }}</td>


                <td>
                    @if($r->diseno_ok === 'SI')
                        <span class="badge-pack pack-aprobado">{{ $r->diseno_ok }}</span>
                    @elseif($r->diseno_ok === 'NO')
                        <span class="badge-pack pack-rechazado">{{ $r->diseno_ok }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>




                <td>
                    @if($r->talla)
                    <span class="badge bg-primary bg-opacity-10 text-primary" style="border-radius:6px;font-weight:700;padding:2px 7px;font-size:.72rem">
                        {{ $r->talla->Talla }}
                    </span>
                    @else — @endif
                </td>
                <td style="max-width:90px;overflow:hidden;text-overflow:ellipsis">{{ $r->top->Composicion ?? '—' }}</td>
                <td style="max-width:90px;overflow:hidden;text-overflow:ellipsis">{{ $r->filling->Composicion ?? '—' }}</td>
                <td style="max-width:90px;overflow:hidden;text-overflow:ellipsis">{{ $r->bottom->Composicion ?? '—' }}</td>
                <td>{{ $r->origen->Pais ?? '—' }}</td>
                <td>{{ $r->fecha ? $r->fecha->format('d/m/Y') : '—' }}</td>
                <td>{{ $r->fechaEmbarque ? $r->fechaEmbarque->format('d/m/Y') : '—' }}</td>
                <td>
                    @if($r->brandLabel)
                    @php $cls = str_contains(strtolower($r->brandLabel->estado),'aprobado') ? 'pack-aprobado' : (str_contains(strtolower($r->brandLabel->estado),'rechaz') ? 'pack-rechazado' : 'pack-pendiente'); @endphp
                    <span class="badge-pack {{ $cls }}">{{ $r->brandLabel->estado }}</span>
                    @else <span class="text-muted">—</span> @endif
                </td>
                <td>
                    @if($r->washingLabel)
                    <span class="badge-pack pack-aprobado">{{ $r->washingLabel->estado }}</span>
                    @else <span class="text-muted">—</span> @endif
                </td>
                <td>{{ $r->packagingExterior->tipo ?? '—' }}</td>
                <td>
                    @if($r->estadoTipoPackExt)
                    <span class="badge-pack pack-aprobado">{{ $r->estadoTipoPackExt->estado }}</span>
                    @else <span class="text-muted">—</span> @endif
                </td>
                <td style="max-width:110px;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $r->iconoLavado->valor ?? '' }}">
                    {{ $r->iconoLavado->valor ?? '—' }}
                </td>
                <td>{{ $r->iconoLejia->valor ?? '—' }}</td>
                <td style="max-width:130px;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $r->iconoPlanchado->valor ?? '' }}">
                    {{ $r->iconoPlanchado->valor ?? '—' }}
                </td>
                <td>{{ $r->iconoLavadoSeco->valor ?? '—' }}</td>
                <td>{{ $r->iconoSecadora->valor ?? '—' }}</td>
                <td style="max-width:150px;overflow:hidden;text-overflow:ellipsis" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $r->comentario }}">
                    {{ $r->comentario ? \Illuminate\Support\Str::limit($r->comentario, 30) : '—' }}
                </td>
                <td>
                    <div class="d-flex gap-1">
                        <button onclick="editRow({{ $r->Id }})" class="btn-accion edit" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ __('Editar') }}">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form method="POST" action="{{ route('lista-packaging.destroy', $r->Id) }}"
                              style="display:inline"
                              onsubmit="return confirm('{{ __('¿Eliminar este registro?') }}')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn-accion del" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ __('Eliminar') }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {{-- Fila edición inline --}}
            <tr id="editRow_{{ $r->Id }}" class="edit-row" style="display:none">
                <td colspan="25">
                    <form method="POST" action="{{ route('lista-packaging.update', $r->Id) }}">
                        @csrf @method('PUT')
                        @include('lista-packaging._form', ['reg' => $r])
                        <div class="d-flex gap-2 mt-2">
                            <button type="submit" class="btn-guardar" style="font-size:.8rem;background:#d97007">
                                <i class="bi bi-check-lg me-1"></i>{{ __('Guardar') }}
                            </button>
                            <button type="button" onclick="editRow({{ $r->Id }})"
                                    class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                                {{ __('Cancelar') }}
                            </button>
                        </div>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="25" class="text-center py-5 text-muted">
                    <i class="bi bi-inbox d-block opacity-25 mb-2" style="font-size:2rem"></i>
                    {{ __('No se encontraron registros') }}
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Paginación --}}
@if($registros->hasPages())
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
    <div style="font-size:.82rem;color:var(--text-muted)">
        {{ __('Mostrando') }} {{ $registros->firstItem() }}–{{ $registros->lastItem() }}
        {{ __('de') }} {{ $registros->total() }}
    </div>

    <div class="paginacion-wrap">
        {{ $registros->withQueryString()->links('pagination::bootstrap-5') }}
    </div>
</div>
@endif  


@endsection