@extends('layouts.admin')
@section('title', 'Branches')
@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="text-cream/50 text-sm">Total Branches: {{ $branches->count() }}</div>
    <a href="{{ route('admin.branches.create') }}" class="btn-primary">
        <i class="fas fa-plus"></i> Add Branch
    </a>
</div>

<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
    @forelse($branches as $branch)
    <div class="admin-card overflow-hidden group">
        <div class="h-32 bg-gradient-to-br from-dg to-db relative overflow-hidden">
            @if($branch->image)
            <img src="{{ $branch->image_url }}" alt="{{ $branch->name }}" class="w-full h-full object-cover opacity-60">
            @endif
            @if($branch->is_main)
            <span class="absolute top-3 right-3 bg-gold text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-tighter">Main Branch</span>
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-dg to-transparent"></div>
            <div class="absolute bottom-3 left-4">
                <h3 class="font-playfair text-cream text-lg font-bold">{{ $branch->name }}</h3>
                <p class="text-gold text-xs">{{ $branch->city }}</p>
            </div>
        </div>
        
        <div class="p-5 space-y-4">
            <div class="space-y-2">
                <div class="flex items-center gap-3 text-xs text-cream/60">
                    <i class="fas fa-map-marker-alt text-gold/50 w-4"></i>
                    <span class="truncate">{{ $branch->address }}</span>
                </div>
                <div class="flex items-center gap-3 text-xs text-cream/60">
                    <i class="fas fa-phone text-gold/50 w-4"></i>
                    <span>{{ $branch->phone }}</span>
                </div>
                <div class="flex items-center gap-3 text-xs text-cream/60">
                    <i class="fas fa-clock text-gold/50 w-4"></i>
                    <span>{{ $branch->opening_time }} – {{ $branch->closing_time }}</span>
                </div>
            </div>

            <div class="flex items-center justify-between pt-4 border-t border-white/5">
                <span class="badge {{ $branch->is_active ? 'badge-green' : 'badge-red' }}">
                    {{ $branch->is_active ? 'Active' : 'Inactive' }}
                </span>
                
                <div class="flex items-center gap-2">
                    <a href="{{ route('admin.branches.edit', $branch) }}" class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-gold transition-colors">
                        <i class="fas fa-edit text-xs"></i>
                    </a>
                    <form method="POST" action="{{ route('admin.branches.destroy', $branch) }}" onsubmit="return confirm('Delete this branch?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="w-8 h-8 rounded-lg bg-red-500/20 hover:bg-red-500/30 flex items-center justify-center text-red-400 transition-colors">
                            <i class="fas fa-trash text-xs"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-full text-center py-20 admin-card">
        <i class="fas fa-store-slash text-gold/20 text-6xl mb-4"></i>
        <p class="text-cream/50">No branches added yet.</p>
    </div>
    @endforelse
</div>
@endsection