@extends('core::layouts.master')
@section('breadcrumb')
    Quản lý thuộc tính sản phẩm
@endsection
@section('head-action')
    {{ Form::bsNavButton('Lưu thứ tự','#',['class'=>'btn btn-info save-attribute']) }}
@endsection
@section('head')
    {{-- {{ Html::style(config('app.assets_url').'/components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css') }} --}}
    {{-- {{ Html::style(config('app.assets_url').'/components/nestable2/dist/jquery.nestable.min.css') }} --}}
    <style>
        .dd-item .panel {
            margin: 5px 0px;
        }

        .dd-item .panel-heading {
            padding: 8px 13px;
            background-color: #fafafa;
            border-bottom: 1px solid #ddd;
        }

        .dd-item .panel-collapsed .panel-heading {
            border-bottom: none;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-4">

            {{ Form::bsBoxOpen('Thêm thuộc tính') }}
            {!! Form::open([
            'method' => 'POST',
            'route'  => 'admin.product.attribute.store',
            'files'  => true,
            'id' => 'attribute-form'
            ]) !!}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            {{ Form::bsText('Tên thuộc tính','name',null, ['required'=>true]) }}
            {{ Form::bsSelect('Thuộc tính cha','parent_id', [0=>'Không có'] + $attribute_root ,null) }}
            <div class="hide type_select">
                {{ Form::bsSelect('Loại giá trị','type', ['text'=>'Chữ','color'=>'Màu sắc'] ,null) }}
            </div>
            <div class="form-group color hide">
                <label for="type">Mã màu</label>
                <div class="input-group colorpicker-component">
                    <input type="text" name="thumb" value="#00AABB" class="form-control"/>
                    <span class="input-group-addon"><i></i></span>
                </div>
            </div>
            {{--   <div class="form-group value hide" id="img">
                {{ Form::bsLfFile('Chọn hình','img', null , ['width'=>150,'height'=>120]) }}
            </div> --}}
            <button class="btn btn-default pull-right" id="attribute-form-submit" type="submit"
                    data-form="attribute-form">Thêm
            </button>

            {!! Form::close() !!}
            {{ Form::bsBoxClose() }}
        </div>
        <div class="col-md-8">
            {{ Form::bsBoxOpen(' Danh sách thuộc tính') }}
            <div class="modal-body box-sortable">
                <div class="dd">
                    <ol class="dd-list" id="dd-empty-placeholder">
                    </ol>
                </div>
            </div>
            {{-- <div class="modal-footer">
                {{ Form::bsButton('Lưu thứ tự',['class'=>'btn btn-xs btn-primary save-attribute']) }}
            </div> --}}
            {{ Form::bsBoxClose() }}
        </div>
    </div>
    <script id="detailTemplate" type="text/x-jquery-tmpl">
<li class="dd-item" data-id=${id}>
    {!! Form::open(['method' => 'PUT','route'  => ['admin.product.attribute.update',":id"]]) !!}
        <input type="hidden" name="router_destroy" value="{{ route('admin.product.attribute.destroy',':id') }}">
    <input type="hidden" name="id" value="${id}">
    <div class="panel panel-default panel-collapsed">
        <div class="panel-heading">
            <h6 class="panel-title">${name}</h6>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-action="collapse"></a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            {{ Form::bsText('Tên thuộc tính','name','${name}') }}
        <div class="form-group">
            <label for="Loại giá trị">Loại Giá Trị</label>
            <select id="type" class="form-control" name="type">
                <option value="text" @{{if type=="text"}} selected @{{/if}}>Chữ</option>
                <option value="color" @{{if type=="color"}} selected @{{/if}}>Màu sắc</option>
            </select>
        </div>
        <div class="form-group color @{{if type!="color"}} hide @{{/if}}">
            <label >Mã màu</label>
            <div class="input-group colorpicker-component">
                <input type="text" name="thumb" value="${thumb}" class="form-control"/>
                <span class="input-group-addon"><i></i></span>
            </div>
        </div>
        <div class="form-group">
            <div class="heading-btn pull-right">
                <button type="button" class="btn btn-default btn-remove-item">Xóa</button>
                <button type="button" class="btn btn-info btn-update-item">Lưu</button>
            </div>
        </div>
    </div>
</div>
{!! Form::close() !!}
        @{{if children}}
        <ol class="dd-list">
            @{{tmpl(children) "#detailTemplate"}}
        </ol>
        @{{/if}}
    </li>

    </script>
@endsection
@include('product::attribute.scripts')