@extends('front.layouts.app')
@section('local_styles')
<link rel="stylesheet" href="/css/subarticle.css">
<style media="screen">
    .vdp-datepicker__calendar {
        width: 100%!important;
        border: 1px solid #3a5737;
        border-radius: 4px!important;
    }

    /* .vdp-datepicker__calendar header .prev, .vdp-datepicker__calendar header .next, .vdp-datepicker__calendar header span {
        background: #3a5737!important;
        color: #fff!important;
    } */

    .vdp-datepicker__calendar .cell.day-header {
        background: #3a5737!important;
        color: #fff!important;
        height: 50px!important;
        line-height: 50px!important;
    }

    .vdp-datepicker__calendar .cell {
        height: 90px!important;
        line-height: 90px!important;
        font-size: 18px!important;
    }

    .vdp-datepicker__calendar .cell.day-header {
        background: #3a5737!important;
        color: #fff!important;
        height: 55px!important;
        line-height: 55px!important;
    }

    .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
        border: 1px solid #3a5737!important;
    }

    .vdp-datepicker__calendar .cell.selected {
        background: #3a5737!important;
        color: #fff!important;
    }
    </style>
@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--eventos">
    <div class="container subarticle-hero__container">
        <h1 class="subarticle-hero__heading tittle-eventos">Eventos</h1>
        <div class="subarticle-hero__hat" style="background-image: url('/img/eventos/eventos-umb.png')"></div>
    </div>
</div>
<div class="container ribbon__container">
    <nav class="ribbon">
        <div class="ribbon-item ribbon-item--extende">
            <div class="ribbon-item__copy ribbon-item__copy--title">
                <h1 class="ribbon-item__heading">Eventos</h1>
                <p class="ribbon-item__info">Nuestros eventos anteriores.</p>
            </div>
        </div>
    </nav>
</div>
{{-- <div class="container container__select__events">
    <select class="select__events" name="">
        <option value="new">Proximos eventos</option>
        <option value="old">Eventos anteriores</option>
    </select>
</div> --}}
<div class="container events__tabs">
    <div class="tabs" id="new">
        <section class="container__events__date">
            <div class="container">
                <div class="eventos-fieldset-text" style="padding:0">
                    <h1>Proximos eventos</h1>
                </div>
            </div>
            <events></events>
        </section>
    </div>
    <div class="tabs" id="old">
        <section class="section section-eventos">
            <div class="container">
                <div class="eventos-fieldset-text" style="padding:0">
                    <h1>Nuestros eventos anteriores</h1>
                </div>

            </div>
            <div class="container container__eventos">
                @foreach ($events as $event)

                <div class="eventos">
                    <span class="eventos__fecha">{{$event->formated_date}}</span>
                    <div class="eventos-fieldset">
                        <div class="eventos-fieldset-text">
                            <h1>{{$event->title}}</h1>
                            {!! $event->article !!}
                        </div>
                        <div class="eventos-fieldset-image">
                            <div class="fieldset-img" style="background-image: url('{{$event->image}}')">
                            </div>
                            <a @click.prevent="eventType = {{$event->id}}; modalActive = true" class="btn-eventos">Ver galería<img src="/img/eventos/galeria.png" alt=""></a>
                            @if ($event->future_event)
                            <a target="_blank" href="https://calendar.google.com/calendar/r/eventedit?text={{ urlencode($event->title) }}&dates={{ urlencode($event->url_date) }}Z/{{ urlencode($event->url_date) }}Z&details=For+details,+link+here:+{{ urlencode(url()->full()) }}&location=La+Patrona+Polo+Club&sf=true&output=xml"
                                class="btn-eventos">Agregar a calendario</a>
                            @endif
                        </div>
                    </div>
                </div>

                <eventslider v-on:close-slider="modalActive = false" :query="'{{$event->id}}'" v-if="modalActive && eventType == {{$event->id}}"></eventslider>
                @endforeach
            </div>
        </section>
    </div>
</div>

