@extends('layouts.base')
@section('title', '活动编辑')

@section('content')
    <section class="content">

        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">活动编辑</a></li>
            </ul>
{{--            <a class="btn btn-primary" id="test-btn"> 测试</a>--}}
        </div>

        <div style="min-height: 10px"></div>

        <div>
            <form action="" method="post" id="activity_form" onsubmit="return formcheck(this)" >
{{--            <form action="" method="post"  >--}}
        <div  class="col-md-8" style="float: left">
            <input type="hidden" name="is_edit" value="1">
            <input type="hidden" name="activity_id" value="{{empty($activity_data['id']) ? '0' : $activity_data['id']}}">
                <div class="form-group">
                    <label class="col-md-1" style="font-weight: bold" for="activity_name">❉活动名称</label>
                    <div class="col-md-8">
                        <input type="text" name="activity_name" id="activity_name" class="form-control" value="{{$activity_data['activity_name']}}" />
                    </div>
                    <div class="col-md-3">
                        <p></p>
                    </div>
                </div>

                <div style="min-height: 50px" class="form-group">
                    <label class="col-md-1" style="font-weight: bold" for=""></label>
                    <div class="col-md-11">
                        <p></p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-1" style="font-weight: bold" for="search[time][range][start]">❉活动时间</label>
                    @if(!$activity_id)
                        <div class="col-md-8">
                            {!!
                                          app\common\helpers\DateRange::tplFormFieldDateRange('activity_time', [
                                  'starttime'=>date('Y-m-d h:d',time()),
                                  'endtime'=>date('Y-m-d h:d',strtotime("+ 7 day")),
                                  'start'=>0,
                                  'end'=>0
                                  ], true)!!}

                        </div>
                    @elseif($activity_data['state'] == 0  && strtotime($activity_data['end_time'])> time())
                        <div class="col-md-8">
                            {!!
                                          app\common\helpers\DateRange::tplFormFieldDateRange('activity_time', [
                                  'starttime'=>array_get($activity_data,'start_time',0),
                                  'endtime'=>array_get($activity_data,'end_time',0),
                                  'start'=>0,
                                  'end'=>0
                                  ], true)!!}

                        </div>
                    @else
                        <div>
                            <input type="hidden" name="activity_time[start]" value="{!! $activity_data['start_time'] !!}" />
                            <input type="hidden" name="activity_time[end]" value="{!! $activity_data['end_time'] !!}" />
                        </div>
                        {!! $activity_data['start_time'] . '至'.  $activity_data['end_time']!!}
                        <p>注：当前活动已结束无法修改时间</p>
                    @endif
                </div>

                <div style="min-height: 100px" class="form-group">
                    <label class="col-md-1" style="font-weight: bold" for=""></label>
                    <div class="col-md-11">
                        <p></p>
                    </div>
                </div>



                <div class="form-group" >
                    <label class="col-md-1" style="font-weight: bold" for="activity_goods">❉活动商品</label>
                    <div class="col-md-10" style="margin-left: 20px">
                        <div class='input-group'>
                            <input type="hidden" name="goods_data_str" id="goods_data_str" value="{{$goods_data['goods_data_str']}}">
                            <input type="text" name="goods_name_str" id="goods_name_str" maxlength="30"
                                   value="@if(isset($goods_data['goods_name_str'])) {{$goods_data['goods_name_str']}} @endif"
                                   id="goods_input" class="form-control" readonly/>
                            <div class='input-group-btn'>
                                <button class="btn btn-default show-goods-btn" type="button">
                                    选择商品
                                </button>
                                <button class="btn btn-danger clean-goods-btn" type="button">
                                    清除选择
                                </button>
                            </div>
                        </div>
{{--                        justify-content:space-between;--}}
                        <div class="input-group multi-img-details" id='goods-pic-div' style="width:100%;white-space:nowrap;overflow-y:hidden;overflow-x:scroll;display:flex;{{ empty($goods_data['goods_data']) ? 'display:none' : ''}} ">
                            @foreach ($goods_data['goods_data'] as $k => $v)
                                <div class="multi-item saler-item" style="height: 180px" openid="{{ $v['goods_id'] }}">
                                    <img style="height: 180px;width: 180px" class="img-responsive img-thumbnail" src='{{ $v['thumb'] }}' onerror="this.src='{{static_url('resource/images/nopic.jpg')}}'; this.title='图片未找到.'">
                                    <div class='img-nickname' style="max-height: 58px;overflow: hidden">{{ $v['title'] }}</div>
                                    <em del-id="{{$k}}" class="close remove-goods-btn">×</em>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            <div style="min-height: 200px" class="form-group">
                <label class="col-md-1" style="font-weight: bold" for=""></label>
                <div class="col-md-11">
                    <p> &nbsp;</p>
                </div>
            </div>

            <div class="form-group" >
                <div class="form-inline col-md-12">
                    <label class="col-md-1" style="font-weight: bold" >活动规则</label>
                    <a class="btn btn-primary" id="add-rule-btn">新增规则</a>
                    <input type="hidden" name="rule_data_str" id="rule_data_str" value="{{$rule_data['data_str']}}">
                </div>
                <div style="min-height: 20px" class="form-group">
                    <label class="col-md-1" style="font-weight: bold" for=""></label>
                    <div class="col-md-11">
                        <p></p>
                    </div>
                </div>
                <div id="rule-div">
                @foreach ($rule_data['data'] as $k => $v)
                    <label class="col-md-1" style="font-weight: bold" ></label>
                    <div class="form-inline form-group">
                            <div class="input-group col-md-3">
                                <span class="input-group-addon">第</span>
                                <input type="number" rule-id="{{$k}}" class="form-control prize-num-input" value="{{$v['prize_num']}}" >
                            </div>
                        <select  style="min-height: 35px;" class="rule-type-select" rule-id="{{$k}}">
                            <option value="1" @if($v['type'] == 1) selected @endif>倍数个</option>
                            <option value="2" @if($v['type'] == 2) selected @endif>个</option>
                        </select>
                        <div class="input-group col-md-3">
                            <span class="input-group-addon">支付用户，奖励</span>
                            @if($v['reward_type'] != 5)
                                <input type="number" class="form-control reward-num-input" rule-id="{{$k}}" value="{{$v['reward_num']}}" >
                            @else
                                <input type="number" class="form-control reward-num-input hidden" rule-id="{{$k}}" value="{{$v['reward_num']}}" >
                            @endif
                            <input type="hidden" value="{{$v['coupon_id']}}">
                            @if($v['reward_type'] == 5)
                                <a class="btn btn-default show-coupon-btn" rule-id="{{$k}}">{{empty($v['coupon_id']) ? '请选择优惠券' : $v['coupon_name']}}</a>
                            @else
                                <a class="btn btn-default hidden">{{$v['coupon_name']}}</a>
                            @endif
                        </div>
                        <select class="reward-type-select" rule-id="{{$k}}"  style="min-height: 35px;">
                            <option value="1" @if($v['reward_type'] == 1) selected @endif>积分</option>
                            <option value="2" @if($v['reward_type'] == 2) selected @endif>余额</option>
                            @if($is_love)
                                <option value="3" @if($v['reward_type'] == 3) selected @endif>爱心值</option>
                            @endif
                            @if($is_consume)
                                <option value="4" @if($v['reward_type'] == 4) selected @endif>消费积分</option>
                            @endif
                            <option value="5" @if($v['reward_type'] == 5) selected @endif>优惠券</option>
                        </select>

                        <a class="btn btn-danger delete-rule-btn" rule-id = "{{$k}}" >X</a>
                    </div>
                @endforeach
                </div>
            </div>

            <div style="min-height: 100px" class="form-group">
                <label class="col-md-1" style="font-weight: bold" for=""></label>
                <div class="col-md-11">
                    <p> &nbsp;</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-1" style="font-weight: bold" for="activity_desc">❉活动描述</label>
                <div class="col-md-11" style="margin-left: 20px">
                    @include('Yunshop\CommunityRelay::admin.des')
                </div>
            </div>

            <div style="min-height: 300px" class="form-group">

                <label class="col-md-1" style="font-weight: bold" for=""></label>
                <div class="col-md-11">
                    <p></p>
                </div>
            </div>

            <div style="min-height: 100px" class="form-group">
                <label class="col-md-10" style="font-weight: bold" for=""></label>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </div>

            <div style="min-height: 100px" class="form-group">

                <label class="col-md-1" style="font-weight: bold" for=""></label>
                <div class="col-md-11">
                    <p></p>
                </div>
            </div>


        </div>
            <div class="col-md-4" style="float: right;max-height: 500px">
                <img style="width: 80%;height: 80%" src="{{$activity_data['img_url']}}" onerror="this.src='{{static_url('resource/images/nopic.jpg')}}'; this.title='图片未找到.'" />
            </div>


            <div style="width: 100%"></div>



            </form>
        </div>


