@extends('layouts.app')

@section('title', 'Branch Statistics - Axis Max Life Admin')

@section('header', 'Branch Statistics')

@section('content')
<div class="py-6">
  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    <!-- Summary Cards with Icons -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
      <!-- Total Branches Card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-indigo-500">
        <div class="p-5">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Branches</p>
              <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['total_branches'] }}</p>
            </div>
            <div class="bg-indigo-100 rounded-lg p-3">
              <i class="fas fa-code-branch text-indigo-600 text-2xl"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Total Images Card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-green-500">
        <div class="p-5">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Images</p>
              <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['total_images'] }}</p>
            </div>
            <div class="bg-green-100 rounded-lg p-3">
              <i class="fas fa-images text-green-600 text-2xl"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Branches with Images Card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-blue-500">
        <div class="p-5">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Active Branches</p>
              <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['branches_with_images'] }}</p>
            </div>
            <div class="bg-blue-100 rounded-lg p-3">
              <i class="fas fa-store-alt text-blue-600 text-2xl"></i>
            </div>
          </div>
          <div class="mt-2 text-xs text-gray-500">
            {{ round(($stats['branches_with_images'] / max($stats['total_branches'], 1)) * 100, 1) }}% of total
          </div>
        </div>
      </div>

      <!-- Max Uploaded Card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-purple-500">
        <div class="p-5">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Completed (5/5)</p>
              <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['max_uploaded_branches'] }}</p>
            </div>
            <div class="bg-purple-100 rounded-lg p-3">
              <i class="fas fa-trophy text-purple-600 text-2xl"></i>
            </div>
          </div>
          <div class="mt-2 text-xs text-gray-500">
            branches reached maximum capacity
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
      <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center justify-between text-white">
            <div>
              <p class="text-sm font-medium opacity-90">Upload Completion Rate</p>
              <p class="text-3xl font-bold mt-1">
                {{ round(($stats['total_images'] / ($stats['total_branches'] * 5)) * 100, 1) }}%
              </p>
            </div>
            <i class="fas fa-chart-pie text-4xl opacity-50"></i>
          </div>
          <div class="mt-3 bg-white bg-opacity-20 rounded-full h-2">
            <div class="bg-white rounded-full h-2" style="width: {{ ($stats['total_images'] / ($stats['total_branches'] * 5)) * 100 }}%"></div>
          </div>
        </div>
      </div>

      <div class="bg-gradient-to-br from-green-400 to-green-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center justify-between text-white">
            <div>
              <p class="text-sm font-medium opacity-90">Average Images/Branch</p>
              <p class="text-3xl font-bold mt-1">
                {{ $stats['branches_with_images'] > 0 ? round($stats['total_images'] / $stats['branches_with_images'], 1) : 0 }}
              </p>
            </div>
            <i class="fas fa-calculator text-4xl opacity-50"></i>
          </div>
          <p class="text-xs text-white mt-2 opacity-75">per active branch</p>
        </div>
      </div>

      <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center justify-between text-white">
            <div>
              <p class="text-sm font-medium opacity-90">Empty Branches</p>
              <p class="text-3xl font-bold mt-1">{{ $stats['total_branches'] - $stats['branches_with_images'] }}</p>
            </div>
            <i class="fas fa-folder-open text-4xl opacity-50"></i>
          </div>
          <p class="text-xs text-white mt-2 opacity-75">need attention</p>
        </div>
      </div>
    </div>

    <!-- Recent Uploads Table -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">
          <i class="fas fa-history text-indigo-500 mr-2"></i>
          Recent Uploads
        </h3>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-100">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                <i class="fas fa-code-branch mr-1"></i> Branch
              </th>
              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                <i class="fas fa-image mr-1"></i> Image
              </th>
              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                <i class="fas fa-weight-hanging mr-1"></i> Size
              </th>
              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                <i class="fas fa-calendar mr-1"></i> Uploaded
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            @forelse($stats['recent_uploads'] as $upload)
            <tr class="hover:bg-gray-50 transition">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="h-8 w-8 bg-indigo-100 rounded-lg flex items-center justify-center">
                    <span class="text-indigo-600 font-semibold text-xs">{{ substr($upload->branch->branch_code, -4) }}</span>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-gray-900">{{ $upload->branch->branch_code }}</div>
                    <div class="text-xs text-gray-500">{{ $upload->branch->branch_name ?? 'N/A' }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="h-8 w-8 bg-gray-200 rounded-lg overflow-hidden">
                    <img src="{{ $upload->thumbnail_url }}"
                      alt=""
                      class="h-full w-full object-cover"
                      loading="lazy"
                      onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'32\' height=\'32\' viewBox=\'0 0 32 32\'%3E%3Crect width=\'32\' height=\'32\' fill=\'%23e2e8f0\'/%3E%3Ctext x=\'8\' y=\'20\' font-family=\'Arial\' font-size=\'12\' fill=\'%2394a3b8\'%3Eimg%3C/text%3E%3C/svg%3E';">
                  </div>
                  <div class="ml-3">
                    <div class="text-sm text-gray-900">{{ Str::limit($upload->original_name, 25) }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <i class="fas fa-database text-xs mr-1"></i>
                {{ round($upload->file_size / 1024, 2) }} KB
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">
                  <i class="far fa-calendar-alt text-xs mr-1"></i>
                  {{ $upload->created_at->format('d M Y') }}
                </div>
                <div class="text-xs text-gray-500">
                  <i class="far fa-clock text-xs mr-1"></i>
                  {{ $upload->created_at->diffForHumans() }}
                </div>
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                <i class="fas fa-images text-5xl text-gray-300 mb-4"></i>
                <p class="text-lg font-medium">No uploads yet</p>
                <p class="text-sm mt-1">Images uploaded by branches will appear here</p>
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      @if($stats['recent_uploads']->count() > 0)
      <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-600">
            <i class="fas fa-list mr-1"></i>
            Showing {{ $stats['recent_uploads']->count() }} most recent uploads
          </span>
          <a href="{{ route('admin.branches.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
            View all branches
            <i class="fas fa-arrow-right ml-1 text-xs"></i>
          </a>
        </div>
      </div>
      @endif
    </div>
  </div>
</div>
@endsection