@{
    ViewBag.Title = "Passport";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script type="text/javascript" src="../Projectscript/PassportMaster.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>
<style>
    
    input[type="file"] {
        display: block;
    }

    .imageThumb {
        max-height: 75px;
        width: 137px;
        max-height: 100px;
        border: 2px solid;
        padding: 1px;
        cursor: pointer;
    }

    .pip {
        display: inline-block;
        margin: 10px 10px 0 0;
    }

    .remove {
        display: block;
        background: #444;
        border: 1px solid black;
        color: white;
        text-align: center;
        cursor: pointer;
    }

        .remove:hover {
            background: white;
            color: black;
        }

    .slides {
        position: relative;
        height: 300px;
        width: 500px;
    }

        .slides img {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -2;
        }

            .slides img.top {
                z-index: -1;
            }

        .slides .front {
            position: absolute;
            right: 10px;
            top: 120px;
            padding: 5px;
            border-radius: 60px;
            width: 38px;
            height: 38px;
            text-align: center;
            color: silver;
            background: white;
            opacity: 0.4;
            cursor: pointer;
            font-size: 30px;
            font-weight: bold;
        }

        .slides .back {
            position: absolute;
            left: 10px;
            top: 120px;
            padding: 5px;
            border-radius: 60px;
            width: 38px;
            height: 38px;
            text-align: center;
            color: silver;
            background: white;
            opacity: 0.4;
            cursor: pointer;
            font-size: 30px;
            font-weight: bold;
        }
</style>
<style>
   
   
    #CELL3 {
        width: 40%;
    }
     #td1 {
         margin-left:10%;
        width: 90%;
        border-right:1px solid #c5cdd3;
    }
      #td2 {
        width: 15%;
    }
  
</style>


<div class="myData" data-x="M24" />


<script>
    $(document).ready(function () {
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function (e) {
            var files = e.target.files,
              filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function (e) {
                    var file = e.target;
                    //$('.container img').prop('src', target.result);
                    $("<span class=\"pip\">" +
                      "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                      "<br/><span class=\"remove\">Remove image</span>" +
                      "</span>").insertAfter("#DDh");
                    $(".remove").click(function () {
                        $(this).parent(".pip").remove();
                    });

                    
                });
                fileReader.readAsDataURL(f);
                //fileReader.readAsDataURL(this.files[0]);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
    });
</script>

