@extends('admin.layout')
@section('content')
<style>
    /* .name-container {
    padding: 0px;
    background-color: #3c8dbc; 
    border-radius: 5px;
    margin-bottom:23px;
 
} */
.name-container1 {
    padding-top: 20px;
    background-color: #3c8dbc; /* Blue background color */
    border-radius: 5px;
    margin-top:23px
}

.styled-name {
    font-size: 24px;
    color: black; 
    text-transform: uppercase;
}
</style>
<div class="content-wrapper"> 
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1> {{ trans('Survey Reporting') }}</h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <!-- <li class="active">{{ trans('Survey Reporting') }}</li> -->
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="content"> 
    <!-- Info boxes --> 
    <!-- /.row -->
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <!-- <h3 class="box-title">{{ trans('Survey Reporting') }}</h3> -->
          </div>
          
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                @if (count($errors) > 0)
                  @if($errors->any())
                    <div class="alert alert-success alert-dismissible" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      {{$errors->first()}}
                    </div>
                  @endif
                @endif
              </div>
            </div>

                        <form id="form1" method="get" action="{{ url('admin/whatsapp-survey-reporting') }}" enctype="multipart/form-data">
                @csrf
                <div class="box-header" style="margin-left:464px">

                    <div class="col-sm-1 col-md-1">
                        <input type="text" name="from_date" id="from_date" value="{{ $from_date }}" class="form-control" placeholder="Date range" autocomplete="off" required>
                    </div>
                    
                    <button type="submit" class="btn btn-success" name="submit_search" id="submit_search">Search</button>
                    <a href="{{ URL::to('admin/whatsapp-survey-reporting')}}" class="btn btn-danger">{{ trans('Clear') }}</a>
                
                </div>
            </form>

