@extends('layouts.app')

@section('titulo', 'Detalle de Transferencia')

@section('contenido')

<style>
.table-premium {
    border-collapse: collapse;
    width: 100%;
}

.table-premium thead {
    background: #f8fafc;
    text-transform: uppercase;
    font-size: .7rem;
    color: #64748b;
    letter-spacing: 0.05em;
}

.table-premium thead th {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: left;
}

.table-premium tbody td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

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

.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-section {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-outline:hover {
    background: #f8fafc;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.info-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.info-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.info-value {
    font-size: .95rem;
    font-weight: 600;
    color: #334155;
}

.info-subvalue {
    font-size: .75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.transfer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.warehouse-box {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 16px;
}

.warehouse-box.origin {
    border-color: #fecaca;
    background: #fef2f2;
}

.warehouse-box.destination {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.warehouse-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 5px;
}

.origin .warehouse-label {
    color: #dc2626;
}

.destination .warehouse-label {
    color: #16a34a;
}

.warehouse-name {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.warehouse-local {
    font-size: .75rem;
    color: #64748b;
    margin-top: 3px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 600;
}

.status-completada {
    background: #dcfce7;
    color: #166534;
}

.status-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.status-cancelada {
    background: #fee2e2;
    color: #991b1b;
}

.status-default {
    background: #f1f5f9;
    color: #475569;
}

.lote-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    background: #eef2ff;
    font-size: .7rem;
    font-weight: 600;
    color: #4338ca;
}

.quantity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .8rem;
    font-weight: 700;
}

.summary-box {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 14px 16px;
}

.summary-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}

.summary-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
}

