@use(Illuminate\Support\Number)
<div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(3,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
        <x-select.styled label="Tipo Documento" :options="$this->tipos" wire:model="tipo" id="tipo" required
                         searchable invalidate/>
        <x-input label="Descripción" wire:model="descripcion" invalidate/>
        <x-input label="Total" wire:model="valor" invalidate/>

        <x-button type="submit">
            @if($this->currentDocumento)
                Guardar
            @else
                Agregar
            @endif
        </x-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('descripcion'){{$message}}@enderror
        </p>
        <p class="text-sm font-medium text-red-500">
            @error('valor'){{$message}}@enderror
        </p>

    </form>
    <x-table striped :headers="$this->headers" :rows="$this->rows">
        @interact('column_valor', $row)
        {{Number::currency($row->valor)}}
        @endinteract
        @interact('column_action', $row)
        <x-button.circle icon="edit" wire:click="edit('{{$row->id}}')" :key="uniqid()"/>
        <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
        @endinteract
    </x-table>

    <div class="mt-4">
        <p class="text-xl">Documentos Totales: <span class="font-bold">{{$this->totalDocumentos}}</span></p>
    </div>
</div>