@extends('layouts.layout')

@section('title', 'Ayuda')

@section('background', asset('img/servicio.jpg'))

@section('content')
    <div class="container mx-auto px-6 py-5">
        <div class="sec-title text-center mb-5">
            <h2 class="text-gray-900 relative uppercase text-4xl pb-4">Soporte / Ayuda</h2>
			<p class="py-5">Explora las opciones del menú y despeja tus dudas</p>
        </div>
        <div class="grid gap-4 grid-cols-1 md:grid-cols-4">
            <div class="relative">
                <ul class="lish">
					@foreach ($helps as $help)
						<li class="text-auto-blue-dark font-bold text-lg pt-1">
							<a href="#faq{{ $help->id }}">
								<i class="fas fa-caret-right"></i> {{ $help->title }}
							</a>
						</li>
					@endforeach
                </ul>
            </div>
            <div class="md:col-span-3">
				@foreach ($helps as $help)
					<div class="pb-8">
						<h4 id="faq{{ $help->id }}" class="text-xl text-auto-blue-dark border-b border-gray-400">{{ $help->title }}</h4>

						@if ($help->url_youtube)
							<iframe src="{{ $help->url_youtube }}" width="100%" height="300" frameborder="0" allowfullscreen  style="padding-top: 10px; padding-bottom:20px;"></iframe>
						@endif

						<div>{!! $help->description !!}</div>

						@if ($help->image)
							<img src="{{ asset($help->urlImage) }}" alt="{{ $help->title }}" title="{{ $help->title }}" class="w-full h-auto rounded py-2" />
						@endif
					</div>
				@endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
	<script>
		$(document).ready(function() {
            $('a[href^="#"]').click(function() {
                var destino = $(this.hash);

                if (destino.length == 0) {
                    destino = $('a[name="' + this.hash.substr(1) + '"]');
                }

                if (destino.length == 0) {
                    destino = $('html');
                }

                $('html, body').animate({
                    scrollTop: destino.offset().top
                }, 500);

                destino = $(this.hash).addClass("mt-32");
                return false;
            });
        });
	</script>
@endpush