@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--cena">
        <div class="container subarticle-hero__container">
            <h1 class="subarticle-hero__heading subarticle-hero__heading--gastronomy">
                Gastronomía
            </h1>
            <div id="subarticle-hero__mask"  class="subarticle-hero__mask subarticle-hero__mask--cena"></div>
        </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">
                        Gastronomía
                    </h1>
                    <p class="ribbon-item__info">
                        De Hugo Ahumada
                    </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/cena/cena-hugo.png" alt="Learn from the best">
                </div>
                <div class="polo-academy__info">
                    <h2 class="brand polo-academy__brand">Cocina</h2>
                    <h1 class="polo-academy__headline">
                        Poética de
                        <p class="polo-academy__subhead">
                            Hugo Ahumada
                        </p>
                    </h1>
                    <p class="polo-academy__copy">
                        Su cocina poética alimenta no sólo al cuerpo, también la mente y el espíritu de quien vive la experiencia. Los comensales tendrán una amplia variedad dentro del menú basado en la Cocina Poética, degustando productos de la más alta calidad, algunos de ellos provenientes de nuestro huerto orgánico.
                    </p>
                    <p class="polo-academy__copy">
                        Asimismo, los clientes podrán solicitar previo a su visita, un menú especial con opciones veganas y vegetarianas. Contamos también con una amplia carta de vinos resguardados en nuestra cava.
                    </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="'cena'"></imggallery>

    <div class="overlay" :class="{active: modalActive}" @click.prevent="modalActive = !modalActive">
        <div class="lightbox" @click.stop>

            <div class="lightbox__close" @click.prevent="modalActive = !modalActive"></div>
            <div class="lightbox__image lightbox__image" style="background-image:url('img/cena/cena-modal.jpg');">
                <img src="" alt="">
            </div>

            <div class="lightbox__info">

                <template v-if="!thanks">
                    <div class="lightbox__headline">
                        Cenas del Chef
                        <p class="lightbox-paragraph">¿Deseas recibir información y costos? Envíanos un mensaje y estaremos en contacto.</p>
                    </div>

                    <form id="chefs-dinner-form" class="lightbox-form" @submit.prevent="sendContact('Cenas del Chef', 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="chefs-dinner-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/cena_apertura.mp4" autoplay controls poster=""></video>
        </div>
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection