@extends('layouts.app')

@section('title', 'Historial de Inventario')

@section('content')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                Historial de <span
                    class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine dark:from-orange-400 dark:to-pink-500">Movimientos</span>
            </h2>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                Registro detallado de cambios en el inventario
            </p>
        </div>
        <a href="{{ route('inventario.index') }}"
            class="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-200 px-4 py-2.5 rounded-xl font-bold transition hover:bg-slate-200 dark:hover:bg-slate-700">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
                </path>
            </svg>
            Volver al Inventario
        </a>
    </div>

    <!-- Filtros Estilo Inventario -->
    <div class="glass-card-premium p-5 mb-6 border border-brand-orange/20 shadow-lg"
        style="box-shadow: 0 10px 15px -3px rgba(232, 99, 24, 0.1);" x-data>
        <form x-ref="form" method="GET" action="{{ route('inventario.historial') }}"
            class="flex flex-col lg:flex-row items-center gap-4">

            <!-- Búsqueda (Dominante) -->
            <div class="relative flex-1 w-full lg:w-auto">
                <input type="text" name="search" value="{{ request('search') }}"
                    @input.debounce.1000ms="$refs.form.submit()" placeholder="Buscar por producto, código..."
                    class="w-full pl-5 pr-10 py-3 bg-amber-50 dark:bg-slate-800 border border-amber-200 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-brand-orange/50 outline-none transition-all font-semibold text-slate-700 dark:text-slate-200 placeholder-slate-400">
                <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                    <svg class="w-5 h-5 text-amber-500/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>

            <!-- Filtros Secundarios (Grouped) -->
            <div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">

                <!-- Tipo -->
                <div class="w-full sm:w-auto min-w-[160px]">
                    <select name="tipo" @change="$refs.form.submit()"
                        class="w-full px-4 py-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-brand-orange/30 outline-none text-sm font-medium text-slate-600 dark:text-slate-300 appearance-none cursor-pointer">
                        <option value="">Todos los Tipos</option>
                        @foreach($tipos as $key => $label)
                            <option value="{{ $key }}" {{ request('tipo') == $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Fechas (Compactas) -->
                <div class="flex items-center gap-2">
                    <input type="date" name="fecha_inicio" value="{{ request('fecha_inicio') }}"
                        @change="$refs.form.submit()"
                        class="px-3 py-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-brand-orange/30 outline-none text-sm text-slate-600 dark:text-slate-300 w-36"
                        title="Fecha Inicio">
                    <span class="text-slate-400">-</span>
                    <input type="date" name="fecha_fin" value="{{ request('fecha_fin') }}" @change="$refs.form.submit()"
                        class="px-3 py-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-brand-orange/30 outline-none text-sm text-slate-600 dark:text-slate-300 w-36"
                        title="Fecha Fin">
                </div>

                <!-- Mostrar (Paginación) -->
                <div class="flex items-center gap-2 pl-2 border-l border-slate-200 dark:border-slate-700 ml-2">
                    <span class="text-xs font-bold text-slate-500 uppercase">Mostrar</span>
                    <select name="per_page" @change="$refs.form.submit()"
                        class="px-2 py-2 bg-transparent border-none font-bold text-slate-700 dark:text-slate-300 focus:ring-0 cursor-pointer text-sm">
                        @foreach([10, 25, 50, 100] as $val)
                            <option value="{{ $val }}" {{ $perPage == $val ? 'selected' : '' }}>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Botón Filtrar (Manual) -->
                <button type="submit"
                    class="p-3 bg-brand-orange text-white rounded-xl shadow-md hover:bg-orange-600 transition hover:scale-105 active:scale-95 ml-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293.707L3.293 7.293A1 1 0 013 6.586V4z">
                        </path>
                    </svg>
                </button>
                @if(request()->anyFilled(['search', 'tipo', 'fecha_inicio', 'fecha_fin']))
                    <a href="{{ route('inventario.historial') }}" class="text-slate-400 hover:text-red-500 transition"
                        title="Limpiar">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                            </path>
                        </svg>
                    </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Tabla Reconstruida desde 0 -->
    <x-table>
        <x-table.thead>
            <tr>
                <x-table.th>Fecha / Hora</x-table.th>
                <x-table.th>Usuario</x-table.th>
                <x-table.th class="min-w-[300px]">Producto</x-table.th>
                <x-table.th class="min-w-[150px]">Tipo</x-table.th>
                <x-table.th class="text-center">Cambio</x-table.th>
                <x-table.th class="text-center">Stock</x-table.th>
                <x-table.th class="min-w-[250px]">Detalles / Observación</x-table.th>
            </tr>
        </x-table.thead>
        <x-table.tbody>
            @php \Carbon\Carbon::setLocale('es'); @endphp
            @forelse($historial as $item)
                <x-table.tr :index="$loop->index">
                    <x-table.td class="whitespace-nowrap">
                        <div class="text-sm font-bold text-slate-700 dark:text-slate-200 capitalize">
                            {{ $item->fecha_movimiento ? $item->fecha_movimiento->translatedFormat('d M Y') : ($item->created_at ? $item->created_at->translatedFormat('d M Y') : 'N/A') }}
                        </div>
                        <div class="text-xs text-slate-400 font-mono">
                            {{ $item->fecha_movimiento ? $item->fecha_movimiento->format('h:i A') : ($item->created_at ? $item->created_at->format('h:i A') : '00:00') }}
                        </div>
                    </x-table.td>
                    <x-table.td>
                        <div class="flex items-center gap-2">
                            <div
                                class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-xs font-bold text-slate-600 dark:text-slate-300">
                                {{ substr($item->usuario->nombre ?? ($item->usuario->name ?? 'S'), 0, 1) }}
                            </div>
                            <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
                                {{ $item->usuario->nombre ?? ($item->usuario->name ?? 'Sistema') }}
                            </span>
                        </div>
                    </x-table.td>
                    <x-table.td>
                        @if($item->producto)
                            <div class="flex items-center gap-3">
                                <div class="text-2xl">{{ $item->producto->icono }}</div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800 dark:text-slate-200">
                                        {{ $item->producto->nombre }}
                                    </div>
                                    <div class="text-xs text-slate-400 font-mono">{{ $item->producto->codigo }}</div>
                                </div>
                            </div>
                        @else
                            <span class="italic text-slate-400">Producto Eliminado</span>
                        @endif
                    </x-table.td>
                    <x-table.td>
                        @php
                            $badges = [
                                'carga_inicial' => 'bg-green-100 text-green-800 border-green-200',
                                'ajuste_rapido' => 'bg-blue-100 text-blue-800 border-blue-200',
                                'ajuste_auditoria' => 'bg-purple-100 text-purple-800 border-purple-200',
                                'merma' => 'bg-red-100 text-red-800 border-red-200',
                                'devolucion' => 'bg-teal-100 text-teal-800 border-teal-200'
                            ];
                            $label = $tipos[$item->tipo_movimiento] ?? $item->tipo_movimiento;
                            $class = $badges[$item->tipo_movimiento] ?? 'bg-slate-100 text-slate-800 border-slate-200';
                        @endphp
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold border {{ $class }}">
                            {{ $label }}
                        </span>
                    </x-table.td>
                    <x-table.td class="text-center font-bold">
                        @if($item->cantidad > 0)
                            <span class="text-green-600 font-bold bg-green-50 px-2 py-1 rounded-md border border-green-100 text-sm">
                                +{{ $item->cantidad }}
                            </span>
                        @elseif($item->cantidad < 0)
                            <span class="text-red-500 font-bold bg-red-50 px-2 py-1 rounded-md border border-red-100 text-sm">
                                {{ $item->cantidad }}
                            </span>
                        @else
                            <span class="text-slate-400 font-bold">-</span>
                        @endif
                    </x-table.td>
                    <x-table.td class="text-center">
                        <div class="flex items-center justify-center gap-2 text-sm">
                            <span class="text-slate-400 line-through text-xs">{{ $item->stock_anterior }}</span>
                            <svg class="w-3 h-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                            <span class="font-bold text-slate-800 dark:text-white">{{ $item->stock_nuevo }}</span>
                        </div>
                    </x-table.td>
                    <x-table.td>
                        <div class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-xs">
                            {{ $item->observacion }}
                        </div>
                    </x-table.td>
                </x-table.tr>
            @empty
                <x-table.tr>
                    <x-table.td colspan="7" class="text-center text-slate-400 dark:text-slate-500 italic py-12">
                        No se encontraron registros en el historial con los filtros actuales.
                    </x-table.td>
                </x-table.tr>
            @endforelse
        </x-table.tbody>
    </x-table>

    <!-- Paginación -->
    @if($historial->hasPages())
        <div class="mt-6">
            {{ $historial->links() }}
        </div>
    @endif
@endsection