

<style>
    .dropdown-menu>li>a {
        cursor:pointer;
    }

    .inputIcon{
        width:30px;}

</style>

<div class="modal fade stick-up " data-backdrop="static" id="add_Depot_Stand" tabindex="-1" role="dialog" aria-hidden="true" style="width:50%;margin:0 auto">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold">New Stand</span></h5>
                <div id="add_Depot_StandAlert"></div>
            </div>
            <div class="modal-body">
                <form id="AddDepotStandPostForm" method="POST" onsubmit="return false">
                    <div class="row">

                        <div class="col-md-8">
                            <div class="col-md-12" style="margin:15px;">
                                <div class="col-md-6">
                                    <div><label>Depot</label></div>
                                    <div class="input-group m-b"><span class="input-group-btn">
                                            <button type="button" class="btn btn-bg-complete-darker"><i class="fa fa-certificate"></i> </button> </span> 
                                        <select required id="Depot" name="Depot" class="full-width " data-init-plugin="select2">
<?php foreach ($all_depots as $depot): ?>
                                                <option value="<?php echo $depot['Depot_ID']; ?>"><?php echo $depot['Depot_Name']; ?></option>
<?php endforeach; ?>   
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div><label>Stand Name</label></div>
                                    <div class="input-group required">
                                        <span class="input-group-addon bg-complete-darker">
                                            <i class="fa fa-ship inputIcon" ></i>
                                        </span>
                                        <input type="text" placeholder="Stand Name" id="Stand" name="Stand" class="form-control " required>
                                    </div>
                                </div>
                            </div>




                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="CloseStand"   > Cancel </button>
                <button class="btn btn-bg-complete-darker" id="SubmitStand"  > Save   </button>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // $("#AddProductPostForm").validate();
        $("#SubmitStand").on("click", function () {
            $("#add_Depot_StandAlert").attr("class", "").html("")
            $("#AddDepotStandPostForm").validate()
            if (!$("#AddDepotStandPostForm").find("input").blur().end().valid()) {
                $("#add_Depot_StandAlert").attr("class", "alert alert-danger").show().html("Please fill all required fields.")
                return
            }
            //$("#add_Depot_StandAlert").remove();
            var IsValidated = true;
            //AlertBox.insertAfter($("#add_Depot_Stand").find(".modal-dialog .modal-header").find("h5"))
            //            if(!ValidateForNewProductPhoto($("#NewProductUploadPhoto")[0]) == true || !$("#AddProductPostForm").valid()){
            //                return
            //            }
            $("#StandIsBusy").remove();
            $("#add_Depot_Stand").append('<div id="StandIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
            $("#StandIsBusy").animate({opacity: 1});
            //            var stand=$("#Stand").val();
            //                  $("#s2id_Stand_ID a span").eq(0).html(stand);
            //                  $("#add_Stand_Shelf").modal('show')
            //                  $("#s2id_Add_Stand_ID a span").eq(0).html(stand);


            var Data = new FormData(document.getElementById("AddDepotStandPostForm"));

            $.ajax({
                url: "Views/Stock/addDepotStand.php",
                method: "POST",
                data: Data,
                dataType: "json",
                processData: false,
                contentType: false,
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        var newStand = "<option value='" + v1.responseJSON[0]['Stand_ID'] + "'>" + v1.responseJSON[0]['Stand_Name'] + "</option>";
                        $("#Stand_ID").append($(newStand))
                        $("#Product_Stand_ID").append($(newStand))
                        $("#StandIsBusy").remove();
                        $("#add_Depot_StandAlert").addClass("alert alert-success").show().html("<span>Finished Successfully.</span>");
                        setTimeout(function () {
                            $("#add_Depot_Stand").modal('hide')
                        }, 1500)
                        setTimeout(function () {
                            $("#add_Depot_StandAlert").hide()
                        }, 1500)
                    } else {
                        $("#add_Depot_StandAlert").addClass("alert alert-danger").show().html("<span>Failed to submit, please try again</span>");
                    }
                    $("#StandIsBusy").remove();
                }


            })





        });
        $("#CloseStand").on("click", function () {
            $("#add_Depot_Stand input").val('');
            //$("#AddProductPostForm").validate().resetForm();
            $("#add_Depot_Stand").modal("hide");

        })
        $("#add_Depot_Stand input").val('');

    });


</script>