@extends('layouts.app')

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">
<style>
  #reportTable {
    border: 1px solid #d6c5c587 !important;
    margin-bottom: 10px;
  }

  .dataTables_length {
    display: none;
  }

  .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #aaa;
    border-radius: 20px;
    padding: 7px 20px;
    background-color: transparent;
    margin-left: 5px;
    width: 12rem;
    font-size: 15px;
    outline: none;
    color: #4e4e4e;
  }

  .paginate_button {
    border: 2px solid #d7d7d7 !important;
    color: #ebe7e7 !important;
    font-weight: bold;
  }

  .paginate_button:hover {
    border: 2px solid #34548A !important;
    ;
    background: #34548A !important;
    border-color: #34548A !important;
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .paginate_button.disabled:hover {
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .dataTables_paginate a.current {
    color: #ebe7e7 !important;
    background: #34548A !important;
    border-color: #34548A !important;
  }

  .dataTables_scroll {
    margin-bottom: 1.5%;
  }

  .dataTables_scrollBody tbody {
    display: block;
    /* max-height: 440px; */
    width: 100%;
  }

  .dataTables_scrollBody thead,
  .dataTables_scrollBody tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .dataTables_scrollBody {
    scrollbar-color: #34548A #fff !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #ebe7e7 !important;
  }

  .dataTables_info {
    color: #34548A !important;
    font-size: 16px;
    font-weight: bold;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #34548A !important;
  }

  table.dataTable {
    border: none !important;
  }

  table.dataTable thead {
    background-color: #34548A !important;
    border: 0 !important;
    /* padding: 5px !important; */
    color: #ebe7e7 !important;
  }

  table.dataTable thead th {
    border: none !important;
    width: 100px !important;
    font-family: "Montserrat";
  }

  table.dataTable thead th:nth-child(2) {
    width: 115px !important;
    text-align: left;
    padding-left: 5rem;
  }

  table.dataTable tbody td:nth-child(2) {
    width: 50% !important;
    text-align: left;
  }

  table.dataTable tbody td {
    border: none !important;
    overflow-wrap: break-word;
    font-family: "Montserrat";
  }

  .main-heading {
    margin-top: 2%;
    margin-bottom: 3%;
    font-size: 2.1rem;
    text-align: center;
  }

  .report-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background-color: #f9f9f9;
  }

  .report-table thead th {
    background-color: #34548A;
    color: #fff;
    text-align: center;
  }

  tbody tr td {
    color: #34548a;
    font-family: "Montserrat";
  }

  table tbody tr:nth-child(even),
  table tbody tr:nth-child(even) .sorting_1 {
    background-color: #f8f8f8 !important;
  }

  table tbody tr:nth-child(odd),
  table tbody tr:nth-child(odd) .sorting_1 {
    background-color: #d7d7d7 !important;
  }

  .table-main-div {
    padding: 0 15rem;
  }

  a:hover,
  a:active,
  a:focus {
    outline: none;
  }

  input[type="text"] {
    padding: 10px 10px !important;
    font-size: 16px !important;
  }

  .date-div,
  .carrier-device-div {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15rem;
    margin-bottom: 2%;
  }

  .date-div {
    margin-bottom: 5%;
  }

  .select-date,
  .select-carrier {
    font-size: 16px;
  }

  .common-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e2e2;
    text-align: center;
    background-color: #f8f8f8;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  }

  .simple-success-modal,
  .simple-error-modal {
    width: 420px;
    display: none;
  }

  .simple-success-modal-close,
  .simple-error-modal-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 25px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
    z-index: 2;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .error-msg-header {
    color: red !important;
  }

  .success-msg-header {
    color: green !important;
  }

  .msg-text {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
  }

  .modal {
    z-index: 10 !important;
    /* padding-top: 250px; */
  }

  .close-icon {
    border: 1px solid #008000;
    border-radius: 50%;
    padding: 2px 4px 0px 4px;
  }

  .fa-check {
    border: 1px solid green;
    border-radius: 50%;
    padding: 1px 1px 1px 1px;
  }

  .close-btn {
    min-width: 100px;
    outline: none !important;
  }

  .submit-btn:focus,
  #refreshTableBtn:focus {
    outline: none;
  }

  .carriers-div,
  .device-div {
    width: 33.3%;
  }

  .input-group-append {
    width: 85%;
  }

  .fs-optgroup-label {
    text-align: left;
  }

  .table-div {
    position: relative;
  }

  .dataTables_processing {
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.71);
    z-index: 99;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 2px 15px;
  }

  #refreshTableBtn {
    margin-right: 58%;
  }

  .triggered-source-div {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .triggered-source-div label {
    margin: 0;
    white-space: nowrap;
    font-size: 16px;
  }

  #triggered_source {
    border-radius: 5px;
    width: 100px;
    margin-right: 40px;
  }

  select:focus,
  input:focus,
  button:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .refresh-btn {
    min-height: 32px;
    &:hover {
      cursor: pointer;
      background-color: #2e4875;
      border-color: #2e4875;
    }
  }

  .table-header {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 53%;
    z-index: 2;
  }