<div id="Entry" style="margin-top:.5%;">
   
    <div class="row">
        <div class="col-md-8" style="margin-left:17%;margin-top:7%;" >
            <div class="card">
                <div class="card-header NewHeaderColor" style="border-bottom:1px solid #e6e6e6">
                    <h4 class="card-title mb-0" style="font-weight:bold;text-align:center;">Documents</h4>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div style="height:15px;"></div>
                                <form action="#">
                                    <div class="form-body"style="margin-left:5%;" >

                                        <table>
                                      
                                                <tr>
                                                    <td id="td1">
                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <input type="hidden" id="EmpCodeId" class="form-control" value="0" />
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control" for="userinput1">Code<span class="danger">*</span></label>
                                                                    <div class="col-md-7">
                                                                        <input type="text" id="empcode" class="form-control" onkeyup="ClearEmpDetails()">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control " for="userinput2"> Name<span class="danger">*</span></label>
                                                                    <div class="col-md-7">
                                                                        <input type="text" id="empname"  class="form-control" style="">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control " for="userinput1">Doc Type<span class="danger">*</span></label>
                                                                    <div class="col-md-7 ">
                                                                        <select id="type" class="form-control"></select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control " for="userinput1">Doc#<span class="danger">*</span></label>
                                                                    <div class="col-md-7 t">
                                                                        <input type="text" id="passportnum" class="form-control">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control" for="userinput2"> Country<span class="danger">*</span></label>
                                                                    <div class="col-md-7 ">
                                                                        <select id="country" class="form-control"></select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label  style="font-weight:bold;"class="col-md-5 label-control" for="userinput2"> Issued On<span class="danger">*</span></label>
                                                                    <div class="col-md-7">
                                                                        <input type="text" class="form-control" id="isson">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control " for="userinput1">Exp Date<span class="danger">*</span></label>
                                                                    <div class="col-md-7 ">
                                                                        <input type="text" class="form-control" id="expon">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="form-group row">
                                                                    <label style="font-weight:bold;" class="col-md-5 label-control" for="userinput2">Remarks</label>
                                                                    <div class="col-md-7">
                                                                        <textarea id="remark" rows="5" class="form-control"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>                                                       
                                                        </div>
                                                    </td>
                                                    <td id="td2" style="margin-left:-3%;">
                                                        <div class="row" >
                                                            <div class="col-12 col-md-4 col-lg-10">
                                                                <div class="card">
                                                                    <div class="card-header text-center" style="margin-left:50px">
                                                                        <img id="myImg" src="..../app-assets/img/elements/03.png" alt="Gini" width="150" class="fa-share-alt-square " onerror="this.onerror = null; this.src = '../app-assets/img/elements/03.png';">
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="card-block text-center">
                                                                            <h4 id="pnameshow" class="card-title">Document</h4>                                                                           
                                                                            <input type='file' id="selectedImage" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2" />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>                                                                                   
                                        </table>
                                        <div class="form-actions center">
                                            <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1"><u>S</u>ave <i class="fa fa-check-square-o"></i></button>
                                            <button type="button" style="width:100px" id="btnlist" onclick="GetRows(0)" class="btn btn-primary btn-min-width mr-1 mb-1">List <i class="ft-align-justify"></i></button>
                                            <button type="button" style="width:100px" id="btnnew" onclick="formrefresh()" class="btn btn-primary btn-min-width mr-1 mb-1">Clear <i class="ft-refresh-cw position-right"></i></button>
                                            <button style="display:none" type="button" id="btndelete" class="btn btn-primary btn-min-width mr-1 mb-1">Delete <i class="fa fa-times"></i></button>

                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<div style="margin-left:20%;display:none;width:60%;" id="listing">
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <table width="100%">
                            <tr>
                                <td><h4 class="card-title" style="font-weight:bold;">Documents List</h4></td>
                                <td align="right">
                                    <div class="heading-elements">
                                        <div>
                                            <button type="button" onclick="closelist()" class="btn btn-outline-primary" id="ed"><i class="ft-edit"></i> Add New</button>
                                            <span id="itemListButtonPlace">
                                            </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>


                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard" style="overflow:auto">
                            <table id="tblPassport" class="table table-striped table-bordered base-style dataTable"></table>
                            <br />

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div id="popupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog" role="document" style="top:10%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="myheader"> Group Master</h3>
                <button type="button" class="close" onclick=$('#popupdiv').hide() data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            
            <form id="Multiimage" style="display:none">
                <div id="divmultimage" class="modal-body" style="height:400px;overflow:auto">
                    <div class="field" id="DDh" align="left">
    @*<div class='container'><img src='' /></div>*@

                    </div>
                </div>
                <div class="modal-footer">
                    <table width="100%">
                        <tr>
                            <td align="left"><input type="file" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2" id="files" name="files[]" multiple></td>
                            <td align="right">
                                <input type="hidden" id="Imagecount" value="2" />

                                <input type="button" class="btn btn-outline-primary" value="Upload" id="" onclick="SavetMultiimages1()" data-dismiss="modal">
                            </td>
                        </tr>
                    </table>




                </div>
            </form>




        </div>
    </div>
</div>


