@extends('layouts.app')

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

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

@section('content')
<div class="py-6">
  <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">
        <!-- Header with Branch Info -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
          <div>
            <h2 class="text-2xl font-bold text-gray-800">
              <i class="fas fa-code-branch text-indigo-500 mr-2"></i>
              Branch: {{ $branch->branch_code }}
            </h2>
            @if($branch->branch_name)
            <p class="text-gray-600 mt-1">
              <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
              {{ $branch->branch_name }}
            </p>
            @endif
          </div>
          <a href="{{ route('admin.branches.index') }}"
            class="mt-3 sm:mt-0 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
            <i class="fas fa-arrow-left mr-1"></i>
            Back to List
          </a>
        </div>

        <!-- Branch Statistics -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
          <div class="bg-indigo-50 rounded-lg p-4 border border-indigo-100">
            <div class="flex items-center">
              <div class="bg-indigo-100 rounded-lg p-2 mr-3">
                <i class="fas fa-images text-indigo-600"></i>
              </div>
              <div>
                <p class="text-sm text-gray-600">Total Images</p>
                <p class="text-2xl font-bold text-indigo-600">{{ $branch->images->count() }}/5</p>
              </div>
            </div>
          </div>

          <div class="bg-green-50 rounded-lg p-4 border border-green-100">
            <div class="flex items-center">
              <div class="bg-green-100 rounded-lg p-2 mr-3">
                <i class="fas fa-calendar text-green-600"></i>
              </div>
              <div>
                <p class="text-sm text-gray-600">Created</p>
                <p class="text-md font-semibold text-gray-800">{{ $branch->created_at->format('d M Y') }}</p>
              </div>
            </div>
          </div>

          <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
            <div class="flex items-center">
              <div class="bg-purple-100 rounded-lg p-2 mr-3">
                <i class="fas fa-database text-purple-600"></i>
              </div>
              <div>
                <p class="text-sm text-gray-600">Total Size</p>
                <p class="text-md font-semibold text-gray-800">
                  @php
                  $totalSize = $branch->images->sum('file_size');
                  echo $totalSize > 0 ? round($totalSize / 1048576, 2) . ' MB' : '0 MB';
                  @endphp
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- Success Message -->
        @if(session('success'))
        <div class="mb-6 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg" role="alert">
          <div class="flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            <p>{{ session('success') }}</p>
          </div>
        </div>
        @endif

        <!-- Images Section -->
        <div class="mb-4 flex justify-between items-center">
          <h3 class="text-xl font-bold text-gray-800">
            <i class="fas fa-images text-indigo-500 mr-2"></i>
            Uploaded Images
          </h3>
          <span class="text-sm text-gray-500">
            {{ $branch->images->count() }} of 5 images
          </span>
        </div>

        @if($branch->images->isEmpty())
        <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
          <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
          <p class="text-lg font-medium text-gray-600">No images uploaded yet</p>
          <p class="text-sm text-gray-500 mt-1">Images uploaded for this branch will appear here</p>
        </div>
        @else
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          @foreach($branch->images as $image)
          <div class="border rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-all duration-200 group">
            <!-- Image Container -->
            <div class="relative aspect-w-4 aspect-h-3 bg-gray-100">
              <a href="{{ $image->image_url }}" target="_blank" class="block h-full">
                <img src="{{ $image->thumbnail_url }}"
                  alt="Branch Image"
                  class="w-full h-40 object-cover group-hover:opacity-90 transition-opacity"
                  loading="lazy"
                  onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'150\' viewBox=\'0 0 200 150\'%3E%3Crect width=\'200\' height=\'150\' fill=\'%23e2e8f0\'/%3E%3Ctext x=\'50\' y=\'85\' font-family=\'Arial\' font-size=\'14\' fill=\'%2394a3b8\'%3EImage%3C/text%3E%3C/svg%3E';">
              </a>
              <!-- Quick Actions Overlay -->
              <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                <div class="flex space-x-1">
                  <a href="{{ $image->image_url }}"
                    target="_blank"
                    class="bg-white text-gray-700 hover:text-indigo-600 rounded-lg p-2 shadow-md"
                    title="View Full Image">
                    <i class="fas fa-external-link-alt text-sm"></i>
                  </a>
                </div>
              </div>
            </div>

            <!-- Image Details -->
            <div class="p-3">
              <p class="text-sm font-medium text-gray-900 truncate" title="{{ $image->original_name }}">
                <i class="fas fa-file-image text-gray-400 mr-1 text-xs"></i>
                {{ Str::limit($image->original_name, 20) }}
              </p>

              <div class="flex items-center justify-between mt-2 text-xs text-gray-500">
                <span>
                  <i class="fas fa-database mr-1"></i>
                  {{ round($image->file_size / 1024, 2) }} KB
                </span>
                <span>
                  <i class="far fa-clock mr-1"></i>
                  {{ $image->created_at->format('d M') }}
                </span>
              </div>

              <!-- Delete Form -->
              <form action="{{ route('admin.branches.image.delete', $image->id) }}"
                method="POST"
                class="mt-3"
                onsubmit="return confirm('Are you sure you want to delete this image?')">
                @csrf
                @method('DELETE')
                <button type="submit"
                  class="w-full text-xs bg-red-50 hover:bg-red-100 text-red-600 font-medium py-2 px-3 rounded-lg transition-colors duration-150 flex items-center justify-center">
                  <i class="fas fa-trash-alt mr-1"></i>
                  Delete Image
                </button>
              </form>
            </div>
          </div>
          @endforeach
        </div>

        <!-- Progress Bar -->
        <div class="mt-6 bg-gray-100 rounded-lg p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium text-gray-700">Storage Usage</span>
            <span class="text-sm text-gray-600">{{ $branch->images->count() }}/5 images used</span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2.5">
            <div class="bg-indigo-600 rounded-full h-2.5"
              style="width: {{ ($branch->images->count() / 5) * 100 }}%"></div>
          </div>
        </div>
        @endif
      </div>
    </div>
  </div>
</div>
@endsection