@extends('admin.base')

@section('title', 'account management')

@section('account_content')

@php(
	$version = \Illuminate\Support\Facades\Config::get('app.version')
)
@include('components.asset_import.css', ['csss'=>[
								'css/font-awesome.min',
								'css/animate',
								'css/style'
]])
<script src="{{asset('js/bootstrap.min.js').'?'.$version}}"></script>
    <div class="animated fadeInRight">
        <div class ="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{ __('Add Promotion Code') }}</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="ui form">
                            <form  class="form-horizontal" method="POST" action="{{route('storeDiscountZ')}}" enctype="multipart/form-data" id="discountForm">
                                {{ csrf_field() }}

                                <div class="fields">
                                    <label class="labelfield">*{{ __('Promotion Code') }}</label>
                                    <div class="labelfield ui input">
                                        <label class="font-larger">{{$code}}</label>
                                        <input type="hidden" placeholder="Promotion Code" id="code" name="code"  value="{{$code}}" required readonly>
                                    </div>
                                </div>

                                <div class="fields">
                                    <label class="labelfield">* {{ __('% of Discount') }}</label>
                                    <div class="inputfieldSmall ui input">
                                        <input type="number" placeholder="" id="percentage" name="percentage" min="1" max="100" required  onkeyup="checkPercentage(this)">
                                    </div>
                                    <label class="text-left align-self-center font-larger">%</label>
                                </div>

                                <div class="fields">
                                    <label class="labelfield">* 有效时间从</label>
                                    <div class="inputfieldSmall ui icon input" id="startTime" >
                                        <input type="text" placeholder="Date" autocomplete="off" id="startTime" name="startTime" >
                                        <i class="calendar icon"></i>
                                    </div>
                                </div>
                                <div class="fields">
                                    <label class="labelfield">有效时间到</label>
                                    <div class="inputfieldSmall ui icon input" id="endTime">
                                        <input type="text" placeholder="Date" autocomplete="off"  id="endTime" name="endTime">
                                        <i class="calendar icon"></i>
                                    </div>
                                </div>

                                <div class="fields">
                                    <label class="labelfield">*优惠券名称</label>
                                    <div class="inputfieldSmall ui input">
                                        <input type="input" placeholder="" id="discounts_name" name="discounts_name" required maxlength="20" value="优惠券">
                                    </div>
                                </div>
                                <div class="fields">
                                    <label class="labelfield">描述</label>
                                    <div class="inputfieldSmall ui input">
                                        <input type="input" placeholder="" id="describe" name="describe" required  max="100">
                                    </div>
                                </div>
                                <div class="fields">
                                    <div class="labelfield"></div>
                                    <div class="ui primary button" tabindex="0" onclick="storeDiscount()" >{{ __('Submit') }} </div>
                                    <div class="ui primary button" tabindex="0" onclick="lay_close_tab()">{{ __('Return') }} </div>
                                </div>
                            </form>
                            <label class="red" id="overallValidation"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	{{-- Start Confirm Modal --}}
    <div class="modal" tabindex="-1" role="dialog" id="submit_confirmation_modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title inline">{{ __('Confirm Submit') }}</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="cancelSubmit()">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-primary" id="confirmSubmit">{{ __('Confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
	{{-- End Confirm Modal --}}

	<script>
        $(function(){
            $('#discountForm').ajaxForm(function(){
                parent.triggerDataTableChange('discount');
                lay_close_tab();
            });
        });

        // 折扣率小数验证
        function checkPercentage (that) {
            var value = that.value, index = value.indexOf('.');

            if (index > -1) {
                value = value.substring(0, index+3);
            }

            that.value = value
        }

        function storeDiscount() {

            if($('#percentage').val() > 100){
            	$('#overallValidation').html('{{__('Percentage cannot be more than 100')}}');
            	return;
			}

            if($('#percentage').val() < 1){
                $('#overallValidation').html('{{__('Percentage cannot be less than 1')}}');
                return;
            }

			if(new Date($("[name ='startTime']").val()) > new Date($("[name ='endTime']").val())){
                $('#overallValidation').html('{{__('Start date cannot be later than end date')}}');
                return;
            }

            if($('#discounts_name').val() <= 0){
                $('#overallValidation').html('请输入优惠券名称');
                return;
			}
            if(
                $('#code').val() != '' &&
				$('#percentage').val() != '' &&
                $("[name ='startTime']").val() != '' &&
                $("[name ='endTime']").val() != ''
			)
            {
                $('#overallValidation').empty();
                $('#submit_confirmation_modal')
                    .modal('show');
                $('#confirmSubmit').on('click', function () {
                    $('#discountForm').submit();
                    $(this).attr("disabled",true)
                });
            }
            else
            {
                $('#overallValidation').html('re-check input requirements');
            }
        }

       function cancelSubmit () {
           $('#submit_confirmation_modal')
               .modal('hide');
       }
        var  timeSetting = {
            type: 'datetime',//这里可自定义时间类型，
            today:true,

            formatter: { // 自定义日期的格式
                date: function (date, settings) {
                    if (!date) return  '';
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();

                    month = month < 10 ? '0' + month : month;
                    day = day < 10 ? '0' + day : day;

                    return year + '-' + month + '-' + day;
                },

                time: function (date, settings, forCalendar) {
                    if (!date) return '';
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    hour = hour < 10 ? '0' + hour : hour;
                    minute = minute < 10 ? '0' + minute : minute;
                    return hour + ':' + minute;
                },
            },


            disableMinute:true,
            text: {
                days: ['日', '一', '二', '三', '四', '五', '六'],
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                today: '今天',
                now: '当前',

            },

            minDate: new Date("2018-10-30 09:00"),
            maxDate: new Date("2120-5-25 18:00"),

            //解决当前文本框获取不到值问题
            onChange : function (data,txt,mode) {
                $(this).val(txt);
            },

        };

        var leftTimeSetting = $.extend({ endCalendar: "#endTime" }, timeSetting);
        var rightTimeSetting = $.extend({ startCalendar : "#startTime" }, timeSetting);

        $('#startTime').calendar(leftTimeSetting);
        $('#endTime').calendar(rightTimeSetting);

//         $('#startTime').calendar({
//             type: 'date',
//             today:true,
//
//             onHide: function () {
// //                searchFilter();
//             }
//
//         });
//
//         $('#endTime').calendar({
//             type: 'date',
//             today:true,
//             onHide: function () {
// //                searchFilter();
//             }
//         });
        function clearCalendar() {
            $('#toDateBlock').calendar('clear');
            $('#fromDateBlock').calendar('clear');
            searchFilter();
        }

	</script>
    <script src="{{asset('js/content.js').'?'.$version}}"></script>
@endsection

@section('breadcrumbs')
	<a href="{{route('admin-landing')}}">Backend Management</a><i class="right angle icon divider"></i><a href="{{route('admin-discount-list-Z')}}">Discounts</a><i class="right angle icon divider"></i><span>Add Discount</span>
@endsection