@extends('adminlte::page')
<script src="//code.jquery.com/jquery.js"></script>
@section('content')

 
  @if ($errors->any())
    <div class="alert alert-danger">
      <ul>
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif
            
  @if (session('status'))
    <div class="alert alert-success">
      {{ session('status') }}
    </div>
  @endif
            
  @if (session('status1'))
    <div class="alert alert-danger">
      {{ session('status1') }}
    </div>
  @endif   

<div class="row tapalmail">
        <div class="col-md-2 pad_0 mail-sidebox">
          

          <div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Folders</h3>

              <div class="box-tools">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="box-body no-padding">
              <ul class="nav nav-pills nav-stacked">
               <li class="active"><a href="inbox"><i class="fa fa-ticket "></i> Inward {{request()->session()->get('session_tname')}}
                  <span class="label label-primary pull-right">{{$tapalinboxcount}}</span></a></li>

                <li class="active"><a href="fileinbox"><i class="fa fa-ticket "></i> Inward {{request()->session()->get('session_fname')}}s
                  <span class="label label-primary pull-right">{{$fileinboxcount}}</span></a></li>
               
                 <li class="active"><a href="outbox"><i class="fa fa-ticket "></i> Sent {{request()->session()->get('session_tname')}}
                  <span class="label label-primary pull-right">{{$tapaloutboxcount}}</span></a></li>
                  
                <li class="active"><a href="fileoutbox"><i class="fa fa-ticket "></i> Sent {{request()->session()->get('session_fname')}}s
                  <span class="label label-primary pull-right">{{$fileoutboxcount}}</span></a></li>

                
              </ul>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
          <div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Icons</h3>

              <div class="box-tools">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="box-body no-padding">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#"><i class="fa fa-bookmark text-red"></i> Immediate</a></li>
                <li><a href="#"><i class="fa  fa-bookmark text-yellow"></i> Urgent</a></li>
                <li><a href="#"><i class="fa  fa fa-bookmark-o"></i> Normal</a></li>
            <li><a href="#"><i class="fa fa-fw  fa-eye-slash text-red"></i> Confidential</a></li>
              <li><a href="#"><i class="fa fa-star text-yellow"></i>Has Valuables</a></li>
        
        
              </ul>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <div class="col-md-10 pad_0 mail-search ">
          <div class="box box-primary mb-0">
            <div class="box-header with-border">
              <h3 class="box-title">Closed {{request()->session()->get('session_tname')}}</h3>

              <div class="box-tools pull-right">
                <div class="has-feedback">
                  <div class="pull-right">
                  1-50/200
                  <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i></button>
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-right"></i></button>
                  </div>
                  <!-- /.btn-group -->
                </div>
                </div>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding  min70">
              
              <div class="table-responsive mailbox-messages">
                <table class="table table-hover table-striped" id="tapal_forward">
                  <tbody>
                  <tr>

                  </tr>
                

                  </tbody>
                </table>
                <!-- /.table -->
              </div>
              <!-- /.mail-box-messages -->
            </div>
            <!-- /.box-body -->
           
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
  </div>