</style>
<div>
  <div>
    <h2 class="main-heading">Dowload Daily Calling Report for (Selected Data)</h2>
  </div>
  <!-- carrier and devices div -->
  <div class="carrier-device-div">
    <label for="carriers" class="select-carrier" style="margin-bottom: 0px;">Select Carrier(s) :</label><br>
    <!-- Carrier(s) fselect -->
    <div class="carriers-div">
      <div class="input-group-append">
        <select
          class="maintenance-device-select"
          multiple="multiple"
          class="carrier-box"
          id="carrierName"
          style="width:100%"
          name="carrier_name[]">
          <option value="">Please Select</option>
          @foreach($carrierAndDevice as $carrierName => $devices)
          <option value="{{ $carrierName }}" selected>{{ $carrierName }}</option>
          @endforeach
        </select>
        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Carrier Names">
          <b>All</b>&nbsp;
          <input type="checkbox" id="selectAllPopup" value="yes" checked aria-label="Checkbox for following text input" style="accent-color: #34548A !important">
        </span>
        <span class="input-group-text" onclick="refreshAllSelected()">
          <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
        </span>
      </div>
    </div>

    <label for="device" class="select-carrier" style="margin-bottom: 0px;">Select Device(s) :</label><br>
    <!-- Device(s) fselect -->
    <div class="device-div">
      <div class="input-group-append">
        <select
          class="maintenance-device-select2"
          multiple="multiple"
          class="device-box"
          id="deviceName"
          style="width:100%"
          name="device_name[]">
          <option value="">Please Select</option>
          @foreach($carrierAndDevice as $category => $devices)
          <optgroup label="{{ $category }}">
            @foreach($devices as $device)
            <option value="{{ $device['mobile_number'] }}" selected>{{ $device['post_title'] }}</option>
            @endforeach
          </optgroup>
          @endforeach
        </select>
        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Device(s)">
          <b>All</b>&nbsp;
          <input type="checkbox" id="selectAllDevice" value="yes" checked aria-label="Checkbox for following text input" style="accent-color: #34548A !important">
        </span>
        <span class="input-group-text" onclick="refreshAllSelectedDevice()">
          <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
        </span>
      </div>
    </div>
  </div>

  <!-- Date and download btn div -->
  <div class="date-div">
    <label for="calling_date" class="select-date" style="margin-bottom: 0px;">Select Date :</label><br>
    <input type="text" id="calling_date" name="callingDate" class="datepicker" value="" placeholder="Select Date">

    <div class="interval-div d-flex align-items-center">
      <label for="time_interval" class="mb-0 mr-2">
        Time Interval:
      </label>
      <select id="time_interval" name="time_interval" class="form-control" style="width:120px;">
        <option value="10">10 Min</option>
        <option value="15">15 Min</option>
        <option value="30">30 Min</option>
        <option value="60" selected>60 Min</option>
      </select>
    </div>

    <div class="triggered-source-div">
      <label for="triggered_source">Triggered Source:</label>
      <select id="triggered_source" name="triggered_source">
        <option value="all">All</option>
        <option value="0">0</option>
        <option value="1" selected>1</option>
      </select>
    </div>

    <button class="submit-btn">Download Report</button>
  </div>

  <div>
    <h2 class="main-heading">Daily Calling Report(s)</h2>
  </div>
  <!-- Add your table here -->
  <!-- <button id="refreshTableBtn">Refresh <i class="fas fa-sync-alt" style="margin-left: 5px;" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
  </button> -->

  <div class='table-div'>
    <div id="NS-inventory-table_processing" class="dataTables_processing" style="display: none;">Loading...</div>
    <div class="table-header">
      <button class="refresh-btn">Refresh</button>
    </div>
    <div class="table-main-div">
      <table id="reportTable" class="report-table">
        <thead>
          <tr>
            <th>Sr. No.</th> <!-- Added Sr. No. column -->
            <th>File Name</th>
            <th>Creation Date</th>
            <th>Creation Time</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @if(empty($data))
          <tr>
            <td colspan="5">No report prepared</td>
          </tr>
          @else
          @foreach($data as $index => $value) <!-- Added $index to get the serial number -->
          <tr>
            <td>{{ $index + 1 }}</td> <!-- Display the Sr. No. -->
            <td>{{ $value['fileName'] }}</td>
            <td>{{ date('Y-m-d', $value['creationTime']) }}</td>
            <td>{{ date('h:i:s A', $value['creationTime']) }}</td>
            <td><a href="{{ $value['url'] }}">Download</a></td>
          </tr>
          @endforeach
          @endif
        </tbody>
      </table>
    </div>
  </div>


  <!-- Success Modal -->
  <div class="custom-modal-wrapper simple-success-modal common-modal">
    <i class="fa fa-times simple-success-modal-close" aria-hidden="true"></i>
    <div class="">
      <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Success</p>
      <p class="msg-text simple-success-modal-msg-text"></p>
      <div class="close-button" id="close-button">
        <button type="button" class="close-btn" id="closeSimpleSuccessModal">OK</button>
      </div>
    </div>
  </div>

  <!-- Error Modal -->
  <div class="custom-modal-wrapper simple-error-modal common-modal">
    <i class="fa fa-times simple-error-modal-close" aria-hidden="true"></i>
    <div class="">
      <p class="error-msg-header msg-header"><i class="fa fa-times close-icon" aria-hidden="true"></i>&nbsp;Error</p>
      <p class="msg-text simple-error-modal-msg-text"></p>
      <div class="close-button" id="close-button">
        <button type="button" class="close-btn" id="closeSimpleErrorModal">OK</button>
      </div>
    </div>
  </div>
