176 lines
12 KiB
PHP
Executable File
176 lines
12 KiB
PHP
Executable File
<div x-data="{
|
|
nuevaCategoria: @entangle('nuevaCategoria'),
|
|
editarCategoria: @entangle('editarCategoria')
|
|
}" class="h-full w-full md:my-2 ">
|
|
<div class=" fixed backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading wire:target="create,delete,update,editar">
|
|
<div class="grid h-full place-items-center ">
|
|
<div class="max-w-xs">
|
|
<img src="./img/loading.gif" alt="" class="w-full text-center" >
|
|
<p class="text-gray-500 text-center">Cargando..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#f5f5f5] md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem] relative mb-4">
|
|
<div class="flex justify-between my-2 items-center">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex text-sm">
|
|
<x-icon-arrow-right/>
|
|
Categorias
|
|
</div>
|
|
<a x-on:click="nuevaCategoria=true" class="flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]"><p class="text-sm md:text-base">Nueva categoria</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="w-[0.87rem] ml-2">
|
|
<path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192 c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z" fill="#ffffff"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-2">
|
|
<h1 class="text-center text-lg sm:mb-4">Categorias</h1>
|
|
<div class="py-2">
|
|
{{------Tabla de categorias -----}}
|
|
<table class="text-center rounded-lg shadow-lg m-auto mt-4 mb-4 bg-white md:max-w-xl">
|
|
<thead class="font-normal bg-[#000029] text-white h-9 pr-4 sm:pr-2">
|
|
<tr class="text-left">
|
|
<th class="rounded-l-lg font-normal w-1/3 sm:w-1/5 pl-[1rem] md:pl-[2rem]">Imagen</th>
|
|
<th class="font-normal sm:w-1/5 sm:pl-[2rem]">Nombre</th>
|
|
<th class="font-normal sm:w-1/5 sm:pl-[2rem]">Descripcion</th>
|
|
<th class="rounded-r-lg font-normal pr-[1rem] pl-[1rem] sm:pr-[2rem] sm:pl-[2rem] w-1/3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-500 select-none pr-4 sm:pr-2">
|
|
@foreach($categorias as $categoria)
|
|
<tr class="border-gray-200 text-left w-full sm:pl-4 " x-data="{openOption:false}">
|
|
<td class="sm:pl-[2rem] w-full py-2">
|
|
<img src="{{asset($categoria->imagen)}}" class=" w-24 sm:w-28 m-auto rounded-lg object-cover h-12 sm:h-14 object-center shadow" alt="">
|
|
</td>
|
|
<td class="sm:pl-[2rem]">
|
|
{{$categoria->nombre}}
|
|
</td>
|
|
<td class="sm:pl-[2rem] text-ellipsis">
|
|
{{$categoria->descripcion}}
|
|
</td>
|
|
<td class="md:pl-[2rem] md:pr-[2rem]">
|
|
<button x-on:click="openOption=!openOption">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div x-cloak x-show="openOption" @click.away="openOption = false" class="right-0 sm:right-auto absolute bg-white text-center w-[8rem] rounded-[1rem] border-b border-gray-200 shadow-lg">
|
|
<button x-on:click="openOption=false,editarCategoria = true" wire:click="editar({{$categoria->id}})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Editar</button>
|
|
<button x-on:click="openOption=false" wire:click="delete({{$categoria->id}})" class="text-white w-full py-1 bg-[#ff5050] rounded-b-[1rem] hover:bg-[#fd2828] hover:rounded-b-[1rem]">Eliminar</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal agregar categoria --}}
|
|
<div x-cloak x-show="nuevaCategoria"
|
|
x-transition:enter="transition duration-350"
|
|
x-transition:enter-start="opacity-0 scale-100"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition duration-350"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-100" class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
|
|
<div class="grid h-full place-items-center ">
|
|
<form>
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
|
|
<div class="mb-4 grid grid-cols-2 items-center justify-items-center">
|
|
<div>
|
|
<label for="imagen" class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir img</label>
|
|
<input type="file" id="imagen" wire:model="photo" class="hidden">
|
|
</div>
|
|
|
|
<div>
|
|
@if ($photo)
|
|
<img src="{{ $photo->temporaryUrl() }}" alt="" class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@else
|
|
<div class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20"></div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre" wire:model="nombre" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('nombre') <span class="text-red-400 text-sm ">Requerido*</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion" class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion" wire:model="descripcion" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
|
|
</div>
|
|
|
|
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
|
|
<span>
|
|
<button wire:click="create" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
|
|
</span>
|
|
<span>
|
|
<button x-on:click="nuevaCategoria=false" wire:click="limpiarInputCategoria" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal editar categoria --}}
|
|
<div x-cloak x-show="editarCategoria"
|
|
x-transition:enter="transition duration-350"
|
|
x-transition:enter-start="opacity-0 scale-100"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition duration-350"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-100" class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
|
|
<div class="grid h-full place-items-center ">
|
|
<form>
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
|
|
<div class="mb-4 grid grid-cols-2 items-center justify-items-center">
|
|
<div>
|
|
<label for="imagen" class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir img</label>
|
|
<input type="file" id="imagen" wire:model="photo" class="hidden">
|
|
</div>
|
|
|
|
<div>
|
|
@if ($photo)
|
|
<img src="{{ $photo->temporaryUrl() }}" alt="" class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@else
|
|
<img src="{{$img}}" alt="" class="rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre" wire:model="nombre" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('nombre') <span class="text-red-400 text-sm ">Requerido*</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion" class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion" wire:model="descripcion" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
|
|
</div>
|
|
|
|
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
|
|
<span>
|
|
<button wire:click="update" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
|
|
</span>
|
|
<span>
|
|
<button x-on:click="editarCategoria=false" wire:click="limpiarInputCategoria" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|