LizandroandClaude Sonnet 4.6
7f4053ea62
Se revierte el object-contain del commit anterior: dejaba franjas de fondo
y se prefiere que la imagen llene el cuadro. A cambio los cuadros crecen
un 5%.
grilla h-24 -> h-[6.3rem]
sm:h-36 -> sm:h-[9.45rem]
sm:h-44 -> sm:h-[11.55rem]
modal promo h-64 -> h-[16.8rem]
modal "ver todas" 250/350px -> 262/368px
Las miniaturas de subida se quedan en object-contain a propósito: ahí lo
útil es ver entera la imagen que se acaba de elegir.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1189 lines
76 KiB
PHP
Executable File
1189 lines
76 KiB
PHP
Executable File
<div x-data="{
|
|
newCategoria: @entangle('newCategoria'),
|
|
newPromocion: @entangle('newPromocion'),
|
|
modalComprarPromo: @entangle('modalComprarPromo'),
|
|
verPromo: @entangle('verPromo'),
|
|
categorian: @entangle('categorian'),
|
|
editarPromo: @entangle('editarPromo'),
|
|
credenciales: @entangle('credenciales'),
|
|
verPro: false,
|
|
copiar: ''
|
|
}" 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="cantidad_comprarPromo,confirmarCompra,denegarCompra,add_tarifa_list2,del_item_list2,photo,verPromocion,comprarPromo,editarPromo,editarPromoUpdate,comprar,pagar,create_newCategoria,add_tarifa,del_item,guardar,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">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 mb-8 scroll">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex text-sm">
|
|
<x-icon-arrow-right />
|
|
Promociones
|
|
</div>
|
|
@if (auth()->user()->rol->nombre == 'super' || auth()->user()->rol->nombre == 'administrador')
|
|
<a x-on:click="newPromocion=true"
|
|
class="flex text-sm sm:text-base px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8] leading-tight">Nueva
|
|
promoción
|
|
<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>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
x-data="{
|
|
seleccionada: {
|
|
nombre: '{{ $categorias->first()->nombre }}',
|
|
imagen: '{{ asset($categorias->first()->imagen) }}'
|
|
}
|
|
}"
|
|
class="w-full"
|
|
>
|
|
<div x-show="seleccionada" x-transition class="md:hidden bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 w-40 xs:w-5 sm:w-60 m-auto">
|
|
<img :src="seleccionada.imagen" class="w-full object-cover object-center" alt="imagen de categoría seleccionada">
|
|
</div>
|
|
|
|
<div class="swiper-container overflow-hidden py-4 px-3" wire:ignore>
|
|
<div class="swiper-wrapper">
|
|
@foreach ($categorias as $categoria1)
|
|
<div wire:key="banner-{{ $categoria1->id }}" class="swiper-slide relative cursor-pointer transition hover:scale-105 rounded-lg overflow-hidden shadow bg-white"
|
|
x-on:click="
|
|
seleccionada = {
|
|
nombre: '{{ $categoria1->nombre }}',
|
|
imagen: '{{ asset($categoria1->imagen) }}'
|
|
};
|
|
$wire.set('categorian', '{{ $categoria1->nombre }}')
|
|
"
|
|
>
|
|
<img src="{{ asset($categoria1->imagen) }}" class="w-full h-14 md:h-full object-cover object-center" alt="imagen de {{ $categoria1->nombre }}">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex items-end justify-center p-1 md:hidden">
|
|
<span class="text-xs sm:text-sm md:text-base font-medium text-white text-center drop-shadow-md">
|
|
{{ $categoria1->nombre }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center mt-2 mb-4">
|
|
<button x-on:click="verPro=true" class="max-w-md rounded-lg text-sm md:text-base px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5">
|
|
Ver todas las promociones
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
@if ($categorian)
|
|
<div class="mb-4 px-4 py-4">
|
|
<div id="promo" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 py-2 px-4">
|
|
|
|
@foreach ($categorias->where('nombre', $categorian)->first()->promociones as $promocion)
|
|
@if ($promocion->visible == 'true')
|
|
@if (empty(($usuario = $promocion->usuario_promos->where('usuario_id', Auth::user()->id)->first())))
|
|
<div class="select-none bg-white shadow-md transition hover:scale-105 hover:shadow-xl cursor-pointer rounded-lg text-center relative object-cover "
|
|
x-data="{ openOption: false }">
|
|
<svg x-on:click="openOption=!openOption" 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 absolute right-2 cursor-pointer">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
class="text-white shadow"
|
|
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>
|
|
|
|
<div wire:click="verPromocion({{ $promocion->id }})" class="">
|
|
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
|
|
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[9.45rem] shadow">
|
|
|
|
</div>
|
|
|
|
|
|
<div x-cloak x-show="openOption"
|
|
class="absolute bg-white text-center w-[7rem] top-5 right-[-1rem] rounded-[1rem] border-b border-gray-200 shadow-lg">
|
|
@if (auth()->user()->rol->nombre != 'editor')
|
|
<button x-on:click="openOption=!openOption,ver=true"
|
|
wire:click="comprarPromo({{ $promocion->id }})"
|
|
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Comprar</button>
|
|
@endif
|
|
@if (auth()->user()->rol->nombre == 'super' || auth()->user()->rol->nombre == 'administrador')
|
|
<button wire:click="editarPromo({{ $promocion->id }})"
|
|
x-on:click="openOption=!openOption"
|
|
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">Modificar</button>
|
|
<button x-on:click="openOption=!openOption"
|
|
wire:click="eliminar({{ $promocion->id }})"
|
|
class="text-white w-full py-1 bg-[#ff5050] rounded-b-[1rem] hover:bg-[#fd2828] hover:rounded-b-[1rem]">Eliminar</button>
|
|
@endif
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@else
|
|
@if ($usuario->visible == 'true')
|
|
<div class="select-none bg-white shadow-md transition hover:scale-[1.05] hover:shadow-xl cursor-pointer rounded-lg text-center relative object-cover "
|
|
x-data="{ openOption: false }">
|
|
<svg x-on:click="openOption=!openOption"
|
|
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 absolute right-2 cursor-pointer">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
class="text-white shadow"
|
|
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>
|
|
|
|
<div wire:click="verPromocion({{ $promocion->id }})" class="">
|
|
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
|
|
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[11.55rem] shadow">
|
|
|
|
</div>
|
|
|
|
|
|
<div x-cloak x-show="openOption"
|
|
class="absolute bg-white text-center w-[7rem] top-5 right-[-1rem] rounded-[1rem] border-b border-gray-200 shadow-lg">
|
|
@if (auth()->user()->rol->nombre != 'editor')
|
|
<button x-on:click="openOption=!openOption,ver=true"
|
|
wire:click="comprarPromo({{ $promocion->id }})"
|
|
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Comprar</button>
|
|
@endif
|
|
@if (auth()->user()->rol->nombre == 'super' || auth()->user()->rol->nombre == 'administrador')
|
|
<button wire:click="editarPromo({{ $promocion->id }})"
|
|
x-on:click="openOption=!openOption"
|
|
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">Modificar</button>
|
|
<button x-on:click="openOption=!openOption"
|
|
wire:click="eliminar({{ $promocion->id }})"
|
|
class="text-white w-full py-1 bg-[#ff5050] rounded-b-[1rem] hover:bg-[#fd2828] hover:rounded-b-[1rem]">Eliminar</button>
|
|
@endif
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@endif
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Modal agregar promocion --}}
|
|
<div x-cloak x-show="newPromocion" 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 overflow-y-auto">
|
|
<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_promocion"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir
|
|
img</label>
|
|
<input type="file" accept="image" id="imagen_promocion" wire:model="photo"
|
|
class="hidden border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div>
|
|
@if ($photo)
|
|
<img src="{{ $photo->temporaryUrl() }}" alt=""
|
|
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@error('photo')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
@else
|
|
<img src="" alt=""
|
|
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@error('photo')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nombre_promocion"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_promocion" wire:model="nombre_promocion"
|
|
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_promocion')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion_promocion"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion_promocion" wire:model="descripcion_promocion"
|
|
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>
|
|
@error('descripcion_promocion')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@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="flex items-center gap-2 mb-4">
|
|
<div>
|
|
<label for="valor_promocion"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Valor:</label>
|
|
<input name="valor_promocion" wire:model="valor_promocion" type="number" min="0"
|
|
placeholder="$0"
|
|
class="w-[10rem] border-2 border-neutral-200 shadow rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300 focus:outline-none focus:shadow-outline focus:ring-0 block datepicker-input">
|
|
</div>
|
|
<div>
|
|
<label class="block select-none text-white text-sm font-bold mb-2">Estado:</label>
|
|
<select name="estado_promocion" id="estado_promocion" wire:model="estado_promocion"
|
|
class="w-[10rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="true" selected>Estado</option>
|
|
<option value="true">Activo</option>
|
|
<option value="false">Inactivo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="utilidad" class="block text-gray-700 text-sm font-bold mb-2">Valor de
|
|
compra:</label>
|
|
<input name="utilidad" wire:model="utilidad" type="number" min="0" placeholder="$0"
|
|
class="w-full border-2 border-neutral-200 shadow rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300 focus:outline-none focus:shadow-outline focus:ring-0 block datepicker-input">
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="relative">
|
|
<label for="fecha_limite_promocion"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Fecha
|
|
limite:</label>
|
|
<input name="fecha_limite_promocion" wire:model.defer="fecha_limite_promocion"
|
|
type="date"
|
|
class="border-2 border-neutral-200 shadow rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300 focus:outline-none focus:shadow-outline focus:ring-0 block w-full datepicker-input">
|
|
@error('fecha_limite_promocion')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block select-none text-white text-sm font-bold mb-2">Categoria:</label>
|
|
<select name="categoria_id_promocion" id="categoria_id_promocion"
|
|
wire:model.debounce.500ms="categoria_id_promocion"
|
|
class="w-[8rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Categoria</option>
|
|
@foreach ($categorias as $categoria)
|
|
<option value="{{ $categoria->id }}">{{ $categoria->nombre ?? '' }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<button x-on:click.prevent="newCategoria=true" x-transition.duration.300ms
|
|
class="w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow ease-in focus:outline-none">
|
|
<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20"
|
|
class="w-6 h-6 inline-block">
|
|
<path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
|
|
C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
|
|
C15.952,9,16,9.447,16,10z" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<select name="tarifa_id_promocion" id="tarifa_id_promocion"
|
|
wire:model.debounce.500ms="tarifa_id_promocion"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Tarifas</option>
|
|
|
|
@foreach ($tarifas as $tarifa)
|
|
@if ($tarifa->servicio?->estado == 'activo')
|
|
<option value="{{ $tarifa->id }}">{{ $tarifa->servicio->nombre ?? '' }}
|
|
:
|
|
@if (!empty($tarifa->servicio->por_tiempo))
|
|
{{ $tarifa->dias ?? '' }}
|
|
{{ $tarifa->dias == 1 ? 'día' : 'días' }}
|
|
@else
|
|
{{ $tarifa->pantallas ?? '' }}
|
|
{{ $tarifa->pantallas == 1 ? 'pantalla' : 'pantallas' }} -
|
|
{{ $tarifa->dias ?? '' }}
|
|
{{ $tarifa->dias == 1 ? 'día' : 'días' }}
|
|
@endif
|
|
</option>
|
|
@endif
|
|
@endforeach
|
|
|
|
</select>
|
|
<div class="mx-auto">
|
|
<button wire:click="add_tarifa" 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">Añadir</button>
|
|
</div>
|
|
</div>
|
|
@error('list')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
<div class="mb-4 h-16 overflow-y-auto flex sm:justify-evenly gap-5">
|
|
<table class="w-full text-center">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-500 ">
|
|
@if (!empty($list))
|
|
@php
|
|
$n = 0;
|
|
@endphp
|
|
@foreach ($list as $tarifaServicios)
|
|
<tr class="text-left mt-2 w-full border-white border-b-gray-300 border ">
|
|
<td class="pl-[1rem] w-1/4 whitespace-nowrap ">
|
|
{{ $tarifaServicios['nombre'] ?? '' }} -
|
|
|
|
@if ($tarifaServicios['nombre'] == 'Youtube Premium' || $tarifaServicios['nombre'] == 'Spotify Premium')
|
|
{{ $tarifaServicios['dias'] ?? '' }} Dias.
|
|
@else
|
|
{{ $tarifaServicios['cantidad'] ?? '' }} P.
|
|
@endif
|
|
</td>
|
|
|
|
<td class="pl-[1rem] w-1/4 whitespace-nowrap">
|
|
<button wire:click="del_item({{ $id = $n }})"
|
|
x-transition.duration.300ms
|
|
class=" text-center text-white w-7 h-7 float-right bg-red-500 rounded-full hover:bg-red-600 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
class="w-4 inline-block">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@php
|
|
$n++;
|
|
@endphp
|
|
@endforeach
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</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="newPromocion=false" wire:click="limpiarInputPromocion" 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>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal agregar categoria --}}
|
|
{{-- <div x-cloak x-show="newCategoria" 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-30">
|
|
<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_categoria"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir
|
|
img</label>
|
|
<input type="file" accept="image" id="imagen_categoria" wire:model="categoria_photo"
|
|
class="hidden border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div>
|
|
|
|
@if ($categoria_photo)
|
|
<img src="{{$categoria_photo->temporaryUrl()}}" alt="" class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nombre_categoria"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_categoria" wire:model="nombre_categoria"
|
|
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">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion_categoria"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion_categoria" wire:model="descripcion_categoria"
|
|
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_newCategoria" 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 wire:click="limpiarInputPromocion" x-onclick="newCategoria=false" 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 ver promno --}}
|
|
<div x-cloak x-show="verPromo" 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=" backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full fixed z-20">
|
|
<div class="grid h-full place-items-center">
|
|
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/3 lg:1/3 xl:w-1/4">
|
|
{{-- PHOTO --}}
|
|
{{-- La URL sale en runtime, así que no puede ir como clase
|
|
arbitraria de Tailwind: el build no la ve y no genera
|
|
nada. Va como estilo en línea. --}}
|
|
<div class="w-full bg-cover bg-center rounded-t-lg h-[16.8rem]"
|
|
style="background-image: url('{{ asset($this->imagen) }}');">
|
|
|
|
</div>
|
|
|
|
<div class="text-left">
|
|
|
|
<div class="mx-8">
|
|
<div class="mt-4 grid grid-cols-2 mb-4 items-center">
|
|
<div>
|
|
<h1 class="text-left font-bold text-lg">{{ $nombrePromo }}</h1>
|
|
</div>
|
|
<div class="justify-self-end">
|
|
<h1 class="flex gap-2 items-center font-bold">
|
|
<p> ${{ number_format($precioAhora) }}</p>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
<p>{{ $descripcionPromo }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-2 mb-3">
|
|
<span>
|
|
<button x-on:click="modalComprarPromo=true,verPromo=false"
|
|
wire:loading.attr="disabled" 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 sm-text-sm sm-leading-5">Comprar</button>
|
|
</span>
|
|
<span>
|
|
<button x-on:click="verPromo=false" 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] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal editar promo --}}
|
|
<div x-cloak x-show="editarPromo" 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=" backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full fixed z-20 overflow-y-auto">
|
|
<div class="grid h-full place-items-center ">
|
|
<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_promocion"
|
|
class="text-white bg-[#B221FD] hover:bg-[#7a02b8] px-3 py-1 rounded-md cursor-pointer">Subir
|
|
img</label>
|
|
<input type="file" accept="image" id="imagen_promocion" wire:model="photo"
|
|
class="hidden border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div>
|
|
@if ($photo)
|
|
<img src="{{ $photo->temporaryUrl() }}" alt=""
|
|
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@else
|
|
<img src="{{ asset($img_ver) }}" alt=""
|
|
class="object-contain bg-white rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
|
|
<div>
|
|
<div class="mb-4">
|
|
<label for="nombre_editarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_editarPromo" wire:model="nombre_editarPromo"
|
|
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">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="descripcion_editarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Descripción:</label>
|
|
<textarea type="text" id="descripcion_editarPromo" wire:model="descripcion_editarPromo"
|
|
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">
|
|
<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="flex items-center gap-2 mb-4">
|
|
<div>
|
|
<label for="valor_editarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Valor:</label>
|
|
<input name="valor_editarPromo" wire:model="valor_editarPromo" type="number"
|
|
min="0" placeholder="$0"
|
|
class="w-[10rem] border-2 border-neutral-200 shadow rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300 focus:outline-none focus:shadow-outline focus:ring-0 block datepicker-input">
|
|
</div>
|
|
<div>
|
|
<label class="block select-none text-white text-sm font-bold mb-2">Estado:</label>
|
|
<select name="estado_promocion" id="estado_promocion"
|
|
wire:model="estado_editarPromo"
|
|
class="w-[10rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="true" selected>Estado</option>
|
|
<option value="true">Activo</option>
|
|
<option value="false">Inactivo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="relative">
|
|
<label for="fecha_limite_promocion"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Fecha
|
|
limite:</label>
|
|
<input name="fecha_limite_promocion" wire:model.defer="fecha_editarPromo"
|
|
type="date"
|
|
class="border-2 border-neutral-200 shadow rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300 focus:outline-none focus:shadow-outline focus:ring-0 block w-full datepicker-input">
|
|
<div hidden class="text-sm text-gray-400">
|
|
{{ $fecha_editarPromo }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
class="block select-none text-white text-sm font-bold mb-2">Categoria:</label>
|
|
<select name="categoria_id_promocion" id="categoria_id_promocion"
|
|
wire:model.debounce.500ms="categoria_id_editarPromo"
|
|
class="w-[8rem] border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Categoria</option>
|
|
@foreach ($categorias as $categoria)
|
|
<option value="{{ $categoria->id }}">{{ $categoria->nombre ?? '' }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<button x-on:click.prevent="newCategoria=true" x-transition.duration.300ms
|
|
class="w-10 h-10 float-right bg-[#B221FD] hover:bg-[#7a02b8] rounded-full active:shadow-lg mouse shadow ease-in focus:outline-none">
|
|
<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20"
|
|
class="w-6 h-6 inline-block">
|
|
<path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
|
|
C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
|
|
C15.952,9,16,9.447,16,10z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between mt-6">
|
|
<select name="tarifa_id_promocion" id="tarifa_id_promocion"
|
|
wire:model.debounce.500ms="tarifa_id_promocion"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none ring-0 focus:ring-0 focus:border-neutral-300 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="" selected>Tarifas</option>
|
|
@foreach ($tarifas as $tarifa)
|
|
<option value="{{ $tarifa->id }}">{{ $tarifa->servicio->nombre ?? '' }}
|
|
:
|
|
@if (!empty($tarifa->servicio->por_tiempo))
|
|
{{ $tarifa->dias ?? '' }}
|
|
{{ $tarifa->dias == 1 ? 'día' : 'días' }}
|
|
@else
|
|
{{ $tarifa->pantallas ?? '' }}
|
|
{{ $tarifa->pantallas == 1 ? 'pantalla' : 'pantallas' }} -
|
|
{{ $tarifa->dias ?? '' }}
|
|
{{ $tarifa->dias == 1 ? 'día' : 'días' }}
|
|
@endif
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<div class="mx-auto">
|
|
<button wire:click="add_tarifa_list2" 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">Añadir</button>
|
|
</div>
|
|
</div>
|
|
@error('list')
|
|
<span class="text-red-400 text-sm">Obligatorio*</span>
|
|
@enderror
|
|
<div class="mb-4 overflow-y-auto flex sm:justify-evenly gap-5">
|
|
<table class="w-full text-center">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-500 ">
|
|
@if (!empty($list2))
|
|
@php
|
|
$n = 0;
|
|
@endphp
|
|
@foreach ($list2 as $lista)
|
|
<tr
|
|
class="text-left mt-2 w-full border-white border-b-gray-300 border ">
|
|
<td class="pl-[1rem] w-1/4 whitespace-nowrap ">
|
|
{{ $lista['nombre'] ?? '' }} -
|
|
{{ $lista['cantidad'] ?? '' }} P. -
|
|
{{ $lista['dias'] ?? '' }} D.
|
|
</td>
|
|
|
|
<td class="pl-[1rem] w-1/4 whitespace-nowrap">
|
|
<button
|
|
wire:click="del_item_list2({{ $lista['identificador'] }},'{{ $n }}')"
|
|
x-transition.duration.300ms
|
|
class=" text-center text-white w-7 h-7 float-right bg-red-500 rounded-full hover:bg-red-600 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 inline-block">
|
|
<path stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@php
|
|
$n++;
|
|
@endphp
|
|
@endforeach
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</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="editarPromoUpdate" 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="editarPromo=false" 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>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal comprar promo --}}
|
|
<div x-cloak x-show="modalComprarPromo" 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=" backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full fixed z-20">
|
|
<div class="grid h-full place-items-center">
|
|
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/2 lg:1/3 xl:w-1/4">
|
|
<div
|
|
class="w-full Text-left text-white px-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 py-2 rounded-lg">
|
|
<p class="font-bold text-lg mb-2">
|
|
{{ $nombrePromo }}
|
|
</p>
|
|
<div class="flex justify-between">
|
|
<p>
|
|
{{ $dias }} Dias
|
|
</p>
|
|
<p>
|
|
${{ number_format($precioAhora) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-4">
|
|
<div class="mb-4">
|
|
<p>
|
|
Información del cliente:
|
|
</p>
|
|
<p class="text-xs text-gray-400">
|
|
Ingrese los datos del cliente final.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex justify-between text-left gap-2">
|
|
<div class="mb-4">
|
|
<label for="nombre_comprarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_comprarPromo" wire:model="nombre_comprarPromo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 focus:ring-0 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('nombre_comprarPromo')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="celular_comprarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Celular:</label>
|
|
<input type="text" id="celular_comprarPromo" wire:model="celular_comprarPromo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 focus:ring-0 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('celular_comprarPromo')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between text-left gap-2">
|
|
<div class="mb-4">
|
|
<label for="email_comprarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">E-mail:</label>
|
|
<input type="email" id="email_comprarPromo" wire:model="email_comprarPromo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 focus:ring-0 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('email_comprarPromo')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="mb-4">
|
|
<label for="cantidad_comprarPromo"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Cantidad:</label>
|
|
<input type="number" id="cantidad_comprarPromo" min="1"
|
|
wire:model="cantidad_comprarPromo" name="cantidad_comprarPromo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-1/2 py-2 px-3 focus:ring-0 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('cantidad_comprarPromo')
|
|
<span class="text-red-400 text-sm block">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<p class="text-xs text-gray-400">
|
|
Este servicio vencerá el {{ $fechaFinal }} en {{ $dias_comprarPromo }} Dias
|
|
</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div
|
|
class="border-2 flex text-gray-400 text-xs text-center justify-center gap-2 py-3 rounded-lg md:mx-3 2xl:mx-6">
|
|
El valor de
|
|
${{ number_format($total = (int) $precioAhora * (int) $cantidad_comprarPromo) }} será
|
|
descontado de su saldo.
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"
|
|
class="w-4" x="0" y="0" viewBox="0 0 24 24"
|
|
style="enable-background:new 0 0 512 512" xml:space="preserve">
|
|
<g>
|
|
<path
|
|
d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z"
|
|
fill="#9f9f9f" data-original="#000000"></path>
|
|
<path d="M12,5a1,1,0,0,0-1,1v8a1,1,0,0,0,2,0V6A1,1,0,0,0,12,5Z" fill="#9f9f9f"
|
|
data-original="#000000"></path>
|
|
<rect x="11" y="17" width="2" height="2" rx="1"
|
|
fill="#9f9f9f" data-original="#000000"></rect>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
@if ($total > auth()->user()->saldo->valor)
|
|
<div
|
|
class=" flex text-red-400 text-xs text-center justify-center gap-2 py-2 rounded-lg md:mx-2 2xl:mx-6">
|
|
<p>No tiene fondo suficientes para esta compra, recargue su cuenta.</p>
|
|
@if (auth()->user()->rol->nombre != 'editor' && auth()->user()->rol->nombre != 'administrador')
|
|
<a href="{{ route('recarga') }}"><button
|
|
class="bg-green-600 text-white rounded px-2 py-1">Recargar</button></a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</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>
|
|
<!-- Botón de Comprar con protección de múltiples clics y mensaje de procesando -->
|
|
<button id="comprarPromoButton" wire:click="pagar" wire:loading.attr="disabled"
|
|
type="button"
|
|
@if ($total <= auth()->user()->saldo->valor) 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 sm-text-sm sm-leading-5"
|
|
@else
|
|
disabled
|
|
class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif
|
|
onclick="enviarInfoCompra()">
|
|
Comprar
|
|
</button>
|
|
</span>
|
|
|
|
<span>
|
|
<!-- Botón Cerrar -->
|
|
<button x-on:click="modalComprarPromo=false" 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] focus:shadow-outline-green sm-text-sm sm-leading-5">
|
|
Cerrar
|
|
</button>
|
|
</span>
|
|
|
|
<!-- Mensaje de Procesando -->
|
|
<div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
|
|
Procesando... por favor espera.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let botonBloqueado = false; // Controla si el botón está bloqueado
|
|
|
|
// Función para manejar el proceso de compra
|
|
function enviarInfoCompra() {
|
|
if (botonBloqueado) return; // Si el botón está bloqueado, no hacer nada
|
|
|
|
botonBloqueado = true; // Bloquea el botón
|
|
const boton = document.getElementById('comprarPromoButton');
|
|
const mensaje = document.getElementById('procesandoMensaje'); // Referencia al mensaje de procesamiento
|
|
boton.setAttribute('disabled', 'true'); // Deshabilita el botón
|
|
boton.classList.add('cursor-not-allowed', 'bg-gray-300'); // Cambia el estilo visual
|
|
mensaje.classList.remove('hidden'); // Muestra el mensaje
|
|
|
|
// Realiza la petición al servidor
|
|
fetch('/registrar-accion-compra', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({
|
|
/* puedes enviar datos si es necesario */
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Respuesta del servidor:', data);
|
|
// Aquí puedes agregar lo que suceda después de la compra
|
|
})
|
|
.catch(error => {
|
|
console.error('Error al enviar info:', error);
|
|
// Rehabilitar el botón si hubo un error
|
|
botonBloqueado = false;
|
|
boton.removeAttribute('disabled');
|
|
boton.classList.remove('cursor-not-allowed', 'bg-gray-300');
|
|
mensaje.classList.add('hidden'); // Oculta el mensaje
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- Modal credenciales --}}
|
|
<div x-cloak x-show="credenciales" 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=" backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full fixed z-20">
|
|
<div class="grid h-full place-items-center overflow-y-auto">
|
|
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/2 lg:1/3 xl:w-1/4">
|
|
<div class="w-full Text-left text-white px-4 py-2 rounded-lg"
|
|
style="background: rgb(0,0,0);
|
|
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, , rgba(20,20,20,1) 100%);">
|
|
<p class="font-bold text-lg mb-2">
|
|
{{ $this->nombrePromo }}
|
|
</p>
|
|
<div class="flex justify-between">
|
|
<p>
|
|
{{ $this->dias }} Dias
|
|
</p>
|
|
<p>
|
|
${{ number_format($this->precioAhora) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-4">
|
|
<div class="mb-4">
|
|
<div class="text-sm my-1">
|
|
{!! $mensaje_servicio !!}
|
|
<br>
|
|
{!! $msj->msj_compra !!}
|
|
</div>
|
|
<div>
|
|
<p>
|
|
Información de cuentas:
|
|
</p>
|
|
</div>
|
|
<div class="text-xs text-gray-400">
|
|
@php
|
|
$n = 0;
|
|
@endphp
|
|
|
|
@if ($cuentas)
|
|
@foreach ($cuentas->cuentas->unique() as $cuenta)
|
|
@php
|
|
$n++;
|
|
@endphp
|
|
|
|
<div class="shadow-md rounded-lg py-3 px-6 mx-8 flex justify-between">
|
|
<div>
|
|
<h1 class="mt-4">
|
|
<div class="font-semibold text-gray-700">
|
|
{{ $cuenta->servicio->nombre }} :</div>
|
|
@if (!empty($cuenta->servicio->ver_url))
|
|
- URL: <span
|
|
class="font-semibold text-gray-600">{{ $cuenta->servicio->url }}</span>
|
|
@else
|
|
@foreach ($cuenta->perfil as $perfil)
|
|
@if ($cuentas->id == $perfil->historial_id)
|
|
- Perfil <span
|
|
class="font-semibold text-gray-600">{{ $perfil->perfil }}</span>
|
|
@if (!empty($cuenta->servicio->perfiles))
|
|
@switch($perfil->perfil)
|
|
@case(1)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_1 }}</span>
|
|
@break
|
|
|
|
@case(2)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_2 }}</span>
|
|
@break
|
|
|
|
@case(3)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_3 }}</span>
|
|
@break
|
|
|
|
@case(4)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_4 }}</span>
|
|
@break
|
|
|
|
@case(5)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_5 }}</span>
|
|
@break
|
|
|
|
@case(6)
|
|
: <span
|
|
class="font-semibold text-gray-600">{{ $msj->clave_6 }}</span>
|
|
@break
|
|
|
|
@default
|
|
@endswitch
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
|
|
</h1>
|
|
|
|
<h1 class="mt-4">
|
|
Usuario: <p class="font-semibold text-gray-600">
|
|
{{ $cuenta->correo }}</p>
|
|
</h1>
|
|
<h1 class="mt-4">
|
|
Contraseña: <p class="font-semibold text-gray-600">
|
|
{{ $cuenta->password }}
|
|
</p>
|
|
</h1>
|
|
</div>
|
|
<div class="text-center">
|
|
<button class=""
|
|
onclick="copiarAlPortapapeles2({{ $n }})"><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="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="hidden" id="{{ $n }}">
|
|
{{ $cuenta->servicio->nombre }} - email: {{ $cuenta->correo }} - Pass:
|
|
{{ $cuenta->password }}</p>
|
|
</div>
|
|
@endforeach
|
|
|
|
<textarea id="d" class="hidden">
|
|
{{ $mensaje_servicio }}
|
|
{{ $msj->msj_wp }}
|
|
@foreach ($cuentas->cuentas->unique() as $cuenta)
|
|
@if (!empty($cuenta->servicio->ver_url))
|
|
*URL:* {{ $cuenta->servicio->url }}
|
|
@else
|
|
*Servicio:* {{ $cuenta->servicio->nombre }} @foreach ($cuenta->perfil as $perfil)
|
|
@if ($cuentas->id == $perfil->historial_id && $cuenta->estado == 'activo')
|
|
- Perfil {{ $perfil->perfil }} @if (!empty($cuenta->servicio->perfiles))
|
|
@switch($perfil->perfil)
|
|
@case(1)
|
|
: {{ $msj->clave_1 }}
|
|
@break
|
|
|
|
@case(2)
|
|
: {{ $msj->clave_2 }}
|
|
@break
|
|
|
|
@case(3)
|
|
: {{ $msj->clave_3 }}
|
|
@break
|
|
|
|
@case(4)
|
|
: {{ $msj->clave_4 }}
|
|
@break
|
|
|
|
@case(5)
|
|
: {{ $msj->clave_5 }}
|
|
@break
|
|
|
|
@case(6)
|
|
:{{ $msj->clave_6 }}
|
|
@break
|
|
|
|
@default
|
|
@endswitch
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
*Usuario:* {{ $cuenta->correo }}
|
|
*Contraseña:* {{ $cuenta->password }}
|
|
@endif
|
|
@endforeach
|
|
|
|
|
|
|
|
</textarea>
|
|
<div class="w-full text-center">
|
|
<button
|
|
class="text-center text-sm text-green-500 font-semibold border px-3 py-2 hover:bg-green-400 hover:text-white border-green-500 rounded mx-auto my-2"
|
|
onclick="copyToClipboard2()">Copiar todo
|
|
</button>
|
|
</div>
|
|
|
|
<h1 class="flex mt-4 gap-1">
|
|
Este servicio vencerá el <p class="font-semibold text-gray-600">
|
|
{{ Carbon\Carbon::parse($cuentas->fecha_final)->format('Y/m/d') ?? '' }}
|
|
</p>
|
|
</h1>
|
|
|
|
@endif
|
|
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
</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 x-on:click="credenciales=false" 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] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal ver promociones --}}
|
|
<div x-cloak x-show="verPro" 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-10">
|
|
<div class="overflow-auto h-full ">
|
|
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 py-2 px-4 ">
|
|
|
|
|
|
@foreach ($categorias as $categoria1)
|
|
{{-- Iba con mx-4 y mx-auto a la vez: cuál ganaba dependía
|
|
del orden de las reglas, que cambió al pasar del CDN
|
|
al build. Se deja solo mx-auto, que es el que centra. --}}
|
|
<div class="cursor-pointer transition hover:scale-[1.05] w-[262px] h-[262px] sm:w-[368px] sm:h-[368px] my-2 mx-auto"
|
|
x-on:click="categorian='{{ $categoria1->nombre }}',verPro=false">
|
|
<a href="#promo">
|
|
<img src="{{ asset($categoria1->imagen) }}"
|
|
class="w-full m-auto rounded-lg object-cover object-center h-full shadow"
|
|
alt="">
|
|
</a>
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
<span class="absolute z-40 top-0 right-0 md:right-[48%]">
|
|
<button type="button" x-on:click="verPro=false"
|
|
class="inline-flex justify-center w-full rounded-l-md md:rounded-md rounded-b-md border border-transparent px-4 py-2 text-white bg-[#ff5050] hover:bg-[#fd3737] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('livewire:load', () => {
|
|
const swiper = new Swiper('.swiper-container', {
|
|
slidesPerView: 3,
|
|
spaceBetween: 10,
|
|
loop: true,
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true,
|
|
},
|
|
breakpoints: {
|
|
640: { slidesPerView: 2, spaceBetween: 20 },
|
|
1024: { slidesPerView: 3, spaceBetween: 30 },
|
|
1440: { slidesPerView: 4, spaceBetween: 40 },
|
|
}
|
|
});
|
|
|
|
Livewire.on('refreshCarousel', () => {
|
|
swiper.update();
|
|
});
|
|
});
|
|
|
|
function copiarAlPortapapeles2(id_elemento) {
|
|
var aux = document.createElement("input");
|
|
aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);
|
|
document.body.appendChild(aux);
|
|
aux.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(aux);
|
|
}
|
|
|
|
function copyToClipboard2() {
|
|
var copyText = document.getElementById("d").value;
|
|
navigator.clipboard.writeText(copyText).then(() => {
|
|
// Alert the user that the action took place.
|
|
// Nobody likes hidden stuff being done under the hood!
|
|
//alert("Copied to clipboard");
|
|
});
|
|
}
|
|
</script>
|