<script>
    $("#empcode").autocomplete({
        source: function (request, response) {
            var data = {};
            data.EmpCode = $("#empcode").val();
            data.Name = $("#empcode").val();
            $.ajax({
                url: '../Master/EmployeeSearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '2',
                            label: item.EmpCode,
                            label1: item.Name,
                            label2: item.EmpId,
                            EmpCode: item.EmpCode,
                            Name: item.Name,
                            EmpId: item.EmpId,
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#empcode').val(ui.item.EmpCode);
            $('#empname').val(ui.item.Name);
            $('#EmpCodeId').val(ui.item.EmpId);
            $('#empname').prop("disabled", true);
        },

    });


 $(function () {
     $('#isson').daterangepicker({
         minDate: 1950,
         maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
         singleDatePicker: true,
         showDropdowns: true,
         locale: {
             format: 'DD/MM/YYYY'
         }
     });

     $('#expon').daterangepicker({
         minDate: minDate,
         maxDate: new Date(2200, new Date().getMonth() + 1, new Date().getDate()),
         singleDatePicker: true,
         showDropdowns: true,
         locale: {
             format: 'DD/MM/YYYY'
         }
     });

    


 });
 function AddmoreImages() {
     var Imgcount = parseInt($('#Imagecount').val())
     var file = '<div id=' + "Imgdiv" + Imgcount + '><input type="file" id=' + 'SelmultiImage' + Imgcount + ' accept="image/*" onchange="readMultipleimageURL(this,' + Imgcount + ')"" class="btn btn-lg gradient-back-to-earth font-small-1 white p-2 mr-2"><img id=' + "Mimg" + Imgcount + ' src="../app-assets/img/elements/04.png" alt="Gini" width="50" style="margin-top:-18px" class="img-thumbnail multiimagebox" onerror="this.onerror=null; this.src=../app-assets/img/elements/04.png;">&#160;&#160;<button type="button" class="btn btn-danger" onclick="RemoveImages(' + Imgcount + ')"> <i class="ft-x"></i>Remove</button></div>'
     $('#divmultimage').append(file).show('slow');
     $('#Imagecount').val(Imgcount + 1)
 }


 function RemoveImages(ImgId) {
     $('#Imgdiv' + ImgId).slideUp(function () { $('#Imgdiv' + ImgId).remove(); });
     //$('#Imgdiv' + ImgId).remove();

 }


 function Addpopupwindow(Id) {
     $('#groupdiv,#subgroupdiv,#categorydiv,#subcatdiv,#unitdiv,#Multiimage,#openingentry').hide();
     $('#popupdiv').show();

     console.log(Id)

     if (Id == 0) {
         $('#myheader').text('Unit Master');
         $('#unitdiv').show();
         $('#unitname').focus();

     }
     else if (Id == 1) {
         $('#myheader').text('Group Master');
         $('#groupdiv').show();
         $('#groupcode').focus();
     }
     else if (Id == 2) {
         $('#myheader').text('Sub Group Master');
         $('#subgroupdiv').show();
         $('#grp').focus();
     }
     else if (Id == 3) {
         $('#myheader').text('Category Master');
         $('#categorydiv').show();
         $('#catcode').focus();
     }
     else if (Id == 4) {
         $('#myheader').text('Sub Category Master');
         $('#subcatdiv').show();
         $('#cat').focus();
     }
     else if (Id == 5) {
         $('#myheader').text('Opening Qty Entry');
         $('#openingentry').show();
         LocationGets()
     }

     else if (Id == 6) {
         $('#myheader').text('Add More Images');
         $('#Multiimage').show();

     }
     else {
         console.log('Invalid')

     }
 }

 function SavetMultiimages1() {

     var totalFiles = document.getElementById("files").files.length;

     if (totalFiles <= 15) {

         var data = {};
         data.EmpId = $('#EmpCodeId').val();
         $.ajax({
             type: "POST",
             url: "../Master/RemoveExistingDocumentImageFolder",
             data: data,
             success: function (result) {


                 var EmpId = $('#EmpCodeId').val();

                 for (var i = 0; i <= totalFiles; i++) {
                     var formData = new FormData();
                     var imageName = EmpId + '-' + i;
                     var browsedFile = document.getElementById("files").files[i];
                     var ImageId = EmpId;

                     
                     if (browsedFile.type.match('image.*')) {
                         formData.append("FileUpload", browsedFile);
                         formData.append("ImageName", imageName);
                         formData.append("UniqueId", ImageId);

                         $.ajax({
                             type: "POST",
                             url: '/Master/PassportUploadMultipleImage',
                             data: formData,
                             dataType: "html",
                             contentType: false,
                             processData: false,
                             success: function (result) {
                                 formrefresh();
                                 swal('Images Uploaded Successfully', "", "success");
                                 $('.swal-button swal-button--confirm').focus();

                             }
                         });
                     }
                     else {
                         formData.append("FileUpload", browsedFile);
                         formData.append("ImageName", imageName);
                         formData.append("UniqueId", ImageId);

                         $.ajax({
                             type: "POST",
                             url: '/Master/UploadMultipleDocumentPDF',
                             data: formData,
                             dataType: "html",
                             contentType: false,
                             processData: false,
                             success: function (result) {
                                 formrefresh();
                                 swal('Images Uploaded Successfully', "", "success");
                                 $('.swal-button swal-button--confirm').focus();

                             }
                         });
                     }

                     $('#popupdiv').hide();
                     $('#Multiimage').hide();
                 }
             }
         });
     }


     else {
         warningshow("Limit Exceeded(Maximum 15 Images)");
     }
 }

</script>














<div style="display:none"><input type="text" value="0" id="PassportId" /></div>