.observacion-box {
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    padding: 14px 16px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.empty-state .empty-icon svg {
    width: 24px;
    height: 24px;
}

@media print {

    @page {
        margin: 10mm;
    }

    body {
        background: white !important;
    }

    nav,
    aside,
    header,
    footer {
        display: none !important;
    }

    .no-print {
        display: none !important;
    }

    .header-section,
    .table-container,
    .info-card {
        box-shadow: none !important;
    }

    .max-w-\[1650px\] {
        max-width: none !important;
    }
}
</style>


<div class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6">

    {{-- HEADER --}}
    <div class="header-section">

        <div class="flex flex-wrap items-start justify-between gap-3">

            <div>

                <div class="text-[0.7rem] text-slate-400 mb-1">
                    Logística & Inventario / Transferencias / Detalle
                </div>

                <div class="flex items-center gap-3">

                    <div class="header-icon">

                        <svg fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
                             stroke-width="2">

                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M7 7h11l-3-3"/>

                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M18 7l-3 3"/>

                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M17 17H6l3 3"/>

                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M6 17l3-3"/>

                        </svg>

                    </div>

                    <div>

                        <h1 class="text-xl font-bold text-slate-800">
                            Transferencia {{ $transferencia->codigo }}
                        </h1>

                        <p class="text-sm text-slate-400">
                            Detalle de productos, lotes y cantidades transferidas.
                        </p>

                    </div>

                </div>

            </div>


            {{-- BOTONES --}}
            <div class="flex flex-wrap gap-2 no-print">

                <a href="{{ route('transferencias.index') }}"
                   class="btn-outline">

                    ← Transferencias

                </a>

                <button type="button"
                        onclick="window.print()"
                        class="btn-primary">

                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="w-4 h-4"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
                         stroke-width="2">

                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M6 9V2h12v7"/>

                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>

                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M6 14h12v8H6z"/>

                    </svg>

                    Imprimir

                </button>

            </div>

        </div>

    </div>


    {{-- INFORMACIÓN GENERAL --}}
    <div class="info-card">

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">

            {{-- CÓDIGO --}}
            <div>

                <div class="info-title">
                    Código
                </div>

                <div class="info-value">
                    {{ $transferencia->codigo }}
                </div>

            </div>


            {{-- FECHA --}}
            <div>

                <div class="info-title">
                    Fecha de transferencia
                </div>

                <div class="info-value">

                    @if($transferencia->fecha_transferencia)
                        {{ $transferencia->fecha_transferencia->format('d/m/Y H:i') }}
                    @else
                        {{ $transferencia->created_at?->format('d/m/Y H:i') ?? '—' }}
                    @endif

                </div>

            </div>


            {{-- USUARIO --}}
            <div>

                <div class="info-title">
                    Usuario
                </div>

                <div class="info-value">
                    {{ $transferencia->usuario?->name ?? '—' }}
                </div>

            </div>


            {{-- ESTADO --}}
            <div>

                <div class="info-title">
                    Estado
                </div>

                @php
                    $estado = strtolower($transferencia->estado ?? '');
                @endphp

                @if($estado === 'completada')

                    <span class="status-badge status-completada">
                        Completada
                    </span>

                @elseif($estado === 'pendiente')

                    <span class="status-badge status-pendiente">
                        Pendiente
                    </span>

                @elseif($estado === 'cancelada')

                    <span class="status-badge status-cancelada">
                        Cancelada
                    </span>

                @else

                    <span class="status-badge status-default">
                        {{ ucfirst($transferencia->estado ?? '—') }}
                    </span>

                @endif

            </div>

        </div>

    </div>


    {{-- ORIGEN / DESTINO --}}
    <div class="info-card">

        <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] items-center gap-4">

            {{-- ORIGEN --}}
            <div class="warehouse-box origin">

                <div class="warehouse-label">
                    Almacén de origen
                </div>

                <div class="warehouse-name">
                    {{ $transferencia->almacenOrigen?->nombre ?? '—' }}
                </div>

                @if($transferencia->almacenOrigen?->local)

                    <div class="warehouse-local">
                        Local:
                        <span class="font-medium">
                            {{ $transferencia->almacenOrigen->local->nombre }}
                        </span>
                    </div>

                @endif

            </div>


            {{-- FLECHA --}}
            <div class="transfer-arrow">

                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-5 h-5"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     stroke-width="2">

                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M5 12h14"/>

                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M13 6l6 6-6 6"/>

                </svg>

            </div>


            {{-- DESTINO --}}
            <div class="warehouse-box destination">

                <div class="warehouse-label">
                    Almacén de destino
                </div>

                <div class="warehouse-name">
                    {{ $transferencia->almacenDestino?->nombre ?? '—' }}
                </div>

                @if($transferencia->almacenDestino?->local)

                    <div class="warehouse-local">
                        Local:
                        <span class="font-medium">
                            {{ $transferencia->almacenDestino->local->nombre }}
                        </span>
                    </div>

                @endif

            </div>

        </div>

    </div>


    {{-- RESUMEN --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

        <div class="summary-box">

            <div class="summary-label">
                Líneas transferidas
            </div>

            <div class="summary-value">
                {{ $transferencia->detalles->count() }}
            </div>

        </div>


        <div class="summary-box">

            <div class="summary-label">
                Productos diferentes
            </div>

            <div class="summary-value">
                {{ $transferencia->detalles->pluck('producto_id')->unique()->count() }}
            </div>

        </div>


        <div class="summary-box">

            <div class="summary-label">
                Total de unidades
            </div>

            <div class="summary-value">
                {{ number_format($transferencia->detalles->sum('cantidad')) }}
            </div>

        </div>

    </div>


    {{-- OBSERVACIÓN --}}
    @if($transferencia->observacion)

        <div class="observacion-box">

            <div class="text-[0.65rem] uppercase tracking-wide font-semibold text-blue-600 mb-1">
                Observación
            </div>

            <div class="text-sm text-slate-700">
                {{ $transferencia->observacion }}
            </div>

        </div>

    @endif


    {{-- DETALLE --}}
    <div class="table-container">

        <div class="px-5 py-4 border-b border-slate-100">

            <div>

                <h3 class="font-semibold text-slate-700">
                    Productos transferidos
                </h3>

                <p class="text-xs text-slate-400 mt-1">
                    Detalle de cada producto y lote trasladado entre almacenes.
                </p>

            </div>

        </div>


        <div class="overflow-x-auto">

            <table class="table-premium">

                <thead>

                    <tr>

                        <th style="width:4%;">
                            #
                        </th>

                        <th style="width:25%;">
                            PRODUCTO
                        </th>

                        <th style="width:14%;">
                            CÓDIGO
                        </th>

                        <th style="width:15%;">
                            LOTE
                        </th>

                        <th style="width:15%;">
                            VENCIMIENTO
                        </th>

                        <th style="width:12%; text-align:center;">
                            CANTIDAD
                        </th>

                        <th style="width:15%;">
                            DESTINO
                        </th>

                    </tr>

                </thead>


                <tbody>

                    @forelse($transferencia->detalles as $index => $detalle)

                        <tr>

                            {{-- NUMERO --}}
                            <td class="text-slate-400">
                                {{ $index + 1 }}
                            </td>


                            {{-- PRODUCTO --}}
                            <td>

                                <div class="font-medium text-slate-700">
                                    {{ $detalle->producto?->nombre ?? '—' }}
                                </div>

                                @if($detalle->producto?->presentacion)

                                    <div class="text-xs text-slate-400 mt-0.5">
                                        {{ $detalle->producto->presentacion }}
                                    </div>

                                @endif

                            </td>


                            {{-- CODIGO --}}
                            <td>

                                @if($detalle->producto?->codigo_barras)

                                    <span class="text-slate-500">
                                        {{ $detalle->producto->codigo_barras }}
                                    </span>

                                @else

                                    <span class="text-slate-400">
                                        —
                                    </span>

                                @endif

                            </td>


                            {{-- LOTE --}}
                            <td>

                                @if($detalle->lote)

                                    <span class="lote-badge">
                                        {{ $detalle->lote }}
                                    </span>

                                @else

                                    <span class="text-slate-400 text-xs">
                                        SIN LOTE
                                    </span>

                                @endif

                            </td>


                            {{-- VENCIMIENTO --}}
                            <td class="text-slate-500">

                                @if($detalle->fecha_vencimiento)

                                    {{ \Carbon\Carbon::parse($detalle->fecha_vencimiento)->format('d/m/Y') }}

                                @else

                                    <span class="text-slate-400">
                                        Sin vencimiento
                                    </span>

                                @endif

                            </td>


                            {{-- CANTIDAD --}}
                            <td class="text-center">

                                <span class="quantity-badge">
                                    {{ number_format((int) $detalle->cantidad) }}
                                </span>

                            </td>


                            {{-- STOCK DESTINO --}}
                            <td>

                                @if($detalle->stockDestino)

                                    <span class="text-xs text-slate-500">
                                        Stock destino:
                                    </span>

                                    <div class="font-semibold text-slate-700">
                                        {{ number_format($detalle->stockDestino->stock) }}
                                    </div>

                                @else

                                    <span class="text-slate-400">
                                        —
                                    </span>

                                @endif

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="7">

                                <div class="empty-state">

                                    <div class="empty-icon">

                                        <svg fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor"
                                             stroke-width="2">

                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  d="M20 7L12 3 4 7m16 0v10l-8 4m8-14-8 4m0 10-8-4V7m8 14V11M4 7l8 4"/>

                                        </svg>

                                    </div>

                                    <p class="font-medium text-slate-500">
                                        No hay productos registrados.
                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>


                @if($transferencia->detalles->count())

                    <tfoot>

                        <tr class="bg-slate-50">

                            <td colspan="5"
                                class="text-right font-semibold text-slate-600">

                                TOTAL TRANSFERIDO

                            </td>

                            <td class="text-center">

                                <span class="quantity-badge">
                                    {{ number_format($transferencia->detalles->sum('cantidad')) }}
                                </span>

                            </td>

                            <td></td>

                        </tr>

                    </tfoot>

                @endif

            </table>

        </div>

    </div>


    {{-- PIE --}}
    <div class="flex flex-wrap items-center justify-between gap-3 text-xs text-slate-400 no-print">

        <div>
            Transferencia registrada el
            {{ $transferencia->created_at?->format('d/m/Y H:i') ?? '—' }}
        </div>

        <a href="{{ route('transferencias.index') }}"
           class="btn-outline">

            ← Volver a transferencias

        </a>

    </div>

</div>

@endsection