<section class="section section--subarticle section--subarticle__events">
    <div class="container">
        <div class="polo-academy">
            <div class="polo-academy__image">
                <img src="img/eventos/eventos-plate.png" alt="Learn from the best">
            </div>
            <div class="polo-academy__info">
                <h2 class="brand polo-academy__brand">Expertos en</h2>
                <h1 class="polo-academy__headline headline-eventos">
                    Producción <p class="polo-academy__subhead">de eventos</p>
                </h1>
                <p class="polo-academy__copy">En Tierra Tropical también somos anfitriones de eventos sociales, corporativos, deportivos y turísticos que incluyen el uso de nuestras instalaciones y mobiliario en el Club de Polo, Club de Playa y
                    Huerto Orgánico. Además, ofrecemos nuestros servicios de alimentos y bebidas, exhibiciones de polo y ecuestres que agregan un valor adicional a la experiencia de sus eventos. </p>
            </div>
        </div>
    </div>
</section>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-contact eventos-contact">
            <h1 class="polo-contact__headline">¿DESEAS RECIBIR INFORMACIÓN SOBRE LA ORGANIZACIÓN DE EVENTOS?</h1>
            <form id="events-planning-form" class="polo-contact__form" @submit.prevent="sendContact('Event plan',false,'reservaciones@tierratropical.com.mx')">
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Nombre </label>
                        <input v-model="contact.name" class="polo-contact__input" type="text" placeholder="Nombre" required>
                    </div>
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Apellido </label>
                        <input v-model="contact.l_name" class="polo-contact__input" type="text" placeholder="Apellido" required>
                    </div>
                </div>
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Correo</label>
                        <input v-model="contact.email" class="polo-contact__input" type="email" placeholder="Email" required>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <label class="polo-contact__label" for=""> País </label>
                        <input v-model="contact.country" class="polo-contact__input" type="text" placeholder="País" required>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <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>
                </div>
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for="">¿Cual es la fecha de tu evento?</label>
                        {{-- <input v-model="contact.month" class="polo-contact__input" type="text" name="" value="" placeholder="Mes"> --}}
                        <select v-model="contact.month" class="polo-contact__input" required>
                            <option value="" disabled hidden>Mes</option>
                            <option>Enero</option>
                            <option>Febrero</option>
                            <option>Marzo</option>
                            <option>Abril</option>
                            <option>Mayo</option>
                            <option>Junio</option>
                            <option>Julio</option>
                            <option>Agosto</option>
                            <option>Septiembre</option>
                            <option>Octubre</option>
                            <option>Noviembre</option>
                            <option>Diciembre</option>
                        </select>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <label class="polo-contact__label" for="">Día</label>
                        <input v-model="contact.day" class="polo-contact__input" type="number" name="" value="" min="1" placeholder="Día" required>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <label class="polo-contact__label" for="">Año</label>
                        <input v-model="contact.year" class="polo-contact__input" type="number" min="1" name="" value="" placeholder="Año" required>
                    </div>
                </div>
                <div class="polo-contact__lower">
                    <div class="form-control polo-contact__control polo-contact__control--tall">
                        <label class="polo-contact__label" for="">Cuéntanos sobre tu evento</label>
                        <textarea v-model="contact.body" class="polo-contact__input polo-contact__input--textarea" name="name" required></textarea>
                    </div>
                </div>
            </form>
            <div class="polo-contact__submit">
                <p class="polo-contact__legal">
                    Al dar clic a enviar acepto haber leído el
                    <a @click.prevent="privacidad = true">
                        Aviso de privacidad
                    </a>
                </p>
                <button form="events-planning-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
            </div>
        </div>
    </div>
</section>


@endsection
@section('local_scripts')
<script src="/js/subarticle.js" charset="utf-8"></script>
<script type="text/javascript">
    $('.events__tabs').children('div').show();
    $('.events__tabs').children('#new').hide();
    $('.select__events').on('change', function() {
        var value = '#' + $(this).val();
        $('.events__tabs').children('div').hide();
        $('.events__tabs').children(value).show();
    });
</script>
@endsection