LizandroandClaude Sonnet 4.6
fc17e57624
Las clases dinámicas via-[{{ color }}] y to-[{{ color }}] no pueden
compilarse porque Tailwind no conoce los valores en build time.
Reemplazadas por style inline con linear-gradient().
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
849 lines
47 KiB
PHP
Executable File
849 lines
47 KiB
PHP
Executable File
<div x-data="{
|
|
tarjetaPlan: @entangle('tarjetaPlan'),
|
|
tp: @entangle('tp'),
|
|
credenciales: @entangle('credenciales'),
|
|
vista: true,
|
|
servicio: @entangle('servicio'),
|
|
verServ: @entangle('verServ')
|
|
}" class="h-full w-full md:my-2">
|
|
<div class=" absolute backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading
|
|
wire:target="comprar">
|
|
<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">Adquiriendo paquetes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" absolute backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading
|
|
wire:target="cargartarjetaPlan,cantidad_tarjetaPlan,tp,cerrartarjetaPlan">
|
|
<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="flex max-w-lg mx-auto">
|
|
<button x-on:click="vista=true" :class="vista ? 'bg-[#7a02b8]' : 'bg-[#B221FD]'"
|
|
class="mx inline-flex justify-center w-full 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">Servicios</button>
|
|
<button x-on:click="vista=false" :class="!vista ? 'bg-[#7a02b8]' : 'bg-[#B221FD]'"
|
|
class="mx inline-flex justify-center w-full border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5">Promociones</button>
|
|
|
|
</div>
|
|
|
|
<div x-cloak x-show="vista" class="bg-[#f5f5f5] md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem] relative mb-4">
|
|
<div class="flex justify-start my-2 items-center">
|
|
<div class="flex text-sm">
|
|
<x-icon-arrow-right />
|
|
Servicios
|
|
</div>
|
|
</div>
|
|
|
|
{{-- tabla productos --}}
|
|
<div
|
|
class="x-auto bg-white grid grid-cols-1 lg:grid-cols-1text-center rounded-xl py-4 px-2 ms:px-8 shadow-md xl:mx-10 mb-8 ">
|
|
<div class="mb-2">
|
|
<h2>Seleccione un servicio:</h2>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="slider scroll-smooth py-2 px-4 overflow-x-scroll w-full gap-4 " id="content">
|
|
<table>
|
|
@foreach ($servicios as $servicio1)
|
|
<td>
|
|
<button
|
|
class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[100px] sm:w-[350px] sm:h-[200px] mx-4"
|
|
wire:click="consultaTarifa({{ $servicio1 }})">
|
|
<img src="{{ asset($servicio1->img) }}"
|
|
class="w-full m-auto rounded-lg object-cover h-full object-center shadow"
|
|
alt="imagen de {{ $servicio1->nombre }}">
|
|
</button>
|
|
</td>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
<button class="prev p-2 md:p-3 absolute left-0 top-1/3 rounded-full bg-[#B221FD]"><svg
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 md:w-7" x="0" y="0"
|
|
viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
|
<g>
|
|
<path
|
|
d="M17.921,1.505a1.5,1.5,0,0,1-.44,1.06L9.809,10.237a2.5,2.5,0,0,0,0,3.536l7.662,7.662a1.5,1.5,0,0,1-2.121,2.121L7.688,15.9a5.506,5.506,0,0,1,0-7.779L15.36.444a1.5,1.5,0,0,1,2.561,1.061Z"
|
|
fill="#ffffff" data-original="#000000" />
|
|
</g>
|
|
</svg></button>
|
|
<button class="next p-2 md:p-3 absolute right-0 top-1/3 rounded-full bg-[#B221FD]"><svg
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 md:w-7" x="0" y="0"
|
|
viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
|
|
<g>
|
|
<path
|
|
d="M6.079,22.5a1.5,1.5,0,0,1,.44-1.06l7.672-7.672a2.5,2.5,0,0,0,0-3.536L6.529,2.565A1.5,1.5,0,0,1,8.65.444l7.662,7.661a5.506,5.506,0,0,1,0,7.779L8.64,23.556A1.5,1.5,0,0,1,6.079,22.5Z"
|
|
fill="#ffffff" data-original="#000000" />
|
|
</g>
|
|
</svg></button>
|
|
</div>
|
|
<button x-on:click="verServ=true"
|
|
class="my-2 mx max-w-sm ml-auto rounded-lg 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">Ver
|
|
todos</button>
|
|
</div>
|
|
|
|
<div>
|
|
@if ($servicio)
|
|
<div class="bg-[#f8f8f8] shadow-md rounded-[1.2rem] mb-4 px-4 py-4">
|
|
<div class="mb-2">
|
|
<h2>Seleccione un plan:</h2>
|
|
</div>
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-8">
|
|
|
|
@foreach ($servicio['tarifas'] as $tarifa)
|
|
@php
|
|
$this->tarifa = $tarifa;
|
|
@endphp
|
|
@if ($tarifa['estado'] == 'activo')
|
|
@if ($con = $tarifa['usuario_tarifas'])
|
|
@if ($con[0]['visible'] == 'true')
|
|
<button wire:click="cargartarjetaPlan({{ $tarifa['id'] }})"
|
|
class="shadow-lg text-white py-4 px-3 rounded-lg"
|
|
style="background: linear-gradient(to bottom right, #000, {{ $servicio['color_fondo'] }})">
|
|
|
|
<p class="font-bold mb-2">
|
|
@if ($servicio['por_tiempo'] == 1)
|
|
{{ $servicio['nombre'] }}
|
|
@else
|
|
{{ $servicio['nombre'] }} - {{ $tarifa['pantallas'] }}
|
|
{{ $tarifa['pantallas'] == 1 ? 'pantalla' : 'pantallas' }}
|
|
@endif
|
|
|
|
</p>
|
|
|
|
<div class="flex items-center justify-around">
|
|
<div>
|
|
<p class="text-sm text-left">
|
|
{{ $tarifa['dias'] }}
|
|
{{ $tarifa['dias'] == 1 ? 'Día' : 'Días' }}
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
<div class="border px-2 py-1 rounded">
|
|
<p class="text-left text-lg sm:text-xl font-semibold ">
|
|
|
|
${{ number_format($con[0]['precio']) }}
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</button>
|
|
@endif
|
|
@else
|
|
<button wire:click="cargartarjetaPlan({{ $tarifa['id'] }})"
|
|
class="shadow-lg text-white py-4 px-3 rounded-lg"
|
|
style="background: linear-gradient(to bottom right, #000, {{ $servicio['color_fondo'] }})">
|
|
|
|
<p class="font-bold mb-2">
|
|
@if ($servicio['por_tiempo'] == 1)
|
|
{{ $servicio['nombre'] }}
|
|
@else
|
|
{{ $servicio['nombre'] }} - {{ $tarifa['pantallas'] }}
|
|
{{ $tarifa['pantallas'] == 1 ? 'pantalla' : 'pantallas' }}
|
|
@endif
|
|
|
|
</p>
|
|
|
|
<div class="flex items-center justify-around">
|
|
<div>
|
|
<p class="text-sm text-left">
|
|
{{ $tarifa['dias'] }} {{ $tarifa['dias'] == 1 ? 'Día' : 'Días' }}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
<div class="border px-2 py-1 rounded">
|
|
<p class="text-left text-lg sm:text-xl font-semibold ">
|
|
|
|
${{ number_format($tarifa['valor']) }}
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</button>
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{{-- Modal agregar servicios --}}
|
|
<div x-cloak x-show="tarjetaPlan" 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="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-10">
|
|
<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 py-2 rounded-lg"
|
|
style="background: rgb(0,0,0);
|
|
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, {{ $colorFondo_tarjetaPlan }} 0%, rgba(20,20,20,1) 100%);">
|
|
<p class="font-bold text-lg mb-2">
|
|
@if ($tiempo_tarjetaPlan)
|
|
{{ $servicio_tarjetaPlan }}
|
|
@else
|
|
{{ $servicio_tarjetaPlan }} - {{ $pantallas_tarjetaPlan }}
|
|
{{ $pantallas_tarjetaPlan == 1 ? 'pantalla' : 'pantallas' }}
|
|
@endif
|
|
|
|
</p>
|
|
<div class="flex justify-between">
|
|
<p>
|
|
{{ $dias_tarjetaPlan }} {{ $dias_tarjetaPlan == 1 ? 'Día' : 'Días' }}
|
|
|
|
</p>
|
|
<p>
|
|
${{ number_format($valor_tarjetaPlan) }}
|
|
</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_tarjetaPlan"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre_tarjetaPlan" wire:model="nombre_tarjetaPlan"
|
|
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_tarjetaPlan')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="celular_tarjetaPlan"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Celular:</label>
|
|
<input type="text" id="celular_tarjetaPlan" wire:model="celular_tarjetaPlan"
|
|
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_tarjetaPlan')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between text-left gap-2">
|
|
<div class="">
|
|
<label for="email_tarjetaPlan"
|
|
class="block text-gray-700 text-sm font-bold ">E-mail:</label>
|
|
<input type="email" id="email_tarjetaPlan" wire:model="email_tarjetaPlan"
|
|
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_tarjetaPlan')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="cantidad_tarjetaPlan"
|
|
class="block text-gray-700 text-sm font-bold ">Cantidad:</label>
|
|
<input type="number" id="cantidad_tarjetaPlan" min="1"
|
|
wire:model="cantidad_tarjetaPlan"
|
|
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_tarjetaPlan')
|
|
<span class="text-red-400 text-sm ">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-green-600 italic text-center mb-2">
|
|
|
|
{{ $disponibles < 0 ? 0 : (int) $disponibles }}
|
|
{{ $disponibles == 1 ? 'plan disponible' : 'planes disponibles' }} para esta cantidad </div>
|
|
@if ($dgo)
|
|
<div class="mb-4 border-t pt-4">
|
|
<p class="text-sm font-bold mb-2">Compatibilidad DGO</p>
|
|
<p class="text-xs text-gray-400 mb-3">Identifica desde qué dispositivo accederás</p>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Tipo de dispositivo:</label>
|
|
<input list="lista-tipos" wire:model.lazy="tipo_dispositivo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
placeholder="Buscar o escribir...">
|
|
<datalist id="lista-tipos">
|
|
<option value="Navegador Web (Chrome, Firefox, Edge)">
|
|
<option value="Celular Android">
|
|
<option value="Tablet Android">
|
|
<option value="iPhone">
|
|
<option value="iPad">
|
|
<option value="Apple TV">
|
|
<option value="Samsung TV">
|
|
<option value="LG TV">
|
|
<option value="Android TV">
|
|
<option value="Amazon Fire TV">
|
|
<option value="Chromecast">
|
|
<option value="Roku">
|
|
<option value="TCL TV">
|
|
<option value="TV VIDAA">
|
|
<option value="TV Zeasn">
|
|
<option value="Otro">
|
|
</datalist>
|
|
@error('tipo_dispositivo')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Marca del dispositivo:</label>
|
|
<input list="lista-marcas" wire:model.lazy="marca_dispositivo"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
placeholder="Buscar o escribir...">
|
|
<datalist id="lista-marcas">
|
|
<option value="Samsung">
|
|
<option value="LG">
|
|
<option value="Apple">
|
|
<option value="TCL">
|
|
<option value="Kalley">
|
|
<option value="Hyundai">
|
|
<option value="Challenger">
|
|
<option value="Xiaomi">
|
|
<option value="Huawei">
|
|
<option value="Sony">
|
|
<option value="Panasonic">
|
|
<option value="Philips">
|
|
<option value="Hisense">
|
|
<option value="Otro">
|
|
</datalist>
|
|
@error('marca_dispositivo')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">Ciudad:</label>
|
|
<input list="lista-ciudades" wire:model.lazy="ciudad"
|
|
class="border-2 border-neutral-200 rounded-[0.8rem] shadow w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
placeholder="Buscar o escribir...">
|
|
<datalist id="lista-ciudades">
|
|
<option value="Bogotá">
|
|
<option value="Medellín">
|
|
<option value="Cali">
|
|
<option value="Barranquilla">
|
|
<option value="Cartagena">
|
|
<option value="Cúcuta">
|
|
<option value="Bucaramanga">
|
|
<option value="Pereira">
|
|
<option value="Santa Marta">
|
|
<option value="Ibagué">
|
|
<option value="Manizales">
|
|
<option value="Villavicencio">
|
|
<option value="Pasto">
|
|
<option value="Armenia">
|
|
<option value="Neiva">
|
|
<option value="Sincelejo">
|
|
<option value="Valledupar">
|
|
<option value="Montería">
|
|
</datalist>
|
|
@error('ciudad')
|
|
<span class="text-red-400 text-sm">Requerido*</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mb-4">
|
|
<p class="text-xs text-gray-400 text-center">
|
|
|
|
Este servicio vencerá el
|
|
{{ $fechaFinal ? $fechaFinal->format('d/m/Y \a \l\a\s h:i A') : '' }} en
|
|
{{ $dias_tarjetaPlan }} {{ $dias_tarjetaPlan == 1 ? 'día' : 'días' }}
|
|
|
|
</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) $valor_tarjetaPlan * (int) $cantidad_tarjetaPlan) }} 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">
|
|
@if (auth()->user()->rol->nombre != 'editor')
|
|
<span>
|
|
<button id="comprarButton" wire:click="comprar" type="button" wire:loading.attr="disabled"
|
|
@if ($cantidad_tarjetaPlan <= (int) $disponibles && $total <= auth()->user()->saldo->valor)
|
|
onclick="enviarInfoUsuario({
|
|
nombre: '{{ auth()->user()->name }}',
|
|
email: '{{ auth()->user()->email }}',
|
|
saldo: '{{ 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>
|
|
Comprar
|
|
</button>
|
|
|
|
<!-- Mensaje de procesamiento -->
|
|
<div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
|
|
Procesando... por favor espera.
|
|
</div>
|
|
|
|
<script>
|
|
let botonBloqueado = false; // Controla si el botón está bloqueado
|
|
|
|
function enviarInfoUsuario(usuario) {
|
|
// Si el botón ya fue bloqueado, no hacer nada
|
|
if (botonBloqueado) return;
|
|
|
|
botonBloqueado = true; // Bloquea el botón después del primer clic
|
|
|
|
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
|
|
|
|
// Muestra el mensaje de procesamiento
|
|
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(usuario)
|
|
})
|
|
.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);
|
|
// Opcional: 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>
|
|
|
|
</span>
|
|
@endif
|
|
|
|
<span>
|
|
<button wire:click="cerrartarjetaPlan" 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 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="fixed backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-10">
|
|
<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 overflow-y-auto">
|
|
<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%, {{ $colorFondo_tarjetaPlan }} 0%, rgba(20,20,20,1) 100%);">
|
|
<p class="font-bold text-lg mb-2">
|
|
@if (!empty($servicio_t->por_tiempo))
|
|
@if ($servicio_t->por_tiempo == true)
|
|
{{ $servicio_tarjetaPlan }}
|
|
@else
|
|
{{ $servicio_tarjetaPlan }} - {{ $pantallas_tarjetaPlan }}
|
|
{{ $pantallas_tarjetaPlan == 1 ? 'pantalla' : 'pantallas' }}
|
|
@endif
|
|
@endif
|
|
</p>
|
|
<div class="flex justify-between">
|
|
<p>
|
|
{{ $dias_tarjetaPlan }} Dias
|
|
</p>
|
|
<p>
|
|
${{ number_format($valor_tarjetaPlan) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-4">
|
|
<div class="mb-4">
|
|
<div class="text-sm my-1">
|
|
{!! $mensaje !!}
|
|
<br>
|
|
{!! $msj->msj_compra !!}
|
|
</div>
|
|
|
|
@if ($cuentas && $cuentas->compatibilidadDgo)
|
|
<div class="mb-3 p-3 bg-gray-50 rounded-lg border">
|
|
<p class="text-sm font-bold mb-1">Compatibilidad DGO</p>
|
|
<p class="text-xs">Tipo: <span class="font-semibold">{{ $cuentas->compatibilidadDgo->tipo_dispositivo }}</span></p>
|
|
<p class="text-xs">Marca: <span class="font-semibold">{{ $cuentas->compatibilidadDgo->marca_dispositivo }}</span></p>
|
|
<p class="text-xs">Ciudad: <span class="font-semibold">{{ $cuentas->compatibilidadDgo->ciudad }}</span></p>
|
|
</div>
|
|
@endif
|
|
|
|
<div>
|
|
<p>
|
|
Información de cuentas:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-xs text-gray-400 h-auto overflow-y-auto">
|
|
|
|
|
|
@if ($cuentas)
|
|
|
|
@php
|
|
$n = 0;
|
|
@endphp
|
|
|
|
@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">
|
|
@if (!empty($cuenta->servicio->ver_url))
|
|
- URL: <span
|
|
class="font-semibold text-gray-600">{{ $cuenta->servicio->url }}</span>
|
|
@else
|
|
@if (!empty($cuenta->servicio->ver_perfiles))
|
|
@foreach ($cuenta->perfil as $perfil)
|
|
@if ($cuentas->id == $perfil->historial_id && $cuenta->estado == 'activo')
|
|
- 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
|
|
@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="copiarAlPortapapeles({{ $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 }} :
|
|
|
|
@if (!empty($cuenta->servicio->ver_url))
|
|
- URL: {{ $cuenta->servicio->url }}
|
|
@else
|
|
@foreach ($cuenta->perfil as $perfil)
|
|
@if (!empty($cuenta->servicio->ver_perfiles))
|
|
@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
|
|
@endif
|
|
@endforeach
|
|
@endif - email: {{ $cuenta->correo }} - Pass:
|
|
{{ $cuenta->password }}
|
|
</p>
|
|
</div>
|
|
@endforeach
|
|
|
|
<textarea id="c" class="hidden">
|
|
{{ $mensaje }}
|
|
{{ $msj->msj_wp ?? '' }}
|
|
@foreach ($cuentas->cuentas->unique() as $cuenta)
|
|
@if (!empty($cuenta->servicio->ver_url))
|
|
*URL:* {{ $cuenta->servicio->url }}
|
|
@else
|
|
@if (!empty($cuenta->servicio->ver_perfiles))
|
|
@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
|
|
@endif
|
|
@endif
|
|
*Usuario:* {{ trim($cuenta->correo) }}
|
|
*Contraseña:* {{ trim($cuenta->password) }}
|
|
@endforeach
|
|
|
|
</textarea>
|
|
|
|
|
|
|
|
<div class="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="copyToClipboard()">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 servicio --}}
|
|
<div x-cloak x-show="verServ" 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 ">
|
|
|
|
<table class="max-w-xl bg-white mx-auto relative">
|
|
<tbody>
|
|
|
|
@foreach ($servicios as $servicio1)
|
|
<tr>
|
|
<td>
|
|
<button
|
|
class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[100px] sm:w-[350px] sm:h-[200px] mx-4"
|
|
wire:click="consultaTarifa({{ $servicio1 }})">
|
|
<img src="{{ asset($servicio1->img) }}"
|
|
class="w-full m-auto rounded-lg object-cover h-full object-center shadow"
|
|
alt="">
|
|
<!--p>{{ $servicio1->nombre }}</p-->
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<span class="absolute z-40 top-0 right-0 md:right-[48%]">
|
|
<button wire:click="" type="button" x-on:click="verServ=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>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
function copyToClipboard() {
|
|
var copyText = document.getElementById("c").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>
|
|
|
|
<div x-cloak x-show="!vista">
|
|
<livewire:show-promociones />
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
function copiarAlPortapapeles(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);
|
|
}
|
|
|
|
const prev = document.querySelector('.prev')
|
|
const next = document.querySelector('.next')
|
|
const slider = document.querySelector('.slider')
|
|
|
|
prev.addEventListener('click', () => {
|
|
slider.scrollLeft -= 600
|
|
})
|
|
|
|
next.addEventListener('click', () => {
|
|
slider.scrollLeft += 600
|
|
})
|
|
</script>
|
|
|
|
</div>
|