@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
    <link rel="stylesheet" href="/css/blog.css">
@endsection
@section('share_image'){{$post->image}}@endsection
@section('share_title'){{$post->title}}@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--blog subarticle-hero--blog__detalle">

    </div>

    <section class="container blog-hero-container blog-hero-container__detalle">
        <div class="content-hero-blog content-hero-blog__detalle">
            <div class="hero-img-detalle" style="background-image:url({{ $post->image }});">
                <a href="/blog" class="btn-volver"> <  Volver</a>
            </div>
            <div class="container-lap-detalle">
                <div class="container-text">
                    <h1>{{ $post->title }}</h1>
                    <span id="published-date">{{ $post->publish_date }}</span>
                    {!! $post->article !!}
                    {{-- Share buttons --}}
                    <div class="row">
                        <div class="fb-share-button" data-href="{{ url()->full() }}" data-layout="button" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartir</a></div>
                        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-lang="es" data-show-count="false">Tweet</a>
                    </div>
                </div>
                <section id="send-msj-mobile" class="section section--subarticle container">
                        <div class="polo-contact">
                            <h1 class="polo-contact__headline">Escribe un comentario</h1>
                            <form class="polo-contact__form" id="salto-lessons-form" @submit.prevent="sendContact('Lecciones de Salto',false,'reservaciones@lapatronapoloclub.com')">
                                <div class="polo-contact__upper">
                                    <div class="form-control polo-contact__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>
                                 <div class="polo-contact__lower">
                                    <div class="form-control polo-contact__control polo-contact__control--tall">
                                        <label class="polo-contact__label" for="">Comentario</label>
                                        <textarea v-model="contact.body" class="polo-contact__input polo-contact__input--textarea" name="name"></textarea>
                                    </div>
                                 </div>
                            </form>
                            <div class="polo-contact__submit">
                                <p class="polo-contact__legal">
                                    Al dar clic a enviar acepto haber leido el
                                    <a @click.prevent="privacidad = true">
                                        Aviso de privacidad
                                    </a>
                                </p>
                                <button form="salto-lessons-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
                            </div>
                        </div>
                </section>
                <aside class="aside-news">
                    <div class="container-article-blog container-article-blog__detalle">
                        @foreach ($latestPosts as $lpost)
                            <a href="{{ $lpost->id }}" class="article-blog-item article-blog-item__detalle">
                                <div class="item item__img" style="background-image: url({{ $lpost->image }})">
                                </div>
                                <div class="item item__text">
                                    <div class="item-text-ribbon item-text-ribbon__detalle">
                                        <h1>{{ $lpost->title }}</h1>
                                        <p>{{ $lpost->overview }}...</p>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </aside>
            </div>
        </div>
    </section>
    <section id="send-msj-desktop" class="section section--subarticle">
        <div class="container">
            <div class="polo-contact">
                <h1 class="polo-contact__headline">Escribe un comentario</h1>
                <form class="polo-contact__form" id="post_comments" action="add-comment" method="post">
                    <input type="hidden" name="post_id" value="{{ $post->id }}">
                    <div class="polo-contact__upper">
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for="">Nombre completo</label>
                            <input class="polo-contact__input" type="text" name="name" placeholder="Nombre" 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="">Comentario</label>
                            <textarea class="polo-contact__input polo-contact__input--textarea" name="body"></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>Aviso de privacidad</a></p>
                    <button form="post_comments" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        @foreach ($post->comments as $comment)
            <comment :comment="{{$comment}}"></comment>
        @endforeach
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
    <script type="text/javascript">
        var publishedDate = document.getElementById('published-date');
        console.log(publishedDate);
        var formatteddate = document.createTextNode(new Date(publishedDate.innerText).toLocaleDateString('es-MX', { weekday: 'long', month: 'long', day: 'numeric' }));
        publishedDate.replaceChild(formatteddate, publishedDate.childNodes[0]);
    </script>
@endsection