Juan Felipe Duarte
bde877d07f
Refactored the category selection in show-promociones.blade.php to display the selected category's image and name above the swiper. Updated the swiper to set the selected category and synchronize with Livewire. Wrapped the logout button in navigation.blade.php with additional padding for better spacing.
1187 lines
76 KiB
PHP
Executable File
1187 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="mb-6 bg-white shadow rounded-2xl overflow-hidden transform transition-all duration-300 max-w-4xl m-auto">
|
|
<img :src="seleccionada.imagen"
|
|
class="w-full h-24 sm:h-36 md:h-56 object-cover object-center"
|
|
alt="imagen de categoría seleccionada">
|
|
<div class="p-4 text-center">
|
|
<h2 class="text-xl font-semibold text-gray-800" x-text="seleccionada.nombre"></h2>
|
|
</div>
|
|
</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 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-12 md:h-32 object-cover object-center"
|
|
alt="imagen de {{ $categoria1->nombre }}">
|
|
</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 h-24 sm:h-36 object-center 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 h-24 sm:h-44 object-center 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-cover 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="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="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 --}}
|
|
<div
|
|
class="w-full text-left text-white px-4 bg-cover py-2 rounded-lg h-64 bg-[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-cover rounded-xl border-2 border-neutral-200 shadow-md w-28 h-20">
|
|
@else
|
|
<img src="{{ asset($img_ver) }}" alt=""
|
|
class="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="comprarButton" 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('comprarButton');
|
|
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)
|
|
<div class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[250px] sm:w-[350px] sm:h-[350px] mx-4 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 h-full object-center 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>
|