@extends('backend.layouts.admin.app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_664_24080)">
          <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
          </g>
          <defs>
          <clipPath id="clip0_664_24080">
          <rect width="18" height="18" fill="white"/>
          </clipPath>
          </defs>
          </svg></a></li>
        <li class=""><a href="">Dashboard</a></li>
        <li class="active">Recent Activity & Alerts</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}} <span class="border px-2 py-1 fs-14 text-black ms-1 rounded-1 fw-normal d-inline-block v-middle">May 29</span></h1>
       
      </div>
      
    </section>
    <!-- Main content -->
    <section class="content pt-2">

      
      

      
      
      <div class="box-body p-0 travel-history-table table-mb-0">
      
                  <table class="table table-bordered table-hover" id="tbl-issue-reported" aria-describedby="recent-activity-list">
                    <thead>
                      <th scope="col">Transporter</th>
                      <th scope="col"></th>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-type='text' class="text-start w-100">
                                <div class="fs-16"><strong>Sifiso</strong> has marked <span class="text-primary fw-semibold">Job #1234</span> as Completed.</div>
                                <div class="fs-14 text-gray">Now</div>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td data-type='text' class="text-start w-100">
                                <div class="fs-16"><strong>John</strong> changed the status <span class="text-black fw-semibold">Break</span> to In <span class="text-black fw-semibold">Transit</span> for <span class="text-primary fw-semibold">Job #1234</span></div>
                                <div class="fs-14 text-gray">May 12  | 1:25 PM</div>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td data-type='text' class="text-start w-100">
                                <div class="fs-16"><strong>Sifiso</strong> has <span class="text-red fw-semibold">report an issue</span> i.e. “<span class="text-red fw-semibold">Robbery</span>” for <span class="text-primary fw-semibold">Job #1234</span></div>
                                <div class="fs-14 text-gray">May 12  | 1:55 PM</div>
                            </td>
                            <td class="custom-width-24">
                              <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M12 9.25C12.1339 9.25 12.25 9.36614 12.25 9.5V14.5C12.25 14.6339 12.1339 14.75 12 14.75C11.8661 14.75 11.75 14.6339 11.75 14.5V9.5C11.75 9.36614 11.8661 9.25 12 9.25Z" fill="#FF3B30" stroke="#FF3B30"/>
                              <path d="M12.0684 17.0054L12.0938 17.0112L12.1191 17.0151C12.1313 17.0169 12.1402 17.0189 12.1562 17.0269L12.1885 17.0435L12.2217 17.0542C12.2334 17.0581 12.2518 17.067 12.2773 17.0835C12.3041 17.1049 12.3307 17.1266 12.3574 17.1479C12.448 17.2499 12.5 17.3819 12.5 17.5005C12.4999 17.6183 12.448 17.7485 12.3584 17.8501C12.3463 17.8598 12.3343 17.8697 12.3223 17.8794C12.3071 17.8916 12.2916 17.9034 12.2764 17.9155C12.2509 17.932 12.2333 17.9419 12.2217 17.9458L12.1885 17.9565L12.1562 17.9731L12.1191 17.9849L12.1074 17.9868C12.0493 17.9965 12.015 18.0005 12 18.0005C11.9834 18.0005 11.9532 17.9954 11.8789 17.9849L11.8438 17.9731L11.8115 17.9565L11.7783 17.9458L11.7227 17.9155C11.7077 17.9035 11.6927 17.8914 11.6777 17.8794C11.6655 17.8696 11.6529 17.8599 11.6406 17.8501C11.5513 17.7486 11.5001 17.6181 11.5 17.5005C11.5 17.3821 11.5512 17.2498 11.6416 17.1479C11.6683 17.1266 11.695 17.1049 11.7217 17.0835C11.7476 17.0667 11.7665 17.0581 11.7783 17.0542L11.8115 17.0435L11.8438 17.0269L11.8818 17.0132L11.8975 17.0103L11.9121 17.0073C11.9712 16.9937 12.0309 16.9961 12.0684 17.0054Z" fill="#FF3B30" stroke="#FF3B30"/>
                              <path d="M18.06 22.6601H5.93998C3.98998 22.6601 2.49998 21.9501 1.73998 20.6701C0.989976 19.3901 1.08998 17.7401 2.03998 16.0301L8.09998 5.13009C9.09998 3.33009 10.48 2.34009 12 2.34009C13.52 2.34009 14.9 3.33009 15.9 5.13009L21.96 16.0401C22.91 17.7501 23.02 19.3901 22.26 20.6801C21.5 21.9501 20.01 22.6601 18.06 22.6601ZM12 3.84009C11.06 3.84009 10.14 4.56009 9.40998 5.86009L3.35998 16.7701C2.67998 17.9901 2.56998 19.1101 3.03998 19.9201C3.50998 20.7301 4.54998 21.1701 5.94998 21.1701H18.07C19.47 21.1701 20.5 20.7301 20.98 19.9201C21.46 19.1101 21.34 18.0001 20.66 16.7701L14.59 5.86009C13.86 4.56009 12.94 3.84009 12 3.84009Z" fill="#FF3B30"/>
                              </svg>

                            </td>
                        </tr>
                    </tbody>
                   

                  </table>
                  
                
              </div>

    </section>
    <!-- /.content -->
  <script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
   

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });

  var table = $('#tbl-issue-reported').DataTable({
       info: true,
       searching: true,
       ordering: false, // disables default sorting
       //ajax: '../server_side/scripts/server_processing.php',
      // paging: false, // disables pagination
       dom: 'frt<"bottom"ipl><"clear">'
     });
    
     $('#tbl-issue-reported_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-issue-reported_filter').append(`
        <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
            <div class="max-w-200">
                <select id="roleFilter" class="form-control w-100 ">
                <option value="">All Jobs</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class="max-w-200">
                <select id="roleFilter" class="form-control w-100">
                <option value="">Transporters</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            <div class="max-w-200">
                <select id="roleFilter" class="form-control w-100">
                <option value="">All Activities & Alerts</option>
                <option value="Admin">Admin</option>
                <option value="User">User</option>
                <option value="Guest">Guest</option>
                </select>
            </div>
            
            <div class="max-w-200 position-relative">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
        </div>
    `);
  });

  
  

  // function to show auto login popup with update link
  $(document).on('click', '.auto-login-link', function() {

    let id = $(this).attr('data-id');

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type: 'POST',
      
      dataType: "html",
      data: {
        id: id
      },
      success: function(response) {
        $('#autologin').modal('show');
        $(".model-content-autologin").html(response);
      },
      beforeSend: function() {}
    });
  });

  $(document).on('click', '.copy-to-clipboard', function() {
    var copyText = document.getElementById("autologin_url_field");
    $("#autologin_url_field").focus();
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
  });
</script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#calendar').datepicker();
    }); 
</script>
@endsection