@include('inc.header-inc')

<link rel="stylesheet" type="text/css" href="{{ asset('wms/js/datatables/css/buttons.dataTables.min.css')}}">

<script  src="{{ asset('wms/js/datatables/js/buttons.print.min.js')}} "></script>
<script  src="{{ asset('wms/js/datatables/js/dataTables.buttons.min.js')}} "></script>
<script  src="{{ asset('wms/js/datatables/js/html5.min.js')}} "></script>
<script  src="{{ asset('wms/js/datatables/js/jszip.min.js')}} "></script>
<script  src="{{ asset('wms/js/datatables/js/pdfmake.min.js')}} "></script>
<script  src="{{ asset('wms/js/datatables/js/vfs_fonts.js')}} "></script>


<style>
  body.dark table.dataTable thead th {
    background-color: var(--primary-color-light);
    color: var(--text-color);
  }
  input, select{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }
  table.dataTable thead th {
    color: white;
    background: #695CFE;
  }

  table.dataTable tbody td {
    font-size: 15px;
  }

  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }

  /* body.dark .card{
    background-color: var(--primary-color-light);
  } */
  .form-label{
    color: white;
    font-weight: bold;
  }

  .dataTables_wrapper {
    margin-top: 10px;  
  }

 .dt-buttons button{
    background: #695CFE;
    color: white;
    border-radius: 4px;
  }
  .dt-buttons button:hover{
    color: black !important;
  }

  .dataTables_filter, .dt-buttons{
    margin: 10px;
  }
  .dataTables_scroll{
    border:1px solid silver;
    border-radius:5px;
  }
</style>


<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
  <div class="card container-shadow py-3 mb-2"> 
    <div class="container-fluid">
        <div class="flex position-relative">
              <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
        </div>
    </div>
  </div>

  <div class="container-shadow bg-white ps-3 py-2 border mb-4 rounded" id="breadcrumb-container">
      <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item active py-1" aria-current="page">Maintenance</li>
              <li class="breadcrumb-item active py-1" aria-current="page">{{ ucwords($title) }}</li>
          </ol>
      </nav>
  </div>

  <div class="container-shadow border px-2 py-3 mb-3 rounded">
    <div class="row g-3">
      <div class="col form-floating">
        <input type="date" class="form-control" id="start_date" name="start_date" >
        <label for="statusSelect">Start Date</label>
      </div>
      <div class="col form-floating">
        <input type="date" class="form-control" id="end_date" name="end_date">
        <label for="statusSelect">End Date</label>
      </div>
    </div>
  </div>
  
  <div class="container-shadow border px-2 py-3 mb-3 rounded">
    <table class="display nowrap" id="pr_table" width="100%" style="width: 100%;">
      <thead>
        <tr>
          <th scope="col">NO.</th>
          <th scope="col">IP ADDRESS</th>
          <th scope="col" >NAME</th>
          <th scope="col" >POSITION</th>
          <th scope="col" >DEPARTMENT</th>
          <th scope="col" >SBU</th>
          <th scope="col">ACTION</th>
          <th style="display: none" scope="col">DATE</th>
          <th scope="col">DATE</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($logs as $key=>$log )
        <tr>      
          <td class="not-center">{{ $key + 1 }}</td>
          <td>{{ $log->device_ipAddress }}</td>
          <td>{{ ucwords($log->user->name) }}</td>
          <td>{{ ucwords($log->user->position) }}</td>
          <td>{{ strtoupper($log->user->department) }}</td>
          <td>
            @php
              if($log->user->tbl_sbu_id != 0){
                $sbu = App\Models\TblSbu::find($log->user->tbl_sbu_id);
                echo ucwords($sbu->sbu);
              }else{
                echo "Super Admin";
              }
            @endphp
          
          </td>
          <td>{{ ucwords($log->action) }}</td>
          <td style="display: none">{{ date('Y-m-d', strtotime($log->logs_date ))}}</td>
          <td>{{ date('d-M-Y', strtotime($log->logs_date ))}}</td>
        </tr>
        @endforeach
      </tbody >
    </table>
  </div>
</section>


<script>

var table = $('#pr_table').DataTable({
   "scrollY": "350px",
   "scrollX": "1200px",
   dom: 'Bfrtlip',
   buttons: [
    {
      extend: 'csv',
      messageTop: 'Logs File',
      exportOptions: {
        columns: ':not(:last-child)'
      
      }
    },
    {
      extend: 'pdf',
      messageTop: 'Logs File',
      orientation: 'landscape',
      customize: function(doc) {
        doc.content.forEach(function(item) {
          if (item.table) {
            item.table.body.forEach(function(row) {
              row[0].alignment = 'right';
              row[1].alignment = 'center';
              row[2].alignment = 'center';
              row[3].alignment = 'center';
              row[4].alignment = 'center';
              row[5].alignment = 'center';
              row[6].alignment = 'center';
              row[7].alignment = 'center';
            
            });
          }
        });
      },
      exportOptions: {
        columns: ':not(:nth-last-child(2))'
      }
    },
    {
  extend: 'excel',
  messageTop: 'Logs File',
  exportOptions: {
    columns: ':not(:last-child)',
    customizeData: function (data) {
    
      for (var i = 0; i < data.body.length; i++) {
        for (var j = 0; j < data.body[i].length; j++) {
          // Assuming the date column is the 7th column (index 6)
          if (j === 7) {
            var dateValue = new Date(data.body[i][j]);
            var formattedDate = dateValue.getDate() + '-' + (dateValue.getMonth() + 1) + '-' + dateValue.getFullYear();
            data.body[i][j] = formattedDate;
          }
        }
      }
    }
  }
}
  ],

});

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  var startDate = moment($('#start_date').val(), 'D-M-YYYY');
  var endDate = moment($('#end_date').val(), 'D-M-YYYY');
  var date = moment(data[7], 'D-M-YYYY');

    if (startDate.isValid() && endDate.isValid()) {
        if (date.isSameOrAfter(startDate) && date.isSameOrBefore(endDate)) {
            return true;
        }
    } else {
        return true; // No date range specified, include all rows
    }
    
    return false;
});

$('#start_date, #end_date').on('change', function () {
    table.draw();
});

    </script>


  @include('inc.footer-inc')
  @include('inc.modal.modalloader')