@extends('layout.main')

@section('title', __('strings.home.title'))

<!-- ======================================================= -->
@section('content')
    <section class="grid-cubes">
        @for($i = 0; $i < 5; $i++)
        <a href="{{ $cubes[$i]->url }}" class="cube" style="background-image: url('{{ asset($cubes[$i]->image) }}')">
            <div class="overlay" >
                {{ $cubes[$i]->title }}
            </div>
        </a>
        @endfor
    </section>

    @if( $meta_platinum->is_visible )
    <section class="banner primary" id="patrocinadores" style="background-color: {{ $meta_platinum->color }}">

        <div class="title">
            <h1 style="color: #000;">{{ __('strings.sponsors.platinum') }}</h1>
        </div>
        
        @if (count($platinum_sponsors) < 2)
          <div id="patrocinios">
            <a href="{{ $platinum_sponsors[0]->url }}" class="patrocinios-slide">
                <img src="{{ asset($platinum_sponsors[0]->image) }}" alt="">
            </a>
          </div>
        @else
        <div id="patrocinios" class="owl-carousel">
            @foreach ($platinum_sponsors as $pl_sponsor)
                <a href="{{ $pl_sponsor->url }}" class="patrocinios-slide">
                    <img src="{{ asset($pl_sponsor->image) }}" alt="">
                </a>
            @endforeach
        </div>
      @endif

    </section>
    @endif

    @if( $meta_posters->is_visible )
    <section id="carteles" class="banner">

        <div class="owl-carousel">
            @foreach ($posters as $poster)
                <a href="{{ $poster->url }}">
                    <img src="{{ asset($poster->image) }}" alt="">
                </a>
            @endforeach
        </div>

    </section>
    @endif

    @if( $meta_presenters->is_visible )
        @if( count( $presenter_presenters ) > 0 )
        <section id="presentadores" class="banner secondary" style="background-color: {{ $meta_presenters->color }}">
            <div class="title">
                <h1>{{ __('strings.home.sponsor') }}</h1>
            </div>
            <div id="presenta" class="owl-carousel">
                @foreach ($presenter_presenters as $pr_presenter)
                    <div class="presenta-slide">
                        <a target="_blank" href="{{ $pr_presenter->url }}">
                            <img src="{{ asset($pr_presenter->image) }}" alt="">
                        </a>
                    </div>
                @endforeach
            </div>
        </section>
        @endif
    @endif

    @if( $meta_presenters->is_visible )
    <section id="presentadores" class="banner secondary" style="background-color: {{ $meta_presenters->color }}">
        <div class="title">
            <h1>{{ __('strings.home.present') }}</h1>
        </div>
        <div id="presenta" class="owl-carousel">
            @foreach ($presenter_sponsors as $pr_sponsor)
                <div class="presenta-slide">
                    <a target="_blank" href="{{ $pr_sponsor->url }}">
                        <img src="{{ asset($pr_sponsor->image) }}" alt="">
                    </a>
                </div>
            @endforeach
        </div>
    </section>
    @endif

    <section id="social" class="banner petite ui grid stackable">

        <div class="sixteen wide column">
            <h1>{{ __('strings.home.followus') }}</h1>
            <a href="https://twitter.com/ficgoficial?lang=es">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="https://www.facebook.com/FICG.GUADALAJARA/">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="https://www.instagram.com/ficg/">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="https://www.flickr.com/photos/ficgguadalajara/">
                <i class="fab fa-flickr"></i>
            </a>
            <a href="https://www.youtube.com/user/FICGUADALAJARA">
                <i class="fab fa-youtube"></i>
            </a>
        </div>
        {{--<div class="eight wide column">
            {{-- <h1>{{ __('strings.home.downloadapp') }}</h1> --}}
            {{--<h1>UDG 3D</h1>
            <a href="https://udg3d.com" class="btn button" target="_blank">
                CONOCE MÁS
            </a> --}}
            {{-- <a href="https://play.google.com/store/apps/details?id=mx.ficg.ficger&amp;hl=es">
                <img src="{{ asset('img/playstore.png') }}" alt="">
            </a>
            <a href="https://apps.apple.com/mx/app/ficg/id1209793146?l=en">
                <img src="{{ asset('img/appstore.png') }}" alt="">
            </a> --}}
        {{--</div> --}}

    </section>

    {{--<div class="ui modal">
        <i class="close icon"></i>
        <div class="header header-modal">
            FICG 35
        </div>
        <div class="content">
            <div class="description">
                <div class="ui header">Una disculpa por las molestias.</div>
                <p>Estamos trabajando en nuestro sitio web para ofrecerte un mejor servicio.</p>
            </div>
        </div>
        <div class="actions">
            <div class="ui positive right labeled icon button">
                Entrar
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>--}}

@endsection

<!-- ======================================================* -->

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

@push('scripts')
    <script>
        jQuery(function($) {

            /// Init Owl
            $("#patrocinios.owl-carousel").owlCarousel({
                loop: true,
                margin: 5,
                items: 4,
                autoplay: true,
                nav: false,
                responsive: {
                    0: { items: 1 },
                    640: { items: 2 },
                    769: { items: 3 },
                    1025: { items: 4 },
                    1367: { items: 4 }
                }
            });

            /// Init Owl
            $("#presenta.owl-carousel").owlCarousel({
                loop: true,
                margin: 5,
                items: 3,
                autoplay: true,
                nav: false,
                responsive: {
                    0: { items: 1 },
                    640: { items: 2 },
                    769: { items: 3 },
                    1025: { items: 3 },
                    1367: { items: 3 }
                }
            });

            /// Init Owl
            $("#carteles .owl-carousel").owlCarousel({
                loop: true,
                margin: 25,
                items: 4,
                autoplay: true,
                nav: false,
                responsive: {
                    0: { items: 1 },
                    640: { items: 1 },
                    769: { items: 2 },
                    1025: { items: 3 },
                    1367: { items: 4 }
                }
            });

        });

        $( document ).ready( function() {

            // if (window.location.href == "https://ficg.mx/35/public/") {
            //     $('.ui.modal')
            //     .modal('show')
            //     ;
            //     console.log("true");
            // }else{
            //     console.log("false");
            // }
        });
    </script>
@endpush