@use(Illuminate\Support\Number)
<div>

    <div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4">
        <x-title>Cajas</x-title>
        <x-button wire:click="createTurno" icon="plus">Registrar Caja</x-button>
    </div>

    <div class="flex">
        <x-date label="Fecha" wire:model.live="searchFecha" helpers/>
    </div>

    <div class="mt-4">
        <x-table striped :headers="$this->headers" :rows="$this->rows" paginate>
            @interact('column_fecha', $row)
            {{$row->fecha->format('d-m-Y')}}
            @endinteract
            @interact('column_ingresos', $row)
            {{Number::currency($row->ingresos()->sum('total'))}}
            @endinteract
            @interact('column_egresos', $row)
            {{Number::currency($row->egresos()->sum('valor'))}}
            @endinteract
            @interact('column_arqueo', $row)
            <span class="font-bold {{$row->arqueo >= 0 ? 'text-green-500' : 'text-red-500'}}">
                {{Number::currency($row->arqueo)}}
            </span>
            @endinteract
            @interact('column_action', $row)
            <x-button sm :href="route('cajas.edit', $row->id)" wire:navigate :key="uniqid()">
                Editar
            </x-button>
            <x-button sm color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()">
                Eliminar
            </x-button>
            @endinteract
        </x-table>
    </div>

    <x-modal title="Registrar Caja" wire center blur>
        <div class="flex flex-col gap-2">
            <x-date label="Fecha" wire:model="fecha" format="DD-MM-YYYY"/>
            <x-input type="number" label="Caja" wire:model="caja"/>
            <x-input type="number" label="Turno" wire:model="turno"/>
        </div>
        <x-slot:footer>
            <x-button color="secondary" icon="arrow-left" wire:click="closeTurnoModal">Volver</x-button>
            <x-button icon="plus" wire:click="storeTurno">Registrar Caja</x-button>
        </x-slot:footer>
    </x-modal>
</div>