{!! Form::open(['url'=>'user-leave-apply','id'=>'exchangeApply']) !!}
<script>
    CKEDITOR.replace( 'message',{
        toolbarGroups : [
            { name: 'basicstyles', groups: [ 'Bold', 'Italic' ] },
            { name: 'paragraph',   groups: [ 'list' ] },
        ]
    });
</script>
<div class="content">
    <div class="row">
            <div class="col-md-12">
                <div class="form-group col-md-6" style="margin-bottom: 4px;">
                    <label class="control-label">Exchange From</label>
                    <input type="text" name="holiday_date" class="form-control datepicker" required="true" placeholder="Your available holiday">
                </div>
                <div class="form-group col-md-6" style="margin-bottom: 4px;">
                    <label class="control-label">Exchange To</label>
                    <input type="text" name="desire_date" class="form-control datepicker" required="true" placeholder="Your needed date">
                </div>
                <div class="form-group col-md-12">
                    <label class="control-label">Message</label>
                    <textarea name="message" class="form-control" required="true"></textarea>
                </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>
{!! Form::close() !!}
<script type="text/javascript">
    $(document).ready(function () {
        $('#exchangeApply').validate({
            ignore: [],
            rules: {
                message:{
                    required: function()
                    {
                        CKEDITOR.instances.message.updateElement();
                    },
                    minlength:10,

                }
            },
            invalidHandler: function() {
                $("#errorList").empty();
            },
            submitHandler: function() {
                submitForm();
            }
        });
        $(".addMoreDiv").empty();
        $(".modal-title").text("Holiday Exchange");
        $(".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'
        }
    });

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

</script>
