@extends('frontend.layouts.app')

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

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2><a href="{{url('/project')}}" style="text-decoration: none;">Projects</a> :: <a href="{{url('/project/' . $box->project->name . '/box')}}" style="text-decoration: none;">{{$box->project->label}}</a> :: {{$box->label}}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        @foreach($photos as $photo)
                            <div class='swiper-slide swiper-image'>
                                <div>
                                    <a class='fancybox' rel='group' href='{{$photo->path}}'><img src='{{$photo->path}}' alt="{{$photo->label}}"/></a>
                                </div>
                                <div class='description'>{{$photo->description}}</div>
                            </div>
                        @endforeach
                        @foreach($models as $model)
                            <div class='swiper-slide swiper-image'>
                                <div><a href='{{url('/project/' . $box->project->name . '/box/' . $box->name . '/view?file=' . $model->path)}}' target='_blank'><img src='{{ URL::asset('img/3d.svg') }}' style='opacity: 0.5;'></a></div>
                                <div class='description'>{{$model->description}}</div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </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>
        .swiper-image{
            text-align: center;
        }
        .swiper-image img {
            max-width: 500px;
            max-height: 700px
        }
    </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(){
            var swiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                },
            });
            jQuery('.fancybox').fancybox();
        })
    </script>
@stop