@extends('layouts.base')

@section('content')
@section('title', trans('Yunshop\Appointment::pack.project_info'))
<style>
.store-name-sty {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.multi-item {
    height: 150px;
    width: 150px !important;
    margin-bottom: 20px;
}
</style>
<div class="w1200 m0a">
    <div class="right-titpos">
        <ul class="add-snav">
            <li class="active"><a href="#">{!! trans('Yunshop\Appointment::pack.project_info') !!}</a></li>
        </ul>
    </div>
    <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{!! trans('Yunshop\Appointment::pack.project_name') !!}</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="text" name="project[title]" id="title" class="form-control" value="{{$project->title}}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{!! trans('Yunshop\Appointment::pack.project_category') !!}</label>
                    <div class="col-sm-9 col-xs-12">
                        <select name='project[category_id]' class='form-control'>
                            @foreach($category_list as $category)
                                <option value='{{$category->id}}'
                                @if($project->category_id == $category->id)
                                        selected
                                        @endif
                                        >{{$category->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>门店支持</label>
                    <div class="col-sm-9 col-xs-12">
                        <label class='radio-inline'>
                            <input type="radio" class="store_support" name="project[store_support]" id="store1" value="0" checked="checked"/>门店
                        </label>
                        <label class='radio-inline'>
                            <input type="radio" class="store_support" name="project[store_support]" id="store_sort" value="1"/>门店分类
                        </label>
                    </div>
                </div>
                <div class="form-group" id="store">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                    <div class="col-sm-9 col-xs-12">
                        <div class='input-group'>
                            <input type="hidden" id='store_ids' name="project[store_ids]" maxlength="30"
                                   value="{{$project->store_ids}}" />
                            <div class='input-group-btn'>
                                <button class="btn btn-default" type="button"
                                        onclick="popwin = $('#modal-module-menus').modal();">选择门店
                                </button>
                            </div>
                        </div>
                        <div class="input-group multi-img-details" id='store_container'>
                            @foreach ($stores as $store)
                                <div class="multi-item" storeid="{{$store['id']}}">
                                    <img class="img-responsive img-thumbnail" src="{{$store['thumb']}}"
                                         onerror="this.src=\'{{static_url('resource/images/nopic.jpg')}}\'; this.title=\'图片未找到.\'">
                                    <div class="store_name">{{$store['store_name']}}</div>
                                    <em onclick="remove_store(this)"  class="close">×</em>
                                </div>
                            @endforeach
                        </div>
                        <div id="modal-module-menus" class="modal fade" tabindex="-1">
                            <div class="modal-dialog" style='width: 920px;'>
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close"
                                                type="button">×
                                        </button>
                                        <h3>选择门店</h3></div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="keyword" value="" onKeypress="javascript:if(event.keyCode == 13)event.returnValue = false;"
                                                       id="search-kwd" placeholder="请输入门店名称"/>
                                <span class='input-group-btn'><button type="button"
                                                                      class="btn btn-default"
                                                                      onclick="search_stores();">
                                        搜索
                                    </button></span>
                                            </div>
                                        </div>
                                        <div id="module-menus" style="padding-top:5px;"></div>
                                    </div>
                                    <div class="modal-footer"><a href="#" class="btn btn-default"
                                                                 data-dismiss="modal" aria-hidden="true">关闭</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" id="store_support" hidden="hidden">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                    <div class="col-sm-9 col-xs-12">
                        <div class='input-group'>
                            <input type="hidden" id='sort_ids' name="project[sort_ids]" maxlength="30"
                                   value="{{$project->sort_ids}}" />
                            <div class='input-group-btn'>
                                <button class="btn btn-default" type="button"
                                        onclick="popwin = $('#modal-module-menus-sort').modal();">选择门店分类
                                </button>
                            </div>
                        </div>
                        <div class="input-group multi-img-details" id='store_container_sort'>
                            @foreach ($stores_sort as $store)
                                <div class="multi-item" sortid="{{$store['id']}}">
                                    <img class="img-responsive img-thumbnail" src="{{yz_tomedia($store['thumb'])}}"
                                         onerror="this.src=\'{{static_url('resource/images/nopic.jpg')}}\'; this.title=\'图片未找到.\'">
                                    <div class="store_name">{{$store['name']}}</div>
                                    <em onclick="remove_store_sort(this)"  class="close">×</em>
                                </div>
                            @endforeach
                        </div>
                        <div id="modal-module-menus-sort" class="modal fade" tabindex="-1">
                            <div class="modal-dialog" style='width: 920px;'>
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close"
                                                type="button">×
                                        </button>
                                        <h3>选择门店分类</h3></div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="keyword" value="" onKeypress="javascript:if(event.keyCode == 13)event.returnValue = false;"
                                                       id="search-kwd-sort" placeholder="请输入门店分类名称"/>
                                                <span class='input-group-btn'><button type="button"
                                                                                      class="btn btn-default"
                                                                                      onclick="search_stores_sort();">
                                        搜索
                                    </button></span>
                                            </div>
                                        </div>
                                        <div id="module-menus-sort" style="padding-top:5px;"></div>
                                    </div>
                                    <div class="modal-footer"><a href="#" class="btn btn-default"
                                                                 data-dismiss="modal" aria-hidden="true">关闭</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{!! trans('Yunshop\Appointment::pack.service_time') !!}</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="text" name="project[service_time]" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')"
                               value="@if($project->service_time){{$project->service_time}}@else{{30}}@endif"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{!! trans('Yunshop\Appointment::pack.service_time_inteval') !!}</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="text" name="project[service_time_inteval]" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')"
                               value="@if($project->service_time_inteval){{$project->service_time_inteval}}@else{{0}}@endif"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{!! trans('Yunshop\Appointment::pack.ahead_time') !!}</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="text" name="project[ahead_time]" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')"
                               value="@if($project->ahead_time){{$project->ahead_time}}@else{{15}}@endif"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">推荐</label>
                    <div class="col-sm-9 col-xs-12">
                        <label class='radio-inline'>
                            <input type="radio" name="project[is_recommand]" value="0" @if($project['is_recommand']!=='' && $project['is_recommand']==0) checked @endif/>否
                        </label>
                        <label class='radio-inline'>
                            <input type="radio" name="project[is_recommand]" value="1" @if($project['is_recommand']==1) checked @endif/>是
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">使用期限</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="text" name="project[period]" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')"
                               value="{{$project->period}}"/>
                        <span class="help-block">不填写或填0不限制使用期限</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span
                                style="color:red">*</span>{{$lang_set['project']}}缩略图</label>
                    <div class="col-sm-9 col-xs-12">
                        {!! app\common\helpers\ImageHelper::tplFormFieldImage('project[thumb]',
                        yz_tomedia($project->thumb))!!}
                        <span class="help-block">建议尺寸: 100*100，或正方型图片 </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">{{$lang_set['project']}}banner图</label>
                    <div class="col-sm-9 col-xs-12">
                        {!! app\common\helpers\ImageHelper::tplFormFieldMultiImage('project[banner_imgs]',yz_tomedia($project->banner_imgs)) !!}
                        <span class="help-block"></span>
                        <div class="input-group multi-img-details" id='store_container'>
                            @foreach ($project->banner_imgs as $banner_img)
                                <div class="multi-item">
                                    <input type="hidden" name="project[banner_imgs][]" maxlength="30" value="{{$banner_img}}" />
                                    <img class="img-responsive img-thumbnail" src="{!! yz_tomedia($banner_img) !!}"
                                         onerror="this.src=\'{{static_url('resource/images/nopic.jpg')}}\'; this.title=\'图片未找到.\'">
                                    <em onclick="remove_store(this)"  class="close">×</em>
                                </div>
                            @endforeach
                            <span class="help-block">建议尺寸: 750*750</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">{{$lang_set['project']}}简介</label>
                    <div class="col-sm-9 col-xs-12">
                        <textarea class="form-control" rows="5" name="project[description]">{{$project->description}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">{{$lang_set['project']}}描述</label>
                    <div class="col-sm-9 col-xs-12">
                        {!! yz_tpl_ueditor('project[content]', $project->content) !!}
                    </div>
                </div>

                <div class="form-group"></div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                    <div class="col-sm-9 col-xs-12">
                        <input type="submit" name="submit" value="提交" class="btn btn-success"
                               onclick="return formcheck()"/>
                        <input type="button" name="back" onclick='history.back()' style=''
                               value="返回列表"
                               class="btn btn-default back"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    let store_support = {{$project->store_support? :0}}
    if (store_support == 1) {
        $('#store').hide()
        $('#store_support').show()
        $('#store1').attr("checked",false)
        $('#store_sort').attr("checked",true)
    } else if (store_support == 0){
        $('#store').show()
        $('#store_support').hide()
        $('#store1').attr("checked",true)
        $('#store_sort').attr("checked",false)
    }
    $('document').ready(function () {
        $('input[type=radio][class=store_support]').change(function () {
            console.log(8888)
            if (this.value == 0) {
                $('#store').show()
                $('#store_support').hide()
            } else if (this.value == 1){
                $('#store').hide()
                $('#store_support').show()
            }
        })
    })
    function search_stores() {
        if ($.trim($('#search-kwd').val()) == '') {
            Tip.focus('#search-kwd', '请输入关键词');
            return;
        }
        $("#module-menus").html("正在搜索....");
        $.get("{!! yzWebUrl('plugin.appointment.admin.store.query') !!}", {
            keyword: $.trim($('#search-kwd').val())
        }, function (dat) {
            $('#module-menus').html(dat);
        });
    }

    function search_stores_sort() {
        if ($.trim($('#search-kwd-sort').val()) == '') {
            Tip.focus('#search-kwd-sort', '请输入关键词');
            return;
        }
        $("#module-menus--sort").html("正在搜索....");
        $.get("{!! yzWebUrl('plugin.appointment.admin.store.query-sort') !!}", {
            keyword: $.trim($('#search-kwd-sort').val())
        }, function (dat) {
            $('#module-menus-sort').html(dat);
        });
    }
    function select_store(o) {
        console.log(o);
        var html = '<div class="multi-item" storeid="' + o.id + '">';
        html += '<img class="img-responsive img-thumbnail" src="' + o.thumb + '" onerror="this.src=\'{{static_url('resource/images/nopic.jpg')}}\'; this.title=\'图片未找到.\'">';
        html += '<div class="store_name store-name-sty" title="'+ o.store_name +'">' + o.store_name + '</div>';
        html += '<em onclick="remove_store(this)"  class="close">×</em>';
        html += '</div>';
        $("#store_container").append(html);
        refresh_members();
    }
    //选择门店分类
    function select_store_sort(o) {
        console.log(o);
        var html = '<div class="multi-item" sortid="' + o.id + '">';
        html += '<img class="img-responsive img-thumbnail" src="' + o.thumb + '" onerror="this.src=\'{{static_url('resource/images/nopic.jpg')}}\'; this.title=\'图片未找到.\'">';
        html += '<div class="store_name store-name-sty" title="'+ o.name +'" >' + o.name + '</div>';
        html += '<em onclick="remove_store_sort(this)"  class="close">×</em>';
        html += '</div>';
        $("#store_container_sort").append(html);
        refresh_members_sort();
    }
    function remove_store(obj) {
        $(obj).parent().remove();
        refresh_members();
    }
    //门店分类
    function remove_store_sort(obj) {
        $(obj).parent().remove();
        refresh_members_sort();
    }

    function refresh_members() {
        var storeIds = "";
        $('.multi-item').each(function () {
            var storeId = $(this).attr('storeid')
            var ret = $(this).find('.img-nickname-store').html();
            if (storeId) {
                storeIds += storeId + ','
            }
        });
        if (storeIds) {
            storeIds = storeIds.substring(0,storeIds.length-1);
        }
        $('#store_ids').val(storeIds);
    }
    function refresh_members_sort() {
        var sortIds = "";
        $('.multi-item').each(function () {
            var sortId = $(this).attr('sortid')
            var ret = $(this).find('.img-nickname-store').html();
            if (sortId) {
                sortIds += sortId + ','
            }
        });
        if (sortIds) {
            sortIds = sortIds.substring(0,sortIds.length-1);
        }
        $('#sort_ids').val(sortIds);
    }
    function formcheck(){
        if ($.trim($('#title').val()) == '') {
            alert('请填写标题!');
            $('#title').focus();
            return false;
        }
        if ($.trim($('#store_ids').val()) == '' && $.trim($('#sort_ids').val()) == '') {
            alert('请选择门店或门店分类!');
            return false;
        }
        if ($.trim($(':input[name="project[thumb]"]').val()) == '') {
            alert('请上传缩略图!');
            return false;
        }
    }
</script>
@endsection