@extends('layouts.app')
@section('title', __('Histórico') . ' — #' . $registro->id)

@push('styles')
<style>
    .hist-card{
        border:1px solid var(--border);
        border-radius:var(--radius);
        box-shadow:var(--shadow-sm);
        background:#fff;
        overflow:hidden;
    }

    .hist-header-icon{
        width:46px;
        height:46px;
        border-radius:12px;
        background:#f3e8ff;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .hist-table-wrap{
        overflow-x:auto;
        overflow-y:auto;
        max-height:70vh;
        border-top:1px solid var(--border);
    }

    .hist-table{
        font-size:.8rem;
        margin:0;
        min-width:1400px;
        border-collapse:separate;
        border-spacing:0;
    }

    .hist-table thead th{
        position:sticky;
        top:0;
        z-index:5;
        background:#f8fafc;
        font-size:.68rem;
        text-transform:uppercase;
        letter-spacing:.4px;
        color:var(--text-muted);
        font-weight:700;
        white-space:nowrap;
        padding:10px 12px;
        border-bottom:2px solid var(--border);
    }

    .hist-table tbody td{
        padding:9px 12px;
        vertical-align:middle;
        border-bottom:1px solid #f1f5f9;
        white-space:nowrap;
    }

    .hist-table tbody tr:hover{
        background:#f8fafc;
    }

    .badge-soft{
        display:inline-flex;
        align-items:center;
        border-radius:999px;
        padding:4px 10px;
        font-size:.72rem;
        font-weight:600;
        line-height:1;
    }

    .badge-soft.estado{
        background:#e0f2fe;
        color:#0369a1;
    }

    .badge-soft.fecha{
        background:#f1f5f9;
        color:#475569;
    }

    .icon-check-ok{
        color:#16a34a;
        font-size:.9rem;
    }

    .icon-check-off{
        color:#cbd5e1;
        font-size:.9rem;
    }

    .cell-ellipsis{
        max-width:220px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .cell-ellipsis-sm{
        max-width:150px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .hist-subtitle{
        margin:0;
        font-size:.82rem;
        color:var(--text-muted);
    }

    .hist-empty{
        padding:3rem 1rem;
        text-align:center;
        color:var(--text-muted);
    }

    .hist-empty i{
        font-size:2rem;
        opacity:.25;
        display:block;
        margin-bottom:.5rem;
    }

    .tooltip-inner{
        max-width: 420px;
        text-align: left;
        white-space: pre-wrap;
        word-break: break-word;
        font-size: .8rem;
        padding: 8px 10px;
    }
</style>
@endpush

@section('content')

<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div class="d-flex align-items-center gap-3">
        <div class="hist-header-icon">
            <i class="bi bi-clock-history" style="font-size:1.3rem;color:#7c3aed"></i>
        </div>
        <div>
            <h1 style="margin:0;font-size:1.3rem;font-weight:700">
                {{ __('Histórico de cambios') }}
            </h1>
            <p class="hist-subtitle">
                {{ __('Registro') }} #{{ $registro->id }}
                @if($registro->muestra) — {{ $registro->muestra->Nombre }} @endif
                @if($registro->diseno) / {{ $registro->diseno->Nombre_Diseno }} @endif
            </p>
        </div>
    </div>

    <a href="{{ route('lista-muestra-diseno.index') }}"
       class="btn btn-sm btn-outline-secondary"
       style="border-radius:8px">
        <i class="bi bi-arrow-left me-1"></i>{{ __('Volver') }}
    </a>
</div>

<div class="hist-card">
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2 bg-white"
         style="border-bottom:1px solid var(--border)">
        <span style="font-weight:600">
            <i class="bi bi-clock-history me-2"></i>{{ __('Versiones anteriores') }}
        </span>
        <span class="badge bg-secondary" style="border-radius:6px">
            {{ $historicos->count() }} {{ __('versiones') }}
        </span>
    </div>

    @if($historicos->isEmpty())
        <div class="hist-empty">
            <i class="bi bi-clock-history"></i>
            {{ __('Sin versiones anteriores') }}
        </div>
    @else
        <div class="hist-table-wrap">
            <table class="table hist-table align-middle">
                <thead>
                    <tr>
                        <th class="ps-3">{{ __('Fecha cambio') }}</th>
                        <th>{{ __('Diseño') }}</th>
                        <th>{{ __('Color') }}</th>
                        <th>{{ __('Proveedor') }}</th>
                        <th>{{ __('Estado') }}</th>
                        <th>{{ __('Prioridad') }}</th>
                        <th>{{ __('Top') }}</th>
                        <th>{{ __('Bottom') }}</th>
                        <th>{{ __('Talla Foto') }}</th>
                        <th>{{ __('Comentario') }}</th>
                        <th>{{ __('Feedback') }}</th>
                        <th>{{ __('F. Embarque') }}</th>
                        <th>{{ __('Nuevo') }}</th>
                        <th>{{ __('SAP') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($historicos as $h)
                    <tr>
                        <td class="ps-3">
                            <span class="badge-soft fecha">
                                <i class="bi bi-clock me-1"></i>
                                {{ $h->created_at ? $h->created_at->format('d/m/Y H:i') : '—' }}
                            </span>
                        </td>

                        <td class="cell-ellipsis-sm" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $h->diseno->Nombre_Diseno ?? '' }}">
                            {{ $h->diseno->Nombre_Diseno ?? '—' }}
                        </td>

                        <td>{{ $h->color->Color ?? '—' }}</td>

                        <td class="cell-ellipsis-sm" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ $h->proveedor->Proveedor ?? '' }}">
                            {{ $h->proveedor->Proveedor ?? '—' }}
                        </td>

                        <td>
                            @if($h->estadoMuestraDiseno)
                                <span class="badge-soft estado">
                                    {{ $h->estadoMuestraDiseno->EstadoMuestraDiseno }}
                                </span>
                            @else
                                —
                            @endif
                        </td>

                        <td>{{ $h->prioridad->Prioridad ?? '—' }}</td>
                        <td>{{ $h->Superior ?? '—' }}</td>
                        <td>{{ $h->Inferior ?? '—' }}</td>
                        <td>{{ $h->tallaFoto->Talla ?? '—' }}</td>

                        <td class="cell-ellipsis"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-title="{{ $h->Comentario ?? '' }}">
                            {{ $h->Comentario ? \Illuminate\Support\Str::limit($h->Comentario, 40) : '—' }}
                        </td>

                        <td class="cell-ellipsis"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-title="{{ $h->FeedbackProveedor ?? '' }}">
                            {{ $h->FeedbackProveedor ? \Illuminate\Support\Str::limit($h->FeedbackProveedor, 40) : '—' }}
                        </td>

                        <td>
                            {{ $h->FechaEmbarque ? \Carbon\Carbon::parse($h->FechaEmbarque)->format('d/m/Y') : '—' }}
                        </td>

                        <td class="text-center">
                            @if($h->Aprobado)
                                <i class="bi bi-check-circle-fill icon-check-ok"></i>
                            @else
                                <i class="bi bi-circle icon-check-off"></i>
                            @endif
                        </td>

                        <td class="text-center">
                            @if($h->migraraSAP)
                                <i class="bi bi-check-circle-fill icon-check-ok"></i>
                            @else
                                <i class="bi bi-circle icon-check-off"></i>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipTriggerList.forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
});
</script>
@endpush