@extends('backEnd.layouts.master')
@section('title', 'Visitor Analytics')

@push('styles')
@include('backEnd.reports.partials.report-styles')
@endpush

@section('content')
<div class="container-fluid py-3">

  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
      <h4 class="rp-page-title mb-0">Visitor Analytics</h4>
      <p class="text-muted mb-0 small">Website visitors tracking — কারা আসছেন দেখুন</p>
    </div>
    <div class="col-md-5 text-end">
      <a href="{{ route('admin.leads.index') }}" class="btn btn-outline-primary btn-sm">
        <i class="fas fa-user-tag me-1"></i>Leads
      </a>
    </div>
  </div>

  {{-- Stats --}}
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-2">
      <div class="card border-0 shadow-sm text-center">
        <div class="card-body py-3">
          <div class="fs-4 fw-bold text-primary">{{ $stats['today'] }}</div>
          <div class="text-muted small">Today</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-2">
      <div class="card border-0 shadow-sm text-center">
        <div class="card-body py-3">
          <div class="fs-4 fw-bold text-success">{{ $stats['week'] }}</div>
          <div class="text-muted small">This Week</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-2">
      <div class="card border-0 shadow-sm text-center">
        <div class="card-body py-3">
          <div class="fs-4 fw-bold text-warning">{{ $stats['month'] }}</div>
          <div class="text-muted small">This Month</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-2">
      <div class="card border-0 shadow-sm text-center">
        <div class="card-body py-3">
          <div class="fs-4 fw-bold text-danger">{{ $stats['mobile'] }}</div>
          <div class="text-muted small">Mobile</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-2">
      <div class="card border-0 shadow-sm text-center">
        <div class="card-body py-3">
          <div class="fs-4 fw-bold text-info">{{ $stats['desktop'] }}</div>
          <div class="text-muted small">Desktop</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-md-5">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-fire text-danger me-2"></i>Top Pages
        </div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush">
            @forelse($topPages as $page)
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span class="text-truncate small" style="max-width:320px;">{{ $page->page_url }}</span>
              <span class="badge bg-primary rounded-pill">{{ $page->visits }}</span>
            </li>
            @empty
            <li class="list-group-item text-muted text-center py-3">No data yet</li>
            @endforelse
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-list me-2 text-info"></i>Recent Visitors
        </div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>IP</th><th>Page</th><th>Device</th><th>Browser</th><th>Time</th>
              </tr>
            </thead>
            <tbody>
            @forelse($logs->take(20) as $log)
            <tr>
              <td class="small">{{ $log->ip_address }}</td>
              <td class="small text-truncate" style="max-width:200px;">
                {{ basename(parse_url($log->page_url, PHP_URL_PATH)) ?: 'Home' }}
              </td>
              <td>
                @if($log->device_type === 'mobile')
                  <i class="fas fa-mobile-alt text-success" title="Mobile"></i>
                @elseif($log->device_type === 'tablet')
                  <i class="fas fa-tablet-alt text-warning" title="Tablet"></i>
                @else
                  <i class="fas fa-desktop text-info" title="Desktop"></i>
                @endif
              </td>
              <td class="small">{{ $log->browser }}</td>
              <td class="small text-muted">{{ $log->created_at->diffForHumans() }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="text-center py-3 text-muted">No visitors yet</td></tr>
            @endforelse
            </tbody>
          </table>
        </div>
        @if($logs->hasPages())
        <div class="card-footer bg-white">{{ $logs->links() }}</div>
        @endif
      </div>
    </div>
  </div>

</div>
@endsection