@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.general.home'))

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div style="text-align: center">
                    <div class="swiper-button-prev" style="opacity: 0.1;" onclick="jQuery('.swiper-container').each((key, value) => {value.swiper.slidePrev()})"></div>
                    <h2>{{$project->label}}</h2>
                    <div class="swiper-button-next" style="opacity: 0.1;" onclick="jQuery('.swiper-container').each((key, value) => {value.swiper.slideNext()})"></div>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($project->boxes as $box)
            <div id="{{$box->name}}" class="col-md-3 box" style="padding-bottom: 50px;">
                <div class="box-title">
                    @if (Auth::user())
                        @if (Auth::user()->hasRole('administrator'))
                            <a href="{{url('/project/' . $box->project->name . '/box/' . $box->name . '/file/')}}" style="text-decoration: none;"><h3>{{$box->label}}</h3></a>
                        @else
                            <h3>{{$box->label}}</h3>
                        @endif
                        <div id="{{$box->name}}" class="comments" style="display: none; cursor: pointer; position: absolute; top: 0; right: 10px; border: 1px solid lightgray; border-radius: 5px; padding: 0 5px;" onclick="comments('#{{$box->name}}')">
                            <i class="fa fa-comment-o" aria-hidden="true"></i>
                            <span class="count">0</span>
                        </div>
                    @endif
                </div>
                <div class="box-body">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @foreach($box->files as $file)
                                @if($file->visible)
                                    <div class='swiper-slide swiper-box'>
                                    @php
                                        $comments = $file->comments
                                    @endphp
                                    @if (count($comments) > 0)
                                        <div class="comments" style="position: absolute; top: 0; right: 0; border: 1px solid lightgray; border-radius: 5px; padding: 0 5px;">
                                            <a href="{{url('/project/' . $box->project->name . '/box/' . $box->name . '/file/' . $file->name . '/comment#nav-bottom' )}}" style="text-decoration: none;">
                                                <i class="fa fa-comment-o" aria-hidden="true"></i>
                                                <span class="count" style="color: {{Auth::id() == $comments[count($comments) - 1]->user_id ? '#007bff' : 'red'}}" title="{{Auth::id() == $comments[count($comments) - 1]->user_id ? '' : 'есть новые комментарии'}}">{{count($comments)}}</span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($file->type == 'photo' || $file->type == 'render')
                                        <div class='image'><a class='fancybox' rel='group' href='{{$file->path . '?updated=' . strtotime($file->updated_at)}}'><img src='{{url('/project/' . $box->project->name . '/box/' . $box->name . '/file/' . $file->name . '/preview?updated=' . strtotime($file->updated_at))}}' alt="{{$file->label}}"/></a></div>
                                        <div class='description'>{{$file->description}}</div>
                                    @elseif ($file->type == 'glb')
                                        <div class='image'><a href='{{url('/project/' . $box->project->name . '/box/' . $box->name . '/file/' . $file->name . '/show')}}' target="_blank"><img src='{{ URL::asset('img/3d.svg') }}' style='opacity: 0.5;'></a></div>
                                        <div class='description'>{{$file->description}}</div>
                                    @endif
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @if (Auth::user() && Auth::user()->hasRole('administrator'))
            <div class="row">
                <div class="col-md-12">
                    <div style="text-align: center; padding-bottom: 20px">
                        <a href="{{url('/project/' . $project->name . '/box/create')}}" class="btn btn-success">Создать</a>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('page-style-files')
    <link rel="stylesheet" href="{{ URL::asset('css/jquery.fancybox.min.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('css/swiper.min.css') }}">
    <style>
        .box-title{
            text-align: center;
        }
        .box-body{
            background-color: lightgray;
        }
        .swiper-box{
            height: 350px;
            background-color: lightgray;
        }
        .swiper-box .image{
            height: 300px;
        }
        .swiper-box img {
            max-height: 300px;
            max-width: 200px;
            width: unset;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
        .swiper-box .description{
            padding: 0 10px;
            font-style: italic;
            color: gray;
            font-size: smaller;
        }
    </style>
@stop

@section('page-js-files')
    <script src="{{ URL::asset('js/jquery.min.js') }}"></script>
    <script src="{{ URL::asset('js/swiper.min.js') }}"></script>
@stop

@section('page-js-script')
    <script src="{{ URL::asset('js/jquery.fancybox.min.js') }}"></script>
    <script>
        jQuery(document).ready(function(){
            jQuery('.box').each((key1, value1) => {
                var hasNew = false;
                var count = 0;
                jQuery(value1).find('.comments .count').each((key2, value2) => {
                    if (jQuery(value2).attr('title')){
                        hasNew = true;
                    }
                    var text = jQuery(value2).text();
                    if (+text > 0){
                        count += +text
                    }
                    if (hasNew){
                        jQuery(value1).find('.box-title .count').attr('title', 'Есть новые сообщения');
                        jQuery(value1).find('.box-title .count').css({color: 'red'});
                    }
                    if (count > 0){
                        jQuery(value1).find('.box-title .comments').show();
                        jQuery(value1).find('.box-title .count').text(count);
                    }
                });

            })

            var swiper = new Swiper('.swiper-container', {
	        loop: false,
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
            jQuery('.fancybox').fancybox();
        })

	function comments(id) {
		jQuery(id + ' .swiper-container').each((i, container) => {
			var index = 0;
			var arr = [];
			jQuery(id + ' .swiper-slide').each((key, value) => {
				if (jQuery(value).find('.comments').length > 0) {
					arr.push(key);
				}
				if (jQuery(value).hasClass('swiper-slide-active')) {
					index = key;
				}
			})
			if (arr.length > 0) {
				var found = false;
				for (var i = 0; i < arr.length; i++){
					if (arr[i] > index){
						jQuery(container)[0].swiper.slideTo(arr[i]);
						found = true
						break;
					}
				}
				if (!found){
					jQuery(container)[0].swiper.slideTo(arr[0]);
				}
			}
		});
	}
    </script>
@stop