164 lines
14 KiB
PHP
Executable File
164 lines
14 KiB
PHP
Executable File
<div x-data="{tarjetaPlan : @entangle('tarjetaPlan')}" class="h-full w-full md:my-4">
|
|
{{-- cargando
|
|
<div class=" absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading wire:target="cargartarjetaPlan">
|
|
<div class="grid h-screen place-items-center ">
|
|
<div class="max-w-xs">
|
|
<img src="./img/loading.gif" alt="" class="w-full text-center" >
|
|
<p class="text-gray-500 text-center">Creando producto..</p>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
<div x-data="{servicio:@entangle('servicio')}" class="bg-white md:w-[95%] m-auto p-2 md:p-5 rounded-[1.2rem] border-b border-gray-200 shadow-md relative h-[95%]">
|
|
<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="overflow-y-auto h-[650px]">
|
|
<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-3 md:grid-cols-4 lg:grid-cols-6 gap-4 lg:gap-8">
|
|
@foreach ($servicios->where('nombre',$servicio)->first()->tarifas as $tarifa)
|
|
@if ($tarifa->estado == 'activo')
|
|
<button wire:click="cargartarjetaPlan({{$tarifa->id}})" class="shadow-md transition hover:scale-[1.05] hover:shadow-xl px-4 py-2 rounded-lg text-white" style="background: rgb(0,0,0);
|
|
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, {{ $tarifa->servicio->color_fondo }} 0%, rgba(20,20,20,1) 100%);">
|
|
<p class="font-bold mb-2">
|
|
{{$servicio}} - {{$tarifa->pantallas}} pantallas
|
|
</p>
|
|
|
|
<div class="flex items-center justify-around">
|
|
<div>
|
|
<p class="text-xs text-left">
|
|
{{$tarifa->dias}} Dias
|
|
</p>
|
|
|
|
<p class="text-left">
|
|
${{number_format($tarifa->valor)}}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span>
|
|
<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-8" x="0" y="0" viewBox="0 0 475 475.837" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g transform="matrix(1,0,0,1,35,0)"><path d="m288.160156 227.789062c0-17.878906 13.527344-32.367187 30.21875-32.367187h.671875c16.65625 0 30.179688 14.429687 30.21875 32.277344.140625 58.390625.050781 64.121093-.03125 151.332031-.050781 48.96875-37.121093 88.628906-82.828125 88.628906h-98.140625c-30.03125 0-57.71875-17.421875-72.351562-45.519531l-87.5-168.109375 9.140625-7.582031c18.929687-17.398438 47.398437-15.257813 63.871094 4.789062l24.488281 29.8125.140625-205.089843c.011718-17.871094 13.539062-32.351563 30.21875-32.351563h.011718c16.691407 0 30.21875 14.5 30.21875 32.378906v124.121094c.402344-17.5 13.769532-31.53125 30.199219-31.53125h.710938c16.691406 0 30.222656 14.492187 30.222656 32.371094v10.421875c0-17.882813 13.527344-32.371094 30.226563-32.371094h.070312c16.691406 0 30.222656 14.488281 30.222656 32.371094zm0 0" fill="#ffffff" data-original="#f7caa5" class=""></path><g fill="#083863"><path d="m319.050781 187.828125h-.671875c-9.125-.042969-17.9375 3.3125-24.71875 9.414063-5.488281-15.203126-19.441406-26.140626-35.792968-26.140626-10.027344.070313-19.597657 4.191407-26.542969 11.429688-6.378907-12.925781-19.175781-21.703125-33.90625-21.703125h-.710938c-7.871093-.132813-15.5625 2.386719-21.828125 7.15625v-91.996094c0-22.261719-17.332031-40.378906-38.414062-40.378906-21.0625 0-38.300782 18.101563-38.3125 40.34375l-.171875 182.777344-10.347657-12.566407c-9.070312-11.289062-22.421874-18.296874-36.859374-19.355468-14.152344-.972656-28.078126 3.953125-38.46875 13.609375l-8.992188 7.457031c-2.902344 2.402344-3.730469 6.507812-1.992188 9.851562l87.5 168.199219c16 30.734375 46.445313 49.910157 79.445313 49.910157h98.140625c50.03125 0 90.777344-43.429688 90.832031-96.707032.023438-24.152344.042969-42.101562.0625-56.601562.050781-38.25.066407-52.382813-.035156-94.613282-.046875-22.207031-17.191406-40.085937-38.214844-40.085937zm22.253907 134.632813c-.019532 14.5-.042969 32.492187-.066407 56.644531-.046875 44.464843-33.613281 80.722656-74.828125 80.722656h-98.140625c-27.015625 0-52.019531-15.875-65.253906-41.296875l-84.519531-162.421875 4.167968-3.480469c.101563-.085937.207032-.1875.308594-.277344 7.175782-6.757812 16.835938-10.226562 26.671875-9.578124 10.042969.765624 19.316407 5.675781 25.601563 13.546874l24.488281 29.808594c2.144531 2.613282 5.695313 3.59375 8.878906 2.457032 3.179688-1.140626 5.300781-4.152344 5.304688-7.53125l.140625-205.089844c.007812-13.429688 10.160156-24.355469 22.414062-24.355469s22.40625 10.9375 22.40625 24.378906v124.050781c0 .300782-.019531.597657-.019531.902344 0 .128906.019531.257813.019531.386719v53.050781c0 4.417969 3.582032 8 8 8 4.417969 0 8-3.582031 8-8v-54.128906c0-13.054688 9.898438-23.421875 21.828125-23.421875h.710938c12.253906 0 22.460937 10.683594 22.460937 24.121094v48.378906c0 4.421875 3.582032 8 8 8 4.417969 0 8-3.578125 8-8v-37.957031c0-13.4375 9.710938-24.371094 22.039063-24.371094 12.253906 0 21.960937 10.933594 21.960937 24.371094v35.808594c0 4.417968 3.582032 8 8 8 4.417969 0 8-3.582032 8-8v-19.390626c0-13.4375 10.246094-23.960937 22.5-23.960937h.671875c12.21875 0 22.1875 10.695313 22.21875 24.097656.101563 42.203125.082031 56.304688.035157 94.535157zm0 0" fill="#000000" data-original="#083863" class=""></path></g></g></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<h2>Seleccione un servicio:</h2>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 py-2 px-4">
|
|
@foreach ($servicios as $servicio)
|
|
<button class="transition hover:scale-[1.05] " x-on:click="servicio='{{$servicio->nombre}}'">
|
|
<img src="{{asset($servicio->img)}}" class="w-full m-auto rounded-lg object-cover h-full object-center shadow" alt="">
|
|
<!--p>{{$servicio->nombre}}</p-->
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</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">
|
|
<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 max-h-screen 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">
|
|
{{$servicio_tarjetaPlan}} - {{$pantallas_tarjetaPlan}} pantallas
|
|
</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">
|
|
<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">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between text-left gap-2">
|
|
<div class="mb-4">
|
|
<label for="email_tarjetaPlan" class="block text-gray-700 text-sm font-bold mb-2">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">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="cantidad_tarjetaPlan" class="block text-gray-700 text-sm font-bold mb-2">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">
|
|
<div class="text-sm text-green-600 italic">{{(int)$disponibles}} planes disponibles </div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<p class="text-xs text-gray-400">
|
|
Este servicio vencerá el {{$fechaFinal}} en {{$dias_tarjetaPlan}} 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 ${{number_format($total=((int)$valor_tarjetaPlan*(int)$cantidad_tarjetaPlan))}} . <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="comprar" type="button" @if ($cantidad_tarjetaPlan <= $disponibles) 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>
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span>
|
|
<button x-on:click="tarjetaPlan=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>
|
|
|
|
</div>
|