</div>

<div id="loaderModal" class="modal">
  <img class="loader-img" src="../images/ajax-spinner.gif">
  <span class="loader-text">Please wait ...</span>
</div>

<!-- Add DataTables script -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>

<script>
  var baseURL = "{{ URL::to('/') }}" + "/";
  $(document).ready(function() {
    if ($('#reportTable tbody tr').length > 1 || $('#reportTable tbody tr td[colspan]').length === 0) {
      $('#reportTable').DataTable({
        "ordering": false, // Disable sorting by default
      });
    }

    // $('#reportTable').DataTable({
    //   "ordering": false, // Disable sorting by default
    //   "info": false, // Optionally, you can hide info text (e.g., "Showing 1 to 10 of 100 entries")
    //   "paging": false, // Optionally, you can disable pagination if you have a small dataset
    //   "searching": false // Optionally, you can disable the search feature
    // });

    //initializing carrier(s) name fselect
    jQuery(".maintenance-device-select").fSelect({
      placeholder: 'Select Carrier(s)',
      numDisplayed: 1,
      overflowText: '{n} carrier(s) selected',
      noResultsText: 'No carrier(s) found',
      searchText: 'Search carrier(s)',
      showSearch: true
    });

    //initializing Device(s) name fselect
    jQuery(".maintenance-device-select2").fSelect({
      placeholder: 'Select Device(s)',
      numDisplayed: 1,
      overflowText: '{n} Device(s) selected',
      noResultsText: 'No Device(s) found',
      searchText: 'Search Device(s)',
      showSearch: true
    });

    $(".datepicker").datepicker({
      dateFormat: 'yy-mm-dd',
      maxDate: 0,
      minDate: '-3M',
      showOn: "button",
      buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
      buttonImageOnly: true,
      todayHighlight: false,
    });

    //On click of submit btn
    $('.submit-btn').on('click', function() {
      $('#carrierName').fSelect('reload');
      $('#deviceName').fSelect('reload');
      var selectedCarrierValues = $('#carrierName').val();
      if (!selectedCarrierValues || selectedCarrierValues.length === 0) {
        $('.simple-error-modal-msg-text').text('please select at least one Carrier.');
        $('.simple-error-modal').show();
        return;
      }

      var allSelected = $('#selectAllPopup').prop('checked');
      if (allSelected) {
        selectedCarrierValues = 'all';
      }

      var selectedDeviceValues = $('#deviceName').val();
      if (!selectedDeviceValues || selectedDeviceValues.length === 0) {
        $('.simple-error-modal-msg-text').text('please select atleast one Device.');
        $('.simple-error-modal').show();
        return;
      }

      var allSelectedDevice = $('#selectAllDevice').prop('checked');
      if (allSelectedDevice) {
        selectedDeviceValues = 'all';
      }

      var selectedDate = $('#calling_date').val();
      var triggeredSource = $('#triggered_source').val();
      var interval = $('#time_interval').val();
      getDailyCallingReport(selectedDate, selectedCarrierValues, selectedDeviceValues, triggeredSource, interval);
    });

    //closing the success modal
    $('#closeSimpleSuccessModal, .simple-success-modal-close').click(function() {
      $('.simple-success-modal').css("display", "none");
    });

    //closing the error modal
    $('#closeSimpleErrorModal, .simple-error-modal-close').click(function() {
      $('.simple-error-modal').css("display", "none");
    });

    //on click of carrier name all checkbox
    $('#selectAllPopup').on('click', function() {
      if ($(this).prop('checked')) {
        $('#carrierName option').prop('selected', true); // Select all options
      } else {
        $('#carrierName option').prop('selected', false); // Deselect all options
      }
      $('#carrierName').fSelect('reload');
    });

    //on click of device name all checkbox
    $('#selectAllDevice').on('click', function() {
      if ($(this).prop('checked')) {
        $('#deviceName option').prop('selected', true);
      } else {
        $('#deviceName option').prop('selected', false);
      }
      $('#deviceName').fSelect('reload');
    });

    // Check/uncheck the "Select All" checkbox based on individual selections
    $('#carrierName').on('change', function() {
      var totalOptions = ($(this).find('option').length) - 1;
      var selectedOptions = $(this).find('option:selected').length;

      // If all options are selected, check the "Select All" checkbox
      if (totalOptions === selectedOptions) {
        $('#selectAllPopup').prop('checked', true);
      } else {
        $('#selectAllPopup').prop('checked', false); // Uncheck the "Select All" checkbox if not all are selected
      }
    });

    // Check/uncheck the "Select All" checkbox based on individual selections for Device dropdown
    $('#deviceName').on('change', function() {
      var totalOptions = ($(this).find('option').length) - 1;
      var selectedOptions = $(this).find('option:selected').length;

      // If all options are selected, check the "Select All" checkbox
      if (totalOptions === selectedOptions) {
        $('#selectAllDevice').prop('checked', true);
      } else {
        $('#selectAllDevice').prop('checked', false); // Uncheck the "Select All" checkbox if not all are selected
      }
    });

    $('.refresh-btn').on('click', function() {
      getRefreshedCallingReports();
    });

  });

  function refreshAllSelected() {
    // Select all options
    $('#carrierName').val($('#carrierName option').map(function() {
      return $(this).val();
    }).get()).trigger('change');

    $('#selectAllPopup').prop('checked', true);
    $('#carrierName').fSelect('reload');
  }

  function refreshAllSelectedDevice() {
    // Select all options
    $('#deviceName').val($('#deviceName option').map(function() {
      return $(this).val();
    }).get()).trigger('change');

    $('#selectAllDevice').prop('checked', true);
    $('#deviceName').fSelect('reload');
  }

  function getRefreshedCallingReports() {
    jQuery("#NS-inventory-table_processing").show();
    $.ajax({
      url: baseURL + 'getRefreshedCallingReports',
      method: 'GET',
      success: function(html) {
        jQuery("#NS-inventory-table_processing").hide();
        // Destroy the current DataTable instance, if it exists
        if ($.fn.DataTable.isDataTable('#reportTable')) {
          $('#reportTable').DataTable().destroy();
        }

        // Replace the table content
        $('.table-main-div').html(html);

        if ($('#reportTable tbody tr').length > 1 || $('#reportTable tbody tr td[colspan]').length === 0) {
          $('#reportTable').DataTable({
            "ordering": false, // Disable sorting by default
          });
        }
      },
      error: function(xhr, status, error) {
        console.error('Error:', error);
      }
    });
  };

  function getDailyCallingReport(date, selectedCarrierValues, selectedDeviceValues, triggeredSource, interval) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "downloadDailyCallingReport",
      type: 'POST',
      data: {
        date: date,
        carriers: selectedCarrierValues,
        devices: selectedDeviceValues,
        triggeredSource: triggeredSource,
        interval: interval
      },
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.status == 200) {
          // $('.simple-success-modal-msg-text').text(response.message);
          // $('.simple-success-modal').show();
          toastr.success(response.message);
          getRefreshedCallingReports();
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }
</script>
@endsection