@extends('layouts.master')
@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-12 d-flex no-block align-items-center">
            <h4 class="page-title"></h4>
            <div class="ml-auto text-right">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item"><a href="#"></a>Filter Domain</li>
                        <li class="breadcrumb-item active" aria-current="page"></li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        
            <div class="container-fluid container-block">
                <label class="text">Date</label>
                <br>
                <input type="text" class="data"  name="daterange" id="date_pick" />
            </div>
        
        <div class="container-fluid container-block">
            <label class="text">Published </label>
            <br>
            <i class="fas fa-circle" style="color: cyan;"></i><span class="text-light" id="publish">0</span>
        </div>
        <div class="container-fluid container-block">
            <label class="text">Pending </label>
            <br>
            <i class="fas fa-circle" style="color: fuchsia;"></i><span id="pending" class="text-light"> 0</span>
        </div>
        <div class="container-fluid container-block">
            <label class="text">Sent </label>
            <br>
            <i class="fas fa-circle" style="color: aquamarine;"></i><span id="sent" class="text-light"> 0</span>
        </div>
        <div class="container-fluid container-block">
            <label class="text">Opened </label>
            <br>
            <i class="fas fa-circle" style="color: cornsilk;"></i><span id="open" class="text-light"> 0</span>
        </div>
        <div class="container-fluid container-block">
            <label class="text">Bounces </label>
            <br>
            <i class="fas fa-circle" style="color: coral;"></i><span id="bounce" class="text-light"> 0</span>
        </div>
    </nav>
    <!-- <div class="container-fluid"> -->
    <div class="card">
        <div class="container-fluid">
            <div class="col-md-12 mt-3" style="display: flex;">
                <div class="row" style="width: 40%; ">
                    <label>Breakdown By</label>
                    <select name="domain" class="required form-control">
                        <option value="1">Sending Domain</option>
                   
                    </select>
                </div>
                <!-- <div class="row" style="width: 30%; text-align:right;">
                    <label>Data Source</label>
                    <select name="domain" class="required form-control">
                        <option hideen>All</option>
    
                    </select>
    
                </div> -->
            </div>
            <div id="myTable">
             <table class="table mt-4">
                <thead>
                    <tr>
                        <th scope="col"> Domains</th>
                        <th scope="col">Sent</th>
                        <th scope="col">Confirmed </th>
                        <th scope="col">Accepted</th>
                        <th scope="col">Bounces</th>

                    </tr>
                </thead>
                <tbody>
                   
                    <tr>    
                        <td class="domain">Domain</td>
                        <td class="sent_count">0</td>
                        <td class="confrom_count">0</td>
                        <td class="accepted_count">0</td>
                        <td class="bounce_count">0</td>                        
                
                </tbody>
            </table>
            </div>
        </div>
        
        
    </div>


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

@endsection
@section('script')
 <script>

    $(document).ready( function(){
               //Date Picker JS
       
        $('input[name="daterange"]').daterangepicker({
                opens: 'center',
                format: 'YYYY/MM/DD',
            }, function (start, end, label) {
                console.log("A new date selection was made: " + start.format('MM-DD-YYYY') + ' to ' + end.format('MM-DD-YYYY'));
        });
      domainLoad();
    });

    $('#date_pick').on('change' ,function(){
         domainLoad();
    

    });

    function domainLoad(){
            // e.preventDefault();
            $.ajax({
                type: "POST",
                url: "{{ url('/date')}}",
                
                data :{
                    "_token": "{{ csrf_token() }}",
                    "daterange" : $('input[name="daterange"]').val(),
                  
                },
                success: (response) => {
                   console.log(response);
                   if(response.status == 200){

                    var response = response.data;
                   

                    $('#publish').text(response.total_mail_count);
                    $('#sent').text(response.total_sent_mail);
                    $('#bounce').text(response.total_bounce);
                    $('#pending').text(response.total_pending);

                    //console.log(response.publish_domain);
                    if(response.publish_domain != ""){
                     addTable(response.publish_domain, ['Domains','Sent','Confirmed','Accepted','Bounces']);


                    }
                   
                    if(response.publish_domain.length == 0){
                      const publish_domain = [{domain_name: 0,
total_bounce: 0,
total_mail_count: 0,
total_pending: 0,
total_sent_mail:0}] 

                     addTable(publish_domain, ['Domains','Sent','Confirmed','Accepted','Bounces']);

                    }
                    else{

                    }
 

                }

                },
                error: function (response) {
                    console.log(response);
                }

            });

    }
    function addTable(data, headers) {

  var myTableDiv = document.getElementById("myTable");
  myTableDiv.innerHTML = "";

  var table = document.createElement('TABLE');
  //table.border = '1';
   table.className += "table mt-4";
   //table = $this.addClass('table mt-4');

  var tableHeader = document.createElement('THEAD');
  table.appendChild(tableHeader);

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var n = data.length;
  var m = headers.length;
  var thKeys;
  if (n > 0) {
    thKeys = Object.keys(data[0]);
  }

  var tr = document.createElement('TR');
  tableBody.appendChild(tr);

  for (var j = 0; j < m; j++) {
    var td = document.createElement('TD');
    td.width = '75';
    td.innerText = thKeys[j];
    tr.appendChild(td);
  }


  for (var i = 0; i < n; i++) {
    tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var j = 0; j < m; j++) {
      var td = document.createElement('TD');
      td.width = '75';
      td.innerText = data[i][thKeys[j].toLowerCase()];
      tr.appendChild(td);
    }
  }

  myTableDiv.appendChild(table);

}
 </script>
@endsection