130 lines
7.1 KiB
PHP
Executable File
130 lines
7.1 KiB
PHP
Executable File
<div x-data="{ categorian: @entangle('categorian'),verPro: @entangle('verPro')}" class="h-full w-full md:my-2">
|
|
<div class="text-right mx-12">
|
|
<a href="/#planes">
|
|
<button 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 planes</button>
|
|
</a>
|
|
</div>
|
|
<div class=" md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem] relative mb-4">
|
|
|
|
<div class="mx-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 una categoria:</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 ($categorias as $categoria1)
|
|
<td>
|
|
<div class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[250px] sm:w-[450px] sm:h-[450px] mx-4" x-on:click="categorian='{{ $categoria1->nombre }}'">
|
|
|
|
<img src="{{ asset($categoria1->imagen) }}" class="w-full m-auto rounded-lg object-cover h-full object-center shadow" alt="imagen de {{ $categoria1->nombre }}">
|
|
|
|
</div>
|
|
</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="verPro=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 ($categorian)
|
|
<div class="bg-[#f8f8f8] shadow-md rounded-[1.2rem] mb-4 px-4 py-4">
|
|
<div class="mb-2">
|
|
<h2>Seleccione una promocion:</h2>
|
|
</div>
|
|
|
|
<div id="promo" class="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 py-2 px-4">
|
|
|
|
@foreach ($categorias->where('nombre', $categorian)->first()->promociones as $promocion)
|
|
@if ($promocion->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 ">
|
|
<a href="/promo?promo={{$promocion->id}}">
|
|
<img src="{{ asset($promocion->img_publicidad) }}" alt="" class="w-full m-auto rounded-lg object-cover h-24 sm:h-44 object-center shadow">
|
|
</a>
|
|
</div>
|
|
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</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">
|
|
|
|
<img src="{{ asset($categoria1->imagen) }}"
|
|
class="w-full m-auto rounded-lg object-cover h-full object-center shadow"
|
|
alt="">
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<script>
|
|
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>
|