@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>
        <button class="btn" wire:click="createTurno" icon="plus">Registrar Caja</button>
    </div>

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

    <div class="overflox-x-auto">
        <table class="table">
            <thead>
            <tr>
                <th>Fecha</th>
                <th>Caja</th>
                <th>Turno</th>
                <th>Ingresos</th>
                <th>Egresos</th>
                <th>Arqueo</th>
                <th class="text-end">Acciones</th>
            </tr>
            </thead>
            <tbody>
            @foreach($this->rows as $row)
                <tr>
                    <td>{{$row->fecha->format('d-m-Y')}}</td>
                    <td>{{$row->numero_caja}}</td>
                    <td>{{$row->numero_turno}}</td>
                    <td>{{Number::currency($row->ingresos()->sum('total'))}}</td>
                    <td>{{Number::currency($row->egresos()->sum('valor'))}}</td>
                    <td class="{{$row->arqueo >= 0 ? 'text-green-500' : 'text-red-500'}}">{{Number::currency($row->arqueo)}}</td>
                    <td class="w-0 whitespace-nowrap">
                        <a class="btn btn-circle btn-sm" wire:navigate href="{{route('cajas.edit', $row->id)}}">
                            <i class="ti ti-edit"></i>
                        </a>
                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
                            <i class="ti ti-trash"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </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>