{{-- Part of virtualset project. --}}

@extends('_global.tvscenter')

@section('content')

    <style>
        .item.thumb {
            border-radius: 0px;
            box-shadow: 0 0 10px #777;
        }

        .tvs-categories {
            padding-left: 20px;
        }

        .nav li:hover {
            background-color: #F5F7FA;
        }

        @media(min-width: 769px) {
            #collapse-menu {
                padding: 0;
            }

            #collapse-menu ul {
                display: none;
            }
        }

        @media(min-width: 1441px) {
            .tvs-menu {
                width: 300px;
                float: right;
            }
        }
    </style>


    <div id="collapse-menu" class="collapse navbar-collapse">
        <ul class="nav nav-stack">
            <li><a href="{{$router->html('tvs_center')}}"><i class="icon-left-open-mini"></i> back to TVS Center</a></li>
            @foreach($tvscenters as $tvscenterItem)
                <li class=" active tvs-categories" >
                    <a href="{{ $router->html('tvs_center_detail', ['id' => $tvscenterItem->id]) }}">{{ $tvscenterItem->title }}</a>
                </li>
            @endforeach
        </ul>
    </div>

    {{-- Hero Banner --}}
    <section id="hero">
        <div class="row">
            <div class="col-sm-12">
                <div class="tvs-banner-inner" style="width: 100%; height: 480px; background: url({{ $tvscenter->banner_image ? : 'http://i.imgur.com/qDSvABM.jpg' }}) no-repeat center center; position: relative;">
                    <div class="">
                        <div class="" style="text-align:center; width: 100%; padding-top: 150px;">
                            <h1 class="light-color lyra" style="text-shadow: rgb(204, 204, 204) 1px 1px; display: block;">
                                {{ $tvscenter->banner_title }}
                            </h1>
                            <p class="light-color lyra" style="display: block;">
                                {{ $tvscenter->banner_subtitle }}
                            </p>
                            <p>
                                {!! nl2br($tvscenter->banner_intro) !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Hero Banner End --}}

    {{-- TVS Product --}}
    <section id="tvs-center" class="">
        <div class="container-fluid inner-top inner-bottom">
            <div class="row">
                <div class="col-md-offset-0 col-md-3 hidden-xs hidden-sm">
                    {{-- Menu --}}
                    <div class="tvs-menu" style="border:0 solid #ccc; border-radius: 6px; padding: 20px 5px;">
                        <ul class="nav nav-stack">
                            <li><a href="{{ $router->html('tvs_center') }}"><i class="icon-left-open-mini"></i> @translate('catalog.tvs.menu.goback')</a></li>
                            @foreach($tvscenters as $tvscenterItem)
                                <li class=" active tvs-categories" >
                                    <a href="{{ $router->html('tvs_center_detail', ['id' => $tvscenterItem->id]) }}">{{ $tvscenterItem->title }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    {{-- Menu End --}}
                </div>
                <div class="col-md-9 col-lg-8 container-fluid">
                    <div class="inner-bottom">
                        <div class="row">
                            <div class="col-sm-12 portfolio">
                                <ul class="filter text-center" style="width: 100%;">
                                    <li><a href="#" data-filter="*" class="active">All</a></li>

                                    @foreach ($categories as $category)
                                        <li>
                                            <a href="#" data-filter=".{{ $category->alias }}">
                                                {{ $category->title }}
                                            </a>
                                        </li>
                                    @endforeach

                                    @foreach ($tags as $tag)
                                        <li>
                                            <a href="#" data-filter=".{{ $tag->alias }}">
                                                {{ $tag->title }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul><!-- /.filter -->

                                <ul class="items col-4">

                                    @foreach($items as $item)

                                        <li class="item thumb {{ $item->category_alias }} {{ $item->tag_alias }} animated fadeIn">

                                        @if($tvscenter->easymode)
                                            <a href="#modal-product-{{ $item->id }}" data-toggle="modal">
                                        @else
                                            <a href="{{ \Catalog\Helper\ProductHelper::link($item->id, $item->alias, $item->category_alias) }}">
                                        @endif

                                                <figure>
                                                    <figcaption class="text-overlay">
                                                        <div class="info">
                                                            <h4>{{ $item->title }}</h4>
                                                        </div><!-- /.info -->
                                                    </figcaption>
                                                    <img src="{{ $item->image_url }}" alt="{{ $item->title }}">
                                                </figure>
                                            </a>
                                        </li><!-- /.item -->

                                    @endforeach

                                </ul><!-- /.items -->

                                @if($tvscenter->easymode)

                                    @foreach($items as $item)
                                        <div class="modal fade" id="modal-product-{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="modal-product-{{ $item->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-md">
                                                <div class="modal-content">

                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="icon-cancel-1"></i></span></button>
                                                        <h4 class="modal-title">{{ $item->title }}</h4>
                                                    </div><!-- /.modal-header -->

                                                    {{--EASYMODE MODAL--}}
                                                    <div class="modal-body">

                                                        <div class="container inner-top-xs inner-bottom-xs">

                                                            <div class="row">
                                                                <div class="col-sm-12 text-center">
                                                                    @if($item->preview_video)
                                                                        <video class="modal-video video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" width="800" height="600" style="max-width: 100%;">
                                                                            <source src="{{ $item->preview_video }}" type="video/mp4">
                                                                            Your browser does not support the video tag.
                                                                        </video>
                                                                    @else
                                                                        <img class="modal-img" src="{{ $item->image_url }}" alt="{{ $item->title }}">
                                                                    @endif
                                                                </div><!-- /.col -->
                                                            </div><!-- /.row -->

                                                        </div><!-- /.container -->

                                                    </div><!-- /.modal-body -->
                                                    {{--EASYMODE MODAL END--}}

                                                    <div class="modal-footer">
                                                        <a href="{{ \Catalog\Helper\ProductHelper::link($item->id, $item->alias, $item->category_alias) }}" class="btn btn-default pull-left">@translate('catalog.tvs.product.detail')</a>

                                                        @if(count($item->formats))
                                                            <button type="button" class="btn btn-default" data-toggle="modal" href="#modal-{{ $item->alias }}-format">@translate('catalog.tvs.product.free_download')</button>
                                                        @endif

                                                        <button type="button" class="btn btn-default" data-dismiss="modal">@translate('catalog.tvs.product.close')</button>
                                                    </div><!-- /.modal-footer -->

                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->

                                        @if(count($item->formats))
                                            <div class="modal fade" id="modal-{{ $item->alias }}-format" tabindex="-1" role="dialog" aria-labelledby="modal-{{ $item->alias }}-format" aria-hidden="true">
                                                <div class="modal-dialog modal-xs">
                                                    <div class="modal-content">

                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="icon-cancel-1"></i></span></button>
                                                            <h4 class="modal-title" id="modal-{{ $item->alias }}-format">@translate('catalog.tvs.product.free_download')</h4>
                                                        </div><!-- /.modal-header -->

                                                        <!-- ============================================================= MODAL CONTENT ============================================================= -->

                                                        <div class="modal-body">

                                                            <div class="container inner-top-xs inner-bottom-xs">
                                                                <ul class="circled">

                                                                    @foreach($item->formats as $format)
                                                                        <li>
                                                                            <a href="{{ \Virtualset\User\UserHelper::isLogin() ? $format->file : $router->html('login', ['return' => base64_encode(\Phoenix\Uri\Uri::current())]) }}">
                                                                                {{ $format->title }}
                                                                            </a>
                                                                        </li>
                                                                    @endforeach

                                                                </ul>
                                                            </div>

                                                        </div><!-- /.modal-body -->

                                                        <!-- ============================================================= MODAL CONTENT : END ============================================================= -->

                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">@translate('catalog.tvs.product.close')</button>
                                                        </div><!-- /.modal-footer -->

                                                    </div><!-- /.modal-content -->
                                                </div><!-- /.modal-dialog -->
                                            </div><!-- /.modal -->
                                        @endif

                                    @endforeach

                                @endif

                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div>
                </div>
                <div class="col-md-1"></div>
            </div>

            <div class="products-pagination">
                {!! $pagination->render('tvs_center', array('id' => $tvscenter->id)) !!}
            </div>

        </div>
    </section>
    {{-- TVS Product End --}}

@stop