@{
    ViewBag.Title = "DocumentUploads";
}
<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script type="text/javascript" src="../Projectscript/DocumentUpload.js"></script>
@*<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />*@
<style>
    #CELL3 {
        width: 40%;
    }

    #td1 {
        margin-left: 10%;
        width: 90%;
        border-right: 1px solid #c5cdd3;
    }

    #td2 {
        width: 15%;
    }
</style>

<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;
        }

</style>


<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 class="myData" data-x="M263" />


<div id="Entry" style="margin-top:.5%;">

    <div class="row">
        <div class="col-md-7" style="margin-left:19%;margin-top:7%;">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                    <h4 class="card-title mb-0" style="font-weight:bold;text-align:center;">Document Upload</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">
                                        <table>
                                            <tr>
                                                <td id="td1" style="border-right:solid 1px">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label style="font-weight:bold">Reference#<span class="danger">*</span></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <input type="text" id="ReferenceNo" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label style="font-weight:bold">Remarks</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <input type="text" id="Remarks" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-3">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label style="font-weight:bold">Doc Type</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <select class="form-control" id="DocumentType"></select>
                                                                <input type="text" id="DocumentTypeid" class="form-control" style="display:none">
                                                                @*<select id="DocumentType" class="form-control">
                                                                    <option value="0">Select</option>
                                                                    <option value="1">Pdf</option>
                                                                    <option value="2">Excel</option>
                                                                    <option value="3">Image</option>

                                                                </select>*@
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td id="td2" style="margin-left:-50%;">
                                                    <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="files" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2" name="files[]" multiple accept="image/*,application/pdf,application/vnd.ms-excel" />
                                                                        <input type='file' id="files1" name="files[]" multiple accept="image/*,application/pdf,application/vnd.ms-excel" style="display:none" />

                                                                    </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="" 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 id="listing" style="margin-left:18%;display:none;width:60%;">
    <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;">DOCUMENT-LIST</h4></td>'
                                <td><h6 style="margin-top:5%;margin-left:19%;font-weight:bold">Search: </h6></td>
                                <td>

                                    <div style="width:90%;margin-left:-4%"><input type="text" id="txtbox" style="font-weight:bold" onkeyup="search()" class="form-control" /></div>
                                </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="tblcategory" class="table table-striped table-bordered dataTable"></table>
                            <br />

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

<div class="pdf"></div>
      <div id="dialog" style="display: none"></div>


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