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

        <button class="btn" wire:navigate href="{{route('cajas.index')}}">
            <x-icons.arrow-left/>
            Volver
        </button>
    </div>

    <div class="flex gap-8 mb-4">
        <div>
            <p>Fecha</p>
            <p class="font-bold">{{$turno->fecha->format('d-m-Y')}}</p>
        </div>
        <div>
            <p>Caja</p>
            <p class="font-bold">{{$turno->numero_caja}}</p>
        </div>
        <div>
            <p>Turno</p>
            <p class="font-bold">{{$turno->numero_turno}}</p>
        </div>
    </div>
    <div class="grid grid-cols-[minmax(0,4fr)_minmax(0,1fr)] gap-4 items-start">
        <div x-data="{tab: @entangle('tab').live}">
            <div role="tablist" class="tabs tabs-lifted">
                <button role="tab" class="tab gap-2"
                        :class="tab === 'Ingresos' ? 'tab-active' : ''"
                        @click="tab = 'Ingresos'">
                    <x-icons.plus class="w-5 h-5"/>
                    Ingresos
                </button>
                <button role="tab" class="tab gap-2"
                        :class="tab === 'Egresos' ? 'tab-active' : ''"
                        @click="tab = 'Egresos'">
                    <x-icons.minus class="w-5 h-5"/>
                    Egresos
                </button>
                <button role="tab" class="tab gap-2"
                        :class="tab === 'Documentos' ? 'tab-active' : ''"
                        @click="tab = 'Documentos'">
                    <x-icons.credit-card class="w-5 h-5"/>
                    Documentos
                </button>
                <button role="tab" class="tab gap-2"
                        :class="tab === 'Calculo de Fondo' ? 'tab-active' : ''"
                        @click="tab = 'Calculo de Fondo'">
                    <x-icons.plus-minus class="w-5 h-5"/>
                    Calculo de Fondo
                </button>
                <button role="tab" class="tab gap-2"
                        :class="tab === 'Efectivo' ? 'tab-active' : ''"
                        @click="tab = 'Efectivo'">
                    <x-icons.currency-dollar class="w-5 h-5"/>
                    Efectivo
                </button>
            </div>
            <div class="border border-base-300 border-t-0">
                <div x-show="tab === 'Ingresos'" x-cloak class="p-4">
                    <livewire:cajas.components.ingresos-component :turno="$turno"/>
                </div>
                <div x-show="tab === 'Egresos'" x-cloak class="p-4">
                    <livewire:cajas.components.egresos-component :turno="$turno"/>
                </div>
                <div x-show="tab === 'Documentos'" x-cloak class="p-4">
                    <livewire:cajas.components.documentos-component :turno="$turno"/>
                </div>
                <div x-show="tab === 'Calculo de Fondo'" x-cloak class="p-4">
                    <livewire:cajas.components.calculo-fondo-component :turno="$turno"/>
                </div>
                <div x-show="tab === 'Efectivo'" x-cloak class="p-4">
                    <livewire:cajas.components.efectivo-component :turno="$turno"/>
                </div>
            </div>
        </div>

        <div class="space-y-4">
            <label class="form-control">
                <div class="label">
                    <span class="label-text">Total Efectivo</span>
                </div>
                <input type="text" class="input input-bordered bg-neutral-content"
                       value="{{Number::currency($this->totalEfectivo)}}"
                       readonly>
            </label>
            <label class="form-control">
                <div class="label">
                    <span class="label-text">Total Egresos</span>
                </div>
                <input type="text" class="input input-bordered bg-neutral-content"
                       value="{{Number::currency($this->totalEgresos)}}"
                       readonly>
            </label>
            <label class="form-control">
                <div class="label">
                    <span class="label-text">Total Documentos</span>
                </div>
                <input type="text" class="input input-bordered bg-neutral-content"
                       value="{{Number::currency($this->totalDocumentos)}}"
                       readonly>
            </label>

            <div class="divider"></div>

            <label class="form-control">
                <div class="label">
                    <span class="label-text">Rendido</span>
                </div>
                <input type="text" class="input input-bordered bg-neutral-content"
                       value="{{Number::currency($this->rendido)}}"
                       readonly>
            </label>
            <label class="form-control">
                <div class="label">
                    <span class="label-text">Debe Rendir</span>
                </div>
                <input type="text" class="input input-bordered bg-neutral-content"
                       value="{{Number::currency($this->debeRendir)}}"
                       readonly>
            </label>
            <label class="form-control">
                <div class="label">
                    <span class="label-text">Diferencia</span>
                </div>
                <input type="text"
                       class="input input-bordered bg-neutral-content {{$this->diferencia < 0 ? 'text-red-500' : 'text-green-500'}}"
                       value="{{Number::currency($this->diferencia)}}"
                       readonly>
            </label>
        </div>
    </div>
</div>