@extends('layouts.app')
@section('title')Email List  @endsection
@section('content')
<script src="https://code.jquery.com/jquery-3.5.1.js"> </script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<style>
    div.dataTables_wrapper div.dataTables_processing {
        height: 59px !important;
    }
   .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: white !important;
        border: 1px solid #fff!important;
        background-color: #fff!important;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff))!important;
        background: -webkit-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -moz-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -ms-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -o-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: linear-gradient(to bottom, #fff 0%, #fff 100%)!important;
        
        
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button{
        padding: 0.5em 1mm !important;
    }
  
    .table-hover>tbody>tr:hover {
        background-color: #f5f5f5 !important;
    }
    
    .table-bordered {
        border: 1px solid #ddd !important;
    }
    
    thead {
        display: table-header-group !important;
        vertical-align: middle !important;
        border-color: inherit !important;
    }
    
    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }


    table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }
    
    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border-bottom-width: 2px !important;
    }
    .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border: 1px solid #ddd !important;
    }
    .table>thead>tr>th {
        vertical-align: bottom !important;
        border-bottom: 2px solid #ddd !important;
    }
    
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143 !important;
        vertical-align: top !important;
        border-top: 1px solid #ddd !important;
    }


    * {
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }
    .table * {
        font-size: 16px !important;
    }
    
    .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border: 1px solid #ddd !important;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143 !important;
        vertical-align: top !important;
        border-top: 1px solid #ddd !important;
    }
    
    .sweet-alert button.cancel {
        background-color: #ff0000 !important;
    }

</style>
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4" style="padding-right: 30px;">
         </div> 
 </div>

   
<section class="content">
    <div class="row">
        <div class="col-xs-12">
      @include('layouts.flesh-message')
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">All Flag List</h3>
                   
                </div>
        <!-- /.box-header -->
        <div class="box-body">
            
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Received Flag</a></li>
                <li><a data-toggle="tab" href="#tab2">Sent Flag</a></li>
            </ul>
            
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade in active">
                    <h3>Received Flag</h3>
                    <button type="button" class="top-btn btn btn-primary" id="read_all" onclick="read_all();" style="margin-top: -1%;margin-bottom: 2%;"><i class="fa fa-plus"></i>Mark Read All</button>
                    <button type="button" class="top-btn btn btn-primary" id="delete_all" onclick="delete_all();" style="margin-top: -1%;margin-bottom: 2%;"><i class="fa fa-plus"></i>Delete All</button>
                     <table id="example2" class="table table-bordered table-hover" style="width: 100%;">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="selectall" name="selectAll" onclick="selectAll('selectall','cus');"></th>
                                <th>Client</th>
                                <th>Sent By</th>
                                <th>Sent To</th>
                                <th>Client Name</th>
                                <th>Description</th>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="tab2" class="tab-pane fade">
                  <h3>Sent Flag</h3>
                  <button type="button" class="top-btn btn btn-primary" id="delete_all1" onclick="delete_all();" style="margin-top: -1%;margin-bottom: 2%;"><i class="fa fa-plus"></i>Delete All</button>
                    <table id="example3" class="table table-bordered table-hover" style="width: 100%;">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="selectall1" name="selectAll" onclick="selectAll1('selectall1','cus1');"></th>
                                <th>Client</th>
                                <th>Sent By</th>
                                <th>Sent To</th>
                                <th>Client Name</th>
                                <th>Description</th>
                                <th>Date</th>
                                <th>Read Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
  </section>      
<script src="{{ asset('js/agentemail.js') }}"></script>
<script src="{{ asset('js/jquery.blockui.min.js') }}"></script>
<script src="{{ asset('js/custom_function.js?v=') }}1780413922"></script>

<script>
$(document).ready(function() {
    get_record();
    $('#delete_all').hide();
    $('#read_all').hide()
     $('#delete_all1').hide();
} );
function get_record(){
    var token = $("input[name=_token]").val();
    var Auth =