<?php echo Form::open(['url'=>'user-leave-apply','id'=>'leaveApply']); ?>

<script>
    CKEDITOR.replace( 'message',{
        toolbarGroups : [
            { name: 'basicstyles', groups: [ 'Bold', 'Italic' ] },
            { name: 'paragraph',   groups: [ 'list' ] },
        ]
    });
</script>
<div class="content">
    <div class="row">
        <?php echo Form::open(['url'=>'user-leave-apply','id'=>'leaveApply']); ?>

        <div class="content">
            <div class="row">
                    <div class="col-md-12">
                        <div class="form-group col-md-4" style="margin-bottom: 4px;">
                            <label class="control-label">From Date</label>
                            <input type="text" name="from_date[]" class="form-control datepicker" required="true">
                        </div>
                        <div class="form-group col-md-4" style="margin-bottom: 4px;">
                            <label class="control-label">To Date</label>
                            <input type="text" name="to_date[]" class="form-control datepicker" required="true">
                        </div>
                        <div class="form-group col-md-4">
                            <label class="control-label col-md-12">&nbsp;</label>
                            <a class="btn btn-success btn-fill" id="addMore"><i class="fa fa-plus" aria-hidden="true"></i></a>
                        </div>
                        <div class="addMoreDiv">

                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label">Leave Type</label>
                            <?php echo Form::select('leave_type',$leaveType,null,['class'=>'form-control','required'=>'true']); ?>

                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label">Message</label>
                            <textarea name="message" class="form-control" required="true" id="message"></textarea>
                        </div>

                    </div>

            </div>
        </div>
    </div>
</div>
        <div class="footer">

            <button type="submit" class="btn btn-info btn-fill pull-right">Apply</button>
            <button type="button" class="btn btn-default btn-simple pull-right" data-dismiss="modal">Close</button>
            <div class="clearfix"></div>

            <div id="errorList" style="color:red">

            </div>
        </div>
        <?php echo Form::close(); ?>


        <script type="text/javascript">
            $(document).ready(function () {
                $('#leaveApply').validate({
                    ignore: [],
                    rules: {
                        message:{
                            required: function()
                            {
                                CKEDITOR.instances.message.updateElement();
                            },
                            minlength:10
                        }
                    },
                    invalidHandler: function() {
                        $("#errorList").empty();
                    },
                    submitHandler: function() {
                        submitForm();
                    }
                });
                $(".addMoreDiv").empty();
                $(".modal-title").text("Leave Apply");
                $(".modal-dialog").addClass("modal-lg");
            });
            $('.datepicker').datetimepicker({
                format: 'YYYY-MM-DD',
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-chevron-up",
                    down: "fa fa-chevron-down",
                    previous: 'fa fa-chevron-left',
                    next: 'fa fa-chevron-right',
                    today: 'fa fa-screenshot',
                    clear: 'fa fa-trash',
                    close: 'fa fa-remove'
                }
            });

            $('#addMore').click(function(){

                $(".addMoreDiv").append('<div class="test" style="width:100%; float:left;">'
                    +'<div class="form-group col-md-4" style="margin-bottom: 4px;">'
                    +'<label class="control-label">From Date</label>'
                    +'<input type="text" name="from_date[]" class="form-control datepicker1">'
                    +'</div>'
                    +'<div class="form-group col-md-4" style="margin-bottom: 4px;">'
                    +'<label class="control-label">To Date</label>'
                    +'<input type="text" name="to_date[]" class="form-control datepicker1">'
                    +'</div>'
                    +'<div class="form-group col-md-4">'
                    +'<label class="control-label col-md-12">&nbsp;</label>'
                    +'<a class="btn btn-danger btn-fill" onclick="remove(this)"><i class="fa fa-trash" aria-hidden="true"></a>'
                    +'</div></div>');
                $('.datepicker1').datetimepicker({
                    format: 'YYYY-MM-DD',
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-chevron-up",
                        down: "fa fa-chevron-down",
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-screenshot',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    }
                });

            });
            function remove(ele) {
                $(ele).closest('.test').remove();
            }
            function submitForm(){
                $.ajax({
                    url: "<?php echo e(URL::to('user-leave-apply')); ?>",
                    type: 'POST',
                    data: $("#leaveApply").serialize(),
                    dataType: 'json',
                    success:function (data) {
                        if(data.error){
                            $("#errorList").html(data.error);
                        }else if(data.success=='true') {
                            window.location.href="<?php echo e(URL::to('user-leave')); ?>";
                        }
                    },
                    error: function (data) {
                        alert("Something wrong!");
                    }
                });
            }

        </script>