{{--        商品modal开始--}}
        <div id="modal-goods"  class="modal fade" tabindex="-1" style="min-height: 800px">
            <div class="modal-dialog" style='width: 920px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; '>
                <div class="modal-content" style="   position: absolute; top: 0; bottom: 0; width: 100%; ">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button><h3>选择商品</h3>
                        <div class="row">
                            <div class="input-group">
                                <input type="text" class="form-control"  value="" id="search-goods-input" placeholder="请输入商品名称" />
                                <span class='input-group-btn'><button type="button" class="btn btn-default search-goods-btn" >搜索</button></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body"  style="overflow-y: scroll; position: absolute;">
                            <table class="table table-hover" style="text-align: center" id="choose-goods-table">

                            </table>
                    </div>
                    <div class="modal-footer" style="position: absolute; width: 100%; bottom: 0;"></div>
                </div>
            </div>
        </div>
{{--   商品modal结束--}}


{{--        选择优惠券modal开始--}}

        <div id="modal-coupon"  class="modal fade" tabindex="-1" style="min-height: 800px">
            <div class="modal-dialog" style='width: 920px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; '>
                <div class="modal-content" style="   position: absolute; top: 0; bottom: 0; width: 100%; ">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button><h3>选择优惠券</h3>
                        <div class="row">
                            <div class="input-group">
                                <input type="text" class="form-control"  value="" id="search-coupon-input" placeholder="请输入优惠券名称" />
                                <span class='input-group-btn'><button type="button" class="btn btn-default search-coupon-btn" >搜索</button></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body"  style="overflow-y: scroll; position: absolute;">
                        <input type="hidden" id="modal-coupon-rule-id" value="">
                        <table class="table table-hover" style="text-align: center" id="choose-coupon-table">

                        </table>
                    </div>
                    <div class="modal-footer" style="position: absolute; width: 100%; bottom: 0;"></div>
                </div>
            </div>
        </div>

