<script>

    function documentID(arg) {
        return document.getElementById(arg);
    }
</script>

 <?php
//                echo validation_errors();
                $url =  base_url()."save-backend-message";
                echo form_open_multipart($url, 'class="" id="formID2" name="savemessage" onsubmit="return savemessage();"');
                ?>
<div class="col-sm-10 ">
    <div class="col-sm-12 gray" style="padding: 10px 50px 50px 50px">

        <h3 class="page-header" style="border-bottom: 2px solid #8CC73F;margin-top: 0px;padding-top: 0px" >User Email</h3>

        <div class="table-responsive col-sm-12">

            <!--<form  id="formID2" action="<?php //echo base_url() ?>index.php/welcome/<?php //echo $active_sub_menu; ?>" method="post" name="userForm" enctype="multipart/form-data" >-->
                <div class="form-group col-sm-12">
                
                    <div class="form-group col-sm-10">
 
                        <input type="hidden" name="backend_message_id" id="backend_message_id" value="">
                          <input type="hidden" name="cross_flag" id="cross_flag" value="1">
                         <input type="hidden" name="uploading_status" id="uploading_status" value="0">
       
                        
                        
                        <div class="form-group col-sm-12">
                                <div class="form-group col-sm-10">
                                    <input class="col-sm-12"
                                           type="hidden" name="to_address" id="to_address" value="" >
                                    <div class="col-sm-12 padding-zero text-left">
                                        <select name="email_address"  
                                                id="email_address" 
                                                data-errormessage-value-missing="Email Address is is Required!"
                                                class="tokenize-sample validate[]"
                                                title="" 
                                                multiple="multiple" style="margin: 0px; padding: 0px; border: 0px; display: none;">
                                                    <?php
                                                    foreach($person_sup as $val){
                                                            ?>
                                                    <option value="<?php echo $val->person_email;  ?>" selected ><?php echo $val->person_email; ?></option>
                                                    <?php
                                                }
                                            
                                            ?>
                                        </select>
                                    </div>
                                    <script type="text/javascript">
                                        $('select#email_address').tokenize({placeholder: "Please Type Email Address"});
                                    </script>
                                    <span style="color: red;"><?php echo form_error('email_address'); ?></span>
                                </div>
                            </div>
                        
                    <div class="form-group col-sm-10">
                        <div id="error_msg">
                            
                        </div>
                    </div>
                        

                    <div class="form-group col-sm-10">
                        <input type="text" name="backend_message_subject" id="backend_message_subject" oninput="saveMessage()" class="form-control" value=""  placeholder="Please Type subject">
                    </div>

                    <div class="form-group col-sm-10">
                        <div class="input-group " id="screen1280" >
                            <center><textarea name="backend_message_body" id="backend_message_body"  class="form-control  resoulation1280 " rows="4"   ></textarea></center>
                        </div>

                        <div class="input-group" id="screen1024" >
                            <center> <textarea name="backend_message_body" id="backend_message_body"   class="form-control  resoulation1024 " rows="4"   ></textarea> </center>
                        </div>
                        <div class="input-group" id="screenMobile" >
                            <center> <textarea name="backend_message_body" id="backend_message_body"  class="form-control  resoulationMobile " rows="4"   ></textarea></center>
                        </div>

                        <div class="input-group " id="screenMobile_max499" >
                            <center> <textarea  name="backend_message_body" id="backend_message_body" class="form-control  resoulationMobile_max499 " rows="4"   ></textarea> </center>
                        </div>
                    </div>

                </div>
      
        
       

       
       
        <div class="form-group col-sm-10  col-sm-offset-1 text-left" id="upload_done_all" style="display: none;" >
            &nbsp;            
          
        </div>


                <div class="form-group col-sm-10">


                    <div class="form-group col-sm-5" style="margin-left: 95px;">
                        <div id="image_field">
                            <script>
                                $(":file").filestyle({icon: false});</script>
                            <input type="file" class="filestyle" data-icon="false"   tabindex="-1"    onchange="getmessageFileName(this);" id="message_files" 
                       title="Upload File"value=""  >
                            <input 
                    name="message_files_name"   
                    id="message_files_name" 
                    type="hidden"
                    value="">
                            
                        </div>
                        <div id="image" style="float:left;width: 150px; height: 50px;" > </div>

                    </div>
                    
                    <div class="form-group col-sm-4 text-right">
                         <a href="#"><i  onclick="" class="fa fa-times fa-2x" title="Cancel"></i></a>
                         &nbsp;&nbsp;&nbsp;
                        <a href="#"><i  onclick="" class="fa fa-send fa-2x" title="Send Message"></i></a>
                    </div>
                    <div  id="file_error" style="color: red;" class="form-group  col-sm-12 text-left ">

                   </div>
                </div>
           
        </div>
 <!--</form>-->

    </div>
