@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
@endsection
@section('content')
    <div  id="mobile-menu" class="mobile-menu">
        <button @click="animateMenu"  id="mobile-menu-button" class="mobile-menu__button"><i class="fas fa-bars"></i></button>
    </div>
    <header class="internal-header">
        <div class="container">

            @include('front.partials.sticky')
              <ul id="main-nav" class="main-nav main-nav--subarticle" role="navigation">
                 @include('front.partials.menu')
              </ul>
        </div>
    </header>

    <div class="hero subarticle-hero subarticle-hero--club">
        <div class="container subarticle-hero__container">
            <h1 class="subarticle-hero__heading tittle-club">
                BEACH
            </h1>
            <p class="paragraph-tittle club">CLUB</p>
        </div>
    </div>
    <div class="container ribbon__container">
        <nav class="ribbon">
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Tierra Tropical <br> Beach Club</h1>
                    <p class="ribbon-item__info">A partir del 14 de noviembre 2018.</p>
                </div>
            </div>
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Martes a Sábado</h1>
                    <p class="ribbon-item__info"> De 10:00 a.m. a 8:00 p.m.</p>
                </div>
            </div>
            {{-- add --}}
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Domingo</h1>
                    <p class="ribbon-item__info"> De 11:00 a.m. a 7:00 p.m.</p>
                </div>
            </div>
            <div class="ribbon-item ribbon-item--extende ribbon-item--center">
                <button class="button button--primary ribbon__button" @click="playVideo = true"><span class="text">Ver video</span> <svgIcon src="/svg/play.svg"></svgIcon></button>
            </div>
        </nav>
    </div>
    <section class="section section--subarticle">
        <div class="container">
            <div class="polo-academy">
                <div class="polo-academy__image">
                    <img src="img/clubplaya/club-learn.jpg" alt="">
                </div>
                <div class="polo-academy__info">
                    <h2 class="brand polo-academy__brand">Disfruta nuestro</h2>
                    <h1 class="polo-academy__headline">
                        Day Pass
                    </h1>
                    <p class="polo-academy__copy">Una de las amenidades más recientes dentro de nuestro club de playa es el Day Pass, dirigido a los visitantes locales y turistas que buscan desconectarse de la vida rutinaria en un lugar que invite a la relajación en un contexto de intimidad con la naturaleza.</p>
                    <p class="polo-academy__copy">Nuestra carta de alimentos ha sido creada especialmente por nuestro Chef, Hugo Ahumada, y aseguramos deleitará el paladar más exigente. El asistente podrá disfrutar de actividades complementarias como cancha de voleibol y mesas de juego entre otros.</p>
                    <button class="button button--ghost-secondary polo-academy__button" type="button" name="button" @click.prevent="modalActive = !modalActive">Asistir</button>
                </div>
            </div>
        </div>
    </section>
    <imggallery :query="'Beach Club'"></imggallery>
    <div class="overlay" :class="{active: modalActive}" @click.prevent="modalActive = !modalActive">
        <div class="lightbox" class="lightbox" @click.stop>
            <div class="lightbox__close" @click.prevent="modalActive = !modalActive"></div>
            <div class="lightbox__image lightbox__image" style="background-image:url('img/clubplaya/club-modal.jpg');">
                <img src="" alt="">
            </div>
            <div class="lightbox__info">
                <template v-if="!thanks">
                    <div class="lightbox__headline">
                        Club de Playa <strong>Day Pass</strong>
                        <p class="lightbox-paragraph">¿Deseas recibir información y costos? Envíanos un mensaje y estaremos en contacto.</p>
                    </div>
                    <form id="beach-club-day-pass-form" class="lightbox-form" @submit.prevent="sendContact('Beach Club Day Pass', true,'reservaciones@tierratropical.com.mx')">
                        <div class="form-control lightbox__control">
                            <label class="polo-contact__label" for="">Nombre Completo</label>
                            <input v-model="contact.name" class="polo-contact__input" type="text" name="" value="" placeholder="Nombre" required>
                        </div>
                        <div class="form-control lightbox__control ">
                            <label class="polo-contact__label" for=""> Correo</label>
                            <input v-model="contact.email" class="polo-contact__input" type="email" name="" value="" placeholder="Email" required>
                        </div>
                        <div class="form-control lightbox__control">
                            <label class="polo-contact__label" for=""> Teléfono </label>
                            <input v-model="contact.phone" class="polo-contact__input" type="tel" name="" value="" placeholder="Lada + teléfono" required>
                        </div>
                    </form>

                    <button form="beach-club-day-pass-form" class="button button--secondary lightbox__button" type="submit" name="button">Enviar</button>
                </template>
                <div class="lightbox-thanks" v-else>
                    <svgicon class="lightbox-thanks__icon" src="svg/thanks.svg"></svgicon>
                    <h1 class="lightbox-thanks__headline">Gracias</h1>
                    <p class="lightbox-thanks__subhead">Hemos recibido tu mensaje, te contactaremos por correo para dar seguimiento a tu petición.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="overlay" :class="{active: playVideo}" @click="playVideo = false" v-if="playVideo">
        <div class="lightbox lightbox--video">
            <div class="lightbox__close lightbox__close--outside" @click.prevent="playVideo = !playVideo"></div>
            <video @click.stop style="max-width:100%" src="/videos/beach_club_day_pass.mp4" autoplay controls poster=""></video>
        </div>
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection