<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="<?= base_url('images/ZMQ_logo.jpg') ?>"
              <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
              <link rel="stylesheet" href="<?= base_url('resources/fonts/css/font-awesome.min.css'); ?>"/>
        <link rel="stylesheet" href="<?= base_url('vendor/css/bootstrapValidator.css'); ?>"/>
        <link rel="stylesheet" href="<?= base_url("resources/bootstrap/css/bootstrap.min.css"); ?>" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
        <link rel="stylesheet" href="<?= base_url("resources/custom/css/customcss.css"); ?>" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src=<?= base_url("resources/file/bootstrap-filestyle.js"); ?>></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript" src="<?= base_url("resources/bootstrap/js/bootstrap.min.js"); ?>"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

        <script type="text/javascript" src="<?= base_url("vendor/js/bootstrapValidator.js"); ?>"></script>

    </head>
    <style>
        #success_message{ display: none;}
    </style>

    <body>
        <div class="container">
            <div class="row">
                <!-- form: -->
                <section>
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="page-header">
                            <h2>Date validator</h2>
                        </div>

                        <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                            <div class="form-group">
                                <label class="col-lg-3 control-label">MM/DD/YYYY</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="monthDayYear" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">YYYY-DD-MM</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="yearDayMonth" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">YYYY.MM.DD</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="yearMonthDay" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">MM/DD/YYYY h:m A</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="monthDayYearTime" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">YYYY-DD-MM h:m A</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="yearDayMonthTime" />
                                </div>
                            </div>

                            <!-- datetime picker -->
                            <div class="form-group">
                                <label class="col-lg-3 control-label"><a href="http://eonasdan.github.io/bootstrap-datetimepicker/">DateTime Picker</a> (MM/DD/YYYY h:m A)</label>
                                <div class="col-lg-5">
                                    <div class="input-group date" id="datetimePicker">
                                        <input type="text" class="form-control" name="datetimePicker" />
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-9 col-lg-offset-3">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
                <!-- :form -->
            </div>
        </div>
        <!--            <form class="well form-horizontal" action=" " method="post"  id="contact_form">
                        <fieldset>
        
                             Form Name 
                            <legend>Contact Us Today!</legend>
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">First Name</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                        <input  name="first_name" placeholder="First Name" class="form-control"  type="text">
                                    </div>
                                </div>
                            </div>
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label" >Last Name</label> 
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                        <input name="last_name" placeholder="Last Name" class="form-control"  type="text">
                                    </div>
                                </div>
                            </div>
        
                             Text input
                            <div class="form-group">
                                <label class="col-md-4 control-label">E-Mail</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                        <input name="email" placeholder="E-Mail Address" class="form-control"  type="text">
                                    </div>
                                </div>
                            </div>
        
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">Phone #</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                        <input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">Address</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                        <input name="address" placeholder="Address" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">City</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                        <input name="city" placeholder="city" class="form-control"  type="text">
                                    </div>
                                </div>
                            </div>
        
                             Select Basic 
        
                            <div class="form-group"> 
                                <label class="col-md-4 control-label">State</label>
                                <div class="col-md-4 selectContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                                        <select name="state" class="form-control selectpicker" >
                                            <option value=" " >Please select your state</option>
                                            <option>Alabama</option>
                                            <option>Alaska</option>
                                            <option >Arizona</option>
                                            <option >Arkansas</option>
                                            <option >California</option>
                                            <option >Colorado</option>
                                            <option >Connecticut</option>
                                            <option >Delaware</option>
                                            <option >District of Columbia</option>
                                            <option> Florida</option>
                                            <option >Georgia</option>
                                            <option >Hawaii</option>
                                            <option >daho</option>
                                            <option >Illinois</option>
                                            <option >Indiana</option>
                                            <option >Iowa</option>
                                            <option> Kansas</option>
                                            <option >Kentucky</option>
                                            <option >Louisiana</option>
                                            <option>Maine</option>
                                            <option >Maryland</option>
                                            <option> Mass</option>
                                            <option >Michigan</option>
                                            <option >Minnesota</option>
                                            <option>Mississippi</option>
                                            <option>Missouri</option>
                                            <option>Montana</option>
                                            <option>Nebraska</option>
                                            <option>Nevada</option>
                                            <option>New Hampshire</option>
                                            <option>New Jersey</option>
                                            <option>New Mexico</option>
                                            <option>New York</option>
                                            <option>North Carolina</option>
                                            <option>North Dakota</option>
                                            <option>Ohio</option>
                                            <option>Oklahoma</option>
                                            <option>Oregon</option>
                                            <option>Pennsylvania</option>
                                            <option>Rhode Island</option>
                                            <option>South Carolina</option>
                                            <option>South Dakota</option>
                                            <option>Tennessee</option>
                                            <option>Texas</option>
                                            <option> Uttah</option>
                                            <option>Vermont</option>
                                            <option>Virginia</option>
                                            <option >Washington</option>
                                            <option >West Virginia</option>
                                            <option>Wisconsin</option>
                                            <option >Wyoming</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
        
                             Text input
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">Zip Code</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                        <input name="zip" placeholder="Zip Code" class="form-control"  type="text">
                                    </div>
                                </div>
                            </div>
        
                             Text input
                            <div class="form-group">
                                <label class="col-md-4 control-label">Website or domain name</label>  
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                                        <input name="website" placeholder="Website or domain name" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
        
                             radio checks 
                            <div class="form-group">
                                <label class="col-md-4 control-label">Do you have hosting?</label>
                                <div class="col-md-4">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="hosting" value="yes" /> Yes
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="hosting" value="no" /> No
                                        </label>
                                    </div>
                                </div>
                            </div>
        
                             Text area 
        
                            <div class="form-group">
                                <label class="col-md-4 control-label">Project Description</label>
                                <div class="col-md-4 inputGroupContainer">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                        <textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
                                    </div>
                                </div>
                            </div>
        
                             Success message 
                            <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
        
                             Button 
                            <div class="form-group">
                                <label class="col-md-4 control-label"></label>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
                                </div>
                            </div>
        
                        </fieldset>
                    </form>-->

    </div><!-- /.container -->
    <script type="text/javascript">
        $(document).ready(function () {
            $('#datetimePicker').datetimepicker();

            $('#defaultForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    monthDayYear: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'MM/DD/YYYY'
                            }
                        }
                    },
                    yearDayMonth: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'YYYY-DD-MM'
                            }
                        }
                    },
                    yearMonthDay: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'YYYY.MM.DD',
                                separator: '.'
                            }
                        }
                    },
                    monthDayYearTime: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'MM/DD/YYYY h:m A'
                            }
                        }
                    },
                    yearDayMonthTime: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'YYYY-DD-MM h:m A'
                            }
                        }
                    },
                    datetimePicker: {
                        validators: {
                            notEmpty: {
                                message: 'The date is required and cannot be empty'
                            },
                            date: {
                                format: 'MM/DD/YYYY h:m A'
                            }
                        }
                    }
                }
            });

            $('#datetimePicker')
                    .on('dp.change dp.show', function (e) {
                        // Validate the date when user change it
                        $('#defaultForm').data('bootstrapValidator').revalidateField('datetimePicker');
                        // You also can call it as following:
                        // $('#defaultForm').bootstrapValidator('revalidateField', 'datetimePicker');
                    });