</div>
    </div>
<script>
     $(document.forms['savemessage']).submit(function (event) {
        event.preventDefault();
    });
    

    function savemessage(){
         patt = /^(([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)(\s*,\s*|\s*;\s*|\s*$))*$/;
                if (patt.test(email_address ) == true) {
         documentID("error_msg").innerHTML = "";
         document.forms["savemessage"].submit();
     }
     else{
         documentID("error_msg").innerHTML = "<span style='color:red'>Please enter an valid email address.</span>";
     }
        
    }
   
//     var submit_status=0;
//    function getEmailID()
//    {
//        var xmlhttp3 = false;
//        try {
//            xmlhttp3 = new ActiveXObject("Msxml2.XMLHTTP");
//        } catch (e) {
//
//            try {
//                xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
//            } catch (E) {
//                xmlhttp3 = false;
//            }
//        }
//        if (!xmlhttp3 && typeof XMLHttpRequest != 'undefined') {
//            xmlhttp3 = new XMLHttpRequest();
//        }
//        xmlhttp3.responseText = '';
//        var email_address = documentID('to_address').value;
//        var backend_message_id = documentID('backend_message_id').value;
//
//        //alert(email_address);
//        if (email_address == "")
//        {
//
//        }
//        else {
//            
//            //alert("hello");
//             patt = /^(([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)(\s*,\s*|\s*;\s*|\s*$))*$/;
//                    if (patt.test(email_address ) == true) {
//                        documentID("error_msg").innerHTML = "";
//                         
//            var emailUrl = '<?php //echo base_url().'backend-email-id-send' ?>';
//            var formdata = new FormData();
//            formdata.append("email_address", email_address);
//            formdata.append("backend_message_id", backend_message_id);
//
//            xmlhttp3.addEventListener("load", function () {
//                 //alert(xmlhttp3.responseText);
//                 documentID('backend_message_id').value = xmlhttp3.responseText;
//                
//                 
//            }, false);
//
//            xmlhttp3.addEventListener("error", function () {
//                alert("not email id sent");
//            }, false);
//            xmlhttp3.addEventListener("abort", function () {
//                alert("Aborted");
//            }, false);
//
//            xmlhttp3.open("POST", emailUrl);
//            xmlhttp3.send(formdata);
//        }
//        else{
//             documentID("error_msg").innerHTML = "<span style='color:red'>Please enter an valid email address.</span>";
//        }
//        }
//    }
//
//
//
//    function reloadEmail() {
//     
//        setTimeout(function () {
//
//            if(submit_status==0){
//            getEmailID();
//            reloadEmail();
//        }
//        }, 5000);
//
//      
//
//    }
//   
//    reloadEmail();
//    
//    // get messgaebody
//    
//    function getmessagebodyName() {
//
//        var xmlhttp1 = false;
//        try {
//            xmlhttp1 = new ActiveXObject("Msxml2.XMLHTTP");
//        } catch (e) {
//
//            try {
//                xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
//            } catch (E) {
//                xmlhttp1 = false;
//            }
//        }
//        if (!xmlhttp1 && typeof XMLHttpRequest != 'undefined') {
//            xmlhttp1 = new XMLHttpRequest();
//        }
//        var backend_message_body = documentID('backend_message_subject').value
//        //alert(backend_message_body);
//        
//        var backend_message_id;
//        
//        if (documentID('backend_message_id').value == '') {
//            backend_message_id = '';
//        } else {
//            backend_message_id = documentID('backend_message_id').value;
//        }
//       //alert( backend_message_id);
//
//
//
//        var uploadMessageUrl = '<?php //echo base_url() . 'backend-message-body-send'; ?>';
//        var formdata = new FormData();
//
//        formdata.append("backend_message_subject", backend_message_body);
//
//        formdata.append("backend_message_id", backend_message_id);
//        alert(xmlhttp1.responseText);
//        //formdata.append("message_body", message_body);
//        xmlhttp1.addEventListener("load", function () {
//            alert(xmlhttp1.responseText);
//
//            documentID('backend_message_id').value = xmlhttp1.responseText;
//            //  xmlhttp1.send(null);
//        }, false);
//        xmlhttp1.addEventListener("error", function () {
//            alert("not message sent");
//        }, false);
//        xmlhttp1.addEventListener("abort", function () {
//            alert("Aborted");
//        }, false);
//
//        xmlhttp1.open("POST", uploadMessageUrl);
//        xmlhttp1.send(formdata);
//
//    }
//    var f = 0;
//
//    function saveMessage() {
//       
//        if (f == 0) {
//            reloadPage();
//            f = 1;
//        }
//    }
//    function reloadPage() {
//        setTimeout(function () {
//            if(submit_status==0){
//            getmessagebodyName();
//            reloadPage();
//    }
//        }, 5000);
//
//    }

//
//    //upload file and image video sender profile for draft
    var fileName = '';
    var allowedFileType = "avi webm mp4 3gp 3gpp flv swf gif jpeg jpg png zip rar txt rtf pdf epub azw3 cbr lit mobi docx  xlsx  pub pptx  one  doc  vsdx  accdb  xlsb  mso  rpmsg  asd  xls oft thmx  mdb  xlsm  mpp  obi  pst snp xsn olm  ost dotx vsd  laccdb accdr  wbk  pptm  dot  ppt xlam onepkg  xltx  mde docm pip ppsx ppsm accde  grv  xla  slk  potx  iaf xlt crtx  xlb  vss xar  xlw pps pa oab  dotm  mpd svd ops pot  xlm  mpt  acl  xltm mdt ade xl vst accdc mdw accdt  mat vdx xsf xll sldx mda  mar ppam accda ppa vsx puz prf maf vtx potm  xlc  wll  accdp";
    var file_attached = '';
    var total_size=0;
    var Counter=0;
    var barNum=0;
   
    function getmessageFileName(inputFile)
    {   //alert("hello");
        var file = inputFile.files[0];
        fileName = file.name;

        documentID('message_files_name').value = fileName;
        var message_attachment_original_name = documentID('message_files_name').value;

       var backend_message_id = documentID('backend_message_id').value;

        var fileExtention = fileName.split('.').pop().toLowerCase();
        var n = allowedFileType.search(fileExtention);
        if (n > -1) {
             temp_size=total_size+Number(file.size);
            if ( temp_size < 26214400) {
               
                uploaddocumentFile(inputFile,total_size);
                
              // documentID('upload_done').innerHTML = fileName;
                
                documentID('file_error').innerHTML = '';
                total_size= temp_size;
            } else {
                documentID('file_error').innerHTML = 'File size must less then 25 Mb';
                documentID('file_name').value = '';
                documentID('message_files').value = '';
            }
        }
        else{
                documentID('file_error').innerHTML = 'File type is not Matched. Please browse another file type.';
                documentID('file_name').value = '';
                documentID('message_files').value = '';
        }


        //upload image progress bar work
        function uploaddocumentFile(inputFile,total_size) {
            var xmlhttp2 = false;
            try {
                xmlhttp2 = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {

                try {
                    xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    xmlhttp2 = false;
                }
            }
            if (!xmlhttp2 && typeof XMLHttpRequest != 'undefined') {
                xmlhttp2 = new XMLHttpRequest();
            }
            var uploadAssignmentFileUrl = '<?php echo base_url(); ?>' +'save-message-file-backend';
         

            var file = inputFile.files[0];
         


            file_attached = file;
            if (file) {
             
                var formdata = new FormData();
                formdata.append("message_files", file);
                formdata.append("backend_message_id", backend_message_id);
                formdata.append("total_size",total_size);
                formdata.append("message_attachment_original_name", message_attachment_original_name);

           

                   xmlhttp2.upload.addEventListener("progress", function (event) {
                   
                    documentID("upload_done_all").setAttribute('style', 'display:block');
                   var cross_flag= documentID("cross_flag").value;
                    if(cross_flag == 1){
                    var parent = document.getElementById("upload_done_all");
                    var div1 = document.createElement('div');
                    div1.setAttribute('id', 'prog' + Counter);
                    parent.appendChild(div1);
                    documentID("prog" + Counter).setAttribute('style', 'display:none');
                 
                    var data1 = "<div id='progressBar"+Counter+"' class='progress-bar progress-bar-success progress-bar-striped'  role='progressbar' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100' style=''></div>";
                    div1.innerHTML = data1;
                     documentID("prog" + Counter).setAttribute('style', 'display:block');
                     documentID("prog" + Counter).setAttribute('style', 'height:5px ; width: 50%;');
                     
                    var percent = (event.loaded / event.total) * 100;
                    documentID("progressBar"+ Counter).setAttribute('style', 'width:' + Math.round(percent) + '%');
                   
                         }
                         else if(cross_flag == 0){
                             xmlhttp2.abort();
                              
                         }
                      
                        
        }, false);

                xmlhttp2.addEventListener("load", function () {
                 //alert(xmlhttp2.responseText);
                   if(xmlhttp2.responseText=="null"){
                       documentID('file_error').innerHTML="Your file is empty.Please try another."
                   }
                    else{ var str= xmlhttp2.responseText;
                   
                      var split_word=str.split(",") ; 
                     
                    documentID("backend_message_id").value = split_word[0];
                    //alert(split_word[3]);
                    documentID("uploading_status").value= 1;
                    var parent = document.getElementById('upload_done_all');
                    var div1 = document.createElement('div');
                    div1.setAttribute('id', 'upload' + Counter);
                    parent.appendChild(div1);
                    var data1 = "<input type='hidden' name='hidden_uploaded_file_path' id='hidden_uploaded_file_path"+Counter+"' value=''><input type='hidden' name='message_attachmen_id' id='message_attachmen_id"+Counter+"' value=''>";
                        
                    div1.innerHTML = data1 + split_word[3]+"  <a href='javascript:;' onclick='uploadCancel("+Counter+"); '><i class='fa fa-times-circle ' id='cross'></i></a>";
                 
                    documentID("message_attachmen_id"+Counter).value=split_word[1];
                    documentID("hidden_uploaded_file_path"+Counter).value = split_word[2];
                    
                    Counter++;
                    
                         }
                }, false); 
                xmlhttp2.addEventListener("error", function () {
                    documentID("progressbar").innerHTML = "Upload Failed";
                }, false);
                xmlhttp2.addEventListener("abort", function () {
                    documentID("progressbar").innerHTML = "Upload Aborted";
                }, false);


           

                xmlhttp2.open("POST", uploadAssignmentFileUrl);
                xmlhttp2.send(formdata);


            }
        }


    }
  
    function uploadCancel(fileNumber){
     
        var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
          var backend_message_id= documentID('backend_message_id').value; 
       
        var hidden_uploaded_file_path= documentID('hidden_uploaded_file_path'+fileNumber).value;
       
      
        var message_attachmen_id= documentID('message_attachmen_id'+fileNumber).value;
        var uploading_status= documentID('uploading_status').value;
           //alert(message_attachmen_id);
        if(uploading_status ==1){
        var url='<?php echo base_url(); ?>' +'cancel-backened-upload';
            //alert(message_id);
           //alert( hidden_uploaded_file_path); 
           
            var formdata = new FormData();
            formdata.append("hidden_uploaded_file_path", hidden_uploaded_file_path);
            formdata.append("backend_message_id", backend_message_id);
            formdata.append("message_attachmen_id", message_attachmen_id);
        }
        else{
             documentID('cross_flag').value = 0;
             documentID('uploading_status').value=0;
             
             
         
            
        }
        
        xmlhttp4.addEventListener("load", function () {

            
            documentID('upload'+fileNumber).innerHTML ='';
            
            
            documentID("prog"+fileNumber).setAttribute('style', 'display:none'); 
           
            documentID('cross_flag').value = 1;
             
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;

   
    }
//    function submit()
//    {
//        var xmlhttp = false;
//        try {
//            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//        } catch (e) {
//            try {
//                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//            } catch (E) {
//                xmlhttp = false;
//            }
//        }
//        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
//            xmlhttp = new XMLHttpRequest();
//        }
//        
//        var url = "msg/sent";
//
//        var email_address = documentID('to_address').value;
//        var message_id = documentID('message_id').value;
//       
//        //var message_attachment_original_name = documentID('message_files_name').value;
//
//
//
//        var message_body = documentID('message_body').value;
//       // var hidden_uploaded_file_path = documentID('hidden_uploaded_file_path').value;
//       // alert(hidden_uploaded_file_path);
//        if (message_body == "" || email_address == "")
//        {
//            if (email_address == "")
//                documentID('error').innerHTML = "please enter an email address";
//            else if (message_body == "")
//            {
//                documentID('error').innerHTML = "message body can not be empty";
//            }
//        }else {
//submit_status=1;
//
//            var formdata = new FormData();
//
//            formdata.append("email_address", email_address);
//            formdata.append("message_body", message_body);
//            formdata.append("message_id", message_id);
//            
//          
//            //formdata.append("hidden_uploaded_file_path", hidden_uploaded_file_path);
//            
//           // formdata.append("message_attachment_original_name", message_attachment_original_name);
//            
//
//            xmlhttp.addEventListener("load", function () {
//                 //alert(xmlhttp.responseText);
//
//
//                if (xmlhttp.responseText == '2')
//                {
//
//                    documentID('error_msg').innerHTML = "Please Enter Email Address From Your Link";
////                  
//                }
//
//                else
//                {
//                
//                
//                                       
//                    if (xmlhttp.responseText == '1') {
//                     window.location.href = '<?php// echo base_url(); ?>' + 'sent-message';
//
//                    }
//                    
//
//                }
//
//             
//            }, false);
//            xmlhttp.addEventListener("error", function () {
//                alert("not sent");
//            }, false);
//            xmlhttp.addEventListener("abort", function () {
//                alert("Aborted");
//            }, false);
//
//            xmlhttp.open("POST", url);
//            xmlhttp.send(formdata);
//
//            return true;
//
//
//        }
//    }
//    function  clear_error()
//    {
//        documentID('error').innerHTML = " ";
//    }
//

</script>