<!-- /.new modal tapal view -->
  <div id="modaltapalview" class="cd-panel cd-panel--from-right js-cd-panel-main">
    <header class="cd-panel__header">
      <div class="mailbox-read-info" >
                <h3 id="tapalno"></h3>
               
              </div>
      <a href="#0" class="cd-panel__close js-cd-close">Close</a>
    </header>

    <div class="cd-panel__container">
      <div class="cd-panel__content">
      
      <input type="hidden" name="active_flag" id="active_flag" value="">
             <input type='hidden' name='file_id' id='file_id' value=''>
             <input type='hidden' name='user_comment_flag' id='user_comment_flag' value=''>
             <input type="hidden" name="read_flag" id="read_flag" value="">
             <input type="hidden" name="enablecapture" id="enablecapture" value="">
             <input type="hidden" name="status" id="status" value="">
                
      <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title" id="internal_external" ></h3>

              <div class="box-tools">
              
                     
          
              </div>
            </div>

            <form class="form-horizontal" action="{{ url('reopentapal') }}" method="post" enctype="multipart/form-data" id="theform">
                             <!-- CSRF Token -->
              <input type="hidden" name="_token" value="{{csrf_token()}}">
              <input type="hidden" name="creation_of_tapal" id="creation_of_tapal" value="">
                  <div class="form-position">
                  <div class="col-md-12 text-right" id="reopendiv">
                  <button type="submit" class="btn btn-responsive btn-success btn-sm">Re-Open</button>
                  </div>
                  </div>
              </form>
                        <!-- /.box-header -->
            <div class="box-body no-padding">
              <div class="mailbox-read-info" >
                <h3 id="title"></h3>
        <div class="row">
        
                               
                <div class="col-md-12" ><label>Forwarded By: </label> <span id="forwardedby">&nbsp;&nbsp;</span> <span class="mailbox-read-time " id="forwardedon"></span><br>
                <label >Created  By:</label><span id="createdby"></span>&nbsp;&nbsp;<span class="mailbox-read-time" id="createdat"></span><br>
                <label >Closed  By:</label><span id="closedby"></span>&nbsp;&nbsp;<span class="mailbox-read-time" id="closedat"></span>
                </div>
                
                <div class="col-md-6"></div>
                              </div>
                <div class="row tapal_details">
                 <!-- /.col -->
                
             
                <div class="col-sm-5 col-xs-8">
                  <div class="description-block border-right">
                    <span class="description-percentage text-yellow"><i class="fa fa-book"></i></span>
                    <h5 class="description-header">Subject</h5>
                    <span class="description-text" id="subject"></span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa  fa-tag"></i></span>
                    <h5 class="description-header">Mode of Receipt</h5>
                    <span class="description-text" id="mode"> </span>
                  </div>
                  <!-- /.description-block -->
                </div>
               
           <div class="col-sm-2 col-xs-6">
                  <div class="description-block ">
                    <span class="description-percentage"><i class="fa  fa fa-bookmark-o"></i></span>
                    <h5 class="description-header">Priority</h5>
                    <span class="description-text" id="priority"></span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
              </div>
              
                             
                
              
        
              </div>
        </div>
        <!-- /.move to inbox and capture button -->
  

        <div class="box-body">
             <b>Attachment</b>
              <!-- /.mailbox-read-info -->
              <div class="mailbox-controls with-border">
               <ul class="mailbox-attachments clearfix" id="attachment">
                
              </ul>
             
              </div>

              

              <!-- /.mailbox-controls -->
              <div class="mailbox-read-message">
                <p id="description"></p>
              </div>
              <!-- /.mailbox-read-message -->
        </div>

        
            <!-- /.box-body -->
      
      <label>Comments</label>
      <div class="box-footer box-comments" style="" id="comment">              
              <!-- /.-comments -->
      </div>
     
      <label>Actions</label>
      <div class="box-footer box-comments" style="" id="action">             
              <!-- /.action -->
      </div>
            <!-- /.box-footer -->
           
            <!-- /.box-footer -->
          </div>
      
      </div> <!-- cd-panel__content -->
    </div> <!-- cd-panel__container -->

 </div>


<style type="text/css">
    

  .spacing-table{ border-spacing: 0 5px!important;    border: 0px!important;  }
  .spacing-table td {    background: #fff;cursor: pointer;
    
    padding: 5px;
    border-radius: 5px;
 
   background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 5px rgb(51, 51, 51);
    box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
  
border: 1px solid #2673a3 !important;
    border-bottom-color: #C14646 !important;
}
.table-hover>tbody>tr:hover td {
   background-color: #edf6fb;
}
.fromspan{color: #5e819d;
    font-size: 13px;}

.greenspan{color: #007f00;
    font-size: 13px;}

.redspan{color: #EA1F09;
    font-size: 13px;}
  


</style>
<script>

