<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Client/ClientMaster.master" CodeBehind="DocumentsUploads.aspx.vb" Inherits="Web.DocumentsUploads" %>
<%@ MasterType VirtualPath="ClientMaster.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">
            <!-- Our stuff - Used for image upload on docmanager -->
        <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link href="/_assets/Scripts/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
        <script src="/_assets/Scripts/dropzone/dropzone.js" type="text/javascript"></script>
<div class="container">
    <h1>Document Manager</h1>
    <!--left-->
    <div  class="form-group col-10"> 
        <div class="row">
            <div class="col-8">
                <label for="txtNotes">
•	Please select a Category to begin and then you can add files to the upload box by dragging and drop or clicking on the box to select a file. <br /><br />
•	If you would like the files that you are uploading to be reviewed and sorted by TCS staff, please select the Category "TCS Staff Review". <br /><br />
•	Only a maximum of 25 files may be uploaded at a time. When multiple files are uploaded at a time, different Categories and/or different Document Types cannot be selected for each file.<br /><br />
•	After selecting or dragging all the files you would like to upload, click the Save button to complete the upload.
<br /><br /></label>            
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <label for="ddlCategory">Category (must select a category before uploading documents)</label>
                <asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-control" AutoPostBack="true" ValidationGroup="AccountInfo" />
                <asp:RequiredFieldValidator runat="server" ValidationGroup="AccountInfo" ControlToValidate="ddlCategory"
                            Text="Required" Display="Dynamic" CssClass="text-danger" InitialValue="0" />
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <label for="ddlExtra">Item</label>
                <asp:DropDownList ID="ddlExtra" runat="server" CssClass="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <label for="ddlSubCategory">Document Type</label>
                <asp:DropDownList ID="ddlSubCategory" runat="server" CssClass="form-control" AutoPostBack="false" />
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <label for="txtNotes">Notes</label>
                <asp:TextBox ID="txtNotes" runat="server" CssClass="form-control" />                
            </div>
        </div>
        <asp:PlaceHolder ID="phMarkDocumentsAsReviewed" runat="server">
            <div class="row" style="height:10px">
            </div>
            <div class="row">
                <div class="col-8">
                    <asp:CheckBox ID="chkMarkDocumentAsReviewed" runat="server" CssClass="mr-1" />
                    <asp:Label runat="server" AssociatedControlID="chkMarkDocumentAsReviewed" Text="Mark Document(s) As Reviewed" CssClass="mr-1" />                              
                    <asp:CheckBox ID="chkActiveItemOnly" runat="server" Checked="true" CssClass="mr-1" />
                    <asp:Label runat="server" AssociatedControlID="chkActiveItemONly" Text="Active Drivers/Vehicles/Etc. Only" CssClass="mr-1" />                              
                </div>
            </div>
        </asp:PlaceHolder>
    </div>
    <!--Center-->
    <div class="form-group col-10" >
        <div id="dZUpload" class="dropzone" >
            <div class="dz-default dz-message">
                <img src="../../_assets/images/File-Upload-icon.png" height="30" />
                <h3>Drag and drop files to upload</h3>
                <p>or click to pick files</p>
            </div>
        </div>
    </div>
    <!--Right--> 
    <div class="form-group col-4">
        <div style="padding-top:10px">
            <asp:Label ID="lblError" runat="server" CssClass="doc-error"></asp:Label>
        </div>
    </div>

     <div class="row">
         <div class="col-8">
            <asp:Button ID="btnUncategorizedDocs" runat="server" CssClass="btn btn-secondary" Text="View Uncategorized Documents" CausesValidation="false" />
            <asp:Button ID="btnOtherDocs" runat="server" CssClass="btn btn-secondary" Text="View Other Documents" CausesValidation="false" />
         </div>
         <div id="divSave" class="col-2">
            <asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="Save" ValidationGroup="AccountInfo" Width="150px" />
         </div>
     </div>
    
</div>
    <asp:PlaceHolder ID="phDocUploader" runat="server" Visible="false">
     <script type="text/javascript">
         $(document).ready(function () {
            Dropzone.autoDiscover = false;
            //Simple Dropzonejs 
            $("#dZUpload").dropzone({
                parmName: "Files",

                
                acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.pdf,.txt,.doc,.docx,.xls,.xlsx,.zip,application/pdf",

                url: "hn_SimpleFileUploader.ashx",
                maxFiles: 25,
                addRemoveLinks: true,
                success: function (file, response) {
                    var imgName = response;
                    file.previewElement.classList.add("dz-success");
                    console.log("Successfully uploaded :" + imgName);
                },
                error: function (file, response) {
                    file.previewElement.classList.add("dz-error");
                },
                maxfilesexceeded: function (file,response) { 
                    this.removeFile(file);
                    alert("Max Files of 25 Exceeded!");
                },
                addedfiles: function (file, response) {
                    divSave.hidden = true;
                },
                reset: function (file,response) {
                    divSave.hidden = true;
                },
                queuecomplete: function (file, response) {
                    divSave.hidden = false;                    
                }
            });
            
        });
    </script>


    </asp:PlaceHolder>

    
</asp:Content>
