549 lines
35 KiB
PHP
549 lines
35 KiB
PHP
<div x-data="{
|
|
serviciosModal: @entangle('serviciosModal'),
|
|
serviciosEditar: @entangle('serviciosEditar'),
|
|
tiempo: @entangle('tiempo'),
|
|
ver_url: @entangle('ver_url')
|
|
}" 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="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=" fixed backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading
|
|
wire:target="desactivar">
|
|
<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">Desactivando servicio..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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="eliminar">
|
|
<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">Eliminando servicio..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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="guardar">
|
|
<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">Actulizando servicio..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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="createServicio">
|
|
<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">Creando servicio..</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">
|
|
<svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0"
|
|
viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
|
<g>
|
|
<path
|
|
d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z"
|
|
fill="#b221fd" data-original="#000000" />
|
|
</g>
|
|
</svg>
|
|
Planes
|
|
</div>
|
|
<a x-on:click="serviciosModal = 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">Nuevo servicio </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">Servicios</h1>
|
|
<div class="py-2">
|
|
<table class="text-center rounded-lg shadow-lg m-auto mt-4 mb-4 bg-white md:w-10/12">
|
|
<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/12 pr-[1rem] md:pl-[2rem]">Logo</th>
|
|
<th class="font-normal w-1/12 sm:pr-[2rem] hidden sm:table-cell">ID</th>
|
|
<th class="font-normal w-1/12 sm:pr-[2rem] hidden sm:table-cell">Nombre</th>
|
|
<th class="font-normal w-1/12 sm:pr-[2rem] hidden sm:table-cell">Pantallas</th>
|
|
<th class="font-normal w-1/12 sm:pr-[2rem] hidden sm:table-cell">Completas</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Estado</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Solo por tiempo</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Mostrar perfiles</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Contraseña de perfiles</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">URL</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Renovación</th>
|
|
<th class="font-normal w-1/12 pl-[1rem] sm:pr-[2rem]">Precio</th>
|
|
<th class="rounded-r-lg font-normal pr-[1rem] pl-[1rem] sm:pr-[2rem] sm:pl-[2rem] w-1/11">
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-500 select-none pr-4 sm:pr-2">
|
|
@foreach ($servicios as $servicio)
|
|
<tr class="border-gray-200 text-left w-full sm:pl-4 hover:bg-gray-200 hover:ring-gray-500"
|
|
x-data="{ openOption: false }">
|
|
<td class="sm:pl-[2rem] w-full py-2">
|
|
<img src="{{ asset($servicio->img) }}"
|
|
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:pr-[2rem] hidden sm:table-cell">
|
|
{{ $servicio->id }}
|
|
</td>
|
|
<td class="sm:pr-[2rem] hidden sm:table-cell">
|
|
{{ $servicio->nombre }}
|
|
</td>
|
|
<td class="sm:pr-[2rem] hidden sm:table-cell">
|
|
{{ $servicio->pantallas }}
|
|
</td>
|
|
<td class="sm:pr-[2rem] hidden sm:table-cell">
|
|
{{ $servicio->completa }}
|
|
</td>
|
|
<td class=" pr-[1rem] sm:pl-[2rem]">
|
|
{{ $servicio->estado }}
|
|
</td>
|
|
<td class=" pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
@if ($servicio->por_tiempo)
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
@endif
|
|
</td>
|
|
<td class="pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
@if ($servicio->ver_perfiles)
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
@endif
|
|
</td>
|
|
<td class="pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
@if ($servicio->perfiles)
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
@endif
|
|
</td>
|
|
<td class="pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
{{ $servicio->url ?? '' }}
|
|
|
|
</td>
|
|
<td class="pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
|
|
@if ($servicio->renovacion)
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
@endif
|
|
|
|
</td>
|
|
<td class="pl-[1rem] sm:pl-[2rem] text-center border-x">
|
|
{{ $servicio->precio ?? '' }}
|
|
|
|
</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,serviciosEditar=true"
|
|
wire:click="editar({{ $servicio->id }})"
|
|
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Editar</button>
|
|
@if ($servicio->estado != 'activo')
|
|
<button x-on:click="openOption=false"
|
|
wire:click="activar({{ $servicio->id }})"
|
|
class="hover:fill-white fill-gray-500 flex justify-center items-center gap-2 text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">Activar</button>
|
|
@else
|
|
<button x-on:click="openOption=false"
|
|
wire:click="desactivar({{ $servicio->id }})"
|
|
class="hover:fill-white fill-gray-500 flex justify-center items-center gap-2 text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">Desactivar</button>
|
|
@endif
|
|
<button x-on:click="openOption=false"
|
|
wire:click="eliminar({{ $servicio->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 servicios --}}
|
|
<div x-cloak x-show="serviciosModal" 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 backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-20">
|
|
<div class="grid h-full place-items-center overflow-y-auto ">
|
|
<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_servicios"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir
|
|
img</label>
|
|
<input type="file" name="imagen_servicios" id="imagen_servicios" 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 grid grid-cols-2 items-center justify-items-center">
|
|
<div>
|
|
<label for="imagen_inicio_servicios"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Img
|
|
inicio
|
|
</label>
|
|
<input type="file" name="imagen_inicio_servicios" id="imagen_inicio_servicios"
|
|
wire:model="photo_inicio" class="hidden">
|
|
</div>
|
|
|
|
<div>
|
|
@if ($photo_inicio)
|
|
<img src="{{ $photo_inicio->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_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_servicio" wire:model="nombre_servicio"
|
|
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_servicio')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="precio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Precio:</label>
|
|
<input type="tel" id="precio" wire:model="precio"
|
|
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('precio')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="my-2 border-y">
|
|
<label for="perfiles" class=" text-gray-700 text-sm font-bold mb-2 ">Mostrar perfiles</label>
|
|
<input type="checkbox" name="perfiles" id="perfiles" wire:model="perfiles">
|
|
<label for="password" class=" text-gray-700 text-sm font-bold mb-2 ">¿Contraseña?</label>
|
|
<input type="checkbox" name="password" id="password" wire:model="password">
|
|
|
|
</div>
|
|
|
|
<div class="my-2 border-y">
|
|
<label for="solo_tiempo" class=" text-gray-700 text-sm font-bold mb-2 ">Solo por
|
|
tiempo</label>
|
|
<input type="checkbox" name="solo_tiempo" id="solo_tiempo" wire:model="tiempo">
|
|
<label for="renovacion" class=" text-gray-700 text-sm font-bold mb-2 ">Renovación</label>
|
|
<input type="checkbox" name="renovacion" id="renovacion" wire:model="renovacion">
|
|
</div>
|
|
|
|
<div x-transition x-show="!tiempo">
|
|
|
|
<div class="mb-4">
|
|
<label for="pantallas"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
|
|
<input type="text" id="pantallas" wire:model="pantallas"
|
|
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('pantallas')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="pantallas"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Completa:</label>
|
|
<input type="text" id="pantallas" wire:model="completa"
|
|
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('completa')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-2 border-y">
|
|
<label for="ver_url" class=" text-gray-700 text-sm font-bold mb-2 ">URL</label>
|
|
<input type="checkbox" name="ver_url" id="ver_url" wire:model="ver_url">
|
|
<div x-transition x-show="ver_url">
|
|
<input type="text" id="url" placeholder="url" wire:model="url"
|
|
class="my-2 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">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion_servicio" wire:model="descripcion_servicio"
|
|
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="mb-4">
|
|
<select name="estado" id="estado" wire:model.debounce.500ms="estado_servicio"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-[72%] sm:w-60 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Estado</option>
|
|
<option value="activo">Activo</option>
|
|
<option value="inactivo">Inactivo</option>
|
|
</select>
|
|
@error('estado_servicio')
|
|
<div class="text-red-400 text-sm">Requerido*</div>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="mb-4">
|
|
<label for="mensaje_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Mensaje:</label>
|
|
<textarea type="text" id="mensaje_servicio" wire:model.defer="mensaje_servicio"
|
|
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="mb-4 grid grid-cols-2 items-center">
|
|
<label for="color_servicio" class="text-gray-700 text-sm font-bold">Color fondo:</label>
|
|
<input type="color" id="color_servicio" wire:model="color_servicio"
|
|
class="border-neutral-200 w-full shadow apperance-none focus:border-neutral-300 focus:ring-0 leading-tight focus:outline-none focus:shadow-outline">
|
|
</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="createServicio" 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="serviciosModal=false" wire:click="limpiarInputServiciosModal"
|
|
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 servicios --}}
|
|
<div x-cloak x-show="serviciosEditar" 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 backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
|
|
<div class="grid h-full place-items-center overflow-y-auto ">
|
|
<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_servicios"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir
|
|
img</label>
|
|
<input type="file" name="imagen_servicios" id="imagen_servicios" 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 grid grid-cols-2 items-center justify-items-center">
|
|
<div>
|
|
<label for="imagen_inicio_servicios"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Img
|
|
inicio
|
|
</label>
|
|
<input type="file" name="imagen_inicio_servicios" id="imagen_inicio_servicios"
|
|
wire:model="photo_inicio" class="hidden">
|
|
</div>
|
|
|
|
<div>
|
|
@if ($photo_inicio)
|
|
<img src="{{ $photo_inicio->temporaryUrl() }}" alt=""
|
|
class="object-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@else
|
|
<img src="{{ $img_inicio }}" 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_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_servicio" wire:model="nombre_servicio"
|
|
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_servicio')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="precio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Precio:</label>
|
|
<input type="tel" id="precio" wire:model="precio"
|
|
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('precio')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="my-2 border-y">
|
|
<label for="perfiles" class=" text-gray-700 text-sm font-bold mb-2 ">Mostrar perfiles</label>
|
|
<input type="checkbox" name="perfiles" id="perfiles" wire:model="perfiles">
|
|
<label for="password" class=" text-gray-700 text-sm font-bold mb-2 ">¿Contraseña?</label>
|
|
<input type="checkbox" name="password" id="password" wire:model="password">
|
|
</div>
|
|
|
|
<div class="my-2 border-y">
|
|
<label for="solo_tiempo" class=" text-gray-700 text-sm font-bold mb-2 ">Solo por
|
|
tiempo</label>
|
|
<input type="checkbox" name="solo_tiempo" id="solo_tiempo" wire:model="tiempo">
|
|
<label for="renovacion" class=" text-gray-700 text-sm font-bold mb-2 ">Renovación</label>
|
|
<input type="checkbox" name="renovacion" id="renovacion" wire:model="renovacion">
|
|
</div>
|
|
|
|
<div x-transition x-show="!tiempo">
|
|
<div class="mb-4">
|
|
<label for="pantallas"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
|
|
<input type="text" id="pantallas" wire:model="pantallas"
|
|
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('pantallas')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="completas"
|
|
class="block text-gray-700 text-sm font-bold mb-2">completas:</label>
|
|
<input type="text" id="completas" wire:model="completa"
|
|
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('completa')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-2 border-y">
|
|
<label for="ver_url" class=" text-gray-700 text-sm font-bold mb-2 ">URL</label>
|
|
<input type="checkbox" name="ver_url" id="ver_url" wire:model="ver_url">
|
|
<div x-transition x-show="ver_url">
|
|
<input type="text" id="url" placeholder="url" wire:model="url"
|
|
class="my-2 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">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion_servicio" wire:model="descripcion_servicio"
|
|
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="mb-4">
|
|
<select name="estado" id="estado" wire:model.debounce.500ms="estado_servicio"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-[72%] sm:w-60 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Estado</option>
|
|
<option value="activo">Activo</option>
|
|
<option value="inactivo">Inactivo</option>
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="mensaje_servicio"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Mensaje:</label>
|
|
<textarea type="text" id="mensaje_servicio" wire:model.defer="mensaje_servicio"
|
|
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>
|
|
|
|
@error('estado_servicio')
|
|
<div class="text-red-400 text-sm">Requerido*</div>
|
|
@enderror
|
|
|
|
<div class="mb-4 grid grid-cols-2 items-center">
|
|
<label for="color_servicio" class="text-gray-700 text-sm font-bold">Color fondo:</label>
|
|
<input type="color" id="color_servicio" wire:model="color_servicio"
|
|
class="border-neutral-200 w-full shadow apperance-none focus:border-neutral-300 focus:ring-0 leading-tight focus:outline-none focus:shadow-outline">
|
|
</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="guardar" 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="serviciosEditar=false" wire:click="limpiarInputServiciosModal"
|
|
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>
|
|
@include('layouts.footer')
|
|
</div>
|