@extends('layouts.master') @section('title') Client logs @endsection @section('css')
<link href="{{URL::asset('assets/js/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/css/datatable-custom.css')}}" rel="stylesheet" type="text/css" />
@endsection @section('content') 
@component('components.breadcrumb') @slot('li_1') Admin @endslot @slot('title') Logs @endslot @endcomponent 
<div class="row">
   <div class="col-lg-12">
      @if($errors->any())
      <div class="alert alert-danger">
         <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
         </ul>
      </div>
      @endif
      @if(session('success'))
      <div class="alert alert-success alert-dismissible alert-label-icon rounded-label fade show" role="alert">
         <i class="ri-check-line label-icon"></i><strong>Success</strong> - {{ session('success') }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      @if(session('error'))
      <div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show" role="alert">
         <i class="ri-error-warning-line label-icon"></i><strong>Error</strong> - {{ session('error') }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      @include('components.export-buttons')
      <form method="GET" action="{{ route('admin.logs') }}" class="card p-2 p-md-3 mb-3 shadow-sm rounded">
         <div class="row g-2 g-md-3 align-items-end">
            @php
            use Spatie\Activitylog\Models\Activity;
            use App\Models\User;
            // Get distinct causer_ids from logs
            $causerIds = Activity::whereNotNull('causer_id')->distinct()->pluck('causer_id');
            // Get users that still exist in the DB
            $existingUsers = User::whereIn('id', $causerIds)->get()->keyBy('id');
            // Prepare the list for dropdown (id => name)
            $causerOptions = [];
            foreach ($causerIds as $id) {
            if (isset($existingUsers[$id])) {
            $user = $existingUsers[$id];
            $causerOptions[$id] = "{$user->firstname} {$user->lastname}";
            } else {
            // Fetch the latest log with that causer_id and extract fallback name
            $log = Activity::where('causer_id', $id)->latest()->first();
            $fallbackName = 'Unknown';
            if ($log && $log->properties) {
            $props = json_decode($log->properties);
            $fallbackName = $props->causer_name ?? 'Deleted User';
            }
            $causerOptions[$id] = "{$fallbackName} (Deleted)";
            }
            }
            @endphp
            {{-- Causer (User) Filter --}}
            <div class="col-12 col-sm-6 col-lg-3">
               <label for="causer_id" class="form-label fw-semibold small mb-1">
               <i class="ri-user-line me-1 text-muted"></i> Performed By
               </label>
               <select name="causer_id" id="causer_id" class="form-select form-select-sm">
                  <option value="">All Users</option>
                  @foreach($causerOptions as $id => $name)
                  <option value="{{ $id }}" {{ request('causer_id') == $id ? 'selected' : '' }}>
                  {{ $name }}
                  </option>
                  @endforeach
               </select>
            </div>
            {{-- Start Date --}}
            <div class="col-6 col-lg-2">
               <label for="start_date" class="form-label fw-semibold small mb-1">
               <i class="ri-calendar-line me-1 text-muted"></i> Start Date
               </label>
               <input type="date" name="start_date" id="start_date"
                  value="{{ request('start_date') }}" data-provider="flatpickr" data-date-format="Y-m-d"
                  class="form-control form-control-sm" placeholder="Date">
            </div>
            {{-- End Date --}}
            <div class="col-6 col-lg-2">
               <label for="end_date" class="form-label fw-semibold small mb-1">
               <i class="ri-calendar-line me-1 text-muted"></i> End Date
               </label>
               <input type="date" name="end_date" id="end_date"
                  value="{{ request('end_date') }}" data-provider="flatpickr" data-date-format="Y-m-d"
                  class="form-control form-control-sm" placeholder="Date">
            </div>
            {{-- Search Text --}}
            <div class="col-12 col-lg-3">
               <label for="search" class="form-label fw-semibold small mb-1">
               <i class="ri-search-line me-1 text-muted"></i> Search Term
               </label>
               <input type="text" name="search" id="search"
                  value="{{ request('search') }}"
                  class="form-control form-control-sm"
                  placeholder="Search logs">
            </div>
            {{-- Actions --}}
            <div class="col-12 col-lg-2 d-grid gap-2">
               <button type="submit" class="btn btn-primary btn-sm">
               <i class="ri-filter-2-line me-1"></i> Filter
               </button>
               <a href="{{ route('admin.logs') }}" class="btn btn-secondary btn-sm">
               <i class="ri-close-line me-1"></i> Reset
               </a>
            </div>
         </div>
      </form>
      <div class="card">
         <div class="card-body">
            <div>
               <div class="table-responsive table-card mb-1">
                  <table class="table table-nowrap align-middle table-striped" id="logs-table" style="width: 100%;">
                     <thead>
                        <tr class="text-muted text-uppercase">
                           <th>Action</th>
                           <th>Subject</th>
                           <th>Description</th>
                           <th>User</th>
                           <th>User Agent</th>
                           <th>Date</th>
                        </tr>
                     </thead>
                     <tbody class="text-muted"></tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--end col-->
<!--end row-->
@endsection 
@section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="{{ URL::asset('/assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   function renderTable(url, columns, dataCallback = null) {
       $(document).ready(function () {
           var table = $('#logs-table').DataTable({
               responsive: true,
               processing: true,
               serverSide: true,
               ajax: {
                   url: url,
                   type: 'GET',
                   headers: {
                       'X-CSRF-TOKEN': '{{ csrf_token() }}'
                   },
                   data: function (d) {
                       if (typeof dataCallback === 'function') {
                           dataCallback(d);
                       }
                   }
               },
               columns: columns,
               order: [[4, 'desc']],
               pageLength: 50,
               lengthMenu: [[30, 40, 50, 100], [30, 40, 50, 100]],
               language: {
                   searchPlaceholder: 'Search...',
                   paginate: {
                       first: 'First',
                       last: 'Last',
                       next: '→',
                       previous: '←'
                   }
               },
               dom: '<"flex flex-wrap items-center justify-between gap-4 mb-2"' +
                   '<"flex items-center space-x-2"l>' +
                   '<"flex-grow"f>' +
                   '>' +
                   'rt' +
                   '<"flex flex-wrap items-center justify-between gap-4 mt-4"' +
                   '<"text-sm text-slate-500"i>' +
                   '<"flex items-center space-x-2"p>' +
                   '>',
               buttons: [
                   {
                       extend: 'copyHtml5',
                       className: 'buttons-copy hidden',
                       exportOptions: {
                           columns: function (idx, data, node) {
                               return table.column(idx).visible() && idx < table.columns().count();
                           }
                       }
                   },
                   {
                       extend: 'excelHtml5',
                       className: 'buttons-excel hidden',
                       exportOptions: {
                           columns: function (idx, data, node) {
                               return table.column(idx).visible() && idx < table.columns().count();
                           }
                       }
                   },
                   {
                       extend: 'csvHtml5',
                       className: 'buttons-csv hidden',
                       exportOptions: {
                           columns: function (idx, data, node) {
                               return table.column(idx).visible() && idx < table.columns().count();
                           }
                       }
                   },
                   {
                     extend: 'pdfHtml5',
                     className: 'buttons-pdf hidden',
                     orientation: 'landscape',
                     pageSize: 'A4',
                     title: function () {
                        const selectedText = $('#causer_id option:selected').text().trim();
                        return selectedText && selectedText !== 'All Users'
                              ? `Activity Logs - Performed By: ${selectedText}`
                              : 'Activity Logs';
                     },
                     exportOptions: {
                        columns: function (idx, data, node) {
                              return table.column(idx).visible() && idx < table.columns().count();
                        }
                     }
                  },
                  {
                     extend: 'print',
                     className: 'buttons-print hidden',
                     title: function () {
                        const selectedText = $('#causer_id option:selected').text().trim();
                        return selectedText && selectedText !== 'All Users'
                              ? `Activity Logs - Performed By: ${selectedText}`
                              : 'Activity Logs';
                     },
                     exportOptions: {
                        columns: function (idx, data, node) {
                              return table.column(idx).visible() && idx < table.columns().count();
                        }
                     }
                  }
               ]
           });
   
           // ⏫ Scroll to top on draw
           table.on('draw', function () {
               window.scrollTo(0, 0);
           });
   
           // 🔁 Refresh
           $('#refresh-btn').on('click', function () {
               table.ajax.reload(null, false);
           });
   
           // 🖨️ Export triggers
           $('#btn-copy').on('click', () => table.button('.buttons-copy').trigger());
           $('#btn-excel').on('click', () => table.button('.buttons-excel').trigger());
           $('#btn-csv').on('click', () => table.button('.buttons-csv').trigger());
           $('#btn-pdf').on('click', () => table.button('.buttons-pdf').trigger());
           $('#btn-print').on('click', () => table.button('.buttons-print').trigger());
   
           // 🧩 Column toggler
           $(document).on('change', '.toggle-col', function () {
               let column = table.column($(this).data('column'));
               column.visible($(this).is(':checked'));
           });
   
           // ⌨️ External search field (trigger on Enter key)
           $('#search').on('keyup', function (e) {
               if (e.key === 'Enter' || e.keyCode === 13) {
                   table.ajax.reload();
               }
           });
   
           // 🔄 Reload when any filter changes
           $('#causer_id, #start_date, #end_date').on('change', function () {
               table.ajax.reload();
           });
       });
   }
   
   // 🚀 Launch it
   renderTable("{{ route('admin.logs') }}", [
       { data: 'action', name: 'action', orderable: false },
       { data: 'subjectType', name: 'subjectType', orderable: false },
       { data: 'description', name: 'description', orderable: false },
       { data: 'admin', name: 'admin', orderable: false },
       { data: 'user_agent', orderable: false }, 
       { data: 'created_at', name: 'created_at' },
   ], function (d) {
       d.causer_id = $('#causer_id').val();
       d.start_date = $('#start_date').val();
       d.end_date = $('#end_date').val();
       if ($('#search').val()) {
           d.search = { value: $('#search').val() };
       }
   });
</script>
<script>
   const columnTogglesHtml = `
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="0" checked> Action</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="1" checked> Subject</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="2" checked> Description</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="3" checked> User</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="4" checked> Agent</label></li>
      <li><label><input class="form-check-input me-1 toggle-col" type="checkbox" data-column="5" checked> Date</label></li>
   `;
   
   document.addEventListener("DOMContentLoaded", () => {
      document.getElementById("columnToggles").innerHTML = columnTogglesHtml;
   });
   
</script>
<script>
   document.addEventListener('click', function (e) {
    if (e.target.classList.contains('ip-lookup-link')) {
        const el = e.target;
        const ip = el.getAttribute('data-ip');
        if (!ip) return;
   
        el.innerText = 'Loading...';
   
        fetch(`https://ipwho.is/${ip}`)
            .then(response => response.json())
            .then(data => {
                el.innerText = ip;
   
                if (!data.success) {
                    Swal.fire('IP Lookup Failed', 'Could not fetch details.', 'error');
                    return;
                }
   
                Swal.fire({
                    title: `IP Info: ${ip}`,
                    html: `
                        <p><strong>City:</strong> ${data.city}, ${data.region}</p>
                        <p><strong>Country:</strong> <img src="${data.flag.img}" width="20"> ${data.country}</p>
                        <p><strong>ISP:</strong> ${data.connection.isp}</p>
                        <p><strong>Timezone:</strong> ${data.timezone.id}</p>
                    `,
                    icon: 'info',
                    confirmButtonText: 'Close'
                });
            })
            .catch(() => {
                el.innerText = ip;
                Swal.fire('Error', 'Unable to contact IP service', 'error');
            });
    }
   });
   
</script>
@endsection