@extends('layout.main')

@push('metas')
    <meta property="og:type" content="Evento" />
    <meta property="og:title" content="{{ $event->name }}" />
    <meta property="og:description" content="{{ $event->name }} | {{ $event->title1 }}" />
    @if($event->portrait)
        <meta property="og:image" content="{{ asset("$event->portrait") }}" />
        <meta property="og:image:secure_url" content="{{ asset("$event->portrait") }}">
        <meta property="og:image:width" content="1920" />
        <meta property="og:image:height" content="640" />
    @endif
    <meta property="og:site_name" content="FICG 35" />
@endpush

@section('title', $event->name)

<!-- ======================================================= -->
@section('content')

@php
    setlocale(LC_ALL,"es_ES");
    date_default_timezone_set('America/Mexico_City');
@endphp

<div class="portrait" style="background-image: url({{ asset("$event->portrait") }});">
    <div class="caption" style="background-color: rgba(87,87,86,1);">
        <h1>{!! $event->name !!}</h1>
        <h4 style="line-height: 1;">{!! $event->tagline !!}</h4>
        {{--<h4>{{ strftime("%A %d de %B de %Y", (new DateTime($event->date))->getTimestamp() ) }}</h4>--}}
    </div>
</div>

<section class="event-container">

    <div class="event-info is-a-movie">
        <div class="description main-paragraph">
            <h3>{{ $event->title1 }}</h3>
            <p>{!! nl2br($event->description1) !!}</p>
        </div>
        <div class="description image" style="background-image: url({{ asset("$event->image") }}); {{ $event->description3 ? '' : 'grid-column: 1/3;'}}"></div>
        <div class="description middle-paragraph" style="{{ $event->description3 ? '' : 'grid-column:1/3;'}}">
            <h3>{{ $event->title2 }}</h3>
            <p>{!! nl2br($event->description2) !!}</p>
            <style media="screen">
                a.button {
                    display: inline-block;
                    width: 190px;
                    border-radius: 2px;
                    box-shadow: 0 0 2px #999;
                    border-radius: 4px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 600;
                    text-transform: uppercase;
                }

                a.button i {
                    margin-right: 5px;
                }

                a.button:hover {
                    filter: brightness(110%);
                    color: #fff;
                }
            </style>
            <p>
                {{-- @if ( $event->cortometraje === true) --}}
                @if ( $event->ref_event )
                    <a onclick="verFunciones('{{ $event->name }}')" class="button" href="{{ route('calendar', ['lang' => $lang])}}?event_id={{ $lang == 'en' ? $event->lang_parent_id : $event->ref_event }}"><i class="far fa-calendar-minus"></i> Ver Funciones</a>
                @else
                    <a onclick="verFunciones('{{ $event->name }}')" class="button" href="{{ route('calendar', ['lang' => $lang])}}?event_id={{ $lang == 'en' ? $event->lang_parent_id : $event->id }}"><i class="far fa-calendar-minus"></i> Ver funciones</a>
                @endif


                @if ($event->trailer)
                    <a class="button" href="{{ $event->trailer }}" target="_blank"><i class="fab fa-youtube"></i> Trailer</a>
                @endif
            </p>
        </div>
        @if ($event->description3)
            <div class="description with-inner">
                @if ($event->id == 8847 || $event->id == 8848)
                    <img src="{!! asset('img/logo-imcine.png') !!}" alt="" style="max-width: 275px;">
                @endif
                @if ($event->id == 9097 || $event->id == 9098 || $event->id == 9119 || $event->id == 9120 || $event->id == 9073 || $event->id == 9074 || $event->id == 9139 || $event->id == 9140 || $event->id == 9115 || $event->id == 9116)
                  <img src="{!! asset('img/logo-italianscreens.jpg') !!}" alt="" style="max-width: 275px;">
                @endif
                <p>{!! nl2br($event->description3) !!}</p>
            </div>
        @endif
    </div>
</section>

@endsection

@push('scripts')
    <script>
    function verFunciones(name){
      fbq('trackCustom', 'verFunciones', {content_name: name});
    }
    </script>
@endpush
<!-- ======================================================* -->

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/events.min.css?v=36.2') }}">
@endpush