Initial commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<img src="{{App\Models\Configuracione::Orderby('id','desc')->first()->url_logo}}" alt="" class="w-full">
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
|
||||
<div>
|
||||
{{ $logo }}
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
@props(['status'])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -0,0 +1 @@
|
||||
<a {{ $attributes->merge(['class' => 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
|
||||
@@ -0,0 +1,43 @@
|
||||
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white'])
|
||||
|
||||
@php
|
||||
switch ($align) {
|
||||
case 'left':
|
||||
$alignmentClasses = 'origin-top-left left-0';
|
||||
break;
|
||||
case 'top':
|
||||
$alignmentClasses = 'origin-top';
|
||||
break;
|
||||
case 'right':
|
||||
default:
|
||||
$alignmentClasses = 'origin-top-right right-0';
|
||||
break;
|
||||
}
|
||||
|
||||
switch ($width) {
|
||||
case '48':
|
||||
$width = 'w-48';
|
||||
break;
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
||||
<div @click="open = ! open">
|
||||
{{ $trigger }}
|
||||
</div>
|
||||
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
|
||||
style="display: none;"
|
||||
@click="open = false">
|
||||
<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
|
||||
{{ $content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
@props(['messages'])
|
||||
|
||||
@if ($messages)
|
||||
<ul {{ $attributes->merge(['class' => 'text-sm text-red-600 space-y-1']) }}>
|
||||
@foreach ((array) $messages as $message)
|
||||
<li>{{ $message }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
@@ -0,0 +1,5 @@
|
||||
@props(['value'])
|
||||
|
||||
<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
|
||||
{{ $value ?? $slot }}
|
||||
</label>
|
||||
@@ -0,0 +1,128 @@
|
||||
<div>
|
||||
<tr class="hover:bg-gray-200 hover:ring-gray-500 border-gray-200 text-sm text-left w-full pl-4 @if($historiales >= '1' ) bg-green-200 @endif" x-data="{ openOption: false }">
|
||||
<td><input type="checkbox" wire:model="delete_1" value="{{$cuenta->id}}"> </td>
|
||||
<td class="pl-[2rem]">{{ $cuenta->id ?? '' }}</td>
|
||||
<td class="pl-[2rem]">{{ $cuenta->servicio->nombre ?? '' }}</td>
|
||||
|
||||
<td class="pl-[2rem] text-xs sm:text-sm ">{{ $cuenta->correo?? '' }}</td>
|
||||
|
||||
<td class="pl-[2rem] text-xs hidden md:inline-table">{{ carbon\Carbon::parse($cuenta->inicio)->format('d M Y') ?? '' }} - {{ carbon\Carbon::parse($cuenta->vencimiento)->format('d M Y') ?? '' }}</td>
|
||||
|
||||
|
||||
@php
|
||||
$servicioNom = $cuenta->servicio->nombre ?? '';
|
||||
|
||||
$date1 = new DateTime(strtr(strval($fechaActual), '/', '-'));
|
||||
$date2 = new DateTime(strtr(strval($cuenta->vencimiento), '/', '-'));
|
||||
|
||||
@endphp
|
||||
|
||||
@if ($date1 < $date2)
|
||||
<td class="pl-[2rem]">
|
||||
@php
|
||||
$diff = $date1->diff($date2);
|
||||
echo $diff->days . ' dias';
|
||||
@endphp
|
||||
</td>
|
||||
@endif
|
||||
|
||||
@if ($date1 > $date2)
|
||||
<td class="pl-[2rem]">
|
||||
@php
|
||||
echo 'Vencido';
|
||||
@endphp
|
||||
</td>
|
||||
@endif
|
||||
|
||||
@if ($date1 == $date2)
|
||||
<td class="pl-[2rem]">
|
||||
@php
|
||||
echo 'Vence hoy!!';
|
||||
@endphp
|
||||
</td>
|
||||
@endif
|
||||
<p class="hidden" id="{{ $n }}">{{ $cuenta->servicio->nombre ?? ''}} - email:
|
||||
{{ $cuenta->correo ?? '' }} - Pass: {{ $cuenta->password ?? '' }}</p>
|
||||
<td class="pl-[2rem]">@if($cuenta->estado=='pendiente')
|
||||
@if($cuenta->historiales_count == 0)
|
||||
<p class="text-green-600 font-semibold"> Disponible </p>
|
||||
@else
|
||||
<p class="text-orange-600 font-semibold"> Ocupado </p>
|
||||
@endif
|
||||
|
||||
@else
|
||||
<p class="@if(($cuenta->historiales_count ?? '') == ($cuenta->servicio->pantallas ?? '' )) text-orange-600 font-semibold @else text-green-600 font-semibold @endif"> {{ $cuenta->historiales_count ?? '0' }}/{{$cuenta->servicio->pantallas?? '0'}} @endif @if($historiales >= '1')<span class="text-green-500 px-2 py-1 rounded-full bg-green-300">{{$historiales}}</span> </p> @endif
|
||||
</td>
|
||||
<td class="pl-[2rem] text-sm">@if ($cuenta->estado == 'pendiente') Cuenta completa @elseif($cuenta->estado == 'activo') Pantallas @else Inactiva @endif</td>
|
||||
<td class="m-auto hidden md:inline-table">
|
||||
<button x-on:click="ver=true"
|
||||
wire:click="ver({{ $cuenta->id }},'{{ $servicioNom }}')"
|
||||
class="bg-[#B221FD] hover:bg-[#7a02b8] text-white px-4 py-1 rounded-lg">Ver</button>
|
||||
</td>
|
||||
<td class="pl-2">
|
||||
<button x-on:click="openOption=!openOption" >
|
||||
<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 cursor-pointer">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
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>
|
||||
</button>
|
||||
|
||||
<div x-cloak x-show="openOption" @click.away="openOption = false"
|
||||
class="sm:absolute bg-white text-center w-[8rem] rounded-[1rem] border-b border-gray-200 shadow-lg">
|
||||
<button x-on:click="openOption=false,ver=true"
|
||||
wire:click="ver({{ $cuenta->id }},'{{ $servicioNom }}')"
|
||||
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Ver
|
||||
usuarios</button>
|
||||
<button x-on:click="openOption=false,observacionesm1=true"
|
||||
wire:click="verObservacion1({{ $cuenta->id }})"
|
||||
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">+
|
||||
Nota</button>
|
||||
<button x-on:click="openOption=false,observacionesm1=true"
|
||||
wire:click="verObservacion1({{ $cuenta->id }})"
|
||||
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">+
|
||||
Nota</button>
|
||||
<button x-on:click="openOption=false"
|
||||
onclick="copiarAlPortapapeles({{ $n }})"
|
||||
class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 ">Copiar
|
||||
cuenta</button>
|
||||
@if (auth()->user()->rol->nombre != "editor")
|
||||
<button x-on:click="openOption=false"
|
||||
wire:click="delete_cuenta({{ $cuenta->id }})"
|
||||
class="text-white w-full py-1 bg-[#ff5050] rounded-b-[1rem] hover:bg-[#fd2828] hover:rounded-b-[1rem]">Eliminar</button>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
<td class="pl-2 md:inline-table">
|
||||
@if(!empty($cuenta->observaciones))
|
||||
<div class="cursor-pointer" x-on:click="openOption=false,observacionesm1=true" title="{{$cuenta->observaciones}}" wire:click="verObservacion1({{ $cuenta->id }})" >
|
||||
<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 text-green-700">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
|
||||
</svg>
|
||||
</div>
|
||||
@else
|
||||
<div x-on:click="openOption=false,observacionesm1=true" title="Sin obversaciones"
|
||||
wire:click="verObservacion1({{ $cuenta->id }})">
|
||||
<svg class="w-7 cursor-pointer"
|
||||
xmlns="http://www.w3.org/2000/svg" version="1.1"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"
|
||||
x="0" y="0" viewBox="0 0 32 32"
|
||||
style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
|
||||
<g>
|
||||
<g id="Layer_57" data-name="Layer 57">
|
||||
<path
|
||||
d="m23 28a3 3 0 0 0 3-3v-13.17a3 3 0 0 0 -.88-2.12l-4.83-4.83a3 3 0 0 0 -2.12-.88h-8.17a3 3 0 0 0 -3 3v18a3 3 0 0 0 3 3zm-.41-18h-1.59a1 1 0 0 1 -1-1v-1.59zm-13.59 15v-18a1 1 0 0 1 1-1h8v3a3 3 0 0 0 3 3h3v13a1 1 0 0 1 -1 1h-13a1 1 0 0 1 -1-1z"
|
||||
fill="#d3b637" data-original="#000000" class=""></path>
|
||||
<path
|
||||
d="m12.5 19.5h2.5v2.5a1 1 0 0 0 2 0v-2.5h2.5a1 1 0 0 0 0-2h-2.5v-2.5a1 1 0 0 0 -2 0v2.5h-2.5a1 1 0 0 0 0 2z"
|
||||
fill="#d3b637" data-original="#000000" class=""></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
@props(['active'])
|
||||
|
||||
@php
|
||||
$classes = ($active ?? false)
|
||||
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
|
||||
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
|
||||
@endphp
|
||||
|
||||
<a {{ $attributes->merge(['class' => $classes]) }}>
|
||||
{{ $slot }}
|
||||
</a>
|
||||
@@ -0,0 +1,3 @@
|
||||
<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-[#B221FD] border-none rounded-md font-semibold text-xs text-white hover:bg-[#7a02b8] active:bg-[#B221FD] focus:outline-none focus:ring ring-white disabled:opacity-25 transition ease-in-out duration-150']) }}>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
@@ -0,0 +1,11 @@
|
||||
@props(['active'])
|
||||
|
||||
@php
|
||||
$classes = ($active ?? false)
|
||||
? 'flex fill-white block pl-3 pr-4 py-3 text-base text-white bg-[#000029] focus:outline-none focus:text-white focus:bg-[#000040] transition duration-150 ease-in-out rounded-xl'
|
||||
: 'flex block pl-3 pr-4 py-3 text-base font-medium text-[#000029] transition duration-150 ease-in-out rounded-none';
|
||||
@endphp
|
||||
|
||||
<a {{ $attributes->merge(['class' => $classes]) }}>
|
||||
{{ $slot }}
|
||||
</a>
|
||||
@@ -0,0 +1,163 @@
|
||||
<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">
|
||||
<svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z" fill="#b221fd" data-original="#000000"/></g></svg>
|
||||
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 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>
|
||||
@@ -0,0 +1,83 @@
|
||||
<div >
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
||||
<main class=" text-white flex items-center justify-center py-2" x-data="carouselFilter()">
|
||||
<div class="container grid grid-cols-1">
|
||||
|
||||
|
||||
<div class="row-start-2 col-start-1"
|
||||
x-show="active == 0"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 transform scale-90"
|
||||
x-transition:enter-end="opacity-100 transform scale-100"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100 transform scale-100"
|
||||
x-transition:leave-end="opacity-0 transform scale-90"
|
||||
>
|
||||
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
||||
|
||||
|
||||
|
||||
<div class="carousel col-start-1 row-start-1" x-ref="carousel" >
|
||||
@php
|
||||
$n=0;
|
||||
@endphp
|
||||
@foreach ($promociones as $promocion)
|
||||
<div class=" px-3 ">
|
||||
|
||||
<img
|
||||
src="{{asset($promocion->slider)}}"
|
||||
loading="lazy" class=" object-cover drop-shadow-lg h-[150px] xl:h-[350px] sm:h-[150px] md:h-[300px] lg:h-[300px] w-full object-center rounded-lg sm:rounded-3xl m-2 ">
|
||||
|
||||
|
||||
</div>
|
||||
@php
|
||||
$n++;
|
||||
@endphp
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
||||
<script>
|
||||
function carousel() {
|
||||
return {
|
||||
active: 0,
|
||||
init() {
|
||||
var flkty = new Flickity(this.$refs.carousel, {
|
||||
wrapAround: true,
|
||||
autoPlay:true
|
||||
});
|
||||
flkty.on('change', i => this.active = i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function carouselFilter() {
|
||||
return {
|
||||
active: 0,
|
||||
changeActive(i) {
|
||||
this.active = i;
|
||||
|
||||
this.$nextTick(() => {
|
||||
let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
|
||||
flkty.resize();
|
||||
|
||||
console.log(flkty);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
@props(['disabled' => false])
|
||||
|
||||
<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'rounded-lg shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}>
|
||||
Reference in New Issue
Block a user