//                $('#contact_form').bootstrapValidator({
//                    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
//                    feedbackIcons: {
//                        valid: 'glyphicon glyphicon-ok',
//                        invalid: 'glyphicon glyphicon-remove',
//                        validating: 'glyphicon glyphicon-refresh'
//                    },
//                    fields: {
//                        first_name: {
//                            validators: {
//                                stringLength: {
//                                    min: 2,
//                                },
//                                notEmpty: {
//                                    message: 'Please supply your first name'
//                                }
//                            }
//                        },
//                        last_name: {
//                            validators: {
//                                stringLength: {
//                                    min: 2,
//                                },
//                                notEmpty: {
//                                    message: 'Please supply your last name'
//                                }
//                            }
//                        },
//                        email: {
//                            validators: {
//                                notEmpty: {
//                                    message: 'Please supply your email address'
//                                },
//                                emailAddress: {
//                                    message: 'Please supply a valid email address'
//                                }
//                            }
//                        },
//                        phone: {
//                            validators: {
//                                notEmpty: {
//                                    message: 'Please supply your phone number'
//                                },
//                                phone: {
//                                    country: 'US',
//                                    message: 'Please supply a vaild phone number with area code'
//                                }
//                            }
//                        },
//                        address: {
//                            validators: {
//                                stringLength: {
//                                    min: 8,
//                                },
//                                notEmpty: {
//                                    message: 'Please supply your street address'
//                                }
//                            }
//                        },
//                        city: {
//                            validators: {
//                                stringLength: {
//                                    min: 4,
//                                },
//                                notEmpty: {
//                                    message: 'Please supply your city'
//                                }
//                            }
//                        },
//                        state: {
//                            validators: {
//                                notEmpty: {
//                                    message: 'Please select your state'
//                                }
//                            }
//                        },
//                        zip: {
//                            validators: {
//                                notEmpty: {
//                                    message: 'Please supply your zip code'
//                                },
//                                zipCode: {
//                                    country: 'US',
//                                    message: 'Please supply a vaild zip code'
//                                }
//                            }
//                        },
//                        comment: {
//                            validators: {
//                                stringLength: {
//                                    min: 10,
//                                    max: 200,
//                                    message: 'Please enter at least 10 characters and no more than 200'
//                                },
//                                notEmpty: {
//                                    message: 'Please supply a description of your project'
//                                }
//                            }
//                        }
//                    }
//                })
//                        .on('success.form.bv', function (e) {
//                            $('#success_message').slideDown({opacity: "show"}, "slow") // Do something ...
//                            $('#contact_form').data('bootstrapValidator').resetForm();
//
//                            // Prevent form submission
//                            e.preventDefault();
//
//                            // Get the form instance
//                            var $form = $(e.target);
//
//                            // Get the BootstrapValidator instance
//                            var bv = $form.data('bootstrapValidator');
//
//                            // Use Ajax to submit form data
//                            $.post($form.attr('action'), $form.serialize(), function (result) {
//                                console.log(result);
//                            }, 'json');
//                        });
        });

    </script>
</body>
</html>