$(function() {

    $('#tapal_forward').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('closedinboxjson') !!}',
        
        
               'columnDefs': [{
               'targets': 0,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-center',
               'render': function (data, type, full, meta){

                if(full.priority == 'Immediate')
                   return "<i class='fa fa-bookmark text-red' style='font-size: 12.6px;'></i>";
                else if(full.priority == 'Urgent')
                   return "<i class='fa fa-bookmark text-yellow' style='font-size: 12.6px;'></i>";
                else if(full.priority == 'Normal')
                   return "<i class='fa  fa fa-bookmark-o' style='font-size: 12.6px;'></i>";
                else
                   return "";
               }
            },
            {
               'targets': 1,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-left',
               'render': function (data, type, full, meta){
                if(full.confidential)
                   return "<i class='fa fa-fw  fa-eye-slash text-red' style='font-size: 12.6px;'></i>";
                else if(full.valuables)
                   return "<i class='fa fa-star text-yellow' style='font-size: 12.6px;'></i>";
                else
                   return "";
               }
            },
            {
               'targets': 2,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-left',
               'render': function (data, type, full, meta){
                   return "<span class='round' style='font-size: 12.6px;'>T</span><div class='search_list'><a href='#0' onClick='tapal_view("+full.tapalid+")' class='search-item js-cd-panel-trigger' data-panel='main'>Tapal No:<b>"+full.tapal_no+"</b><span class='label label-tags pull-right' style='font-size: 12.6px;'><b>"+full.subject_group+"</b></span></a><span class='search-description ' style='font-size: 12.6px;'> "+full.title+" </span></div></i>";
               }
            },
            {
               'targets': 3,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-left',
               'render': function (data, type, full, meta){

                   return "<a class='mail-forwarded'><i class='fa fa-fw fa-mail-forward' aria-hidden='true'></i>"+full.from_seat+"<span class='date_generated pull-right' style='font-size: 12.6px;'>"+full.forwardedon+"</span></a><a class='mail-creater'><i class='fa fa-fw fa-plus-circle'></i>"+full.createdby+"<span class='date_generated pull-right' style='font-size: 12.6px; '> "+full.created_at+"</span></a><a class='mail-creater'><i class='fa fa-fw fa-minus-circle'></i> Closed By : "+full.closedbyuser+"<span class='date_generated pull-right' style='font-size: 12.6px; '> "+full.closed_date+"</span></a>";

               }
            },

            {
               'targets': 4,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-left',
               'render': function (data, type, full, meta){
                   return "<div class='mail_btns'>&nbsp;<a href='#AttachmentModal' data-toggle='modal' data-target='#AttachmentModal' onClick='getAttachmenttype("+full.tapalid+")' class='btn btn-default btn-xs  margin-r-5' data-toggle='tooltip' data-container='body' title='Attachments' data-original-title='Attachments'><i class='fa fa-paperclip margin-r-5'></i>"+full.tapalattachmentcount+"</a><a href='#ActionModal' data-toggle='modal' data-target='#ActionModal' onClick='getActiontype("+full.tapalid+")' class='btn btn-default btn-xs pull-left margin-r-5' data-toggle='tooltip' data-container='body' title='Actions' data-original-title='Actions'><i class='fa fa-legal margin-r-5'></i>"+full.tapalactioncount+"</a><a href='#CommentModal ' data-toggle='modal' data-target='#CommentModal' onClick='getMessage("+full.tapalid+")' class='btn btn-default btn-xs pull-left margin-r-5' data-toggle='tooltip' data-container='body' title='Comments' data-original-title='Comments'><i class='fa fa-comments-o margin-r-5'></i>"+full.tapalcommentcount+"</a></div>";
               }
            },

            

            ],

            "fnDrawCallback": function (oSettings) {
          //alert( 'DataTables has redrawn the table' );
          paneltriggerfn();
          }
    });
});

</script>

<script>
function tapal_view(id)
{
  //alert(id);
 
  document.getElementById("creation_of_tapal").value=id;
  $.ajax({

    type:'GET',
    url:"closedmodaltapalview/"+id+"",

    success:function(data)
    {

        //creation_of_tapal
        document.getElementById("tapalno").innerHTML=data['tapal_no'];
        document.getElementById("internal_external").innerHTML=data['internal_external']; 
        document.getElementById("title").innerHTML=data['title'];
        document.getElementById("forwardedby").innerHTML=data['from_seat'];
        document.getElementById("forwardedon").innerHTML=data['created_at'];
        document.getElementById("createdby").innerHTML=data['name'];
        document.getElementById("createdat").innerHTML=data['created_at'];
        document.getElementById("closedby").innerHTML=data['closedbyuser'];
        document.getElementById("closedat").innerHTML=data['closed_date'];
        document.getElementById("subject").innerHTML=data['subject'];
        document.getElementById("mode").innerHTML=data['mode_of_receipt'];
        document.getElementById("priority").innerHTML=data['priority'];
        document.getElementById("description").innerHTML=data['tapal_description'];       
        document.getElementById("attachment").innerHTML=data['document_path'];
        document.getElementById("comment").innerHTML=data['comment_description'];
        document.getElementById("action").innerHTML=data['action_description'];
        //document.getElementById("creation_of_comment").value=data['id'];

        //document.getElementById("creation_of_attachment").value=data['id'];

        //document.getElementById("creation_of_action").value=data['id'];
        
        document.getElementById("active_flag").value=data['active_flag'];
        document.getElementById("read_flag").value=data['read_flag'];
        document.getElementById("enablecapture").value=data['enablecapture'];
        document.getElementById("status").value=data['status'];
        document.getElementById("file_id").value=data['file_id'];
        document.getElementById("user_comment_flag").value=data['user_comment_flag'];
        
        document.getElementById("reopendiv").style.display = "block";  
        
        if((data['active_flag']==1) && (data['read_flag']==0))
        {
            document.getElementById('movetoinbox').style.display="block";
        }
        else
        {
            //document.getElementById('movetoinbox').style.display="none";
        }

        if((data['active_flag']==0) && (data['enablecapture']==1) && (data['status']==0))
        {
            document.getElementById('capturetapal').style.display="block";
        }
        else
        {
            document.getElementById('capturetapal').style.display="none";
        }

    }
  });

}
</script>


