153 lines
8.3 KiB
PHP
Executable File
153 lines
8.3 KiB
PHP
Executable File
<div class=" bg-gray-100">
|
|
|
|
<div class="md:px-10 py-8 ">
|
|
|
|
<h1 class="ml-2 text-xl sm:text-2xl font-black">
|
|
{{$servicio->nombre}}
|
|
</h1>
|
|
|
|
|
|
<div class="md:grid md:grid-cols-4 md:items-center ">
|
|
|
|
<div class="md:col-span-2 mb-4 md:mb-0 rounded-xl mx-2 md:w-[90%]">
|
|
<img src="{{asset($servicio->img_inicio) }}" alt="" class="rounded-xl md:w-[100%]">
|
|
</div>
|
|
|
|
|
|
<div class="px-8 mb-4 md:mb-0 md:border-r md:mr-6 max-w-xs">
|
|
<div class="mb-4">
|
|
@if($servicio->nombre == 'Youtube Premium' || $servicio->nombre== 'Spotify Premium')
|
|
<label class="block text-gray-700 font-bold mb-1">Dias</label>
|
|
<select name="" id="" wire:model="tarifa_id" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full md:w-[72%] sm:w-60 py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="">Dias</option>
|
|
@foreach ($servicio->tarifas as $tarifa)
|
|
<option value="{{$tarifa->id}}">{{$tarifa->dias}} Dias.</option>
|
|
@endforeach
|
|
</select>
|
|
@else
|
|
<label class="block text-gray-700 font-bold mb-1">Pantallas</label>
|
|
<select name="" id="" wire:model="tarifa_id" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full md:w-[72%] sm:w-60 py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="">Pantallas</option>
|
|
@foreach ($servicio->tarifas as $tarifa)
|
|
<option value="{{$tarifa->id}}">{{$tarifa->pantallas}} P.</option>
|
|
@endforeach
|
|
</select>
|
|
@endif
|
|
|
|
|
|
@if (!empty($disponibles))
|
|
<p class="italic text-green-500">
|
|
{{$disponibles ?? ''}} Cuentas disponibles.
|
|
</p>
|
|
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-1">Cantidad</label>
|
|
<input type="tel" wire:model="cantidad_tarjetaPlan" class="@error('cantidad_tarjetaPlan') border border-red-500 @enderror border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full md:w-[72%] py-2 px-3 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 class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-1">Descripción</label>
|
|
<p class="text-gray-500 ">
|
|
{{$servicio->descripcion}}
|
|
</p>
|
|
</div>
|
|
|
|
@if (!empty($valor))
|
|
<label class="block text-gray-700 font-bold mb-1">Precio</label>
|
|
<p class="font-bold text-lg"> ${{number_format( $valor ?? '')}}</p>
|
|
@else
|
|
|
|
|
|
<label class="block text-gray-700 font-bold mb-1">Precio</label>
|
|
@if ($servicio->tarifas_min_valor != $servicio->tarifas_max_valor)
|
|
<p class="font-bold text-lg"> {{number_format($servicio->tarifas_min_valor)}} - {{number_format($servicio->tarifas_max_valor)}}</p>
|
|
@else
|
|
<p class="font-bold text-lg"> {{number_format($servicio->tarifas_min_valor)}}</p>
|
|
@endif
|
|
|
|
|
|
@endif
|
|
</div>
|
|
|
|
<div class="px-8 mb-4 md:mb-0 md:mr-4 max-w-xs">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-1">Nombre</label>
|
|
<input type="text" wire:model="nombre_tarjetaPlan" class="@error('nombre_tarjetaPlan') border border-red-500 @enderror border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 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 class="block text-gray-700 font-bold mb-1">Email</label>
|
|
<input type="text" wire:model="email_tarjetaPlan" class="@error('email_tarjetaPlan') border border-red-500 @enderror border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 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 class="block text-gray-700 font-bold mb-1">Celular</label>
|
|
<input type="text" wire:model="celular_tarjetaPlan" class="@error('celular_tarjetaPlan') border border-red-500 @enderror border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 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 class="px-4 py-3 sm:px-6 sm:flex sm:justify-evenly">
|
|
<span>
|
|
<button wire:click="comprar" @if ($cantidad_tarjetaPlan <= (int)$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>Pagar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-10">
|
|
<p class="text-gray-600 text-center text-lg my-8">Planes relacionados</p>
|
|
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-items-center gap-y-8">
|
|
@php
|
|
$n=1;
|
|
@endphp
|
|
@foreach($planes as $plan)
|
|
@if (!empty($plan->tarifas->first()->pantallas) && $n<=4)
|
|
|
|
@php
|
|
$n++;
|
|
@endphp
|
|
<a href="/single?servicio={{$plan->id}}" class="rounded-xl mb-2 bg-white shadow-lg">
|
|
<div class=" w-36 sm:w-44 mb-2">
|
|
<img src="{{$plan->img_inicio}}" class="rounded-xl bg-white border-neutral-200 shadow-md w-full h-36 sm:h-44 cursor-pointer transition hover:scale-[1.05]">
|
|
<div class="px-4 py-2">
|
|
<p class="font-black">{{$plan->nombre}}</p>
|
|
<p class="text-sm"> {{$plan->descripcion}}</p>
|
|
@if ($plan->tarifas_min_valor != $plan->tarifas_max_valor)
|
|
<p class="font-bold text-base"> {{number_format($plan->tarifas_min_valor)}} - {{number_format($plan->tarifas_max_valor)}}</p>
|
|
@else
|
|
<p class="font-bold text-base"> {{number_format($plan->tarifas_min_valor)}}</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly mb-2">
|
|
|
|
<button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-1 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Comprar</button>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@include('layouts.footer')
|
|
</div>
|