@extends('layouts.jovenes')

@section('title', $page->post->title)

@section('content')
    <article class="page" id="home">
        @if($options->video)
            <section class="video">
                <video src="{{ asset($options->video) }}" loop muted autoplay controls></video>
            </section>
        @endif
        @if($section = $page->getSection('evento'))
            <section class="content evento" id="evento" style="background-image: url('{{ asset($section->image->src) }}');">
                <h1 data-aos="fade-in">
                    <div class="container">
                        {{ $section->post->title }}
                    </div>
                </h1>
                <div class="container">
                    <div class="content-html" data-aos="fade-up">
                        {!! $section->post->content !!}
                    </div>
                    @if($section->atts->url)
                        <div class="mt-lg-5 mt-md-4 mt-3 text-end" data-aos="fade-up">
                            <a href="{{ url($section->atts->url) }}" class="btn btn-secondary">{{ $section->atts->url_text ?? 'Ver más >' }}</a>
                        </div>
                    @endif
                </div>
            </section>
        @endif
        @if($section = $page->getSection('agenda'))
            <section class="content agenda" id="agenda">
                <h1 data-aos="fade-in">
                    <div class="container">{{ $section->post->title }}</div>
                </h1>
                <div class="container">
                    @if($section->image)
                        <img src="{{ asset($section->image->src) }}" alt="" class="mx-auto">
                    @endif
                    @if($section->atts->url)
                        <div class="mt-lg-5 mt-md-4 mt-3 text-center" data-aos="fade-up">
                            <a href="{{ url($section->atts->url) }}" class="btn btn-secondary">{{ $section->atts->url_text ?? 'Ver más >' }}</a>
                        </div>
                    @endif
                </div>
            </section>
        @endif
        @if($section = $page->getSection('conferencistas'))
            <section class="content conferencistas" id="conferencistas">
                <h1 data-aos="fade-in">
                    <div class="container">{{ $section->post->title }}</div>
                </h1>
                <div class="container">
                    <div class="row g-lg-5 g-md-4 g-3 mt-lg-5 mt-md-4 mt-3">
                        @foreach($section->images->sortBy('post.order') as $medium)
                            <div class="col-md-3 col-6" data-aos="fade-up">
                                <div class="ratio ratio-1x1 mb-md-4 mb-3">
                                    <img src="{{ asset($medium->src) }}" alt="" class="img-cover">
                                </div>
                                <h3>{{ $medium->post->title }}</h3>
                                <h4>{{ $medium->post->excerpt }}</h4>
                                <a href="#" class="btn btn-white btn-sm mt-md-4 mt-3">Ver perfil</a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        @if($section = $page->getSection('inscripciones'))
            <section class="content inscripciones" id="inscripciones">
                <h1 data-aos="fade-in">
                    <div class="container">{{ $section->post->title }}</div>
                </h1>
                <div class="container">
                    <div class="content-html">
                        {!! $section->post->content !!}
                    </div>
                    @if($section->atts->url)
                        <div class="mt-lg-5 mt-md-4 mt-3 text-center" data-aos="fade-up">
                            <a href="{{ url($section->atts->url) }}" class="btn btn-primary btn-lg" target="_blank">{{ $section->atts->url_text ?? 'Leer más >' }}</a>
                            <a href="https://bit.ly/3Qr913T" class="btn btn-primary btn-lg mt-md-0 mt-3" target="_blank">Pagar mi inscripción</a>
                        </div>
                    @endif
                </div>
            </section>
        @endif
        <section class="content sede" id="sede">
            <div class="container">
                <div class="row g-lg-5 g-md-4 g-3">
                    @if($section = $page->getSection('sede'))
                        <div class="col-lg-6">
                            <h1 data-aos="fade-in">{{ $section->post->title }}</h1>
                            @if($section->post->excerpt)
                                <div class="ratio ratio-16x9">
                                    {!! $section->post->excerpt !!}
                                </div>
                            @endif
                            <div class="content-html mt-md-4 mt-3">
                                {!! $section->post->content !!}
                            </div>
                            @if($section->atts->url)
                                <div class="mt-md-4 mt-3">
                                    <a href="{{ url($section->atts->url) }}" class="btn btn-primary btn-sm">{{ $section->atts->url_text ?? 'Leer más >' }}</a>
                                </div>
                            @endif
                        </div>
                    @endif
                    @if($section = $page->getSection('hotel'))
                        <div class="col-lg-6">
                            <h1 data-aos="fade-in">{{ $section->post->title }}</h1>
                            @if($section->post->excerpt)
                                <div class="ratio ratio-16x9">
                                    {!! $section->post->excerpt !!}
                                </div>
                            @endif
                            <div class="content-html mt-md-4 mt-3">
                                {!! $section->post->content !!}
                            </div>
                            @if($section->atts->url)
                                <div class="mt-md-4 mt-3">
                                    <a href="{{ url($section->atts->url) }}" class="btn btn-primary btn-sm">{{ $section->atts->url_text ?? 'Leer más >' }}</a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </section>
        @foreach($page->sections->where('selector', 'logos')->sortBy('post.order') as $section)
            @if($section->images->count())
                <section class="content marcas" id="{{ slug($section->post->title) }}">
                    <h1 data-aos="fade-in">
                        <div class="container">{{ $section->post->title }}</div>
                    </h1>
                    <div class="container">
                        <div class="content-html" data-aos="fade-in">
                            {!! $section->post->content !!}
                        </div>
                        <div class="row g-lg-5 g-md-4 g-3 mt-lg-5 mt-md-4 mt-3 justify-content-center">
                            @foreach($section->images->sortBy('post.order') as $medium)
                                <div class="col-md-3 col-6" data-aos="fade-up">
                                    <a href="{{ $medium->atts->url }}" target="_blank">
                                        <div class="ratio ratio-21x9">
                                            <img src="{{ asset($medium->src) }}" alt="" class="img-absolute">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif
        @endforeach

        <section class="content contacto" id="contacto">
            <h1 data-aos="fade-in">
                <div class="container">Contacto</div>
            </h1>
            <div class="container">
                <div class="row g-lg-5 g-md-4 g-3 align-items-center">
                    <div class="col-12 text-center">
                        <p>Podés escribirnos o enviarnos tus datos de inscripción a: <b style="color: white;"><a href="mailto:info.5encuentrojovenes@gmail.com">info.5encuentrojovenes@gmail.com</b></a></p>
                    </div>
                    <div class="col-lg-4" data-aos="fade-right">
                        <img src="{{ asset('assets/images/joveneslecheros/logo-2.png') }}" alt="" class="mx-auto">
                    </div>
                    <div class="col-lg-8" data-aos="fade-left">
                        {!! Form::open([
                            'class' => 'ajax-form',
                            'route' => 'form.contact'
                        ]) !!}
                        <div class="row g-lg-5 g-md-4 g-3 mt-lg-5 mt-md-4 mt-3">
                            <div class="col-md-4 text-md-end">
                                <label class="form-label">Nombre:</label>
                            </div>
                            <div class="col-md-8">
                                {!! Form::text('name', null, ['class' => 'form-control', 'data-required']) !!}
                            </div>
                            <div class="col-md-4 text-md-end">
                                <label class="form-label">Email:</label>
                            </div>
                            <div class="col-md-8">
                                {!! Form::email('email', null, ['class' => 'form-control', 'data-required']) !!}
                            </div>
                            <div class="col-md-4 text-md-end">
                                <label class="form-label">Comentario:</label>
                            </div>
                            <div class="col-md-8">
                                {!! Form::textarea('message', null, ['class' => 'form-control', 'data-required', 'rows' => 5]) !!}
                            </div>
                            <div class="col-md-8 text-md-end offset-md-4">
                                <button class="btn btn-secondary btn-sm">Enviar mensaje</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
                <nav class="social-nav mt-lg-5 mt-md-4 mt-3">
                    <ul class="list-unstyled">
                        <li>
                            <a href="{{ $options->facebook }}" target="_blank" class="fab fa-facebook"></a>
                        </li>
                        <li>
                            <a href="{{ $options->instagram }}" target="_blank" class="fab fa-instagram-square"></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </section>
    </article>
@endsection

@push('scripts')
    <div class="fixed-button" style="display: none;">
        <div class="message">Hola, escribinos aquí</div>
        <a href="{{ $options->whatsapp }}" class="fab fa-whatsapp" target="_blank"></a>
    </div>
@endpush