297 lines
18 KiB
PHP
Executable File
297 lines
18 KiB
PHP
Executable File
<div x-data="{
|
|
newCategoria: @entangle('newCategoria'),
|
|
newPromocion: @entangle('newPromocion'),
|
|
modalComprarPromo: @entangle('modalComprarPromo'),
|
|
verPromo: @entangle('verPromo'),
|
|
editarPromo: @entangle('editarPromo'),
|
|
credenciales : @entangle('credenciales'),
|
|
copiar:''
|
|
}" class="h-full w-full md:my-4">
|
|
|
|
<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="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-[95%] m-auto p-2 md:p-5 rounded-[1.2rem] border-b border-gray-200 shadow-md overflow-y-auto relative h-[95%] sm:h-[95%]">
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="gap-2 hidden sm:flex">
|
|
<select name="categoria_id" id="categoria_id" wire:model.debounce.500ms="categoria_id" 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>
|
|
<div>
|
|
<button x-on:click="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>
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 py-2 px-4">
|
|
|
|
@foreach ($promociones as $promocion)
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</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="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
|
|
<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" 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 comprar promno --}}
|
|
<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="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
|
|
<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" 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 ">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">
|
|
Pagara el valor de ${{number_format($total=((int)$precioAhora*(int)$cantidad_comprarPromo))}} <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>
|
|
|
|
</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="pagar" 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="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>
|
|
</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="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
|
|
<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%, , 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>
|
|
<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>
|
|
<div class="font-semibold text-gray-700">{{ $cuenta->servicio->nombre }} :</div>
|
|
<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 }} - email: {{ $cuenta->correo }} - Pass: {{ $cuenta->password }}</p>
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
<h1 class="flex mt-4 gap-1">
|
|
Este servicio vencerá el <p class="font-semibold text-gray-600">
|
|
{{ $cuentas->fecha_final ?? '' }}.</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>
|
|
<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);
|
|
}
|
|
</script>
|
|
|
|
</div>
|