@extends('frontend.layouts.app')

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

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <h2>Собрать кухню</h2>
        </div>
    </div>
    <div class="wizard">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div id="step1">
                    <div class="wizard-head">
                        <label>Собрать кухню: 1 тип планировку</label>
                    </div>
                    <div class="wizard-body">
                        <label>Выберите тип планировки кухни:</label>
                        <div id="accordion" class="panel-group step1-type" role="tablist" aria-multiselectable="false">
                            @foreach([['id' => 'type1', 'heading' => '<img src="' . URL::asset('img/1-basic.svg') . '" style="width:170px" title="без угла" alt="без угла"> <span>Без угла</span>', 'lines' => [[['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2']]]], ['id' => 'type2', 'heading' => '<img src="' . URL::asset('img/2-left.svg') . '" style="width:170px" title="левый угол" alt="левый угол"> <span>Левый угол</span>', 'lines' => [[['angular' => true, 'class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2']],[['class' => 'col-md-2']], [['class' => 'col-md-2']]]], ['id' => 'type3', 'heading' => '<img src="' . URL::asset('img/3-right.svg') . '" style="width:170px" title="правый угол" alt="правый угол"> <span>Правый угол</span>', 'lines' => [[['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['class' => 'col-md-2'], ['angular' => true, 'class' => 'col-md-2']], [['class' => 'offset-md-10 col-md-2']], [['class' => 'offset-md-10 col-md-2']]]]] as $type)
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" href="#{{$type['id']}}" aria-expanded="true" aria-controls="{{$type['id']}}">
                                            {!! $type['heading'] !!}
                                        </a>
                                    </h4>
                                </div>
                                <div id="{{$type['id']}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="{{$type['id']}}">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-12"><label>Выберите желаемые элементы</label></div>
                                        </div>
                                        <div class="background">
                                            <div class="row">
                                                <div class="col-md-12" style="text-align: center"><h4>Фон</h4></div>
                                            </div>
                                            <div class="row line" style="padding: 5px 0;">
                                                <div class="col-md-2">
                                                    <div class="place">
                                                        <div class="dropdown">
                                                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                <div class="card">
                                                                    <div class="card-label"></div>
                                                                    <div class="card-render">
                                                                        <img src="{{url('img/box.svg')}}" class="icon" style="width: 100%">
                                                                    </div>
                                                                    <div class="card-size"></div>
                                                                </div>
                                                            </button>
                                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item" onclick="select(this)"><img src="{{url('img/box.svg')}}" style="width: 50px"> нет</a>
                                                                @foreach($backgrounds as $background)
                                                                    @if(isset($background['thumbnail']))
                                                                        <a class="dropdown-item" onclick="select(this)"><img data-name="{{$background['name']}}" data-label="{{$background['label']}}" src="{{url('util/image/resize?path=' . $background['thumbnail'] . '&updated=' . strtotime($background['updated']))}}" style="width: 50px">
                                                                            <div class="box-info">
                                                                                <div class="box-info-label">{{$background['label']}}</div>
                                                                            </div>
                                                                        </a>
                                                                    @endif
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @foreach([['name' => 'top', 'label' => 'Верх', 'items' => $top], ['name' => 'bottom', 'label' => 'Низ', 'items' => $bottom]] as $layer)
                                            <div class="{{$layer['name']}}">
                                                <div class="row">
                                                    <div class="col-md-12" style="text-align: center"><h4>{{$layer['label']}}</h4></div>
                                                </div>
                                                @foreach($type['lines'] as $line)
                                                    <div class="row line" style="padding: 5px 0;">
                                                        @foreach($line as $cell)
                                                            <div class="{{$cell['class']}}">
                                                                <div class="place">
                                                                    <div class="dropdown">
                                                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                            <div class="card">
                                                                                <div class="card-label"></div>
                                                                                <div class="card-render">
                                                                                    <img src="{{url('img/box.svg')}}" class="icon" style="width: 100%">
                                                                                </div>
                                                                                <div class="card-size"></div>
                                                                            </div>
                                                                        </button>
                                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                            <a class="dropdown-item" onclick="select(this)"><img src="{{url('img/box.svg')}}" style="width: 50px"> нет</a>
                                                                            @foreach($layer['items'] as $item)
                                                                                @if(isset($item['thumbnail']) && ((isset($cell['angular']) && $cell['angular'] == $item['angular']) || !isset($cell['angular']) && !$item['angular']))
                                                                                    <a class="dropdown-item" onclick="select(this)"><img data-name="{{$item['name']}}" data-label="{{$item['label']}}" data-height="{{$item['height']}}" data-size="{{$item['width'] * 1000}} x {{$item['height'] * 1000}} x {{$item['depth'] * 1000}}" src="{{url('util/image/resize?path=' . $item['thumbnail'] . '&updated=' . strtotime($item['updated']))}}" style="width: 50px">
                                                                                        <div class="box-info">
                                                                                            <div class="box-info-label">{{$item['label']}}</div>
                                                                                            <div class="box-info-size">{{$item['width'] * 1000}} x {{$item['height'] * 1000}} x {{$item['depth'] * 1000}}</div>
                                                                                        </div>
                                                                                    </a>
                                                                                @endif
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                        <div class="row">
                                            <div class="col-md-12" style="text-align: center;padding-top: 20px;"><span class="btn btn-success" onclick="compose('{{$type['id']}}')">Составить</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
</div>
@endsection

@section('page-style-files')
    <link rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
    <style>
        /* width */
        ::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #888;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .panel.panel-default {
            padding-bottom: 30px;
        }
        .panel-title>a {
            text-decoration: none;
        }
        .wizard label {
            font-weight: bold;
        }
        .wizard-head{
            text-align: center;
            font-weight: bold;
        }
        #step1 {
            border: 1px solid lightgray;
            border-radius: 5px;
            padding: 5px;
        }
        .step1-type>.row{
            padding: 5px 0;
        }
        .place{
            border: 1px solid lightgray;
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
            text-align: center;
        }
        .place .dropdown-toggle::after {
            content: none;
        }
        .place .dropdown>button {
            padding: 0;
        }
        .place .dropdown-item {
            cursor: pointer;
        }
        .place .box-info {
            display: inline-block;
        }
        .place .box-info-label {
            font-weight: bold;
        }
        .place .box-info-size {
            color: lightgray;
        }
        .card {
            display: inline-block;
        }
        .card-render{

        }
        .card-size {
            color: lightgray;
            font-size: 12px;
        }
        .dropdown-menu.show{
            max-height: 450px;
            overflow-y: auto;
        }
        .dropdown-item.active, .dropdown-item:active{
            background-color: #ababab!important;
        }

        img[data-height="0.3"]{
            width: unset!important;
            max-height: 60px;
        }

        img[data-height="0.72"]{
            width: unset!important;
            max-height: 90px;
        }

        img[data-height="0.82"]{
            width: unset!important;
            max-height: 100px;
        }

        img[data-height="2.132"]{
            width: unset!important;
            max-height: 213px;
        }

    </style>
@stop

@section('page-js-files')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
@stop

@section('page-js-script')
    <script>
        jQuery(document).ready(function(){

        });

        function select(item) {
            console.log('select');
            var name = jQuery(item).find('img').attr('data-name');
            if (name) {
                jQuery(item).parent().parent().find('.card').find('.card-label').text(jQuery(item).find('img').attr('data-label'));
                jQuery(item).parent().parent().find('.card').find('.icon').attr('data-name', name);
                jQuery(item).parent().parent().find('.card').find('.icon').attr('data-height', jQuery(item).find('img').attr('data-height'));
                jQuery(item).parent().parent().find('.card').find('.card-size').text(jQuery(item).find('img').attr('data-size'));
            }else{
                jQuery(item).parent().parent().find('.card').find('.card-label').text('');
                jQuery(item).parent().parent().find('.card').find('.icon').attr('data-name', '');
                jQuery(item).parent().parent().find('.card').find('.icon').attr('data-height', '');
                jQuery(item).parent().parent().find('.card').find('.card-size').text('');
            }
            jQuery(item).parent().parent().find('.card').find('.icon').attr('src', jQuery(item).find('img').attr('src'));
        }

        function compose(id) {
            /*jQuery('#' + id + ' .top .icon[data-name]').each((i, item) => {
                top.push(jQuery(item).attr('data-name'));
            });
            var bottom = [];
            jQuery('#' + id + ' .bottom .icon[data-name]').each((i, item) => {
                bottom.push(jQuery(item).attr('data-name'));
            });*/
            const background = jQuery('#' + id + ' .background .line .icon[data-name]').attr('data-name');
            const tops = [];
            jQuery('#' + id + ' .top .line').each((i, line) => {
                const top = [];
                jQuery(line).find('.icon[data-name]').each((i, item) => {
                    top.push(jQuery(item).attr('data-name'));
                });
                tops.push(top.join(','));
            });
            const bottoms = [];
            jQuery('#' + id + ' .bottom .line').each((i, line) => {
                const bottom = [];
                jQuery(line).find('.icon[data-name]').each((i, item) => {
                    bottom.push(jQuery(item).attr('data-name'));
                });
                bottoms.push(bottom.join(','));
            });
            console.log('top', tops);
            console.log('bottom', bottoms);
            var win = window.open('{{url('/project/' . $project->name . '/room/preview')}}?case=' + id + (background ? '&background=' + background: '')  + '&top[]=' + tops.join('&top[]=') + '&bottom[]=' + bottoms.join('&bottom[]=') + '&distance=2.2', '_blank');
            win.focus();
        }
    </script>
@stop