@extends('layouts.admin')

@section('title', 'Branches')
@section('subtitle', 'Manage store locations')

@section('actions')
    <a href="{{ route('admin.branches.create') }}"
        class="px-6 py-2 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">
        + Add Branch
    </a>
@endsection

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($branches as $branch)
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-2xl">
                        🏪
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ route('admin.branches.edit', $branch) }}"
                            class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition">
                            ✏️
                        </a>
                        @if($branch->users->count() == 0 && $branch->invoices->count() == 0)
                            <form action="{{ route('admin.branches.destroy', $branch) }}" method="POST"
                                onsubmit="return confirm('Delete this branch?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition">🗑️</button>
                            </form>
                        @endif
                    </div>
                </div>

                <h3 class="text-lg font-semibold text-slate-800 mb-1">{{ $branch->name }}</h3>
                <p class="text-sm text-slate-500 mb-4">{{ $branch->code }}</p>

                <div class="space-y-2 text-sm">
                    @if($branch->address)
                        <div class="flex items-start gap-2">
                            <span class="text-slate-400">📍</span>
                            <span class="text-slate-600">{{ $branch->address }}</span>
                        </div>
                    @endif
                    @if($branch->phone)
                        <div class="flex items-center gap-2">
                            <span class="text-slate-400">📞</span>
                            <span class="text-slate-600">{{ $branch->phone }}</span>
                        </div>
                    @endif
                </div>

                <div class="mt-4 pt-4 border-t border-slate-100 flex items-center justify-between">
                    <div class="flex gap-4 text-sm text-slate-500">
                        <span>👥 {{ $branch->users->count() }} users</span>
                        <span>📦 {{ $branch->stock->count() }} products</span>
                    </div>
                    @if($branch->is_active)
                        <span class="px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">Active</span>
                    @else
                        <span class="px-2 py-1 bg-red-50 text-red-600 rounded-full text-xs">Inactive</span>
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-3 bg-white rounded-2xl p-12 text-center text-slate-400">
                <p class="text-4xl mb-2">🏪</p>
                <p>No branches found</p>
                <a href="{{ route('admin.branches.create') }}" class="text-blue-600 mt-2 inline-block">Add your first branch</a>
            </div>
        @endforelse
    </div>
@endsection