@use(Illuminate\Support\Number)
<div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(4,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
        <label class="form-control">
            <div class="label">
                <span class="label-text">Tipo Documento</span>
            </div>
            <select class="select select-bordered" required wire:model="tipo">
                @foreach($this->tipos as $tipo)
                    <option>{{$tipo}}</option>
                @endforeach
            </select>
        </label>
        <label class="form-control">
            <div class="label">
                <span class="label-text">Nº Documento</span>
            </div>
            <input class="input input-bordered" wire:model="numero"/>
        </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>
        <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>

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

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

    </form>

    <div class="overflox-x-auto">
        <table class="table">
            <thead>
            <tr>
                <th>Tipo Egreso</th>
                <th>Número Documento</th>
                <th>Descripción</th>
                <th>Total</th>
                <th class="text-end">Acciones</th>
            </tr>
            </thead>
            <tbody>
            @foreach($this->rows as $row)
                <tr>
                    <td>{{$row->tipo_egreso}}</td>
                    <td>{{$row->numero}}</td>
                    <td>{{$row->descripcion}}</td>
                    <td>{{Number::currency($row->valor)}}</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">
        <p class="text-xl">Egresos Totales: <span class="font-bold">{{$this->totalEgresos}}</span></p>
    </div>
</div>