@use(Illuminate\Support\Number)
<div>
    <div class="flex gap-2 justify-between items-baseline">
        <x-title>
            {{$this->turno ? "Editar caja" : "Registrar Caja"}}
        </x-title>

        <x-button icon="arrow-left" color="secondary" href="{{route('cajas.index')}}">
            Volver
        </x-button>
    </div>

    <div class="flex gap-8 mb-4">
        <div>
            <x-label>Fecha</x-label>
            <p class="font-bold text-secondary">{{$turno->fecha->format('d-m-Y')}}</p>
        </div>
        <div>
            <x-label>Fecha</x-label>
            <p class="font-bold text-secondary">{{$turno->numero_caja}}</p>
        </div>
        <div>
            <x-label>Turno</x-label>
            <p class="font-bold text-secondary">{{$turno->numero_turno}}</p>
        </div>
    </div>

    <div class="grid grid-cols-[minmax(0,4fr)_minmax(0,1fr)] gap-4 items-start">
        <x-tab wire:model="tab">
            <x-tab.items tab="Ingresos">
                <x-slot:left>
                    <x-icon name="plus" class="w-4 h-4"/>
                </x-slot:left>
                <livewire:cajas.components.ingresos-component :turno="$turno"/>
            </x-tab.items>
            <x-tab.items tab="Egresos">
                <x-slot:left>
                    <x-icon name="minus" class="w-4 h-4"/>
                </x-slot:left>
                <livewire:cajas.components.egresos-component :turno="$turno"/>
            </x-tab.items>
            <x-tab.items tab="Documentos">
                <x-slot:left>
                    <x-icon name="credit-card" class="w-4 h-4"/>
                </x-slot:left>
                <livewire:cajas.components.documentos-component :turno="$turno"/>
            </x-tab.items>
            <x-tab.items tab="Calculo de Fondo">
                <x-slot:left>
                    <x-icon name="plus-minus" class="w-4 h-4"/>
                </x-slot:left>
                <livewire:cajas.components.calculo-fondo-component :turno="$turno"/>
            </x-tab.items>
            <x-tab.items tab="Efectivo">
                <x-slot:left>
                    <x-icon name="currency-dollar" class="w-4 h-4"/>
                </x-slot:left>
                <livewire:cajas.components.efectivo-component :turno="$turno"/>
            </x-tab.items>
        </x-tab>

        <x-card class="space-y-4">
            <x-input label="Total Efectivo" value="{{Number::currency($this->totalEfectivo)}}" readonly/>
            <x-input label="Total Egresos" value="{{Number::currency($this->totalEgresos)}}" readonly/>
            <x-input label="Total Documento" value="{{Number::currency($this->totalDocumentos)}}" readonly/>
            <hr class="border-b-1 my-4"/>
            <x-input label="Rendido" value="{{Number::currency($this->rendido)}}" readonly/>
            <x-input label="Debe Rendir" value="{{Number::currency($this->debeRendir)}}" readonly/>
            <x-input label="Diferencia" class="font-bold {{$this->diferencia < 0 ? 'text-red-500' : 'text-green-500'}}"
                     value="{{Number::currency($this->diferencia)}}" readonly/>
        </x-card>
    </div>
</div>