@extends('layouts.main')

@section('title', 'News')

@section('styles')
<style>
    .hero--inverse {
        background-color: #1a1a2e;
        color: #fff;
        padding: 60px 0;
        background-size: cover;
        background-position: center;
    }

    .hero__title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #fff;
        margin: 0;
    }

    #newsdisplay [v-cloak] {
        display: none;
    }

    .img-responsive-news {
        max-width: 100%;
        height: auto;
    }

    #share-buttons a {
        display: inline-block;
        margin-right: 10px;
        color: #333;
    }

    #share-buttons a:hover {
        color: #007bff;
    }

    .label-list .label {
        display: inline-block;
        margin: 4px;
        padding: 6px 12px;
        background-color: #6c757d;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
    }

    .label-list .label:hover {
        background-color: #5a6268;
    }

    .space-between-v {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
@endsection

@section('content')

<a name="_top"></a>
<div class="hero hero--inverse hero--smaller no-print" style="background-image: url('../images/backgrounds/wg_newsBanner.jpg')">
  <div class="container">
    <h1 class="hero__title">News</h1>
  </div>
</div>
<div class="col-lg-12">
  <h4>&nbsp;</h4>
</div>

<div class="container">
  <div id="newsdisplay" data-event="401243" v-cloak>
    <div class="row" v-if="publication">

      <!-- Left column -->
      <div class="col-md-8">
        <div class="page">

          <div class="row">
            <div class="col-md-12">
              <div id="share-buttons" class="no-print">
                <!-- Print -->
                <a href="javascript:;" onclick="window.print()">
                  <svg viewBox="0 0 23.7 18.9" width="19" height="19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 18H6.2C5.0799 18 4.51984 18 4.09202 17.782C3.71569 17.5903 3.40973 17.2843 3.21799 16.908C3 16.4802 3 15.9201 3 14.8V10.2C3 9.0799 3 8.51984 3.21799 8.09202C3.40973 7.71569 3.71569 7.40973 4.09202 7.21799C4.51984 7 5.0799 7 6.2 7H7M17 18H17.8C18.9201 18 19.4802 18 19.908 17.782C20.2843 17.5903 20.5903 17.2843 20.782 16.908C21 16.4802 21 15.9201 21 14.8V10.2C21 9.07989 21 8.51984 20.782 8.09202C20.5903 7.71569 20.2843 7.40973 19.908 7.21799C19.4802 7 18.9201 7 17.8 7H17M7 11H7.01M17 7V5.4V4.6C17 4.03995 17 3.75992 16.891 3.54601C16.7951 3.35785 16.6422 3.20487 16.454 3.10899C16.2401 3 15.9601 3 15.4 3H8.6C8.03995 3 7.75992 3 7.54601 3.10899C7.35785 3.20487 7.20487 3.35785 7.10899 3.54601C7 3.75992 7 4.03995 7 4.6V5.4V7M17 7H7M8.6 21H15.4C15.9601 21 16.2401 21 16.454 20.891C16.6422 20.7951 16.7951 20.6422 16.891 20.454C17 20.2401 17 19.9601 17 19.4V16.6C17 16.0399 17 15.7599 16.891 15.546C16.7951 15.3578 16.6422 15.2049 16.454 15.109C16.2401 15 15.9601 15 15.4 15H8.6C8.03995 15 7.75992 15 7.54601 15.109C7.35785 15.2049 7.20487 15.3578 7.10899 15.546C7 15.7599 7 16.0399 7 16.6V19.4C7 19.9601 7 20.2401 7.10899 20.454C7.20487 20.6422 7.35785 20.7951 7.54601 20.891C7.75992 21 8.03995 21 8.6 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
                <!-- Email -->
                <a href="mailto:?Subject=News&amp;Body=Check%20out%20this%20news%20from%20World%20Gymnastics">
                  <i class="fa fa-envelope"></i>
                </a>
                <!-- Facebook -->
                <a href="http://www.facebook.com/sharer.php?u={{ url()->current() }}" target="_blank">
                  <i class="fa-brands fa-facebook-f"></i>
                </a>
                <!-- LinkedIn -->
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ url()->current() }}" target="_blank">
                  <i class="fa-brands fa-linkedin-in"></i>
                </a>
                <!-- Twitter -->
                <a href="https://twitter.com/share?url={{ url()->current() }}" target="_blank">
                  <i class="fa-brands fa-x-twitter"></i>
                </a>
              </div>
            </div>
          </div>
          <br>

          <div class="row">
            <div class="col-md-3 hidden-md">
              <img
                class="img-responsive-news hidden-xs"
                :src="'../images/news/' + publication.id + '.jpg'"
                :alt="publication.title"
                @error="handleImgError"
              />
            </div>
            <div class="col-md-9">
              <div style="max-width:300px; max-height:25px; margin-bottom:10px;" class="btn btn-primary" v-if="publication.press_release == true" disabled>PRESS RELEASE</div>
              <h1>@{{ publication.title }}</h1>
              <span><strong>@{{ publication.publication | toReadableDate }}&nbsp;&nbsp;&nbsp;&nbsp;<kbd style="background-color:#868686"><i class="far fa-clock"></i>&nbsp;@{{ publication.read }}&nbsp;MIN</kbd></strong></span><br>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-12">
              <div v-html="publication.content">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right column -->
      <div class="col-md-4">
        <!-- Related Gymnasts -->
        <div class="panel panel-default no-print" v-if="publication.gymnasts && publication.gymnasts.length > 0">
          <div class="panel-heading">
            <h3 class="panel-title">Related Athletes</h3>
          </div>
          <ul class="list-group">
            <li class="list-group-item" v-for="gymnast in orderedAthletes">
              <div class="media">
                <div class="media-left">
                  <a target="_blank" v-bind:href="'../athletes/bio_detail.php?id='+gymnast.id">
                    <img width="80px" class="media-object" v-bind:src="'https://www.gymnastics.sport/asset.php?id=bpic_'+gymnast.id">
                  </a>
                </div>
                <div class="media-body space-between-v">
                  <h4 class="media-heading">@{{ gymnast.lastname }} <small>@{{ gymnast.firstname }}</small></h4>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- Related keywords -->
        <div class="panel panel-default no-print" v-if="publication.keywords && publication.keywords.length > 0">
          <div class="panel-heading">
            <h3 class="panel-title">Related Keywords</h3>
          </div>
          <div class="panel-body label-list">
            <a class="label label-default" v-for="keyword in publication.keywords" v-on:click="show_news_keyword(keyword.id, keyword.value)">@{{ keyword.value }}</a>
          </div>
        </div>
        <!-- Related disciplines -->
        <div class="panel panel-default no-print" v-if="publication.relateddisciplines && publication.relateddisciplines.length > 0">
          <div class="panel-heading">
            <h3 class="panel-title">Related Disciplines</h3>
          </div>
          <ul class="list-group">
            <li class="list-group-item" v-for="relateddiscipline in publication.relateddisciplines">
              <a v-bind:href="'/site/discipline.php?disc='+relateddiscipline.id">
                <div class="media">
                  <div class="media-body text-center">
                    <img :src="'../images/disciplines/wg_' + relateddiscipline.code.toLowerCase() + '_wordmark.png'" :alt="relateddiscipline.code" style="height: 30px;">
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Related events -->
      <div class="col-md-12 no-print">
        <div class="panel panel-default" v-if="publication.events && publication.events.length > 0">
          <div class="panel-heading">
            <h3 class="panel-title">Related Event<span v-if="publication.events.length > 1">s</span></h3>
          </div>
          <div class="panel-body">
            <table class="table">
              <thead>
                <tr>
                  <th class="hidden-xs">Dates</th>
                  <th>Title</th>
                  <th>City</th>
                  <th class="hidden-xs">Discipline(s)</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="event in publication.events">
                  <td style="white-space: nowrap;" v-if="event.status != 'approved'">@{{ event.status }}</td>
                  <td style="white-space: nowrap;" v-else>@{{ event.startevent | toReadableDate }} - @{{ event.endevent | toReadableDate }}</td>
                  <td>@{{ event.title }}</td>
                  <td>@{{ event.city.name }} (@{{ event.city.country.code }})</td>
                  <td class="hidden-xs"><span>@{{ event.disciplines.map(function(discipline) { return discipline.code; }).join(', ') }}</span></td>
                  <td class="text-right" style="white-space: nowrap;">
                    <span style="white-space: nowrap;" v-if="event.hasresults"><a v-bind:href="'../events/results.php?idEvent=' + event.id"><i class="fa fa-trophy" aria-hidden="true"></i></a>&nbsp; &nbsp;</span>
                    <span v-if="event.minisiteUrl"><a target="_blank" v-bind:href="event.minisiteUrl"><i style="color:#ff684e;" class="fa fa-star" aria-hidden="true"></i></a>&nbsp;</span>
                    <a v-bind:href="'../events/detail.php?id='+event.id"><i class="fa fa-search" aria-hidden="true"></i></a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="modal fade" id="newsKeyword">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    </div>
  </div>
</div>

@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
  window.onload = function() {
    $('img').bind('contextmenu', function(e) {
      return false;
    });
    $('img').ondragstart = function () {
      return false;
    };
  };

  function show_news_keyword(id, text) {
    $.ajax({
      type: "GET",
      url: "news_ajax.php",
      data: "id=" + id + "&text=" + text,
      success: function(data) {
        var modalid = $('#newsKeyword');
        var modalbody = $('#newsKeyword .modal-content');
        modalbody.html(data);
        modalid.modal('show');
      }
    });
  }
</script>
@endsection