@use(Illuminate\Support\Number)
<div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(2,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">

        <label class="form-control">
            <div class="label">
                <span class="label-text">Total</span>
            </div>
            <input type="number" class="input input-bordered" wire:model="valor"/>
        </label>

        <label class="form-control">
            <div class="label">
                <span class="label-text">Descripción</span>
            </div>
            <input class="input input-bordered" wire:model="descripcion"/>
        </label>

        <button class="btn" type="submit">
            @if($this->currentCalculo)
                <x-icons.device-floppy/>
                Guardar
            @else
                <x-icons.plus/>
                Agregar
            @endif
        </button>

        <p class="text-sm font-medium text-red-500">
            @error('valor'){{$message}}@enderror
        </p>
        <p class="text-sm font-medium text-red-500">
            @error('descripcion'){{$message}}@enderror
        </p>

    </form>

    <div class="overflox-x-auto">
        <table class="table">
            <thead>
            <tr>
                <th>Total</th>
                <th>Descripción</th>
                <th class="text-end">Acciones</th>
            </tr>
            </thead>
            <tbody>
            @foreach($this->rows as $row)
                <tr>
                    <td>{{Number::currency($row->valor)}}</td>
                    <td>{{$row->descripcion}}</td>
                    <td class="w-0 whitespace-nowrap">
                        <button class="btn btn-circle btn-sm" wire:click="edit('{{$row->id}}')">
                            <x-icons.edit class="w-5 h-5"/>
                        </button>
                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
                            <x-icons.trash class="w-5 h-5"/>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-4 grid lg:grid-cols-3 gap-4">
        <label class="form-control">
            <div class="label">
                <span class="label-text">Fondo</span>
            </div>
            <input type="number" class="input input-bordered" wire:model.live="fondo"/>
        </label>

        <label class="form-control">
            <div class="label">
                <span class="label-text">Suma de Dinero</span>
            </div>
            <input class="input input-bordered bg-neutral-content" value="{{Number::currency($this->totalCalculo)}}"
                   readonly/>
        </label>
        <label class="form-control">
            <div class="label">
                <span class="label-text">Deposito</span>
            </div>
            <input class="input input-bordered bg-neutral-content"
                   value="{{Number::currency($this->totalCalculo - (is_numeric($fondo) ? $fondo : 0))}}" readonly/>
        </label>
    </div>
</div>