@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--cronograma">
        <a href="/temporada"><strong><span class="btn-volver"> < Volver </span></strong></a>
    </div>

    <div class="container container--reduced ribbon__container-cronograma">
        <div class="ribbon ribbon__season">
            <section class="section section--subarticle">
                <div class="container-cronograma">
                    <div class="section-marcador">
                        <div class="team-content">
                            <h1> {{ $match->teamA->name }} </h1>
                            <span class="score-mobile">{{ $match->score_a }}</span>
                        </div>
                        <div class="marcador-results">
                            <span> {{ $match->score_a }} </span> - <span> {{ $match->score_b }} </span>
                        </div>
                        <div class="team-content">
                            <h1> {{ $match->teamB->name }} </h1> <span class="score-mobile">{{ $match->score_b }}</span>
                        </div>
                    </div>
                    <div class="container-data-cronograma">
                        @foreach ($periods as $period => $actions)
                            <div class="section-chukkers">
                                <div class="number-chukker">
                                    <h1 class="number-chukker__period">{{$period}}</h1>
                                </div>
                                <div class="content-chukker">
                                    <div class="container-list">
                                        <ul>
                                            @foreach ($actions as $action)
                                                <li class="item-list-history">
                                                    <div class="data-coment">
                                                        <div class="icon-coment">
                                                            <img src="{{($action->type == 'comment') ? '/img/temporada/coment-icon.png' : '/svg/mallet.svg'}}" alt="">
                                                        </div>
                                                        <p class="data-coment__minute">Min. {{$action->minute}}
                                                        @if ($action->type == 'goal')
                                                             <br>
                                                             <span class="brand brand--goal">
                                                                 goal
                                                             </span>
                                                        @endif
                                                        </p>
                                                    </div>
                                                    <div class="text-content">
                                                        <p class="text-content__body">{{$action->description}}</p>
                                                        @if ($action->image != '')
                                                            <div class="text-content__image">
                                                                <img  src="{{ $action->image }}" alt="">
                                                            </div>
                                                        @endif
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                        @if ($match->bestPlayer)
                            <div class="container-mvp container-mvp__cronograma">
                                <div class="information-mvp information-mvp__cronograma">
                                    <div class="data-mvp data-mvp__cronograma">
                                        <h1>{{$match->bestPlayer->name}}</h1>
                                        <div class="mvp-span">
                                            <h2>MVP del Juego</h2>
                                            <img src="/img/temporada/mvp.png" alt="">
                                        </div>
                                        <p>Team: {{$match->bestPlayer->team->name}}</p>
                                    </div>
                                    <div class="container-img-mvp container-img-mvp__cronograma">
                                        <div class="img-mvp">
                                            <div class="img-mvp__image" style="background-image: url('{{ $match->bestPlayer->image }}')"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="stats-mvp">
                                    <div class="stats-mvp-item">
                                        <p>Shots</p>
                                        <p>{{$match->best_player_shots}}</p>
                                    </div>
                                    <div class="stats-mvp-item">
                                        <p>Goals</p>
                                        <p>{{$match->best_player_goals}}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <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>
            </section>
        </div>
    </div>

    <section class="section section--subarticle">
        <div class="container container--reduced">
            <div class="polo-contact">
                <h1 class="polo-contact__headline"> LEAVE A COMMENT</h1>
                <form id="polo-lesson-form" class="polo-contact__form" @submit.prevent="sendComment({{$match->id}})">
                    <div class="polo-contact__upper">
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for=""> Name</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="">Comment</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="polo-lesson-form" class="button button--submit polo-contact__button" type="submit" name="button">Comment</button>
                </div>
            </div>
        </div>
    </section>
    <div class="container container--reduced">
        @foreach ($match->comments as $comment)
            <comment :comment="{{$comment}}"></comment>
        @endforeach
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection