@extends('layouts.admin')

@section('title', 'Market Categories - Bizspot Integration')

@section('content')
<div class="container-fluid">

    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Market Categories</h1>
            <p class="text-muted">Unified Bizspot category system for market stalls</p>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.bizspot-categories.index') }}">Categories</a></li>
                <li class="breadcrumb-item active">Market Categories</li>
            </ol>
        </nav>
    </div>

    <!-- Market Overview Stats -->
    <div class="row mb-4">
        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Markets</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_markets'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-store fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Total Stalls</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-grid-3x3-gap fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Categorized</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['categorized_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-tags fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Uncategorized</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['uncategorized_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-question-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Occupied</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['occupied_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-house-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
            <div class="card border-left-secondary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Active Vendors</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_vendors'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bizspot Business Types for Markets -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Bizspot Business Types for Market Stalls</h6>
            <span class="badge badge-success">Unified System</span>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($bizspotBusinessTypes as $businessType)
                <div class="col-lg-6 col-xl-4 mb-4">
                    <div class="card border-left-primary h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="icon-circle bg-primary text-white me-3">
                                    <i class="{{ $businessType->icon ?? 'fas fa-store' }}"></i>
                                </div>
                                <div>
                                    <h5 class="card-title mb-0">{{ $businessType->name }}</h5>
                                    <small class="text-muted">{{ $businessType->slug }}</small>
                                </div>
                            </div>
                            
                            <p class="card-text text-sm">{{ $businessType->description ?: 'No description available' }}</p>
                            
                            <!-- Current Usage -->
                            @if(isset($categoryDistribution[$businessType->name]))
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-sm text-muted">Stalls using this type:</span>
                                        <span class="badge badge-primary">{{ $categoryDistribution[$businessType->name] }}</span>
                                    </div>
                                </div>
                            @else
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-sm text-muted">Stalls using this type:</span>
                                        <span class="badge badge-secondary">0</span>
                                    </div>
                                </div>
                            @endif
                            
                            <!-- Main Categories -->
                            @if($businessType->mainCategories->count() > 0)
                                <div class="mb-3">
                                    <small class="text-muted d-block mb-2">Main Categories:</small>
                                    <div class="d-flex flex-wrap gap-1">
                                        @foreach($businessType->mainCategories->take(3) as $mainCategory)
                                            <span class="badge badge-light text-dark">{{ $mainCategory->name }}</span>
                                        @endforeach
                                        @if($businessType->mainCategories->count() > 3)
                                            <span class="badge badge-light text-dark">+{{ $businessType->mainCategories->count() - 3 }} more</span>
                                        @endif
                                    </div>
                                </div>
                            @endif
                            
                            <div class="mt-auto">
                                <a href="{{ route('admin.bizspot-categories.business-type', $businessType->id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i> View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Category Distribution Chart -->
    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Business Type Distribution</h6>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="categoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Market Integration Guide</h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                            <div>
                                <strong>Unified Categories</strong>
                                <br><small class="text-muted">All markets use Bizspot categories</small>
                            </div>
                            <span class="badge badge-success">Active</span>
                        </div>
                        
                        <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                            <div>
                                <strong>Categorized Stalls</strong>
                                <br><small class="text-muted">Stalls with assigned categories</small>
                            </div>
                            <span class="badge badge-primary">{{ $stats['categorized_stalls'] }}</span>
                        </div>
                        
                        <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                            <div>
                                <strong>Uncategorized Stalls</strong>
                                <br><small class="text-muted">Stalls needing category assignment</small>
                            </div>
                            <span class="badge badge-warning">{{ $stats['uncategorized_stalls'] }}</span>
                        </div>
                        
                        <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                            <div>
                                <strong>Category Coverage</strong>
                                <br><small class="text-muted">Percentage of categorized stalls</small>
                            </div>
                            <span class="badge badge-info">
                                {{ $stats['total_stalls'] > 0 ? round(($stats['categorized_stalls'] / $stats['total_stalls']) * 100, 1) : 0 }}%
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <a href="{{ route('admin.markets.index') }}" class="btn btn-outline-primary btn-block">
                        <i class="fas fa-store me-2"></i> Manage Markets
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('admin.bizspot-categories.index') }}" class="btn btn-outline-success btn-block">
                        <i class="fas fa-layer-group me-2"></i> Manage Categories
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-info btn-block">
                        <i class="fas fa-users me-2"></i> Manage Vendors
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-block">
                        <i class="fas fa-tachometer-alt me-2"></i> Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Category Distribution Chart
const ctx = document.getElementById('categoryChart').getContext('2d');
const categoryData = @json($categoryDistribution);

const labels = Object.keys(categoryData);
const data = Object.values(categoryData);

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: [
                '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
                '#858796', '#5a5c69', '#2e59d9', '#17a673', '#2c9faf'
            ],
            hoverBackgroundColor: [
                '#2e59d9', '#17a673', '#2c9faf', '#f4b619', '#e02424',
                '#6b6d7d', '#4a4b52', '#224abe', '#13855c', '#1a8997'
            ],
            hoverBorderColor: "rgba(234, 236, 244, 1)",
        }],
    },
    options: {
        maintainAspectRatio: false,
        tooltips: {
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            caretPadding: 10,
        },
        legend: {
            display: true,
            position: 'bottom'
        },
        cutoutPercentage: 80,
    },
});
</script>
@endpush

@endsection