@extends('layouts.app')

@section('title', 'Envíos | Veltrix v2')

@section('topbar_actions')
    @if (has_permission('envios.crear'))
        <a href="{{ route('envios.create') }}" class="btn btn-primary btn-sm vx-topbar-action">
            <i class="bx bx-plus me-1"></i>Nuevo envío
        </a>
    @endif
@endsection

@push('styles')
<style>
/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --c-border   : #e5e9f0;
    --c-bg       : #f7f9fc;
    --c-surface  : #ffffff;
    --c-txt      : #111827;
    --c-txt2     : #6b7280;
    --c-txt3     : #9ca3af;
    --c-indigo   : #4f46e5;
    --c-indigo-lt: #eef2ff;
    --r          : 10px;
}

/* ── Tabs de estado ─────────────────────────────────────────────── */
.ev-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 0 4px;
}
.ev-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--c-txt2);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.ev-tab:hover {
    background: var(--c-bg);
    color: var(--c-txt);
}
.ev-tab.active {
    background: var(--c-indigo-lt);
    color: var(--c-indigo);
    font-weight: 600;
}
.ev-tab-count {
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    background: #e5e7eb;
    color: #374151;
    min-width: 20px;
    text-align: center;
}
.ev-tab.active .ev-tab-count {
    background: #c7d2fe;
    color: var(--c-indigo);
}

/* ── Barra superior ─────────────────────────────────────────────── */
.ev-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.ev-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}
.ev-search i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-txt3);
    font-size: 1rem;
    pointer-events: none;
}
.ev-search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: .83rem;
    color: var(--c-txt);
    background: var(--c-bg);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ev-search input:focus {
    border-color: var(--c-indigo);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.ev-search input::placeholder { color: var(--c-txt3); }

.ev-search-btn {
    padding: 8px 18px;
    background: var(--c-indigo);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s;
    flex-shrink: 0;
}
.ev-search-btn:hover { background: #4338ca; }

.ev-clear-btn {
    padding: 8px 12px;
    background: transparent;
    color: var(--c-txt2);
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: .83rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: border-color .12s, color .12s;
    flex-shrink: 0;
}
.ev-clear-btn:hover { border-color: #9ca3af; color: var(--c-txt); }

.ev-topbar-count {
    margin-left: auto;
    font-size: .75rem;
    color: var(--c-txt3);
    flex-shrink: 0;
}

/* ── Tabla ──────────────────────────────────────────────────────── */
.ev-table {
    width: 100%;
    border-collapse: collapse;
}
.ev-table thead th {
    padding: 10px 14px;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-txt3);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.ev-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.ev-table tbody tr:last-child { border-bottom: none; }
.ev-table tbody tr:hover { background: #fafbff; }
.ev-table td { padding: 13px 14px; vertical-align: middle; }

/* ── Nº envío ───────────────────────────────────────────────────── */
.ev-num {
    font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-indigo);
    text-decoration: none;
}
.ev-num:hover { text-decoration: underline; color: #4338ca; }
.ev-date { font-size: .68rem; color: var(--c-txt3); margin-top: 2px; }

/* ── Destinatario ───────────────────────────────────────────────── */
.ev-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--c-indigo-lt);
    color: var(--c-indigo);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ev-dest-name { font-size: .85rem; font-weight: 600; color: var(--c-txt); }
.ev-dest-sub  { font-size: .71rem; color: var(--c-txt3); margin-top: 1px; }

/* ── Estado badge ───────────────────────────────────────────────── */
.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.ev-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ev-b-pendiente              { background: #f1f5f9; color: #475569; }
.ev-b-pendiente .ev-badge-dot{ background: #94a3b8; }
.ev-b-en_preparacion              { background: #fffbeb; color: #92400e; }
.ev-b-en_preparacion .ev-badge-dot{ background: #f59e0b; }
.ev-b-listo_para_despacho              { background: #e0f2fe; color: #0369a1; }
.ev-b-listo_para_despacho .ev-badge-dot{ background: #0ea5e9; }
.ev-b-despachado              { background: #eff6ff; color: #1d4ed8; }
.ev-b-despachado .ev-badge-dot{ background: #3b82f6; }
.ev-b-en_transito              { background: #f5f3ff; color: #5b21b6; }
.ev-b-en_transito .ev-badge-dot{ background: #8b5cf6; }
.ev-b-entregado              { background: #f0fdf4; color: #166534; }
.ev-b-entregado .ev-badge-dot{ background: #22c55e; }
.ev-b-devuelto              { background: #fef2f2; color: #991b1b; }
.ev-b-devuelto .ev-badge-dot{ background: #ef4444; }

/* ── Origen chip ────────────────────────────────────────────────── */
.ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.ev-chip-pos    { background: #eff6ff; color: #1d4ed8; }
.ev-chip-wa     { background: #f0fdf4; color: #15803d; }
.ev-chip-manual { background: #f8fafc; color: #64748b; }

/* ── Rótulo badge ───────────────────────────────────────────────── */
.ev-rl {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600;
    background: #f0fdf4; color: #166534;
    padding: 3px 9px; border-radius: 6px;
}

/* ── Missing ────────────────────────────────────────────────────── */
.ev-miss {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .73rem; color: #d97706; font-weight: 500;
}
@keyframes ev-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.55); }
}
.ev-miss-dot {
    width: 6px; height: 6px;
    background: #f59e0b; border-radius: 50%;
    flex-shrink: 0;
    animation: ev-pulse 1.6s ease-in-out infinite;
}

/* ── Acciones ───────────────────────────────────────────────────── */
.ev-acts { display: flex; gap: 3px; justify-content: flex-end; }
.ev-btn {
    width: 30px; height: 30px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .84rem;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .12s;
    padding: 0;
}
.ev-btn-edit { border-color: #fde68a; color: #b45309; }
.ev-btn-edit:hover { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.ev-btn-view { border-color: #c7d2fe; color: #6366f1; }
.ev-btn-view:hover { background: #eef2ff; border-color: #818cf8; color: #4338ca; }
.ev-btn-del  { border-color: #fecaca; color: #f87171; }
.ev-btn-del:hover { background: #fee2e2; border-color: #f87171; color: #dc2626; }

/* ── Empty state ────────────────────────────────────────────────── */
.ev-empty {
    text-align: center;
    padding: 72px 24px;
}
.ev-empty-icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    background: var(--c-bg);
    border: 1.5px dashed var(--c-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--c-txt3);
    margin-bottom: 16px;
}
.ev-empty h3 { font-size: .95rem; font-weight: 700; color: var(--c-txt); margin-bottom: 6px; }
.ev-empty p  { font-size: .8rem; color: var(--c-txt3); margin-bottom: 20px; }

/* ── Shell ──────────────────────────────────────────────────────── */
.ev-shell {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
}
.ev-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 4px 16px;
    border-bottom: 1px solid var(--c-border);
    gap: 8px;
    flex-wrap: wrap;
    min-height: 48px;
}

/* ── Footer paginación ──────────────────────────────────────────── */
.ev-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
    font-size: .75rem;
    color: var(--c-txt3);
    gap: 12px;
    flex-wrap: wrap;
}
.ev-foot .pagination { margin: 0; font-size: .75rem; }
</style>
@endpush

@section('content')

@if (session('success'))
    <div class="alert border-0 mb-4 d-flex align-items-center gap-2 py-3"
         style="background:#f0fdf4;border-left:3px solid #22c55e!important;border-radius:10px;color:#166534;font-size:.85rem"
         role="alert">
        <i class="bx bx-check-circle fs-5 flex-shrink-0" style="color:#22c55e"></i>
        {{ session('success') }}
        <button type="button" class="btn-close btn-close-sm ms-auto" data-bs-dismiss="alert" style="font-size:.6rem"></button>
    </div>
@endif

@php
    $tabItems = [
        ['key' => '',                   'label' => 'Todos'],
        ['key' => 'pendiente',          'label' => 'Pendiente'],
        ['key' => 'en_preparacion',     'label' => 'En preparación'],
        ['key' => 'listo_para_despacho','label' => 'Listo p/ despacho'],
        ['key' => 'despachado',         'label' => 'Despachado'],
        ['key' => 'en_transito',        'label' => 'En tránsito'],
        ['key' => 'entregado',          'label' => 'Entregado'],
        ['key' => 'devuelto',           'label' => 'Devuelto'],
    ];
    $totalAll = array_sum(array_map(fn($v) => $v, $statCounts));
@endphp

<div class="ev-shell">

    {{-- ── Tabs de estado ──────────────────────────────────── --}}
    <div class="ev-shell-head">
        <div class="ev-tabs">
            @foreach ($tabItems as $tab)
                @php
                    $isActive = ($estado === $tab['key']);
                    $cnt = $tab['key'] === '' ? ($statCounts['__all'] ?? $totalAll) : ($statCounts[$tab['key']] ?? 0);
                    $url = route('envios.index', array_filter(['q' => $q, 'estado' => $tab['key']]));
                @endphp
                <a href="{{ $url }}" class="ev-tab {{ $isActive ? 'active' : '' }}">
                    {{ $tab['label'] }}
                    @if ($cnt > 0 || $tab['key'] === '')
                        <span class="ev-tab-count">{{ $cnt }}</span>
                    @endif
                </a>
            @endforeach
        </div>
    </div>

    {{-- ── Barra de búsqueda ────────────────────────────────── --}}
    <form method="GET" action="{{ route('envios.index') }}">
        @if ($estado)
            <input type="hidden" name="estado" value="{{ $estado }}">
        @endif
        <div class="ev-topbar">
            <div class="ev-search">
                <i class="bx bx-search"></i>
                <input type="text" name="q" placeholder="Nº envío, destinatario, guía…" value="{{ $q }}" autocomplete="off">
            </div>
            <button type="submit" class="ev-search-btn">
                Buscar
            </button>
            @if ($q || $estado)
                <a href="{{ route('envios.index') }}" class="ev-clear-btn">
                    <i class="bx bx-x"></i> Limpiar
                </a>
            @endif
            <span class="ev-topbar-count">
                {{ $envios->total() }} {{ $envios->total() === 1 ? 'envío' : 'envíos' }}
            </span>
        </div>
    </form>

    {{-- ── Tabla ────────────────────────────────────────────── --}}
    <div style="overflow-x:auto">
        <table class="ev-table">
            <thead>
                <tr>
                    <th style="padding-left:20px;width:168px">Nº Envío</th>
                    <th>Destinatario</th>
                    <th>Ciudad</th>
                    <th>Transportadora</th>
                    <th>Origen</th>
                    <th class="text-center" style="width:80px">Rótulos</th>
                    <th style="width:170px">Estado</th>
                    <th style="width:100px;padding-right:20px;text-align:right">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($envios as $envio)
                    <tr>
                        {{-- Nº Envío --}}
                        <td style="padding-left:20px">
                            <a href="{{ route('envios.show', $envio) }}" class="ev-num">{{ $envio->numero_envio }}</a>
                            <div class="ev-date">{{ $envio->created_at->format('d/m/Y') }}</div>
                        </td>

                        {{-- Destinatario --}}
                        <td>
                            <div style="display:flex;align-items:center;gap:10px">
                                <div class="ev-avatar">{{ strtoupper(mb_substr($envio->destinatario_nombre, 0, 2)) }}</div>
                                <div>
                                    <div class="ev-dest-name">{{ $envio->destinatario_nombre }}</div>
                                    @if ($envio->destinatario_telefono)
                                        <div class="ev-dest-sub"><i class="bx bx-phone" style="font-size:.65rem;vertical-align:middle"></i> {{ $envio->destinatario_telefono }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>

                        {{-- Ciudad --}}
                        <td>
                            @if ($envio->destinatario_ciudad)
                                <span style="font-size:.83rem;color:#374151">{{ $envio->destinatario_ciudad }}</span>
                            @else
                                <span class="ev-miss"><span class="ev-miss-dot"></span>Sin ciudad</span>
                            @endif
                        </td>

                        {{-- Transportadora --}}
                        <td>
                            @if ($envio->transportadora)
                                <span style="font-size:.83rem;font-weight:500;color:#374151">{{ $envio->transportadora }}</span>
                                @if ($envio->numero_guia)
                                    <div class="ev-date" style="font-family:monospace">{{ $envio->numero_guia }}</div>
                                @endif
                            @else
                                <span class="ev-miss"><span class="ev-miss-dot"></span>Por asignar</span>
                            @endif
                        </td>

                        {{-- Origen --}}
                        <td>
                            @if ($envio->venta_id)
                                <span class="ev-chip ev-chip-pos"><i class="bx bx-receipt" style="font-size:.75rem"></i> POS</span>
                            @elseif ($envio->pedido_manychat_id)
                                <span class="ev-chip ev-chip-wa"><i class="bx bxl-whatsapp" style="font-size:.75rem"></i> WA</span>
                            @else
                                <span class="ev-chip ev-chip-manual">Manual</span>
                            @endif
                        </td>

                        {{-- Rótulos --}}
                        <td class="text-center">
                            @php $cnt = $envio->rotulos_count ?? 0 @endphp
                            @if ($cnt)
                                <span class="ev-rl"><i class="bx bx-qr" style="font-size:.75rem"></i>{{ $cnt }}</span>
                            @else
                                <span style="color:#d1d5db">—</span>
                            @endif
                        </td>

                        {{-- Estado --}}
                        <td>
                            <span class="ev-badge ev-b-{{ $envio->estado }}">
                                <span class="ev-badge-dot"></span>
                                {{ $envio->estadoLabel() }}
                            </span>
                        </td>

                        {{-- Acciones --}}
                        <td style="padding-right:20px">
                            <div class="ev-acts">
                                @if ($envio->estado === 'pendiente' && has_permission('envios.crear'))
                                    <a href="{{ route('envios.edit', $envio) }}" class="ev-btn ev-btn-edit" title="Completar envío">
                                        <i class="bx bx-edit-alt"></i>
                                    </a>
                                @endif
                                <a href="{{ route('envios.show', $envio) }}" class="ev-btn ev-btn-view" title="Ver detalle">
                                    <i class="bx bx-show"></i>
                                </a>
                                @if (has_permission('envios.eliminar'))
                                    <form method="POST" action="{{ route('envios.destroy', $envio) }}"
                                          data-vx-confirm="¿Eliminar el envío {{ $envio->numero_envio }}?"
                                          data-vx-confirm-type="danger"
                                          data-vx-confirm-title="Eliminar envío"
                                          data-vx-confirm-accept="Sí, eliminar">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="ev-btn ev-btn-del" title="Eliminar">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8">
                            <div class="ev-empty">
                                <div class="ev-empty-icon mx-auto"><i class="bx bxs-truck"></i></div>
                                <h3>@if ($q || $estado) Sin resultados @else Aún no hay envíos @endif</h3>
                                <p>
                                    @if ($q || $estado)
                                        Prueba con otros términos o limpia los filtros.
                                    @else
                                        Los envíos se crean automáticamente al completar ventas POS, o puedes crear uno manualmente.
                                    @endif
                                </p>
                                @if ($q || $estado)
                                    <a href="{{ route('envios.index') }}" class="ev-clear-btn" style="margin:0 auto">
                                        <i class="bx bx-x"></i> Limpiar filtros
                                    </a>
                                @elseif (has_permission('envios.crear'))
                                    <a href="{{ route('envios.create') }}"
                                       style="display:inline-flex;align-items:center;gap:6px;background:#4f46e5;color:#fff;padding:8px 20px;border-radius:8px;font-size:.83rem;font-weight:600;text-decoration:none">
                                        <i class="bx bx-plus"></i> Crear envío
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- ── Paginación ───────────────────────────────────────── --}}
    @if ($envios->hasPages())
        <div class="ev-foot">
            <span>{{ $envios->firstItem() }}–{{ $envios->lastItem() }} de {{ $envios->total() }} envíos</span>
            <div>{{ $envios->appends(['q' => $q, 'estado' => $estado])->links() }}</div>
        </div>
    @endif

</div>

@endsection