@php
    /* Configuracion de input rango de fechas */
    $config = [
        'mode' => 'range',
        'locale' => 'es',
        'altFormat' => 'd/m/Y',
    ];
@endphp
<div>
    <div class="mb-3">
        <div class="lg:flex lg:justify-between py-3">
            <div class="text-xl font-semibold text-base-content">
                Kardex del producto
                - <span class="text-secondary font-bold">{{ $producto->nombre }}</span>
                - <span class="text-primary">Codigo: <strong>{{ $producto->codigo }}</strong>
                </span>
            </div>
        </div>
        <div class="flex flex-wrap justify-between items-center gap-4">
            <!-- Contenedor de los botones -->
            <div class="flex flex-wrap gap-2 max-sm:grid max-sm:grid-cols-2 max-sm:w-full">
                <x-button label="Nuevo Ingreso" icon='o-folder-plus'
                    class="btn-primary btn-sm w-full sm:w-auto h-full sm:h-8"
                    @click="$wire.dispatch('abrir-modal-sucursal')" />
                <x-button label="Exportar" icon='o-arrow-up-tray'
                    class="btn-outline btn-sm w-full sm:w-auto h-full sm:h-8" disabled />
                <x-button label="Imprimir" icon='o-printer'
                    class="btn-sm btn-outline hover:bg-primary hover:text-base-100 group" tooltip="Imprimir"
                    wire:click="reporteKardex">
                </x-button>
            </div>
            <!-- Input del buscador -->
            <div class="w-full sm:w-auto max-sm:mt-2">
                <x-input icon="o-magnifying-glass" wire:model.live.debounce.500ms="search" label="Buscar registro..."
                    inline autocomplete="off" placeholder="Buscar registro" />
            </div>
        </div>
    </div>
    <div class="shadow-xl border border-base-300">
        <div x-data="{ showFilters: false }" class="p-4 bg-base-100 shadow-md rounded-md mb-2">
            <x-button @click="showFilters = !showFilters" class="btn btn-xs btn-outline" label='Filtros'
                icon='o-funnel' />
            <div x-show="showFilters" class="mt-4" x-transition>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div class="date-sm flex justify-between gap-2">
                        <x-datepicker class="input-sm" placeholder='Fecha' wire:model="fecha_creacion" icon="o-calendar"
                            :config="$config" />
                        <x-button icon='o-check' class="btn btn-sm btn-primary" wire:click='rangoFechaFiltro'
                            tooltip='Aplicar Filtro' />
                    </div>
                </div>
            </div>
        </div>

        <x-kardex-table :headers="$headers" :rows="$kardex" :sort-by="$sortBy" with-pagination per-page="perPage"
            :per-page-values="[10, 25, 50, 100]" striped>


            @scope('cell_created_at', $kardex)
                {{-- Fecha --}}
                <div class="tooltip" data-tip='{{ $kardex->created_at->format('H:i') }}'>
                    {{ $kardex->created_at->format('d/m/Y') }}
                </div>
            @endscope
            @scope('cell_costo_producto', $kardex)
                {{-- Entradas --}}
                <div class="flex gap-3 items-center {{ $kardex->entradas > 0 ? 'justify-end' : 'justify-end' }}">
                    @if ($kardex->entradas > 0)
                        <x-icon name="o-arrow-up" class="text-success" />
                    @endif
                    {{ $kardex->entradas }}
                </div>
            @endscope
            @scope('cell_entradas', $kardex)
                {{-- Salidas --}}
                <div class="flex gap-3 items-center {{ $kardex->salidas > 0 ? 'justify-end' : 'justify-end' }}">
                    @if ($kardex->salidas > 0)
                        <x-icon name="o-arrow-down" class="text-error" />
                    @endif
                    {{ $kardex->salidas }}
                </div>
            @endscope

            @scope('cell_salidas', $kardex)
                {{-- Saldo Stock --}}
                <div class="flex justify-end">
                    {{ $kardex->saldo_stock }}
                </div>
            @endscope

            @scope('cell_saldo_stock', $kardex)
                {{-- Costo --}}
                <div class="flex justify-end">
                    {{ $kardex->costo_producto }}
                </div>
            @endscope

            @scope('cell_debe', $kardex)
                {{-- Debe --}}
                <div class="flex justify-end">
                    {{ $kardex->debe }}
                </div>
            @endscope

            @scope('cell_haber', $kardex)
                {{-- Haber --}}
                <div class="flex justify-end">
                    {{ $kardex->haber }}
                </div>
            @endscope
            @scope('cell_saldo_valorado', $kardex)
                {{-- Saldo Valorado --}}
                <div class="flex justify-end">
                    {{ $kardex->saldo_valorado }}
                </div>
            @endscope

            <x-slot:stock>
                <div>
                    {{ $stock_total }}
                </div>
            </x-slot:stock>
            <x-slot:costo>
                <div>
                    {{ $producto->costo_actual }}
                </div>
            </x-slot:costo>
            <x-slot:saldo>
                <div>
                    {{ $saldoValorado }}
                </div>
            </x-slot:saldo>
            {{-- Para cuando la tabla esta vacia --}}
            <x-slot:empty>
                <x-icon name="o-cube" label="No se encontraron registros." />
            </x-slot:empty>
        </x-kardex-table>



    </div>

    <div class="shadow-xl border border-base-300 mt-5 p-3">
        <p><strong>Stock total:</strong> {{ $stock_total }}</p>
        <p><strong>Reservado:</strong>
            {{ $stock_reservado }}</p>
        <p><strong>Disponible:</strong> {{ $stock_disponible }}</p>
    </div>
    {{-- Para ver el reporte pdf de los movimientos --}}
    <x-custom-modal wire:model="modalPdf" class="backdrop-blur overflow-hidden"
        box-class="xl:w-[1430px] xl:max-w-[1430px] 
        md:w-[1100px] md:max-w-[1100px] max-h-[90dvh] h-[90dvh]"
        @close="$wire.cerrarModal()">
        @if ($modalPdf)
            <div class="h-full relative" x-data="{ isLoading: true }">
                <!-- Indicador de carga -->
                <div x-show="isLoading"
                    class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-50 z-50">
                    Cargando, por favor espere...
                </div>
                <!-- Contenido del iframe -->
                <iframe
                    src="{{ route('reportes.kardex', $producto->id) . '?' . http_build_query(['fecha_creacion' => json_encode($fecha_creacion), ]) }}"
                    frameborder="0" class="w-full h-full" x-on:load="isLoading = false">
                </iframe>
            </div>
        @endif
    </x-custom-modal>
</div>