@extends('layouts.admin')

@section('title', 'Modern Category Management')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Modern Category System</h1>
        <p class="text-muted mb-0">Manage categories by business type - Food, Services & Retail</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-info" onclick="loadStats()">
            <i class="bi bi-graph-up me-1"></i>
            Refresh Stats
        </button>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-lg-2 col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="bi bi-diagram-3 text-white"></i>
                    </div>
                    <div>
                        <div class="h4 mb-0" id="stat-business-types">3</div>
                        <div class="small text-muted">Business Types</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                        <i class="bi bi-tags text-white"></i>
                    </div>
                    <div>
                        <div class="h4 mb-0" id="stat-main-categories">0</div>
                        <div class="small text-muted">Main Categories</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <i class="bi bi-tag text-white"></i>
                    </div>
                    <div>
                        <div class="h4 mb-0" id="stat-sub-categories">0</div>
                        <div class="small text-muted">Sub Categories</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                         style="width: 48px; height: 48px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                        <i class="bi bi-check-circle text-white"></i>
                    </div>
                    <div>
                        <div class="h4 mb-0" id="stat-active">0</div>
                        <div class="small text-muted">Active Categories</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="alert alert-info mb-0">
                    <small>
                        <i class="bi bi-info-circle me-1"></i>
                        <strong>Modern System:</strong> Each business type has its own specialized categories
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Business Types Grid -->
<div class="row">
    @foreach($businessTypes as $businessType)
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header border-0 py-3" style="background: linear-gradient(135deg, {{ $businessType->color_primary ?? '#667eea' }} 0%, {{ $businessType->color_secondary ?? '#764ba2' }} 100%);">
                <div class="d-flex align-items-center text-white">
                    <i class="{{ $businessType->icon ?? 'fas fa-tag' }} fa-2x me-3"></i>
                    <div>
                        <h5 class="card-title mb-1 text-white fw-bold">{{ $businessType->name }}</h5>
                        <p class="mb-0 text-white-50">{{ $businessType->slug }}</p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">{{ $businessType->description }}</p>
                
                <!-- Statistics -->
                <div class="row text-center mb-3">
                    <div class="col-6">
                        <div class="h4 mb-0 text-primary">{{ $businessType->mainCategories->count() }}</div>
                        <div class="small text-muted">Main Categories</div>
                    </div>
                    <div class="col-6">
                        <div class="h4 mb-0 text-success">{{ $businessType->mainCategories->sum(function($main) { return $main->subCategories->count(); }) }}</div>
                        <div class="small text-muted">Sub Categories</div>
                    </div>
                </div>

                <!-- Quick Preview of Main Categories -->
                @if($businessType->mainCategories->take(3)->count() > 0)
                <div class="mb-3">
                    <div class="small text-muted mb-2">Sample Categories:</div>
                    @foreach($businessType->mainCategories->take(3) as $mainCategory)
                    <span class="badge bg-light text-dark me-1 mb-1">
                        <i class="{{ $mainCategory->icon }} me-1"></i>{{ $mainCategory->name }}
                    </span>
                    @endforeach
                    @if($businessType->mainCategories->count() > 3)
                    <span class="badge bg-secondary">+{{ $businessType->mainCategories->count() - 3 }} more</span>
                    @endif
                </div>
                @endif

                <!-- Required/Optional Fields Info -->
                <div class="mb-3">
                    <div class="small text-muted mb-2">Business Requirements:</div>
                    <div class="d-flex gap-2">
                        <span class="badge bg-warning text-dark">{{ count($businessType->required_fields ?? []) }} Required</span>
                        <span class="badge bg-info">{{ count($businessType->optional_fields ?? []) }} Optional</span>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-white border-0">
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.bizspot-categories.business-type', $businessType->id) }}" class="btn btn-primary flex-fill">
                        <i class="bi bi-eye me-1"></i>
                        Manage Categories
                    </a>
                    <a href="{{ route('admin.bizspot-categories.create-main', $businessType->id) }}" class="btn btn-outline-success">
                        <i class="bi bi-plus-lg"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Quick Actions Panel -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">
                    <i class="bi bi-lightning me-2"></i>
                    Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                                 style="width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <i class="bi bi-restaurant text-white"></i>
                            </div>
                            <div>
                                <a href="{{ route('admin.bizspot-categories.business-type', 1) }}" class="text-decoration-none">
                                    <div class="fw-medium">Food & Menu Categories</div>
                                    <div class="small text-muted">Restaurants, cafes, food services</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                                 style="width: 40px; height: 40px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                                <i class="bi bi-tools text-white"></i>
                            </div>
                            <div>
                                <a href="{{ route('admin.bizspot-categories.business-type', 2) }}" class="text-decoration-none">
                                    <div class="fw-medium">Service Categories</div>
                                    <div class="small text-muted">Professional & personal services</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 d-flex align-items-center justify-content-center me-3" 
                                 style="width: 40px; height: 40px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                                <i class="bi bi-bag text-white"></i>
                            </div>
                            <div>
                                <a href="{{ route('admin.bizspot-categories.business-type', 3) }}" class="text-decoration-none">
                                    <div class="fw-medium">Retail Categories</div>
                                    <div class="small text-muted">Products, shopping, e-commerce</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Load statistics
function loadStats() {
    fetch('{{ route("admin.bizspot-categories.stats") }}')
        .then(response => response.json())
        .then(data => {
            document.getElementById('stat-business-types').textContent = data.business_types;
            document.getElementById('stat-main-categories').textContent = data.main_categories;
            document.getElementById('stat-sub-categories').textContent = data.sub_categories;
            document.getElementById('stat-active').textContent = data.active_main + data.active_sub;
        })
        .catch(error => console.error('Error loading stats:', error));
}

// Load stats on page load
document.addEventListener('DOMContentLoaded', loadStats);

// Add smooth transitions to cards
document.querySelectorAll('.card').forEach(card => {
    card.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
    
    card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-2px)';
        this.style.boxShadow = '0 4px 25px rgba(0,0,0,0.1)';
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0)';
        this.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
    });
});
</script>
@endsection