<!--History Modal-->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">      </script>
<script>
function getHistory(id)
{
  document.historymodalform.creation_of_tapal.value=id;
  $.ajax({

    type:'GET',
    url:"gethistory/"+id+"",

    success:function(data)
    {

        $("#historydiv").html(data); 
                  
    }
  });

}
</script>
<div class="modal fade" id="HistoryModal" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 800px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">History</h4>
            </div>
                <form class="form-horizontal" name="historymodalform" action="{{ url('tapal_viewhistory') }}" method="post" enctype="multipart/form-data" id="form">
                    <!-- CSRF Token -->
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="creation_of_tapal" id="creation_of_tapal" value="">
                    <div class="form-group"></div>
                </form>
            
            <div class="modal-body">
                <div class="box-body" id="msg">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">
                     <div id="historydiv"></div>
                 <!--box body close-->               
                </div>             
                <!--modal body close-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                    
            </div>
            <!--panel body close-->
        </div>
    </div>
</div>
<!-- end history modal -->
<!--  Comment Modal -->
<!--tapal comment-->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
<script>
  function puttapalno(id){
          document.forwardform.creation_of_tapal_id.value=id;
            }
         function getMessage(id){
            //alert("clicked"+id);
            document.getElementById("creation_of_tapalcomment").value=id;
            //document.getElementById("comment_id").value=id;
            $.ajax({

               type:'GET',
               url: "getcomment/"+id+"",
               success:function(data){
               // alert(data);
                  $("#commentdiv").html(data);                
               }
            });

         }


      </script>
<div class="modal fade" id="CommentModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Comments</h4>
            </div>

        <div class="panel-body">

          

            <div class="modal-body">
                <div class="box-body" id="msg">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">
                     <input type="hidden" name="creation_of_tapalcomment" id="creation_of_tapalcomment" value="">


                            <div id="commentdiv"></div>

                 <!--box body close-->               
                </div>
             
                <!--modal body close-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    
            </div>
            <!--panel body close-->
            </div>
        </div>
    </div>
</div>

<!--action-->

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
<script>
         function getActiontype(id){
            $.ajax({

               type:'GET',
               url:"getaction/"+id+"",
               
               success:function(data){
                  $("#actiondiv").html(data);                
               }
            });

         }


      </script>

<div class="modal fade" id="ActionModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Actions</h4>
            </div>

        <div class="panel-body">

          

            <div class="modal-body">
                <div class="box-body" id="msg">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">


                            <div id="actiondiv"></div>

                 <!--box body close-->               
                </div>
             
                <!--modal body close-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    
            </div>
            <!--panel body close-->
            </div>
        </div>
    </div>
</div>




<!--attachment-->

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
<script>
         function getAttachmenttype(id){
           
            $.ajax({

               type:'GET',
               url:"getattachment/"+id+"",
              
               success:function(data){
                  $("#attachmentdiv").html(data);                
               }
            });

         }


      </script>
      <script>
    function showdocument(path)
    {
        //alert("htuytu")
        document.getElementById("documentframe").src="../../storage/app/"+path;
        document.getElementById("documentframe").style.display="block";
    }
</script>

<div class="modal fade" id="AttachmentModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Attachments</h4>
            </div>

        <div class="panel-body">

            

            <div class="modal-body">
                <div class="box-body" id="msg">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">


                            <div id="attachmentdiv"></div>
                            <div class="col-md-10" align="center">
                           <iframe src="" id="documentframe" width="300" height="400" style="display: none;"></iframe>
                        </div>

                 <!--box body close-->               
                </div>
             
                <!--modal body close-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    
            </div>
            <!--panel body close-->
            </div>
        </div>
    </div>
</div>

<script>
function paneltriggerfn() {
(function(){

    // Slide In Panel - by CodyHouse.co
  var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
  //alert(panelTriggers.length);
  if( panelTriggers.length > 0 ) {
    for(var i = 0; i < panelTriggers.length; i++) {
      (function(i){
        var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
          panel = document.getElementsByClassName(panelClass)[0];
          //alert(panel);
        // open panel when clicking on trigger btn
        panelTriggers[i].addEventListener('click', function(event){
          
          event.preventDefault();
          addClass(panel, 'cd-panel--is-visible');
        });
        //close panel when clicking on 'x' or outside the panel
        panel.addEventListener('click', function(event){
          if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
            event.preventDefault();
            removeClass(panel, 'cd-panel--is-visible');
          }
        });
      })(i);
    }
  }
  
  //class manipulations - needed if classList is not supported
  //https://jaketrent.com/post/addremove-classes-raw-javascript/
  function hasClass(el, className) {
      if (el.classList) return el.classList.contains(className);
      else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
  }
  function addClass(el, className) {
    if (el.classList) el.classList.add(className);
    else if (!hasClass(el, className)) el.className += " " + className;
  }
  function removeClass(el, className) {
      if (el.classList) el.classList.remove(className);
      else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className=el.className.replace(reg, ' ');
      }
  }
})();
}
</script>



@stop