@extends ('backend.layouts.app')

@section ('title', trans('labels.backend.mailers.management'))

@section('page-header')
    <h1>{{ trans('labels.backend.mailers.management') }}</h1>
@endsection

@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">{{ trans('labels.backend.mailers.management') }}</h3>

            <div class="box-tools pull-right">
                @include('backend.mailers.partials.mailers-header-buttons')
            </div>
        </div><!--box-header with-border-->

        <div class="box-body">
             <div class="panel-heading">
     <div class="row">
      <div class="col-md-2">Total Records - <b><span id="total_records"></span></b></div>
      <div class="col-md-5">
       <div class="input-group1 input-daterange" style="display: table;">
         <div class="input-group-addon">From</div>
           <input type="text" name="from_date" id="from_date" readonly class="form-control" style="background-color: #ffffff" />
           <div class="input-group-addon">to</div>
           <input type="text"  name="to_date" id="to_date" readonly class="form-control" style="background-color: #ffffff" />
       </div>
      </div>
      <div class="col-md-5">
       <button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Filter</button>
       <button type="button" name="refresh" id="refresh" class="btn btn-warning btn-sm">Refresh</button>
       <input type="button" id="btnExport" onclick="exportTableToExcel('mailers-table', 'reporter_report')" class="btn btn-info btn-sm" value=" Export Table data into Excel " />
      </div>
     </div>
    </div>
            <div class="table-responsive data-table-wrapper">
                <table id="mailers-table" class="table table-condensed table-hover table-bordered">
                    <thead>
                        <tr>
                             <th>Id</th>
                            <th>Subject</th>
                            <th>Sender Name</th>
                            <th>Sales Person</th>
                            <th>Type</th>
                            <th>Created By</th>
                            <th>Create Date</th>
                            <th>Create link</th>

                        </tr>
                    </thead>
                    <thead class="transparent-bg">
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                     <tbody>
              </tbody>
                </table>
            </div><!--table-responsive-->
        </div><!-- /.box-body -->
    </div><!--box-->
@endsection
    @section('after-scripts')
    <script src="{{ mix('js/dataTable.js') }}"></script>




<script>
$(document).ready(function(){
 fetch_data();
 function fetch_data(from_date = '', to_date = '')
 {
    var _token = $('input[name="_token"]').val();
  $.ajax({
    url:"{{ url('admin/mailers/viewfilter') }}",
   type:"post",
   data:{from_date:from_date, to_date:to_date, _token:_token},
   dataType:"json",
   success:function(data)
   {
    //alert(data[0]);
    var output = '';
    $('#total_records').text(data.length);
    for(var count = 0; count < data.length; count++)
    {
     output += '<tr>';
     output += '<td>' + data[count].mailer_id + '</td>';
     output += '<td>' + data[count].subject + '</td>';
     output += '<td>' + data[count].sender_name + '</td>';
     output += '<td>' + data[count].sales_person_name + '</td>';
     output += '<td>' + data[count].type + '</td>';
     output += '<td>' + data[count].create_by + '</td>';
     output += '<td>' + data[count].create_date + '</td>';
      output += '<td><a href="'+ data[count].link + '">' + data[count].link + '"</td></tr>';

    }
    $('tbody').html(output);
    $('#mailers-table').DataTable();
   }
  })
 }

 $('#filter').click(function(){
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  if(from_date != '' &&  to_date != '')
  {
   fetch_data(from_date, to_date);
  }
  else
  {
   alert('Both Date is required');
  }
 });

 $('#refresh').click(function(){
  $('#from_date').val('');
  $('#to_date').val('');
  fetch_data();
 });


});


</script>


@endsection