@extends('layouts.app')

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

@section('header', 'Dashboard')

@section('content')
<div class="py-6">
  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    <!-- Welcome Section -->
    <div class="mb-6">
      <h2 class="text-2xl font-bold text-gray-800">Welcome, {{ Auth::user()->name }}!</h2>
      <p class="text-gray-600 mt-1">Here's an overview of your photo upload portal.</p>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
      <!-- Total Branches Card -->
      <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-3">
              <i class="fas fa-code-branch text-white text-2xl"></i>
            </div>
            <div class="ml-4 text-white">
              <p class="text-sm font-medium opacity-90">Total Branches</p>
              <p class="text-3xl font-bold">{{ $stats['total_branches'] }}</p>
            </div>
          </div>
        </div>
        <div class="bg-white bg-opacity-10 px-5 py-2">
          <a href="{{ route('admin.branches.index') }}" class="text-xs text-white hover:text-indigo-100 flex items-center">
            View all branches
            <i class="fas fa-arrow-right ml-1 text-xs"></i>
          </a>
        </div>
      </div>

      <!-- Total Images Card -->
      <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-3">
              <i class="fas fa-images text-white text-2xl"></i>
            </div>
            <div class="ml-4 text-white">
              <p class="text-sm font-medium opacity-90">Total Images</p>
              <p class="text-3xl font-bold">{{ $stats['total_images'] }}</p>
            </div>
          </div>
        </div>
        <div class="bg-white bg-opacity-10 px-5 py-2">
          <span class="text-xs text-white">
            <i class="fas fa-calendar-day mr-1"></i>
            {{ $stats['total_uploads_today'] }} uploaded today
          </span>
        </div>
      </div>

      <!-- Active Branches Card -->
      <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg overflow-hidden">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-lg p-3">
              <i class="fas fa-store-alt text-white text-2xl"></i>
            </div>
            <div class="ml-4 text-white">
              <p class="text-sm font-medium opacity-90">Active Branches</p>
              <p class="text-3xl font-bold">{{ $stats['active_branches'] }}</p>
            </div>
          </div>
        </div>
        <div class="bg-white bg-opacity-10 px-5 py-2">
          <span class="text-xs text-white">
            <i class="fas fa-chart-line mr-1"></i>
            {{ round(($stats['active_branches'] / max($stats['total_branches'], 1)) * 100, 1) }}% of total
          </span>
        </div>
      </div>
    </div>

    <!-- Recent Uploads Datatable -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="px-6 py-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">
          <i class="fas fa-clock text-indigo-500 mr-2"></i>
          Recent Uploads
        </h3>
        <div class="flex items-center space-x-2">
          <span class="text-sm text-gray-500">
            <i class="fas fa-image mr-1"></i>
            Total: {{ $stats['total_images'] }} images
          </span>
          <a href="{{ route('admin.branches.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
            Manage Branches
            <i class="fas fa-arrow-right ml-1 text-xs"></i>
          </a>
        </div>
      </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>
              <th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                <i class="fas fa-cog mr-1"></i> Actions
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            @forelse($recentUploads as $upload)
            <tr class="hover:bg-gray-50 transition">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-lg flex items-center justify-center">
                    <span class="text-indigo-600 font-semibold text-sm">{{ substr($upload->branch->branch_code, -4) }}</span>
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">{{ $upload->branch->branch_code }}</div>
                    <div class="text-sm text-gray-500">
                      <i class="fas fa-map-marker-alt text-xs mr-1"></i>
                      {{ $upload->branch->branch_name ?? 'N/A' }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <!-- Thumbnail Image -->
                  <div class="h-10 w-10 bg-gray-200 rounded-lg overflow-hidden">
                    <img src="{{ $upload->thumbnail_url }}"
                      alt="Branch Image"
                      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=\'40\' height=\'40\' viewBox=\'0 0 40 40\'%3E%3Crect width=\'40\' height=\'40\' fill=\'%23e2e8f0\'/%3E%3Ctext x=\'8\' y=\'25\' font-family=\'Arial\' font-size=\'14\' 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, 20) }}</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>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex items-center space-x-3">
                  <a href="{{ route('admin.branches.show', $upload->branch_id) }}"
                    class="text-indigo-600 hover:text-indigo-900"
                    title="View Branch">
                    <i class="fas fa-eye"></i>
                  </a>
                  <a href="{{ $upload->image_url }}"
                    target="_blank"
                    class="text-green-600 hover:text-green-900"
                    title="View Full Image">
                    <i class="fas fa-external-link-alt"></i>
                  </a>
                  <form action="{{ route('admin.branches.image.delete', $upload->id) }}"
                    method="POST"
                    class="inline"
                    onsubmit="return confirm('Delete this image?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-red-600 hover:text-red-900" title="Delete Image">
                      <i class="fas fa-trash-alt"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="5" 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($recentUploads->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 {{ $recentUploads->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