{{--        选择优惠券modal结束--}}

    </section><!-- /.content -->

    <script type="text/javascript">
        var goods_data = {!! $goods_data['goods_data_str'] !!};
        var rule_data = {!! $rule_data['data_str'] !!};
        var error_pic_url = '{!! $error_url !!}';
        var plugin_id_arr = [];
        var is_love = '{!! $is_love !!}';
        var is_consume = '{!! $is_consume !!}';

        $(function(){
            if(typeof '{!! $activity_data['desc'] !!}' != undefined){
                $("textarea[name='goods[content]").val('{!! $activity_data['desc'] !!}');
            }
            $.each(goods_data,function (k,v) {
                plugin_id_arr.push(v.plugin_id);
            })

        });

        $('#test-btn').on('click',function () {
            formcheck();
        });

       function formcheck(){
           var start_time = (new Date(Date.parse($("input[name='activity_time[start]']").val().replace(/-/g,"/")))).getTime()/1000;
           var end_time = (new Date(Date.parse($("input[name='activity_time[end]']").val().replace(/-/g,"/")))).getTime()/1000;
           if(start_time > end_time){
               alert('开始时间不能早于结束时间');
               return false;
           }

           if($('#activity_name').val() == ''){
               alert('请填写活动名称');
               return false;
           }
           $('#activity_form').submit();
       }

        //规则优惠券变更
        $('#rule-div').on('click','.show-coupon-btn',function () {
            $('#search-coupon-input').val('');
            $('#choose-coupon-table').html('');
            $('#modal-coupon-rule-id').val($(this).attr('rule-id'));
            search_coupon();
            $('#modal-coupon').modal('show');
        });


       $('#modal-coupon').on('click','.search-coupon-btn',function () {
           search_coupon();
       });


        $('#choose-coupon-table').on('click','.choose-one-coupon',function () {
            var rule_id =  $('#modal-coupon-rule-id').val();
            var couponid = $(this).attr('coupon-id');
            var couponname = $(this).attr('coupon-name');
            rule_data[rule_id].coupon_id = couponid;
            rule_data[rule_id].coupon_name = couponname;
            show_rules();
            $('#modal-coupon').modal('hide');
        });

        function search_coupon(){

            var url = "{!! yzWebUrl("plugin.community-relay.admin.activity.search-coupon") !!}";
            var post_data = {'coupon_name':$('#search-coupon-input').val() };

            $.post(url,post_data , function (res) {
                console.log(res);
                if(res.result == 1){
                    var html = '';
                    if(res.data == null){
                        html = '<tr><td>没有符合条件的优惠券</td></tr>'
                    }else{
                        html = '<tr><td style="font-weight: bold">优惠券id</td><td style="font-weight: bold">优惠券名</td><td style="font-weight: bold">操作</td></tr>';
                        $.each(res.data,function (k,v) {
                            html += '<tr>';
                            html += '<td>'+v.id+'</td>';
                            html += '<td>'+v.name+'</td>';
                            html += '<td><a class="btn btn-primary choose-one-coupon" coupon-name = "'+v.name+'"  coupon-id = "'+ v.id +'" >选择</a></td>';
                            html += '</tr>';
                        });
                    }
                    console.log(html);
                    $('#choose-coupon-table').html(html);

                }else{
                    alert(res.msg);
                }
            });
        }


        //规则触发数变更
        $('#rule-div').on('change','.prize-num-input',function () {
            var rule_id = $(this).attr('rule-id');
            rule_data[rule_id].prize_num = $(this).val();
            show_rules();
        });

        //规则类型变更
        $('#rule-div').on('change','.rule-type-select',function () {
            var rule_id = $(this).attr('rule-id');
            rule_data[rule_id].type = $(this).val();
            show_rules();

        });

        //奖励数变更
        $('#rule-div').on('change','.reward-num-input',function () {
            var rule_id = $(this).attr('rule-id');
            rule_data[rule_id].reward_num = $(this).val();
            show_rules();

        });

        //奖励类型变更
        $('#rule-div').on('change','.reward-type-select',function () {
            var rule_id = $(this).attr('rule-id');
            rule_data[rule_id].reward_type = $(this).val();
            show_rules();

        });

        //新增规则
        $('#add-rule-btn').on('click',function () {
            var new_rule = {'type' : 1 , 'prize_num' : 0 , 'reward_type' : 1 ,'reward_num' : 0 , 'coupon_name' : '' , 'coupon_id' : 0};
            rule_data.push(new_rule);
            rule_data.sort();
            console.log(rule_data);
            show_rules();
        });

        //删除规则
        $('#rule-div').on('click','.delete-rule-btn',function () {
            var del_id = $(this).attr('rule-id');
            rule_data.splice(del_id,1);
            rule_data.sort();
            show_rules();
        });


        //渲染规则div
        function show_rules(){
            var html = '';
            $.each(rule_data,function (k,v) {
                html += '<label class="col-md-1" style="font-weight: bold" ></label><div class="form-inline form-group"><div class="input-group col-md-3"><span class="input-group-addon">第</span>';
                html += '<input type="number" rule-id="'+k+'" class="form-control prize-num-input" value="'+v.prize_num+'"></div>';
                html += '<select  style="min-height: 35px;" class="rule-type-select" rule-id="'+k+'">';
                html += '<option value="1" ';
                if(v.type == 1){ html += 'selected' }
                html += '>倍数个</option>';
                html += '<option value="2"';
                if(v.type == 2){ html += 'selected' }
                html += '>个</option></select>';
                html += '<div class="input-group col-md-3"><span class="input-group-addon">支付用户，奖励</span>';
                html += '<input type="number" class="form-control reward-num-input ';
                if(v.reward_type == 5){  html += 'hidden '; }
                html += '" rule-id="'+k+'" value="'+v.reward_num+'" >';
                html += '<input type="hidden" value="'+v.coupon_id+'">';
                if(v.reward_type != 5){
                    html += '<a class="btn btn-default hidden">'+v.coupon_name+'</a>';
                }else if(v.reward_type == 5 && v.coupon_id > 0){
                    html += '<a class="btn btn-default show-coupon-btn"  rule-id="'+k+'">'+v.coupon_name+'</a>';
                }else{
                    html += '<a class="btn btn-default show-coupon-btn" rule-id="'+k+'" >请选择优惠券</a>';
                }
                html += ' </div> <select class="reward-type-select" rule-id="'+k+'"  style="min-height: 35px;">';
                var option_arr = {'1' : '积分' , '2' : '余额' , '5' : '优惠券'};
                if(is_love == '1'){
                    option_arr['3'] = '爱心值';
                }
                if(is_consume == '1'){
                    option_arr['4'] = '消费积分';
                }
                $.each(option_arr,function (kk,vv) {
                    html += '<option value="'+ kk +'" ';
                    if(kk == v.reward_type){ html += 'selected ' }
                    html += '>'+vv+'</option>';
                });
                html += '</select><a class="btn btn-danger delete-rule-btn" rule-id = "'+k+'" >X</a></div>'
            });
            $('#rule_data_str').val(JSON.stringify(rule_data));
            $('#rule-div').html(html);
        }


        //选择商品
        $('.show-goods-btn').on('click',function () {
            $('#search-goods-input').val('');
            $('#choose-goods-table').html('');
            $('#modal-goods').modal('show');
        });

        //清空商品
        $('.clean-goods-btn').on('click',function () {
            goods_data = [];
            show_goods();
        });

        //移除单个商品
        $('#goods-pic-div').on('click','.remove-goods-btn',function () {
            var del_id = $(this).attr('del-id');
            goods_data.splice(del_id,1);
            goods_data.sort();
            show_goods();
        });

        //新增单个商品
        $('#modal-goods').on('click','.choose-one-goods',function () {
            var new_goods =  {'goods_id' : $(this).attr('goods-id') ,
                'thumb' : $(this).attr('goods-pic') ,
                'title' : $(this).attr('goods-name'),
                'plugin_id' : $(this).attr('plugin-id') ,
            };
            var is_repeat = false;
            if(goods_data.length >= 20){
                alert('活动最多添加20个商品');
                return false;
            }

            var is_ct = false;
            if($(this).attr('plugin-id') == 40){
                $.each(plugin_id_arr,function (k,v) {
                    if(v != 40){
                        is_ct = true;
                    }
                })
            }else{
                $.each(plugin_id_arr,function (k,v) {
                    if(v == 40){
                        is_ct = true;
                    }
                })
            }
            if(is_ct){
                console.log(plugin_id_arr);
                console.log($(this).attr('plugin-id'));
                alert('活动不可同时添加租赁商品与其他类型的商品');
                return false;
            }


            $.each(goods_data,function (k,v) {
                if(v.goods_id == new_goods.goods_id){
                    is_repeat = true;
                }
            });
            if(is_repeat){
                alert('该商品已添加');
            }else{
                goods_data.unshift(new_goods);
                goods_data.sort();
                show_goods();
            }

        });

        //渲染商品列表
        function show_goods(){
            var html = '';
            var goods_name_str = '';
            var i = 0;
            plugin_id_arr = [];
            $.each(goods_data,function (k,v) {
                html += '<div class="multi-item saler-item" style="width:180px;height: 180px" openid="'+v.goods_id+'">';
                html += '<img style="height: 180px;width: 180px" class="img-responsive img-thumbnail" src="'+v.thumb+'"';
                html += 'onerror=\'this.src="'+error_pic_url+'"; this.title="图片未找到."\'>';
                html += '<div class="img-nickname" style="max-height: 58px;overflow: hidden">'+v.title+'</div>';
                html += '<em del-id="'+k+'" class="close remove-goods-btn">×</em></div>';
                if(goods_name_str != ''){
                    goods_name_str += ',';
                }
                goods_name_str += v.title;
                plugin_id_arr.push(v.plugin_id);
            });

            $('#goods-pic-div').html(html);
            $('#goods_name_str').val(goods_name_str);
            $('#goods_data_str').val(JSON.stringify(goods_data));
            if(goods_data.length == 0){
                $('#goods-pic-div').hide();
            }else{
                $('#goods-pic-div').show();
            }
        }


        //搜索商品
        $('.search-goods-btn').on('click',function () {

            var url = "{!! yzWebUrl("plugin.community-relay.admin.activity.search-goods") !!}";
            var post_data = {'goods_name':$('#search-goods-input').val() };

            $.post(url,post_data , function (res) {
                console.log(res);
                if(res.result == 1){
                    var html = '';
                    if(res.data == null){
                       html = '<tr><td>没有符合条件的商品</td></tr>'
                    }else{
                        html = '<tr><td style="font-weight: bold">商品id</td><td style="font-weight: bold">商品名</td><td style="font-weight: bold">操作</td></tr>';
                        $.each(res.data,function (k,v) {
                            html += '<tr>';
                            html += '<td>'+v.id+'</td>';
                            html += '<td>'+v.title+'</td>';
                            html += '<td><a class="btn btn-primary choose-one-goods" plugin-id = "'+ v.plugin_id +'"  goods-name = "'+v.title+'"  goods-pic = "'+ v.thumb +'"  goods-id = "'+v.id+'">选择</a></td>';
                            html += '</tr>';
                        });
                    }
                    console.log(html);
                    $('#choose-goods-table').html(html);

                }else{
                    alert(res.msg);
                }
            });
        });


    </script>


@endsection