<div class="row" style="margin-top:28px">
        <div class="col-xs-12">
        <input type="hidden" id="hiddenGuru" value="{{ $allMessages->first()->totalMessagesToday }}">
        <input type="hidden" id="hiddenTashan" value="{{ $tashanData->first()->totalMessagesToday }}">
        <input type="hidden" id="hiddenBoss" value="{{ $bossData->first()->totalMessagesToday }}">
        <input type="hidden" id="hiddenVois" value="{{ $voisData->first()->totalMessagesToday }}">
        <input type="hidden" id="hiddenBrampton" value="{{ $bramptonData->first()->totalMessagesToday }}">
        <input type="hidden" id="hiddenIndian" value="{{ $indianData->first()->totalMessagesToday }}">


        <table border="2" bordercolor="black" cellpadding="5" cellspacing="5" style="border-collapse: collapse; font-size: 16px;" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="font-size: 18px; text-align: center;">Brand</th>
                    <th style="font-size: 18px; text-align: center;">Sent</th>
                    <th style="font-size: 18px; text-align: center;">Delivered</th>
                    <th style="font-size: 18px; text-align: center;">Read</th>
                    <th style="font-size: 18px; text-align: center;">Poor</th>
                    <th style="font-size: 18px; text-align: center;">Good</th>
                    <th style="font-size: 18px; text-align: center; width: 200px">Pending Delivered</th>
                    <th style="font-size: 18px; text-align: center;" colspan="2">Result</th>
                </tr>
            </thead>
            <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Guru IPTV</th>
                    <td id="totalGuru" style="font-size: 16px; text-align: center;">{{ $allMessages->first()->totalMessagesToday }}</td>
                    <td id="deliverGuru" style="font-size: 16px; text-align: center;">{{ $allMessages->first()->totalMessagesToday - $allMessages->sum('failedGuru') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $allMessages->sum('readCount') }}</td>
                    <td id="buttonPayloadCount" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorGuru }}</td>
                    <td  id="goodGuru" style="font-size: 16px; text-align: center; background-color:#ade9ad"> {{  $allMessages->sum('readCount') - $poorGuru }} </td>
                    <td id="pendingGuru" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentage">''</td>
                </tr>
            </tbody>        

            <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Tashan IPTV</th>
                    <td  id="totalTashan" style="font-size: 16px; text-align: center;">{{ $tashanData->first()->totalMessagesToday }}</td>
                    <td  id="deliverTashan" style="font-size: 16px; text-align: center;">{{ $tashanData->first()->totalMessagesToday - $tashanData->sum('failedTashan') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $tashanData->sum('readCount') }}</td>
                    <td id="buttonPayloadCountTashan" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorTashan }}</td>
                    <td id="goodTashan" style="font-size: 16px; text-align: center; background-color:#ade9ad">{{ $tashanData->sum('readCount') - $poorTashan }}</td>
                    <td id="pendingTashan" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentageTashan">''</td>
                </tr>
            </tbody>   

            <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Boss IPTV</th>
                    <td id="totalBoss" style="font-size: 16px; text-align: center;">{{ $bossData->first()->totalMessagesToday }}</td>
                    <td id="deliverBoss" style="font-size: 16px; text-align: center;">{{ $bossData->first()->totalMessagesToday - $bossData->sum('failedBoss') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $bossData->sum('readCount') }}</td>
                    <td id="buttonPayloadCountBoss" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorBoss }}</td>
                    <td id="goodBoss" style="font-size: 16px; text-align: center; background-color:#ade9ad">{{ $bossData->sum('readCount') - $poorBoss }}</td>
                    <td id="pendingBoss" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentageBoss">''</td>
                </tr>
            </tbody>   

            <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Vois IPTV</th>
                    <td id="totalVois" style="font-size: 16px; text-align: center;">{{ $voisData->first()->totalMessagesToday  }}</td>
                    <td id="deliverVois" style="font-size: 16px; text-align: center;">{{ $voisData->first()->totalMessagesToday - $voisData->sum('failedVois') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $voisData->sum('readCount') }}</td>
                    <td id="buttonPayloadCountVois" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorVois }}</td>
                    <td id="goodVois" style="font-size: 16px; text-align: center; background-color:#ade9ad">{{ $voisData->sum('readCount') - $poorVois }}</td>
                    <td id="pendingVois" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentageVois">''</td>
                </tr>
            </tbody>   

          <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Brampton IPTV</th>
                    <td id="totalBrampton" style="font-size: 16px; text-align: center;">{{ $bramptonData->first()->totalMessagesToday  }}</td>
                    <td id="deliverBrampton" style="font-size: 16px; text-align: center;">{{ $bramptonData->first()->totalMessagesToday - $bramptonData->sum('failedBrampton') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $bramptonData->sum('readCount') }}</td>
                    <td id="buttonPayloadCountBrampton" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorBrampton }}</td>
                    <td id="goodBrampton" style="font-size: 16px; text-align: center; background-color:#ade9ad">{{ $bramptonData->sum('readCount') - $poorBrampton }}</td>
                    <td id="pendingBrampton" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentageBrampton">''</td>
                </tr>
          </tbody>   

          <tbody class="opp">
                <tr>
                    <th style="font-size: 16px; text-align: center;">Indian IPTV</th>
                    <td id="totalIndian" style="font-size: 16px; text-align: center;">{{ $indianData->first()->totalMessagesToday  }}</td>
                    <td id="deliverIndian" style="font-size: 16px; text-align: center;">{{ $indianData->first()->totalMessagesToday - $indianData->sum('failedIndian') }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $indianData->sum('readCount') }}</td>
                    <td id="buttonPayloadCountIndian" style="font-size: 16px; text-align: center; background-color:#fbd8de">{{ $poorIndian }}</td>
                    <td id="goodIndian" style="font-size: 16px; text-align: center; background-color:#ade9ad">{{ $indianData->sum('readCount') - $poorIndian }}</td>
                    <td id="pendingIndian" style="font-size: 16px; text-align: center; background-color:#ffff8e">''</td>
                    <td style="font-size: 16px; text-align: center;">Poor %</td>
                    <td style="font-size: 16px; text-align: center; background-color:#fbd8de" id="percentageIndian">''</td>
                </tr>
        </tbody>   

        </table>
    </div>
</div>

          </div>
          <!-- /.box-body --> 
        </div>
      </div>
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
</div>
<script>
  var totalGuru = parseFloat(document.getElementById('totalGuru').textContent);
  var deliverGuru = parseFloat(document.getElementById('deliverGuru').textContent);
  document.getElementById('pendingGuru').textContent = totalGuru-deliverGuru;

  var totalTashan = parseFloat(document.getElementById('totalTashan').textContent);
  var deliverTashan = parseFloat(document.getElementById('deliverTashan').textContent);
  document.getElementById('pendingTashan').textContent = totalTashan-deliverTashan;

  var totalBoss = parseFloat(document.getElementById('totalBoss').textContent);
  var deliverBoss = parseFloat(document.getElementById('deliverBoss').textContent);
  document.getElementById('pendingBoss').textContent = totalBoss - deliverBoss;

  var totalVois = parseFloat(document.getElementById('totalVois').textContent);
  var deliverVois = parseFloat(document.getElementById('deliverVois').textContent);
  document.getElementById('pendingVois').textContent = totalVois - deliverVois;

  var totalBrampton = parseFloat(document.getElementById('totalBrampton').textContent);
  var deliverBrampton = parseFloat(document.getElementById('deliverBrampton').textContent);
  document.getElementById('pendingBrampton').textContent = totalBrampton - deliverBrampton;

  var totalIndian = parseFloat(document.getElementById('totalIndian').textContent);
  var deliverIndian = parseFloat(document.getElementById('deliverIndian').textContent);
  document.getElementById('pendingIndian').textContent = totalIndian - deliverIndian;

</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessages = parseFloat(document.getElementById('goodGuru').textContent);
        var poorMessages = parseFloat(document.getElementById('buttonPayloadCount').textContent);

        console.log(totalMessages, poorMessages, 'heythereGuru');

        if (totalMessages === 0 || isNaN(totalMessages) || isNaN(poorMessages)) {
            var percentage = 0; 
        } else {
            var percentage = (poorMessages / totalMessages) * 100;
            percentage = Math.min(percentage, 100);

        }

        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentage').textContent = percentage.toFixed(2) + '%';
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessagesTashan = parseFloat(document.getElementById('goodTashan').textContent);
        var poorMessagesTashan = parseFloat(document.getElementById('buttonPayloadCountTashan').textContent);

        console.log(totalMessagesTashan, poorMessagesTashan, 'buttonPayloadCountTashan');

        if (totalMessagesTashan === 0 || isNaN(totalMessagesTashan) || isNaN(poorMessagesTashan)) {
            var percentage = 0;
        } else {
            var percentage = (poorMessagesTashan / totalMessagesTashan) * 100;
            percentage = Math.min(percentage, 100);

        }
        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentageTashan').textContent = percentage.toFixed(2) + '%';
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessagesBoss = parseFloat(document.getElementById('goodBoss').textContent);
        var poorMessagesBoss = parseFloat(document.getElementById('buttonPayloadCountBoss').textContent);

        if (totalMessagesBoss === 0 || isNaN(totalMessagesBoss) || isNaN(poorMessagesBoss)) {
            var percentage = 0;
        } else {
            var percentage = (poorMessagesBoss / totalMessagesBoss) * 100;
            percentage = Math.min(percentage, 100);
        }
        
        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentageBoss').textContent = percentage.toFixed(2) + '%';
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessagesVois = parseFloat(document.getElementById('goodVois').textContent);
        var poorMessagesVois = parseFloat(document.getElementById('buttonPayloadCountVois').textContent);

        if (totalMessagesVois === 0 || isNaN(totalMessagesVois) || isNaN(poorMessagesVois)) {
            var percentage = 0;
        } else {
            var percentage = (poorMessagesVois / totalMessagesVois) * 100;
            percentage = Math.min(percentage, 100);

        }
        
        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentageVois').textContent = percentage.toFixed(2) + '%';
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessagesBrampton = parseFloat(document.getElementById('goodBrampton').textContent);
        var poorMessagesBrampton = parseFloat(document.getElementById('buttonPayloadCountBrampton').textContent);

        if (totalMessagesBrampton === 0 || isNaN(totalMessagesBrampton) || isNaN(poorMessagesBrampton)) {
            var percentage = 0;
        } else {
            var percentage = (poorMessagesBrampton / totalMessagesBrampton) * 100;
            percentage = Math.min(percentage, 100);

        }
        
        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentageBrampton').textContent = percentage.toFixed(2) + '%';
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var totalMessagesIndian = parseFloat(document.getElementById('goodIndian').textContent);
        var poorMessagesIndian = parseFloat(document.getElementById('buttonPayloadCountIndian').textContent);

        if (totalMessagesIndian === 0 || isNaN(totalMessagesIndian) || isNaN(poorMessagesIndian)) {
            var percentage = 0;
        } else {
            var percentage = (poorMessagesIndian / totalMessagesIndian) * 100;
            percentage = Math.min(percentage, 100);

        }
        
        percentage = isNaN(percentage) ? 0 : percentage;
        document.getElementById('percentageIndian').textContent = percentage.toFixed(2) + '%';
    });
</script>

<script>
    function submitSearchForm() {
        document.getElementById('form1').submit();
    }

  jQuery($ => {
    $('#search_chat_number').on('submit', e => {
      e.preventDefault();
      searchWaNumber();
    })
  });

  function searchWaNumber() {
    var number = $("#number").val();
    localStorage.setItem("number", number);
    startIntervalChatListBox(number);
  }

  function startIntervalChatListBox(number) {
    var url;
    if (number) {
      url = "whatsapp-campaign?search=" + number;
    } else {
      number = localStorage.getItem("number");
      if (number) {
        url = "whatsapp-campaign?search=" + number;
      } else {
        url = "whatsapp-campaign";
      }
    }
    ajaxGetCall(url, startIntervalChatListBoxSuccess, failed);
  }

  function ajaxGetCall(geturl, success, failed) {
    $.ajax({
      url: geturl,
      type: "GET",
      async: false,
      success: function (res) {
        success(res);
      },
      error: function (jqXHR, exception) {
        failed(jqXHR, exception);
      },
    });
  }

  function clearWaNumber() {
    localStorage.removeItem("number");
    $("#number").val('');
  }
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <script>
$(document).ready(function() {
  $('#product').change(function() {
    var selectedProduct = $(this).val();
    $('#template option').hide();

    if (selectedProduct === 'Guru') {
      $('.Guru').show(); 
    } else if (selectedProduct === 'Tashan') {
      $('.Tashan').show(); 
    } else {
      $('#template').val(''); 
    }
  });
});
</script> -->
<script>
    $( function() {
        $('#from_date').daterangepicker({
            opens: 'left',
            locale: { cancelLabel: 'Clear' },
            //autoUpdateInput: false,
            //startDate: moment().subtract('days', 29),      
      startDate: moment().subtract(1, 'month').startOf('month'),
      endDate: moment(),      
        ranges: {
             'Today': [moment(), moment()], 
             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
     }, 
     function(start, end, label) {  
         console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
     });
        $('#from_date').on('apply.daterangepicker', function(ev, picker) {
            //console.log(picker.startDate.format('YYYY-MM-DD'));
            //console.log(picker.endDate.format('YYYY-MM-DD'));
            var startDate = picker.startDate.format('YYYY-MM-DD')+'/'+picker.endDate.format('YYYY-MM-DD');
            $('#date_range').val(startDate);
            //console.log(startDate);
            //return false;
            var page = '';
            //fetch_data(page);
            $('#date_day_filter').submit();
        });
        $('#from_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        });
        $('#from_date').on('cancel.daterangepicker', function(ev, picker) {
            //do something, like clearing an input
            $('#date_range').val('');
            $('#from_date').val('');
            var page = '';
            //fetch_data(page);
            $('#date_day_filter').submit();
        });
    });
</script>

@endsection