@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') Account @endslot @slot('title') settings @endslot @endcomponent --}}
<div class="row">
   <div class="col-lg-12">
      <div class="card mt-n4 mx-n4">
         <div class="bg-soft-light">
            @include('clients.header')
            <!-- end card body -->
         </div>
      </div>
      <!-- end card -->
   </div>
   <!-- end col -->
</div>
<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
      <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="messages-table" style="width: 100%;">
                     <thead class="text-muted table-light">
                        <tr class="text-uppercase">
                           <th>Action</th>
                           <th>Subject</th>
                           <th>Description</th>
                           <th>User</th>
                           <th>Agent</th> 
                           <th>Date</th>
                        </tr>
                     </thead>
                     <tbody class="text-muted">
                        @foreach($logs as $log)
                           @php
                                 $properties = json_decode($log->properties);
                                 $action = $properties->action ?? '';
                                 $subjectType = class_basename($log->subject_type);
                                 $causerName = optional($log->causer)->fullName() ?? ($properties->causer_name ?? 'Unknown');

                                 $agent = $properties->agent ?? null;
                                 $browser = strtolower($agent->browser ?? 'unknown');
                                 $platform = strtolower($agent->platform ?? 'unknown');
                                 $ipAddress = $agent->ip_address ?? null;

                                 // Determine browser logo
                                 if (strpos($browser, 'chrome') !== false) {
                                    $browserLogo = 'chrome';
                                 } elseif (strpos($browser, 'firefox') !== false) {
                                    $browserLogo = 'firefox';
                                 } elseif (strpos($browser, 'safari') !== false) {
                                    $browserLogo = 'safari';
                                 } elseif (strpos($browser, 'edge') !== false) {
                                    $browserLogo = 'edge';
                                 } elseif (strpos($browser, 'opera') !== false) {
                                    $browserLogo = 'opera';
                                 } else {
                                    $browserLogo = 'unknown';
                                 }

                                 // Determine platform logo
                                 if (strpos($platform, 'windows') !== false) {
                                    $platformLogo = 'windows';
                                 } elseif (strpos($platform, 'mac') !== false) {
                                    $platformLogo = 'mac';
                                 } elseif (strpos($platform, 'linux') !== false) {
                                    $platformLogo = 'linux';
                                 } elseif (strpos($platform, 'android') !== false) {
                                    $platformLogo = 'android';
                                 } elseif (strpos($platform, 'ios') !== false || strpos($platform, 'iphone') !== false) {
                                    $platformLogo = 'ios';
                                 } else {
                                    $platformLogo = 'other';
                                 }

                                 $browserIcon = '<img src="' . asset("icons/browsers/{$browserLogo}.svg") . '" width="20" height="20" alt="' . ucfirst($browserLogo) . '" title="' . ucfirst($browserLogo) . '">';
                                 $platformIcon = '<img src="' . asset("icons/platforms/{$platformLogo}.svg") . '" width="20" height="20" alt="' . ucfirst($platformLogo) . '" title="' . ucfirst($platformLogo) . '">';

                                 $ipDisplay = $ipAddress
                                    ? '<a href="javascript:void(0)" class="text-muted small ms-2 ip-lookup-link d-inline-flex align-items-center"
                                       data-ip="' . e($ipAddress) . '" title="Click to view IP details"
                                       style="text-decoration: underline dotted; cursor: pointer;">' . e($ipAddress) . '</a>'
                                    : '<span class="text-muted small ms-2">Unknown IP</span>';

                                 $userAgentDisplay = '<div class="d-flex align-items-center gap-2">' . $browserIcon . ' ' . $platformIcon . ' ' . $ipDisplay . '</div>';
                           @endphp

                           <tr>
                                 <td>{{ $action }}</td>
                                 <td>{{ $subjectType }}</td>
                                 <td>{{ $log->description }}</td>
                                 <td><span class="badge bg-success text-uppercase">{{ $causerName }}</span></td>
                                 <td>{!! $userAgentDisplay !!}</td>
                                 <td>{{ $log->created_at->format('d M Y H:i') }}</td>
                           </tr>
                        @endforeach
                     </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>
   $(document).ready(function() {
      $('#messages-table').DataTable({
         "order": [[5, "desc"]] ,
         "pageLength": 50,
         "responsive": true
      });
   });
</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;

        // Show loading text
        el.innerText = 'Loading...';

        fetch(`https://ipwho.is/${ip}`)
            .then(response => response.json())
            .then(data => {
                // Restore original IP text
                el.innerText = ip;

                if (!data.success) {
                    Swal.fire('IP Lookup Failed', 'Could not fetch details.', 'error');
                    return;
                }

                const localTime = new Date(data.timezone.current_time).toLocaleString();

                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>
                        <p><strong>Current Time:</strong> ${localTime}</p>
                    `,
                    icon: 'info',
                    confirmButtonText: 'Close'
                });
            })
            .catch(() => {
                el.innerText = ip;
                Swal.fire('Error', 'Unable to contact IP service', 'error');
            });
    }
});
</script>
@endsection