<apex:page standardcontroller="Export__c" extensions="ExportTrackerController"  showHeader="false" id="page" standardStylesheets="false" docType="html-5.0">
    
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, ainitial-scale=1"/>
            <apex:includeScript value="https://code.jquery.com/ui/1.10.3/jquery-ui.js" />
            <title>EXPORT TRACKER</title>
            <apex:stylesheet value="{!URLFOR($Resource.ExportTrackerCss, 'exportTracker-css/assets/css/export-sony.css')}"/>
            <apex:includescript value="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js" />
            <link href="https://fonts.googleapis.com/css?family=Armata" rel="stylesheet" />
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> 
            <style>
                body{background:none;background-color: #f8f8f8;}
                .form-container{font-family: 'Armata', sans-serif;
                background-color: #fff;
                border: 1px solid #eaeaea;margin:0 auto;
                width:1000px;max-width:100%;
                padding: 6px;    overflow: hidden;
                }
                .ui-menu .ui-menu-item a{font-family: 'Armata', sans-serif;color: #4a4a56;font-size: 12px;font-weight: bold;}
                .logo{text-align:center;padding:5px;}
                .form-container h2{background-color: #CDE8F0;color: #000;margin: 0;    font-size: 14px; padding: 5px;clear:both;text-align:center}
                .form-container label { color: #4a4a56;text-align: right;font-size:12px;font-weight: bold;font-family: 'Armata', sans-serif;}
                .form-group{clear:both;padding:5px;/*border-bottom: 1px solid #eaeaea;*/width: 410px; margin: 0 auto;}
                .lable-block{width:200px;float:left;text-align:right;padding-right:10px;}
                .control-block{width:200px;float:left;    position: relative;}
                .control-block1{width:204px;float:left;    position: relative;}
                //.control-block1{float:right;    position: relative;top: -19px;padding: -15px}
                .control-block12 {width: 222px;} 
                .lable-block1 {width: 200px;}
                .lable-block1 {text-align: left;float: left;}
                .control-block12 {margin-left: -20px;float: left;}
                
                
                .control-block input, .control-block select, .control-block textarea{font: 400 13.3333px Arial;padding-right: 23px !important;width:100%;border:1px solid #cccccc;padding:3px;
                box-sizing:border-box;resize: none;}
                .no-border{border:0px solid red;padding-bottom: 0;}   
                *{box-sizing: border-box;}             
                .col-65, .col-35{width:50%;padding:5px;float:left;box-sizing: border-box;}
                .col-35{width:50%;}
                .col-f5{width:60%;padding:5px;float:left;box-sizing: border-box;}
                .col-f6{width:40%;padding:5px;float:left;box-sizing: border-box;}
                .inner-block1{
                background-color: rgba(255,255,255,0.7);
                border: 1px solid #eaeaea;
                padding: 5px;min-height: 200px;
                /*background-color: #fff;*/}
                .inner-block{
                background-color: rgba(255,255,255,0.7);
                border: 1px solid #eaeaea;
                padding: 5px;min-height: 300px;
                /*background-color: #fff;*/}
                .inner-block .form-group{width:100%;}
                .inner-block .form-group .lable-block{width:110px;}
                .control-block button.ui-button.ui-widget.ui-button-icon-only.ui-corner-right.ui-button-icon{height: 20px;position: absolute;right: 0;top: 0;}           
                .second_block {clear: both;}         
                .control-block-small{width:100px;float: left;padding-bottom:5px;} 
                .control-block-small select{width:123%;padding: 2px;}         
                .clear-fix{clear:both;} 
                .checkbox-control{float:left;width:50%;margin-top: 5px;}
                
                
                .checkbox-control input{float:left;position: relative;top: 2px;width: 50px;height: 15px;left:-14px;}
                label span{color:red}
                
                
                
                .foot-button{clear:both;    text-align: center;    border-top: 1px solid #e9e9e9;    padding: 8px 5px 4px;} 
                .foot-button input{
                border: 0px solid red;
                margin: 0 auto;
                background-color:rgb(0,112,210);
                color: #fff;
                padding: 8px 20px;
                border-radius: 4px;
                font-weight: bold;cursor:pointer;
                }
                .date-from, .date-to{width:100%;font-size:12px;float: left;font-weight: bold;margin-bottom:5px;} 
                .date-from span, .date-to span{width: 30px;display: block;float: left;padding: 7px 0 0 0;}
                .date-from input, .date-to input{width: 165px;margin-left: 0px;} 
                select{padding:2px 0;}
                .ui-button-icon, .ui-state-hover{background-color: transparent;background-image: none;color: #000;border: 0px solid red;}
                .address{width:200px;float: left;margin-left: 27px;}
                .error{text-align: center;font-size: 12px;margin-bottom: 5px;font-weight: bold;background-color: #fff;}
                .error table{width:100%;}
                .tool-tip{color: #fff; position: relative;background-color: rgb(0,112,210);border-radius: 50%;width: 14px;
                font-size: 10px;float:left; text-align: center;margin: 8px 5px;cursor:pointer;}
                .tool-tip span{display:none;border: 1px solid #9ac0cb;position: absolute;bottom: 13px;font-weight: bold;background-color: #CDE8F0;color:#000;padding: 5px;
                z-index: 99;border-radius: 5px;width: 180px;}
                .tool-tip:hover span{display:block;}
                .container{
                position: relative;
                }
                .
                block{
                width: 100%;
                height: 100%;
                background-color: rgba(225,225,225,0.5);
                }
                .spinner {
                height: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 999;
                }
                
                .spinner > div {
                background-color: #c00000;
                height: 100%;
                width: 4px;
                display: inline-block;
                
                -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
                animation: sk-stretchdelay 1.2s infinite ease-in-out;
                }
                
                .spinner .rect2 {
                -webkit-animation-delay: -1.1s;
                animation-delay: -1.1s;
                }
                
                .spinner .rect3 {
                -webkit-animation-delay: -1.0s;
                animation-delay: -1.0s;
                }
                
                .spinner .rect4 {
                -webkit-animation-delay: -0.9s;
                animation-delay: -0.9s;
                }
                
                .spinner .rect5 {
                -webkit-animation-delay: -0.8s;
                animation-delay: -0.8s;
                }
                
                @-webkit-keyframes sk-stretchdelay {
                0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
                20% { -webkit-transform: scaleY(1.0) }
                }
                
                @keyframes sk-stretchdelay {
                0%, 40%, 100% { 
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
                }  20% { 
                transform: scaleY(1.0);
                -webkit-transform: scaleY(1.0);
                }
                }
                .control-block1 {
                width: 170px;
                }
                #spinner{
                display: none;
                width:200px;
                height: 200px;
                position: fixed;
                top: 50%;
                left: 50%;
                text-align:center;
                padding:10px;
                font:normal 16px Tahoma, Geneva, sans-serif;
                margin-left: -100px;
                margin-top: -100px;
                z-index:2;
                overflow: auto;
                //border:1px solid #CCC;
                //background-color:white;
                z-index:100;
                padding:5px;
                line-height:20px;
                }
                #opaque {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                z-index: 1;
                display: none;
                background-color: gray;
                filter: alpha(opacity=30);
                opacity: 0.3;
                -moz-opacity:0.3;
                -khtml-opacity:0.3
                }
                * html #opaque {
                position: absolute;
                }
                .popupBackground{
                /*background-color:black;
                opacity: 0.20;
                filter: alpha(opacity = 20);
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 9998;*/
                
                background-color: rgb(0,0,0,0.5);
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 9998;display:none;
                }
                .custPopup{
                /* background-color: white;
                border-width: 2px;
                border-style: solid;
                z-index: 9999;
                left: 50%;
                padding:10px;
                position: absolute;
                width: 500px;
                margin-left: -250px;
                top:25%;*/
                background-color: white;
                border-width: 2px;
                z-index: 9999;
                left: 50%;
                transform: translateX(-50%);
                width: 30%;
                margin-top: 10%;
                padding: 10px;
                position:fixed;
                font-family: 'Armata', sans-serif;    font-weight: bold;
                font-size: 12px;
                padding: 30px;
                border-radius: 5px;
                border: 5px solid #cfcfcf;
                box-shadow: 0px 1px 17px #555;
                }
                .ui-button-icon-only .ui-icon {
                left: 50%;
                margin-left: 0px;
                }   
                .checkbox-control label {    
                position: relative;
                left: -30px;
                }
                .custPopup input{padding:5px;width:56px;}
                .custPopup span{font-size: 14px;}
                .popupBackground p{text-align: center;font-family: 'Armata', sans-serif; color: #fff; margin-top: 15%;}
                
                .col-41, .col-42{width:49%;padding:5px;float:left;box-sizing: border-box;}
                .col-42{width:40%;}
                
            </style>
            
            
        </head>
        
        
        <script type="text/javascript">
        //$(function() {
        //$(window).on("click", function() {
        //alert("I'm about to increment the counter.");
        //incrementCounter();
        //});
        //});
        
        function FunRunReport(runrep){
            //document.getElementById("page:exportform:button").disabled = 'true';
            setTimeout(function(){    
                if (document.getElementById("page:exportform:pgmsg").innerHTML == ""){
                    document.getElementById("page:exportform:popupbg").style.display = 'block';
                } else{
                    window.scrollTo (0, 0);
                }            
            }, 1000);
            
            incrementCounter();                
            return false;        
        }
        function disable(){
            hidePopup(null);
            document.getElementById("page:exportform:popupbg").style.display = 'block';
            startprocess();
        }
        function count(){                   
            var inputval=document.getElementById("page:exportform:theHiddenInput").value;
            
            if(inputval==='true')
                document.getElementById("page:exportform:tstpopup").style.display = 'block';

        }
        
        function displaySnowflakeWarning() {
            if (document.getElementById("page:exportform:pgmsg").innerHTML != ""){
                document.getElementById("page:exportform:popupbg").style.display = 'none';
            } else if (document.getElementById("page:exportform:snowflakeWarningValue").value === 'true') {
                document.getElementById("page:exportform:popupbg").style.display = 'none';
                document.getElementById("page:exportform:snowflakePanel").style.display = 'block';
            }
        }

        function closeSnowflakeWarning() {
            document.getElementById("page:exportform:snowflakePanel").style.display = 'none';
        }

        function hidePopup(runrep){
            document.getElementById("page:exportform:tstpopup").style.display = 'none';
            document.getElementById("page:exportform:popupbg").style.display = 'none';
        }
        function inputLimiter(e,allow) {
            var AllowableCharacters = '';
            if (allow == 'Numbers'){AllowableCharacters='1234567890';}
            var k = document.all?parseInt(e.keyCode): parseInt(e.which);
            if (k!=13 && k!=8 && k!=0){
                if ((e.ctrlKey==false) && (e.altKey==false)) {
                    return (AllowableCharacters.indexOf(String.fromCharCode(k))!=-1);
                } else {
                    return true;
                }
            } else {
                return true;
            }
        } 
        function showSpinner()
        {
            //document.getElementById('opaque').style.display='block';
            // var popUp = document.getElementById('spinner');
            // popUp.style.display = 'block';
            
        } 
        
        $(document).ready(function(){
            $("#btn").click(function(){
                /* Single line Reset function executes on click of Reset Button */
                $("#form")[0].reset();
            });});
        
        
        
        //j$ = jQuery.noConflict();
        
        /* constants across all the function calls */
        var maxStringSize = 6000000;    // Maximum String size is 6,000,000 characters
        var maxFileSize = 4350000;      // After Base64 Encoding, this is the max file size
        var chunkSize = 950000;         // Maximum JavaScript Remoting message size is 1,000,000 characters
        var fileSizeInLines = 5000;
        var noOfAttachments = 0;
        var fileUploadFlag = null;
        
        var url = window.location.href;
        
        //var urlSplit = url.split("=")
        
        //var reqStr = urlSplit[1];
        var recordId ;
        
        function validatefile(file) {
            var fileReader = new FileReader();
            fileReader.readAsText(file);
            fileReader.onloadend = function(event) {         
                var payloadCSV = this.result;  
                var allTextLines = payloadCSV.split(/\r\n|\n/);
                var data=allTextLines[0]+"\r\n";
                var smallerFiles= data.split(',');
                /* Check for header data same as in comma separated file */
                
                if ((data.toLowerCase() !== "email"+"\r\n") || smallerFiles.length>1) {
                    alert('Uploaded file is in incorrect format! Please upload the file in comma separated format.');
                    document.getElementById('inputFiles').value = '';
                    return false;
                }
            }
        }
        function checkfile(sender) {
            var validExts = new Array(".csv");
            var fileExt = sender.value;
            fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
            if (validExts.indexOf(fileExt) < 0) {
                alert("Invalid file type uploaded, valid only " + validExts.toString() + " file type.");
                document.getElementById('inputFiles').value = '';
                
                //location.reload();
                fileupload(false);
                return false;
            } else{
                var files = document.getElementById("inputFiles").files;
                validatefile(files[0]);
                fileupload(true);
                return true;
            }
            
            
        }
        
        function funccall(tempid){
            fileimport();
        }
        
        function callpassStringToController()
        {
            passStringToController(recordId);
        }
        function submitfile(repo) {
            
            if(repo!=null) {         
                recordId = repo;
                
                var files = document.getElementById("inputFiles").files;
                if(document.getElementById("page:exportform:pgmsg").innerHTML != ""){
                    
                }
                else{   
                    if(files.length>0 ){
                        document.getElementById("page:exportform:popupbg").style.display = 'block';
                        processFile(files[0]);  
                    }
                    else{
                        //alert('Please upload the file to import.');
                    }
                    
                }
            }
            return false;
        }
        
        /* It reads the file uploaded and divide into chunks of 2501 lines, and initiates the worker threads to process asynchronously */
        function processFile(file) {
            var fileReader = new FileReader();
            fileReader.onloadend = function(event) {
                var payloadCSV = this.result;  
                var allTextLines = payloadCSV.split(/\r\n|\n/);
                var noOfLines = allTextLines.length - 2;
                var noOfFiles = Math.ceil(noOfLines/5000);
                var smallerFiles= new Array();
                for (var i=0,k=1;i<noOfFiles;i++) {
                    var data=allTextLines[0]+"\r\n";
                    
                    /* Check for header data same as in comma separated file */
                    
                    
                    
                    var tempdata = data;
                    for(var j=0;j<fileSizeInLines;j++) {
                        if (allTextLines[k] !== undefined) {
                            data=data+allTextLines[k]+"\r\n";
                        }
                        k++;
                    }
                    var b = new Blob([data],{type : "text/plain"});
                    //var b = new Blob([data],{type : "text/plain;charset=UTF-8"});
                    if(tempdata !== data){
                        smallerFiles.push(b);
                    }
                }
                noOfAttachments = smallerFiles.length;
                for (var i = 0; i < smallerFiles.length; i++) {
                    fileUploadFlag = 'false';
                    var blobFile = smallerFiles[i];
                    /* important to assign to a separate 
                 function to avoid concurrency issues across threads. */
                var fileName = file.name;
                fileName=fileName.slice(0, -4)+""+(i+1)+".csv";
                if (i+1 === noOfAttachments) {
                    fileUploadFlag = 'true';
                }
                fileWorker(blobFile,fileName, fileUploadFlag);
            }
           
            setTimeout(func, noOfAttachments*400);
            
            function func() {
                var impexpid = recordId;
               
                document.getElementById("page:exportform:filepopup").style.display = 'block';
                
               
            }
            
            
        }
        fileReader.onerror = function(event) {
            console.log("There was an error reading the file.  Please try again.");
        }
        fileReader.onabort = function(event) {
            console.log("There was an error reading the file.  Please try again.");
        }
        fileReader.readAsText(file);  //Read the body of the file
        
    }
        
        /* Parallel worker that reads each individual file using FileReader each individual file.
     * Call the recursive function to upload chunks of file along with meta data to track state. 
     */
        function fileWorker(file,fileName,fileUploadFlag) {
            var fileReader = new FileReader();
            fileReader.onloadend = function(event) {
                /* Base 64 encode the file before sending it */
                //var payload = window.btoa(this.result);  
                var payload = this.result;
                var positionIndex = 0;
                var parentId = recordId;
                var attachmentName = fileName;
                var attachmentId = null;
                var description = 'false';
                uploadChunk(parentId, attachmentId, attachmentName, payload, positionIndex, description, fileUploadFlag);
            }
            fileReader.onerror = function(event) {
                console.log("There was an error reading the file.  Please try again.");
            }
            fileReader.onabort = function(event) {
                console.log("There was an error reading the file.  Please try again.");
            }
            fileReader.readAsText(file);  //Read the body of the file
            
        }
        
        /* Uploads the attachment into salesforce.
     * @param parentId - parent id of the record the file should be added to, if invalid, the transaction fails.
     * @param attachmentId - attachment id of the payload, if null creates a new attachment for the parent.
     * @param attachmentName - file name of the uploaded file.
     * @param payload - base64 encoded payload
     * @param positionIndex - position of the processed payload (used to maintain state to chunkify the payload) 
     */
        function uploadChunk(parentId, attachmentId, attachmentName, payload, positionIndex, description, fileUploadFlag) {
            if (positionIndex < payload.length) {
                var chunkPayload = "";
                if(payload.length <= positionIndex + chunkSize) {
                    chunkPayload = payload.substring(positionIndex);
                } else {
                    chunkPayload = payload.substring(positionIndex, positionIndex + chunkSize);
                }
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.ExportTrackerController.processChunk}',
                    parentId, attachmentId, attachmentName, chunkPayload, description, fileUploadFlag,
                    function(result, event) {
                        if(event.type === 'exception') {
                            console.log("exception");
                            console.log(event);
                        } else if(event.status) {
                            console.log(event);
                            positionIndex += chunkSize;
                            uploadChunk(parentId, result, attachmentName, payload, positionIndex, description, fileUploadFlag);
                        } else {
                            console.log(event.message);
                        }
                    },
                    {buffer: false, escape: true, timeout: 120000}
                );
            } else {
                console.log("upload completed, file name: " + attachmentName);
            }
        }  
        
        </script>
        
        <body>
            
            
            <apex:form id="exportform">
                <apex:outputPanel styleClass="popupBackground" id="popupbg" layout="block">
                    <p>Processing...</p>
                </apex:outputPanel>
                <div class="container">
                    <apex:outputPanel id="tstpopup" rendered="true" style="display:none">
                        <apex:outputPanel styleClass="custPopup" layout="block" id="inpopup">
                            <center>
                                <apex:outputPanel>
                                    This will start the export process.<br/>
                                    Do you wish to continue?<br/><br/>
                                </apex:outputPanel>
                                <apex:commandButton id="buttonYes"  value="Yes"  onclick="disable()" reRender="null">
                                    <apex:actionFunction name="startprocess" action="{!batchProcessCall}" oncomplete="displaySnowflakeWarning()" reRender="snowflakePanel,pgmsg"/>
                                </apex:commandButton>&nbsp;&nbsp;&nbsp;
                                <apex:commandButton id="buttonNo" value="No" onclick="hidePopup(this)" reRender="null"/>
                            </center>
                            <apex:inputHidden value="{!inputValue}" id="theHiddenInput"/>
                        </apex:outputPanel>
                    </apex:outputPanel>

                    <apex:outputPanel id="snowflakePanel" rendered="true" style="display:none" >
                        <apex:outputPanel styleClass="custPopup" layout="block" id="snowflakeWarning">
                                <center>                            
                                <apex:outputPanel>The result cannot be exported due to its size.<br/>Try updating the filters 
                                    to make it more restrictive, select less fields or contact SET.<br/><br/>
                                </apex:outputPanel>

                                    <apex:commandButton id="closeSnowflakeWarningButton"  value="OK"  onclick="closeSnowflakeWarning()" reRender="null"></apex:commandButton>
                                </center>
                                
                            <apex:inputHidden value="{!snowflakeWarning}" id="snowflakeWarningValue"/>
                        </apex:outputPanel>
                    </apex:outputPanel>

                </div> 
                
                <div class="container">
                    <apex:outputPanel id="filepopup" rendered="true" style="display:none">
                        <apex:outputPanel styleClass="custPopup" layout="block" id="infilepopup">
                            <center>
                                File Imported Successfully <BR/><BR/> 
                                <apex:commandButton id="filebutton"  value="OK"  onclick="callpassStringToController()" reRender="null"/>
                                <apex:actionFunction name="passStringToController" action="{!reDirectimport}" rerender="null">
                                    <apex:param name="p1" value="" assignTo="{!importexpid}" />
                                </apex:actionFunction>
                                
                                
                            </center>
                        </apex:outputPanel>
                    </apex:outputPanel>
                </div>                  
                <div class="container">
                    <div class="spinnerblock">
                        <div class="spinner">
                           
                        </div>
                    </div>
                    <div class="row">                        
                        <div class="form-container">                             
                            <form class="static_block" action="">
                                <h2 >Export Tracker</h2>
                                <div class="error">
                                    <apex:outputPanel style="color:red;font-size: 13px;">
                                        <apex:pageMessages id="pgmsg"/>
                                    </apex:outputPanel>                                    
                                </div>
                                
                                <div class="col-41">
                                    <div class="form-group">
                                        <div class="lable-block"> <label for="reportSelect">Report Type <span>*</span></label></div>
                                        <div class="control-block">
                                            <apex:selectList id="chooseColor" value="{!exportName}" size="1" style="padding: 2px 3px;">
                                                
                                                <apex:selectOption itemValue="None" itemLabel="-Select-"/>
                                                <apex:selectOption itemValue="AE Export" itemLabel="AE Export" rendered="{!showae}"/>
                                                <apex:selectOption itemValue="Form Response" itemLabel="Form Response"/>
                                                <apex:selectOption itemValue="Mailing List" itemLabel="Mailing List"/>
                                                <apex:actionSupport event="onchange"  reRender="block,exportform" action="{!getDefault}"/>
                                            </apex:selectList> 
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="lable-block"><label for="text">Approver <span>*</span></label></div>
                                        <div class="control-block">                                               
                                            <apex:inputtext value="{!Approver}" maxlength="255"/>
                                        </div>
                                    </div>                                
                                    <div class="form-group">
                                        <div class="lable-block"><label for="text">Requester <span>*</span></label></div>
                                        <div class="control-block">
                                            <!--input type="text" class="form-control" id=""  name="approver"/-->
                                            <apex:inputText value="{!Requester}" maxlength="255"/>
                                        </div>
                                    </div>  
                                    
                                    <div class="form-group">
                                        
                                        <div class="lable-block"><label for="text">Business Justification <span>*</span></label></div>
                                        <div class="control-block">
                                            
                                            <apex:selectList value="{!BusinessJustificationPickVal}" size="1" rendered="{!def}">
                                                
                                                <apex:selectOption itemValue="-Select-" itemLabel="-Select-"/>
                                                
                                                <!--<apex:actionSupport event="onchange" action="{!getDefault}" reRender="null"/>-->
                                            </apex:selectList>
                                        </div>
                                        
                                        <apex:outputPanel rendered="{!showSub1}" id="text">                 
                                            <div class="control-block">
                                                
                                                <apex:selectList value="{!BusinessJustificationPickVal}" size="1" >
                                                    <apex:selectOptions value="{!MLExportReasons}"/>
                                                    
                                                    <apex:actionSupport event="onchange" action="{!getDisable}" reRender="text,checkccpa"/>
                                                    
                                                </apex:selectList>
                                                <div class="form-group" style="padding: 0;padding-top: 5px;">
                                                    <div class="lable-block"><label for="text"></label></div>
                                                    <div class="control-block">                                               
                                                        <apex:inputTextarea value="{!BusinessJustification}" html-maxlength="255"  rendered="{!textshow}" />
                                                    </div>
                                                </div>
                                                <!--<apex:inputTextarea value="{!BusinessJustification}" html-maxlength="255"  rendered="{!textshow}" />-->
                                                
                                            </div>
                                        </apex:outputPanel>
                                        <apex:outputPanel rendered="{!showFr1}" id="text1">
                                            <div class="control-block">
                                                
                                                <apex:selectList value="{!BusinessJustificationPickVal}" size="1" style="padding: 2px 3px;">
                                                    <apex:selectOptions value="{!FRExportReasons}"/>
                                                    
                                                    <apex:actionSupport event="onchange" action="{!getDisable}" reRender="text1,checkccpa"/>
                                                    
                                                </apex:selectList>
                                                <div class="form-group" style="padding: 0;padding-top: 5px;">
                                                    <div class="lable-block"><label for="text"></label></div>
                                                    <div class="control-block">                                               
                                                        <apex:inputTextarea value="{!BusinessJustification}" html-maxlength="255"  rendered="{!textshow}" />
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        </apex:outputPanel>
                                        
                                        <apex:outputPanel rendered="{!Showae1}" id="text11">
                                            <div class="control-block">
                                                
                                                <apex:selectList value="{!BusinessJustificationPickVal}" size="1" style="padding: 2px 3px;">
                                                    <apex:selectOptions value="{!AEExportReasons}"/>
                                                    
                                                    <apex:actionSupport event="onchange" action="{!getDisable}" reRender="text11,checkccpa"/>
                                                    
                                                </apex:selectList>
                                                <div class="form-group" style="padding: 0;padding-top: 5px;">
                                                    <div class="lable-block"><label for="text"></label></div>
                                                    <div class="control-block">                                               
                                                        <apex:inputTextarea value="{!BusinessJustification}" html-maxlength="255"  rendered="{!textshow}" />
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        </apex:outputPanel>
                                    </div> 
                                    <apex:outputPanel id="frCheck2" rendered="{!Showfile}">
                                        <!--<div class="form-group">
                                            <div class="lable-block"><label for="text">Artists List <span>*</span></label></div>
                                            <div class="control-block">
                                                
                                                <apex:inputText value="{!AEArtistslist}" maxlength="255"/>
                                            </div>
                                        </div>-->
                                        <div class="form-group" >
                                                    <div class="lable-block"><label for="text">Artists List <span>*</span></label></div>
                                                    <div class="control-block">                                               
                                                        <apex:inputTextarea value="{!AEArtistslist}"/>
                                                    </div>
                                                </div> 
                                        <div class="form-group">
                                            <div class="lable-block"><label for="text">Labels <span>*</span></label></div>
                                            <div class="control-block">
                                                <apex:inputTextarea value="{!AElabels}"/>
                                                
                                            </div>
                                        </div> 
                                    </apex:outputPanel>
                                </div> 
                                <div class="col-42">
                                    <div class="form-group">
                                        <div class="lable-block"><label for="text">Recipient Name <span>*</span></label></div>
                                        <div class="control-block">
                                            <!--input type="text" class="form-control" id=""  name="recipientName"/-->
                                            <apex:inputtext value="{!RecipientName}" maxlength="255" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="lable-block"><label for="text">Recipient Company <span>*</span></label></div>
                                        <div class="control-block">
                                            <!--input type="text" class="form-control" id=""  name="recipientName"/-->
                                            <apex:inputtext value="{!RecipientCompany}" maxlength="255" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="lable-block"><label for="text">Recipient Email <span>*</span></label></div>
                                        <div class="control-block">
                                            <!--input type="text" class="form-control" id=""  name="recipientName"/-->
                                            <apex:inputtext value="{!RecipientEmail}" maxlength="80" >
                                                <apex:actionSupport event="onchange" action="{!validateEmail}" reRender="pgmsg"/>
                                            </apex:inputtext>
                                        </div>
                                    </div>
                                    <div class="form-group no-border">
                                        <div class="lable-block"><label for="text">Recipient Phone Number <span>*</span></label></div>
                                        <div class="control-block">
                                            <!--input type="text" class="form-control" id=""  name="recipientPhoneNumber"/-->
                                            <apex:inputtext value="{!RecipientPhone}"  maxlength="40"/>
                                            <!--<apex:inputtext value="{!RecipientPhone}" onkeypress="return inputLimiter(event,'Numbers');" maxlength="40" />-->
                                        </div>                                   
                                    </div>
                                    
                                    <apex:outputPanel id="frCheck3" rendered="{!Showfile}">
                                        <div class="form-group no-border">
                                            <div class="lable-block"><label for="text">Fan Actions &amp; Channels <span>*</span></label></div>
                                            <div class="control-block">
                                                <apex:inputTextarea value="{!AEFanActionsChannels}"/>
                                            </div>                                   
                                        </div>
                                        <div class="form-group no-border">
                                            <div class="lable-block"><label for="text">Date Range of Activity <span>*</span></label></div>
                                            <div class="control-block">
                                                <apex:inputtext value="{!AEDateRangeofActivity}"  maxlength="255"/>
                                            </div>                                   
                                        </div>
                                    </apex:outputPanel>
                                </div>               
                                                              
                            </form>     
                                        
                            <apex:outputPanel id="block" >
                                <apex:outputPanel id="MainPanel" rendered="{!hideShow}">
                                    <div class="second_block" id="subBlock">
                                        <div class="col-65">                                        
                                            <div class="inner-block" style="padding-bottom:19px;">
                                                <h2>Report Builder</h2>
                                                <div class="form-group" style="margin-top: 15px;">
                                                    <div class="lable-block"><label for="text">Territory <span>*</span></label> </div>
                                                    <div class="control-block">
                                                        <c:ExportComboBox id="territoryExpCombobox"
                                                                          labelField="Territory_ID__r.Territory__c"
                                                                          labelField1="Territory_ID__r.Name"
                                                                          valueField="Territory_ID__r.Id"
                                                                          targetField="{!comboTerritory}"
                                                                          activeField="Active__c"
                                                                          orderByField="Territory_ID__r.Territory__c"
                                                                          SObject="TL__c"
                                                                          />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="lable-block"><label for="text">Label <span>*</span></label></div>
                                                    <div class="control-block">
                                                        <c:ExportComboBox id="labelExpCombobox"
                                                                          labelField="Label_ID__r.Name"
                                                                          labelField1="Label_ID__r.Label_Code__c"
                                                                          valueField="Label_ID__r.Id"
                                                                          targetField="{!comboLabel }"
                                                                          filterField="Territory_ID__r.Territory__c"
                                                                          activeField="Active__c"
                                                                          orderByField="Label_ID__r.Name"
                                                                          matchElementId="territoryExpCombobox"
                                                                          SObject="TL__c"
                                                                          />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="lable-block"><label for="text">Artist <span>*</span></label></div>
                                                    <div class="control-block">
                                                        <c:ExportComboBox id="artistExpCombobox"
                                                                          labelField="Artist_ID__r.Artist__c"
                                                                          labelField1="Artist_ID__r.First_Name__c"
                                                                          valueField="Artist_ID__r.Id"
                                                                          targetField="{!comboArtist }"
                                                                          filterField="Territory_ID__r.Territory__c"
                                                                          filterField2="Label_ID__r.Name"
                                                                          activeField="Active__c"
                                                                          orderByField="Artist_ID__r.Artist__c"
                                                                          matchElementId="territoryExpCombobox"
                                                                          matchElementId2="labelExpCombobox"
                                                                          SObject="TLA__c" 
                                                                          />
                                                    </div>
                                                    
                                                </div>
                                                
                                                
                                                <apex:outputPanel id="frCheck" rendered="{!showFr}">
                                                    <div class="form-group">
                                                        <div class="lable-block"><label for="text">Form ID <span>*</span></label></div>
                                                        <div class="control-block">
                                                            <c:ExportComboBox labelField1="Migration_id__c"
                                                                              labelField="Form_Name__c"
                                                                              valueField="Id" 
                                                                              SObject="Form__c"
                                                                              targetField="{!comboFormId}"
                                                                              filterField="TLA_ID__r.Territory_ID__r.Territory__c"
                                                                              filterField2="TLA_ID__r.Label_ID__r.Name"
                                                                              filterField3="TLA_ID__r.Artist_ID__r.Artist__c"                              
                                                                              activeField="TLA_ID__r.Active__c"
                                                                              orderByField="LastModifiedDate"
                                                                              matchElementId="territoryExpCombobox"
                                                                              matchElementId2="labelExpCombobox"
                                                                              matchElementId3="artistExpCombobox"
                                                                              id="listFrCombobox"
                                                                              />
                                                        </div>
                                                    </div>
                                                    
                                                </apex:outputPanel> 
                                                <apex:outputPanel id="subCheck1" rendered="{!showSub}">
                                                    <div class="form-group">
                                                        <div class="lable-block"><label for="text">Mailing List <span>*</span></label></div>
                                                        <div class="control-block">
                                                            <c:ExportComboBox labelField="Mailing_List_Name__c"
                                                                              labelField1="X18_Digit_ID__c"
                                                                              valueField="Id" 
                                                                              SObject="Mailing_List__c"
                                                                              targetField="{!comboMailingList}"
                                                                              filterField="TLA_ID__r.Territory_ID__r.Territory__c"
                                                                              filterField2="TLA_ID__r.Label_ID__r.Name"
                                                                              filterField3="TLA_ID__r.Artist_ID__r.Artist__c"
                                                                              activeField="TLA_ID__r.Active__c"
                                                                              orderByField="Mailing_List_Name__c"
                                                                              matchElementId="territoryExpCombobox"
                                                                              matchElementId2="labelExpCombobox"
                                                                              matchElementId3="artistExpCombobox"
                                                                              id="listMlCombobox"
                                                                              />
                                                        </div>
                                                    </div>
                                                    <apex:outputPanel rendered="{!showactive}" id="activeshowblock">
                                                        <div class="form-group">
                                                            <div class="lable-block"> <label for="text">Active <span>*</span></label></div>
                                                            <div class="control-block-small">
                                                                <apex:selectList multiselect="false" size="1" value="{!Active }">
                                                                    <apex:selectOption itemValue="none" itemLabel="-Select-" rendered="{!$Profile.Name != 'UKReadOnly' && $Profile.Name != 'UserAdmin'}"/>
                                                                    <apex:selectOption itemValue="true" itemLabel="True"/>
                                                                    <apex:selectOption itemValue="false" itemLabel="False"  rendered="{!$Profile.Name != 'UKReadOnly' && $Profile.Name != 'UserAdmin'}"/>
                                                                    <apex:selectOption itemValue="Both" itemLabel="Both"  rendered="{!$Profile.Name != 'UKReadOnly' && $Profile.Name != 'UserAdmin'}"/>
                                                                </apex:selectList>  
                                                            </div>
                                                        </div>
                                                    </apex:outputPanel>
                                                    <apex:outputPanel rendered="{!showactivetrue}" id="activehideblock">  
                                                        <div class="form-group">
                                                            <div class="lable-block"> <label for="text">Active <span>*</span></label></div>
                                                            <div class="control-block-small">
                                                                <apex:selectList multiselect="false" size="1" value="{!Active }" id="active"> 
                                                                    
                                                                    <apex:selectOption itemValue="true" itemLabel="True"/>       
                                                                </apex:selectList>  
                                                            </div>
                                                        </div>
                                                    </apex:outputPanel>
                                                </apex:outputPanel>                                             
                                                <!----CCPA changes-->
                                                
                                                <div class="form-group">
                                                    <div class="lable-block1"><label for="text">Exclude CCPA Do Not Sell</label></div>
                                                    
                                                    <div class="control-block12" id="ccpacheck">
                                                        <apex:inputCheckbox value="{!showactiveccpa}" id="checkccpa" disabled="true"/>
                                                    </div>           
                                                    
                                                </div>
                                                <apex:outputPanel id="frCheck1" rendered="{!showFr}">    
                                                    <div class="form-group">
                                                        <div class=""><label for="text">Form Response Created Date Range</label></div>
                                                    </div>
                                                    <div class="form-group">  
                                                        <div class="lable-block"><label for="text">From</label></div>
                                                        <div class="control-block control-block1" style="width: 127px;">
                                                            <div class="date-from"><apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!fromDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg" />
                                                                </apex:input>
                                                            </div>                                                            
                                                        </div>
                                                        <div class="lable-block" style="width: 50px;"><label for="text">To</label></div>
                                                        <div class="control-block control-block1">
                                                            <div class="date-to">
                                                                <apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!toDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                    <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg"/>
                                                                </apex:input>
                                                            </div>                                                          
                                                        </div>
                                                    </div>
                                                    
                                                </apex:outputPanel> 
                                                
                                                
                                                
                                                
                                                
                                                <apex:outputPanel id="subCheck" rendered="{!showSub}">
                                                    
                                                    <apex:outputPanel rendered="{!hidepromoID}" id="mlpromoid">
                                                        <div class="form-group">
                                                            <div class="lable-block"><label for="text">Promo ID </label></div>
                                                            <div class="control-block">
                                                                <apex:Inputtext value="{!PromoID}" maxlength="10">
                                                                    <apex:actionSupport event="onchange" action="{!PromoIdValidation}" reRender="pgmsg,subCheck,hideactive,activeshowblock,activehideblock"/>
                                                                </apex:Inputtext>
                                                            </div>
                                                            <div class="tool-tip">i<span>This field will filter results across all historic Promo IDs. It should be used to pull new + returning fans.</span></div>
                                                        </div>
                                                    </apex:outputPanel>
                                                    <apex:outputPanel rendered="{!hideformID}">
                                                        <div class="form-group">
                                                            <div class="lable-block"><label for="text">Form ID </label></div>
                                                            <div class="control-block">
                                                                <apex:Inputtext value="{!normalFormId}" maxlength="18" >
                                                                    <apex:actionSupport event="onchange" action="{!formIdValidation}" reRender="pgmsg,mlpromoid,subCheck"/>
                                                                </apex:Inputtext>
                                                            </div>
                                                            <div class="tool-tip">i<span>This field should be used to pull new fans only, not returning fans.</span></div>
                                                        </div>
                                                    </apex:outputPanel>
                                                    
                                                    <div class="form-group">
                                                        <div class="lable-block"> <label for="text">Fan City</label></div>
                                                        <div class="control-block-small">
                                                            <apex:selectList multiselect="false" size="1" value="{!cityoption}" id="fCity">
                                                                <apex:selectOption itemValue="None" itemLabel="-Select-"/>
                                                                <apex:selectOption itemValue="equal to" itemLabel="Equal to"/>
                                                                <apex:selectOption itemValue="contains" itemLabel="Contains"/>
                                                                <apex:selectOption itemValue="not equal to" itemLabel="Not equal to"/>
                                                                <!--<apex:selectOption itemValue="equal to" itemLabel="Equal to"/>-->
                                                                <apex:selectOption itemValue="starts with" itemLabel="Starts with"/>
                                                                <apex:actionSupport event="onchange"  reRender="cityVal" action="{!getDisable}"/>
                                                            </apex:selectList>
                                                        </div>           
                                                        <div class="control-block address">
                                                            <apex:inputText disabled="{!cityDis}" value="{!cityvalue}" id="cityVal" maxlength="255"/>
                                                        </div>
                                                        <div class="tool-tip">i<span>For multiple entries, please select "Equal to" or "Contains" or "Starts with" filter and input comma (,) separated values.</span></div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="lable-block"> <label for="text">Fan State</label ></div>
                                                        <div class="control-block-small">
                                                            <apex:selectList multiselect="false" size="1" value="{!stateoption}" id="fState">
                                                                <apex:selectOption itemValue="None" itemLabel="-Select-"/>
                                                                <apex:selectOption itemValue="equal to" itemLabel="Equal to"/>
                                                                <apex:selectOption itemValue="contains" itemLabel="Contains"/>
                                                                <apex:selectOption itemValue="not equal to" itemLabel="Not equal to"/>
                                                                <apex:selectOption itemValue="starts with" itemLabel="Starts with"/>
                                                                <apex:actionSupport event="onchange"  reRender="stateVal" action="{!getDisable}"/>
                                                            </apex:selectList> 
                                                        </div>
                                                        <div class="control-block address">
                                                            <apex:inputText value="{!statevalue}" disabled="{!stateDis}" id="stateVal" maxlength="255" /> 
                                                        </div>
                                                        <div class="tool-tip">i<span>For multiple entries, please select "Equal to" or "Contains" or "Starts with" filter and input comma (,) separated values.</span></div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="lable-block"><label for="text">Fan Country </label></div>
                                                        <div class="control-block-small">
                                                            <apex:selectList multiselect="false" size="1" value="{!countryoption}" id="fCountry" >
                                                                <apex:selectOption itemValue="None" itemLabel="-Select-"/>
                                                                <apex:selectOption itemValue="equal to" itemLabel="Equal to"/>
                                                                <apex:selectOption itemValue="contains" itemLabel="Contains"/>
                                                                <apex:selectOption itemValue="not equal to" itemLabel="Not equal to"/>
                                                                <!---<apex:selectOption itemValue="equal to" itemLabel="Equal to"/>-->
                                                                <apex:selectOption itemValue="starts with" itemLabel="Starts with"/>
                                                                <apex:actionSupport event="onchange"  reRender="countryVal" action="{!getDisable}"/>
                                                            </apex:selectList>
                                                        </div>
                                                        <div class="control-block address">
                                                            <apex:inputText value="{!countryvalue}" id="countryVal" disabled="{!countryDis}" maxlength="255"/>
                                                        </div>
                                                        <div class="tool-tip">i<span>For multiple entries, please select "Equal to" or "Contains" or "Starts with" filter and input comma (,) separated values.</span></div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="lable-block"><label for="text">Fan Postal Code</label></div>
                                                        <div class="control-block-small">
                                                            <apex:selectList multiselect="false" size="1" value="{!postalcodeoption}" id="fPostal">
                                                                <apex:selectOption itemValue="None" itemLabel="-Select-"/>
                                                                <apex:selectOption itemValue="equal to" itemLabel="Equal to"/>
                                                                <apex:selectOption itemValue="contains" itemLabel="Contains"/>
                                                                <apex:selectOption itemValue="not equal to" itemLabel="Not equal to"/>
                                                                <apex:selectOption itemValue="starts with" itemLabel="Starts with"/>
                                                                <apex:actionSupport event="onchange"  reRender="postalVal" action="{!getDisable}"/>
                                                            </apex:selectList>
                                                        </div>
                                                        <div class="control-block address">
                                                            <apex:inputText value="{!postalcodevalue}" id="postalVal" disabled="{!postalDis}" maxlength="255"/> 
                                                            
                                                        </div>
                                                        <div class="tool-tip">i<span>For multiple entries, please select "Equal to" or "Contains" or "Starts with" filter and input comma (,) separated values.</span></div>
                                                    </div>
                                                    
                                                    
                                                    <apex:outputPanel rendered="{!showsubDaterange}" id="subdate">
                                                        <div class="form-group">
                                                            <div class=""><label for="text">Subscription Created Date Range</label></div>
                                                        </div>
                                                        <div class="form-group">  
                                                            <div class="lable-block"><label for="text">From</label></div>
                                                            <div class="control-block control-block1" style="width: 127px;">
                                                                <div class="date-from"><apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!fromDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                    <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg" />
                                                                    </apex:input>
                                                                </div>                                                            
                                                            </div>
                                                            <div class="lable-block" style="width: 50px;"><label for="text">To</label></div>
                                                            <div class="control-block control-block1">
                                                                <div class="date-to">
                                                                    <apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!toDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                        <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg"/>
                                                                    </apex:input>
                                                                </div>                                                          
                                                            </div>
                                                        </div>
                                                    </apex:outputPanel>
                                                    <apex:outputPanel rendered="{!showDaterange}" id="promodate">
                                                        <div class="form-group">
                                                            <div class=""><label for="text">Promo ID Created Date Range</label></div>
                                                        </div>
                                                        <div class="form-group">  
                                                            <div class="lable-block"><label for="text">From</label></div>
                                                            <div class="control-block control-block1" style="width: 127px;">
                                                                <div class="date-from"><apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!subhfromDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                    <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg" />
                                                                    </apex:input>
                                                                </div>                                                            
                                                            </div>
                                                            <div class="lable-block" style="width: 50px;"><label for="text">To</label></div>
                                                            <div class="control-block control-block1">
                                                                <div class="date-to">
                                                                    <apex:input type="date" style="padding-right: 0 !important;width: 140px;" value="{!subhtoDate}" html-placeholder="{!$Label.PC_dd_mm_yyyy}">
                                                                        <apex:actionSupport event="onchange" action="{!dateValidation}" reRender="pgmsg"/>
                                                                    </apex:input>
                                                                </div>                                                          
                                                            </div>
                                                        </div>
                                                    </apex:outputPanel>
                                                </apex:outputPanel>
                                                <div class="clear-fix"></div>
                                            </div>
                                        </div>
                                        <div class="col-35">
                                            <div class="inner-block">
                                                <h2 style="margin-bottom: 15px;">Choose Field(s) <span class="tool-tip" style="float: none;margin: 0;display: inline-block;">i<span>To export, please choose at least one field.</span></span></h2>
                                                
                                                <apex:outputPanel rendered="{!showFr}">
                                                    <div class="checkbox-control">
                                                        <label for="text">Form Name</label>
                                                        <apex:inputCheckbox value="{!FormName}" id="frmCheck" >
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="frmCheck" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                </apex:outputPanel>
                                                
                                                
                                                <apex:outputPanel rendered="{!showSub}" id="hideactive">
                                                    <div class="checkbox-control">
                                                        <label for="text">Mailing List Name</label>
                                                        <apex:inputCheckbox value="{!MailingListName}" id="mailingCheck">
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="mailingCheck" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                    <apex:outputPanel rendered="{!hideActivecheck}">
                                                        <div class="checkbox-control">
                                                            <label for="text">Active</label>
                                                            <apex:inputCheckbox value="{!Activecheck}" id="instaCheck1">
                                                                <apex:actionSupport event="onclick" action="{!getSelected}" reRender="instaCheck1" />
                                                            </apex:inputCheckbox>
                                                        </div>
                                                    </apex:outputPanel>
                                                </apex:outputPanel>
                                                
                                                <div class="checkbox-control">
                                                    <label for="text">Created Date </label>
                                                    <apex:inputCheckbox value="{!CreatedDate}" id="DateCheck" >
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="DateCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Email</label>
                                                    <apex:inputCheckbox value="{!email}" id="emailCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="emailCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">First Name</label>
                                                    <apex:inputCheckbox value="{!FirstName}" id="fNameCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="fNameCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Last Name</label>
                                                    <apex:inputCheckbox value="{!LastName}" id="lNameCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="lNameCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Age Range</label>                                                
                                                    <apex:inputCheckbox value="{!AgeRange}" id="ageCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="ageCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Gender</label>
                                                    <apex:inputCheckbox value="{!Gender}" id="genderCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="genderCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Address</label>
                                                    <apex:inputCheckbox value="{!Address}" id="addressCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="addressCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Birthday (MM/DD)</label>                                                
                                                    <apex:inputCheckbox value="{!Birthday}" id="bdayCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="bdayCheck" />
                                                    </apex:inputCheckbox>
                                                    <!--input type="checkbox" name="check" onclick="onlyOne(this)" id="ckb1" /-->
                                                </div>
                                                <div class="checkbox-control">
                                                    <label id ="bdateChecklbl">Birthdate (MM/DD/YYYY)</label>                                                
                                                    <apex:inputCheckbox value="{!Birthdate}" id="bdateCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="bdateCheck" />
                                                    </apex:inputCheckbox>
                                                    <!--input type="checkbox" name="check" onclick="onlyOne(this)" id="ckb1" /-->
                                                </div> 
                                                <div class="checkbox-control">                                                  
                                                    <label for="text">City</label>
                                                    <apex:inputCheckbox value="{!City}" id="cityCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="cityCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">State</label>
                                                    <apex:inputCheckbox value="{!State}" id="stateCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="stateCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Country</label>
                                                    <apex:inputCheckbox value="{!Country}" id="countryCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="countryCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Postal Code</label>
                                                    <apex:inputCheckbox value="{!PostalCode}" id="PostalCodeCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="PostalCodeCheck" />
                                                    </apex:inputCheckbox>
                                                </div>                                              
                                                <div class="checkbox-control">
                                                    <label for="text">Mobile Phone</label>                                                
                                                    <apex:inputCheckbox value="{!MobilePhone}" id="mPhoneCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="mPhoneCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">Twitter Handle</label>
                                                    <apex:inputCheckbox value="{!Twitterhandle}" id="thandleCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="thandleCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <apex:outputPanel rendered="{!showSub}">
                                                    <div class="checkbox-control">
                                                        <label for="text">Instagram Handle</label>
                                                        <apex:inputCheckbox value="{!InstagramHandle}" id="instaCheck">
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="instaCheck" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                    <div class="checkbox-control">
                                                        <label for="text">Promo ID</label>
                                                        <apex:inputCheckbox value="{!PromoIdcheck}" id="promocheck">
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="promocheck" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                    <div class="checkbox-control">
                                                        <label for="text">Promo Description</label>
                                                        <apex:inputCheckbox value="{!PromoDescription}" id="promodescheck">
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="promodescheck" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                </apex:outputPanel>
                                                
                                                
                                                <div class="checkbox-control">
                                                    <label for="text">Language</label>
                                                    <apex:inputCheckbox value="{!Language}" id="langCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="langCheck" />
                                                    </apex:inputCheckbox>
                                                </div> 
                                                <div class="checkbox-control">
                                                    <label for="text">DSP</label>
                                                    <apex:inputCheckbox value="{!DSP}" id="dspCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="dspCheck" />
                                                    </apex:inputCheckbox>
                                                </div> 
                                                <div class="checkbox-control">
                                                    <label for="text">Preferred Genre</label>
                                                    <apex:inputCheckbox value="{!PreferredGenre}" id="PreferredGenreCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="PreferredGenreCheck" />
                                                    </apex:inputCheckbox>
                                                </div>  
                                                <apex:outputPanel rendered="{!showfr}">
                                                    <div class="checkbox-control">
                                                        <label for="text">Custom Fields 1-20</label>
                                                        <apex:inputCheckbox value="{!cust1}" id="cust1Check">
                                                            <apex:actionSupport event="onclick" action="{!getSelected}" reRender="cust1Check" />
                                                        </apex:inputCheckbox>
                                                    </div>
                                                </apex:outputPanel>                                                     
                                                <div class="clear-fix"></div>
                                            </div>
                                            <div class="col-f6" style="width: 100%;padding-right: 0;padding-top: 10px;">
                                                <div>
                                                    <div class="lable-block" style="width: 18%;padding-right: 6px;text-align: left;padding-right: 10px;line-height: 9px;"><label for="text">Export Note </label></div>
                                                    <div class="control-block" style="width: 82%;">                                        
                                                        <apex:inputTextarea style="height: 70px;" value="{!ExportNote}" html-maxlength="255"/>  
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>                                   
                                        
                                    </div>
                                    <div class="foot-button">
                                        <div class="" style="width:100%;text-align: center;">
                                            <apex:commandButton value="Back" action="{!redirectToList}"/>&nbsp;&nbsp;
                                            <apex:commandButton onclick="FunRunReport(this)" value="Run Report"  reRender="null" id="btn">
                                                <apex:actionFunction name="incrementCounter" action="{!ExportData}" reRender="pgmsg,inpopup" oncomplete="count()"/>
                                            </apex:commandButton>                                   
                                        </div> 
                                    </div> 
                                
                                </apex:outputPanel>

                                <apex:outputPanel id="Exportpanel" rendered="{!Showfile}">
                                    <div class="second_block" id="subBlock">
                                        <div class="col-65">                                        
                                            <div class="inner-block1" style="padding-bottom:19px;">
                                                <h2>Upload File</h2>
                                                <div class="form-group" style="margin-top: 15px;">
                                                    <div class="lable-block"><label for="text">Upload Data File <span>*</span></label> </div>
                                                    <div class="control-block1">
                                                        <input type="file" id="inputFiles" onchange="checkfile(this);" reRender="pgmsg"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>       
                                        
                                        <div class="col-35">
                                            <div class="inner-block1">
                                                <h2 style="margin-bottom: 15px;">Choose Field(s) <span class="tool-tip" style="float: none;margin: 0;display: inline-block;">i<span>Please select all fields shared from the export.</span></span></h2>
                                            
                                                <div class="checkbox-control">
                                                    <label for="text">Email</label>
                                                    <apex:inputCheckbox value="{!emailcheck}" id="iemailCheck" disabled="true">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="iemailCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text">First Name</label>
                                                    <apex:inputCheckbox value="{!FirstName}" id="ifNameCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="ifNameCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="checkbox-control">                                                  
                                                    <label for="text">Geo City</label>
                                                    <apex:inputCheckbox value="{!geocity}" id="igeocityCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="igeocityCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="checkbox-control">
                                                    <label for="text">Last Name</label>
                                                    <apex:inputCheckbox value="{!LastName}" id="ilNameCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="ilNameCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="checkbox-control">                                                  
                                                    <label for="text">Geo Country</label>
                                                    <apex:inputCheckbox value="{!geocountry}" id="igeocountryCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="igeocountryCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="checkbox-control">
                                                    <label for="text" style="color:#CDE8F0">Address</label>
                                                    <apex:inputCheckbox value="{!Address}" id="iaddressCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="iaddressCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="checkbox-control">                                                  
                                                    <label for="text">City</label>
                                                    <apex:inputCheckbox value="{!City}" id="icityCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="icityCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text" style="color:#CDE8F0">State</label>
                                                    <apex:inputCheckbox value="{!State}" id="istateCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="istateCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text" >Country</label>
                                                    <apex:inputCheckbox value="{!Country}" id="icountryCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="icountryCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                <div class="checkbox-control">
                                                    <label for="text" style="color:#CDE8F0">Postal Code</label>
                                                    <apex:inputCheckbox value="{!PostalCode}" id="iPostalCodeCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="PostalCodeCheck" />
                                                    </apex:inputCheckbox>
                                                </div> 
                                                
                                                <div class="checkbox-control">
                                                  <label for="text"></label>  
                                                </div>
                                                
                                                <div class="checkbox-control">
                                                
                                                  <label for="text" style="color:#CDE8F0">Mobile Phone</label>                                             
                                                    <apex:inputCheckbox value="{!MobilePhone}" id="imPhoneCheck">
                                                        <apex:actionSupport event="onclick" action="{!getSelected}" reRender="imPhoneCheck" />
                                                    </apex:inputCheckbox>
                                                </div>
                                                
                                                <div class="clear-fix"></div>
                                            </div>
                                            <div class="col-f6" style="width: 100%;padding-right: 0;padding-top: 10px;">
                                                <div>
                                                    <div class="lable-block" style="width: 18%;padding-right: 6px;text-align: left;padding-right: 10px;line-height: 9px;"><label for="text">Export Note </label></div>
                                                    <div class="control-block" style="width: 82%;">                                        
                                                        <apex:inputTextarea style="height: 70px;" value="{!ExportNote}" html-maxlength="255"/>  
                                                    </div> 
                                                </div>
                                            </div>
                                        </div> 
                                    </div>  
                                    
                                    <div class="foot-button">
                                        <div class="" style="width:100%;text-align: center;">
                                            <apex:commandButton value="Back" action="{!redirectToList}"/>&nbsp;&nbsp;
                                            <apex:commandButton onclick="funccall(this);" value="Import Data"  reRender="null" id="ibtn">
                                                <apex:actionFunction name="fileimport" action="{!importdata}" reRender="pgmsg" oncomplete="submitfile('{!impexpid}')"/>
                                                <apex:actionFunction action="{!fileuploadstatus}" name="fileupload" reRender="null">
                                                    <apex:param value="{!filestatus}" name="filestatus" assignTo="{!filestatus}"/>
                                                </apex:actionFunction>
                                            </apex:commandButton>                                   
                                        </div> 
                                    </div>
                                </apex:outputPanel>
                            </apex:outputPanel>
                        </div>
                    </div>
                </div>               
            </apex:form>
        </body>
    </html>
</apex:page>