<?php
include("../../packages/require.php");
include("controller/controller_client.php");
$curpage = "client";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title><?=$title['client'];?></title>
    <?php include($global['root']."packages/head.php");?>
</head>
<body class="<?=$global['body-css'];?>">
    <div class="wrapper">

        <?php include($global['root']."section/header.php");?>
      
        <?php include($global['root']."section/sidebar.php");?>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                  <h1>
                    Module Client
                    <small>Adding and editing your client list</small>
                  </h1>
                  <ol class="breadcrumb">
                        <li><a href="<?=$path['dashboard'];?>"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li><a href="<?=$path['client'];?>"> Client</a></li>
                  </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <!-- Default box -->
                <div class="box">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-sm-6">
                                <h3 class="box-title">Create New Client</h3>
                            </div>
                            <div class="col-sm-6"></div>
                        </div>
                    </div>
                    <form name="form-edit" action="<?=$path['client'];?>insert.php?action=insert" enctype="multipart/form-data" method="post" onsubmit="return validateForm();">
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group" style="width: 500px;">
                                        <label for="input-name">Name *</label>
                                        <input type="text" class="form-control" name="name" id="input-name" placeholder="Client Name" value="">
                                        <div id="error-name" class="error-text"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group" style="width: 500px;">
                                        <label for="input-email">Email *</label>
                                        <input type="text" class="form-control" name="email" id="input-email" placeholder="Email Address" value="">
                                        <div id="error-email" class="error-text"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group" style="width: 500px;">
                                        <label for="input-phone">Phone *</label>
                                        <input type="text" class="form-control" name="phone" id="input-phone" placeholder="Phone Number" value="">
                                        <div id="error-phone" class="error-text"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group" style="width: 500px;">
                                        <label for="input-address">Address *</label>
                                        <textarea class="form-control" id="input-address" name="address" rows="5" placeholder="Input Address..."></textarea>
                                        <div id="error-address" class="error-text"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6 hide">
                                    <div class="form-group" style="width: 500px;">
                                        <label for="input-region">Region *</label>
                                        <select class="form-control" id="input-region" name="region">
                                            <option value="0">All Region</option>
                                            <?php foreach($data_region as $region){ ?>
                                            <option value="<?=$region['region_id'];?>"><?=ucfirst($region['region_title']);?></option>
                                            <?php } ?>
                                        </select>
                                        <div id="error-region" class="error-text"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <div class="row">
                                <div class="col-sm-6 col-xs-6">
                                    <div class="text-left">
                                        <a href="<?=$path['client'];?>" class="btn btn-default">
                                            <i class="fa fa-arrow-left"></i> Back
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <div class="text-right">
                                        <div class="btn-group">
                                            <button type="submit" class="btn btn-success">
                                                <i class="fa fa-save"></i> Save Data
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-footer-->
                    </form>
                </div>
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <?php include($global['root']."section/footer.php");?>

    </div>
    <!-- ./wrapper -->

    <!-- Modal Photo-->
    <div class="modal fade" id="modal-password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Change Password</h4>
                </div>
                <form name="form-edit" action="<?=$path['client'];?>edit.php?action=password" enctype="multipart/form-data" method="post" onsubmit="return validatePassword();">
                <div class="modal-body">
                    <!-- <div class="form-group" style="width: 500px;">
                        <label for="input-opassword">Old Password *</label>
                        <input type="password" class="form-control" name="opassword" id="input-opassword" placeholder="Old Password">
                        <div id="error-opassword" class="error-text"></div>
                    </div> -->
                    <div class="form-group" style="width: 500px;">
                        <label for="input-password">New Password *</label>
                        <input type="password" class="form-control" name="password" id="input-password" placeholder="Password">
                        <div id="error-password" class="error-text"></div>
                    </div>
                    <div class="form-group" style="width: 500px;">
                        <label for="input-repassword">Re-Type New Password *</label>
                        <input type="password" class="form-control" name="repassword" id="input-repassword" placeholder="Re Type Password">
                        <div id="error-repassword" class="error-text"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">
                                <i class="fa fa-times"></i> Close
                            </button>
                        </div>
                        <div class="col-sm-6 text-right">
                            <div class="btn-group">
                                <input type="hidden" name="rclient_id" value="<?=$data[0]['client_id'];?>">
                                <button type="submit" class="btn btn-success btn-flat">
                                    <i class="fa fa-save"></i> Change Password
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>

    <?php include($global['root']."packages/footer.php");?>
    <script type="text/javascript">
        $(document).ready(function() {
            <?php if($message != "") { ?>
            //use session here for alert success/failed
            var alertText = "<?=$message;?>";
                <?php if($alert != "success"){ ?>
                errorAlert(alertText);// error alert
                <?php } else { ?>
                successAlert(alertText);// success alert
                <?php } ?>
            <?php } ?>
        });
        function validateForm(){
            var name = $("#input-name").val();
            var email = $("#input-email").val();
            var phone = $("#input-phone").val();
            // var region = $("#input-region").val();
            var address = $("#input-address").val();

            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var numFormat = /^\+?[\d+ ]*$/;
            var urlFormat = /^HTTP|HTTP|http(s)?:\/\/(www\.)?[A-Za-z0-9]+([\-\.]{1}[A-Za-z0-9]+)*\.[A-Za-z]{2,40}(:[0-9]{1,40})?(\/.*)?$/;

            if(name != ""){
                $("#error-name").html("");
                $("#error-name").hide();
                $("#input-name").removeClass("input-error");
            } else {
                $("#error-name").show();
                $("#error-name").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-name").addClass("input-error");
                $("#input-name").focus();
                return false;
            }
            if(email != ""){
                if(email.match(mailformat)){
                    $("#error-email").html("");
                    $("#error-email").hide();
                    $("#input-email").removeClass("input-error");
                } else {
                    $("#error-email").show();
                    $("#error-email").html("<i class='fa fa-warning'></i> Incorrect email format.");
                    $("#input-email").addClass("input-error");
                    $("#input-email").focus();
                    return false;
                }
            } else {
                $("#error-email").show();
                $("#error-email").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-email").addClass("input-error");
                $("#input-email").focus();
                return false;
            }
            if(phone != ""){
                if(phone.match(numFormat)){
                    $("#error-phone").html("");
                    $("#error-phone").hide();
                    $("#input-phone").removeClass("input-error");
                } else {
                    $("#error-phone").show();
                    $("#error-phone").html("<i class='fa fa-warning'></i> Please input number only.");
                    $("#input-phone").addClass("input-error");
                    $("#input-phone").focus();
                    return false;
                }
            } else {
                $("#error-phone").show();
                $("#error-phone").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-phone").addClass("input-error");
                $("#input-phone").focus();
                return false;
            }
            // if(region != ""){
            //     $("#error-region").html("");
            //     $("#error-region").hide();
            //     $("#input-region").removeClass("input-error");
            // } else {
            //     $("#error-region").show();
            //     $("#error-region").html("<i class='fa fa-warning'></i> This field is required.");
            //     $("#input-region").addClass("input-error");
            //     $("#input-region").focus();
            //     return false;
            // }
            if(address != ""){
                $("#error-address").html("");
                $("#error-address").hide();
                $("#input-address").removeClass("input-error");
            } else {
                $("#error-address").show();
                $("#error-address").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-address").addClass("input-error");
                $("#input-address").focus();
                return false;
            }
        }
        function validatePassword(){
            //var opassword = $("#input-opassword").val();
            var password = $("#input-password").val();
            var repassword = $("#input-repassword").val();

            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var numFormat = /^\+?[\d+ ]*$/;
            var urlFormat = /^HTTP|HTTP|http(s)?:\/\/(www\.)?[A-Za-z0-9]+([\-\.]{1}[A-Za-z0-9]+)*\.[A-Za-z]{2,40}(:[0-9]{1,40})?(\/.*)?$/;

            // if(opassword != ""){
            //     $("#error-opassword").html("");
            //     $("#error-opassword").hide();
            //     $("#input-opassword").removeClass("input-error");
            // } else {
            //     $("#error-opassword").show();
            //     $("#error-opassword").html("<i class='fa fa-warning'></i> This field is required.");
            //     $("#input-opassword").addClass("input-error");
            //     $("#input-opassword").focus();
            //     return false;
            // }
            if(password != ""){
                $("#error-password").html("");
                $("#error-password").hide();
                $("#input-password").removeClass("input-error");
            } else {
                $("#error-password").show();
                $("#error-password").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-password").addClass("input-error");
                $("#input-password").focus();
                return false;
            }
            if(repassword != ""){
                $("#error-repassword").html("");
                $("#error-repassword").hide();
                $("#input-repassword").removeClass("input-error");
            } else {
                $("#error-repassword").show();
                $("#error-repassword").html("<i class='fa fa-warning'></i> This field is required.");
                $("#input-repassword").addClass("input-error");
                $("#input-repassword").focus();
                return false;
            }
            if(password == repassword){
                $("#error-repassword").html("");
                $("#error-repassword").hide();
                $("#input-repassword").removeClass("input-error");
            } else {
                $("#error-repassword").show();
                $("#error-repassword").html("<i class='fa fa-warning'></i> Your re type password not match.");
                $("#input-repassword").addClass("input-error");
                $("#input-repassword").focus();
                return false;
            }
        }
        //function confirmation deactivate
        function confirmDeactive(num, text){
            swal({
                title: "Are you sure?",
                text: "You will deactivate account "+text+" !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Deactivate ! ",
                cancelButtonText: "Cancel !",
                closeOnConfirm: false,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
                    window.location.href = "<?=$path['client'];?>edit.php?action=deactive&id="+num+"&title="+text;
                } else {
                    //nothing
                }
            });
        }
        //function confirmation activate
        function confirmActive(num, text){
            swal({
                title: "Are you sure?",
                text: "You will activate account "+text+" !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#00a65a",
                confirmButtonText: "Activate ! ",
                cancelButtonText: "Cancel !",
                closeOnConfirm: false,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
                    window.location.href = "<?=$path['client'];?>edit.php?action=active&id="+num+"&title="+text;
                } else {
                    //nothing
                }
            });
        }
    </script>

</body>
</html>