@extends('layouts.app')

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

@section('content')
<div class="py-12">
  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
      <div class="p-6">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-gray-800">Branch Management</h2>
          <a href="{{ route('admin.branches.create') }}"
            class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition duration-150 ease-in-out">
            + Add New Branch
          </a>
        </div>

        <!-- Summary Stats -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
            <h3 class="text-lg font-semibold text-blue-800">Total Branches</h3>
            <p class="text-3xl font-bold text-blue-600">{{ $branches->count() }}</p>
          </div>
          <div class="bg-green-50 p-4 rounded-lg border border-green-100">
            <h3 class="text-lg font-semibold text-green-800">Total Uploads</h3>
            <p class="text-3xl font-bold text-green-600">{{ $totalUploads }}</p>
          </div>
          <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 class="text-lg font-semibold text-yellow-800">Active Branches</h3>
            <p class="text-3xl font-bold text-yellow-600">{{ $branches->where('images_count', '>', 0)->count() }}</p>
          </div>
        </div>

        @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-4">
          {{ session('success') }}
        </div>
        @endif

        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch Code</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch Name</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Images Uploaded</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              @forelse($branches as $branch)
              <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap font-medium">{{ $branch->branch_code }}</td>
                <td class="px-6 py-4 whitespace-nowrap">{{ $branch->branch_name ?? 'N/A' }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {{ $branch->images_count == 5 ? 'bg-green-100 text-green-800' : 
                                           ($branch->images_count > 0 ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                    {{ $branch->images_count }}/5
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                  <a href="{{ route('admin.branches.show', $branch->id) }}"
                    class="text-indigo-600 hover:text-indigo-900">View</a>
                  <form action="{{ route('admin.branches.destroy', $branch->id) }}" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                      class="text-red-600 hover:text-red-900"
                      onclick="return confirm('Are you sure you want to delete this branch and all its images?')">
                      Delete
                    </button>
                  </form>
                </td>
              </tr>
              @empty
              <tr>
                <td colspan="4" class="px-6 py-4 text-center text-gray-500">
                  No branches found. <a href="{{ route('admin.branches.create') }}" class="text-indigo-600 hover:underline">Add your first branch</a>
                </td>
              </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection