@extends('layouts.admin')

@section('title', 'Services Management - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="bi bi-tools me-2"></i>Services Management
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.vendors.show', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
                    <li class="breadcrumb-item active">Services</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{{ route('admin.vendors.show', $vendor) }}" class="btn btn-outline-primary me-2">
                <i class="bi bi-arrow-left me-1"></i>Back to Vendor
            </a>
            <a href="/admin/bizspot-categories/business-type/{{ $servicesBusinessType->id }}" class="btn btn-info" target="_blank">
                <i class="bi bi-gear me-1"></i>Manage Categories
            </a>
        </div>
    </div>

    <!-- Vendor Info Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-2">
                            @if($vendor->logo)
                                <img src="{{ asset('storage/' . $vendor->logo) }}" alt="Vendor Logo" class="img-fluid rounded" style="max-height: 80px;">
                            @else
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 80px; width: 80px;">
                                    <i class="bi bi-building text-muted" style="font-size: 2rem;"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-1">{{ $vendor->vendor_name }}</h5>
                            <p class="text-muted mb-1">{{ $vendor->vendor_description }}</p>
                            <div class="d-flex gap-2">
                                @php $businessTypeBadge = $vendor->getBusinessTypeBadge(); @endphp
                                <span class="badge bg-{{ $businessTypeBadge['color'] }}">
                                    {{ $businessTypeBadge['icon'] }} {{ $businessTypeBadge['text'] }}
                                </span>
                                @if($vendor->offersHomeService())
                                    <span class="badge bg-success">🏠 Home Service</span>
                                @endif
                                @if($vendor->is_verified)
                                    <span class="badge bg-success">✓ Verified</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row text-center">
                                <div class="col-6">
                                    <div class="h4 mb-0 text-primary">{{ $stats['total_services'] }}</div>
                                    <small class="text-muted">Total Services</small>
                                </div>
                                <div class="col-6">
                                    <div class="h4 mb-0 text-success">{{ $stats['available_services'] }}</div>
                                    <small class="text-muted">Available</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-primary mb-2">
                        <i class="bi bi-tools" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ $stats['total_services'] }}</h3>
                    <p class="text-muted mb-0 small">Total Services</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="bi bi-check-circle" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ $stats['available_services'] }}</h3>
                    <p class="text-muted mb-0 small">Available</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="bi bi-star-fill" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ $stats['featured_services'] }}</h3>
                    <p class="text-muted mb-0 small">Featured</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="bi bi-truck" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ $stats['mobile_services'] }}</h3>
                    <p class="text-muted mb-0 small">Mobile Services</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-purple mb-2">
                        <i class="bi bi-calendar-check" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ number_format($stats['total_bookings']) }}</h3>
                    <p class="text-muted mb-0 small">Total Bookings</p>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="text-orange mb-2">
                        <i class="bi bi-star" style="font-size: 2rem;"></i>
                    </div>
                    <h3 class="mb-1">{{ number_format($stats['average_rating'] ?? 0, 1) }}</h3>
                    <p class="text-muted mb-0 small">Avg Rating</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Service Categories -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-4 pb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold">Service Categories</h5>
                <span class="badge bg-light text-dark">{{ $serviceCategories->count() }} Categories</span>
            </div>
            <p class="text-muted mb-0 small mt-1">Manage your services by category. Click on a category to view and manage services.</p>
        </div>
        <div class="card-body">
            @if($serviceCategories->count() > 0)
                <div class="row">
                    @foreach($serviceCategories as $category)
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card border h-100 category-card" style="transition: all 0.3s;">
                                <div class="card-body">
                                    <div class="d-flex align-items-start">
                                        <div class="me-3">
                                            @if($category->icon)
                                                <i class="{{ $category->icon }} text-primary" style="font-size: 2rem;"></i>
                                            @else
                                                <i class="bi bi-tools text-primary" style="font-size: 2rem;"></i>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-2">{{ $category->name }}</h6>
                                            <p class="card-text text-muted small mb-3">{{ $category->description }}</p>
                                            
                                            <div class="row text-center mb-3">
                                                <div class="col-6">
                                                    <div class="fw-bold text-primary">{{ $category->vendor_services_count }}</div>
                                                    <small class="text-muted">Total</small>
                                                </div>
                                                <div class="col-6">
                                                    <div class="fw-bold text-success">{{ $category->available_services_count }}</div>
                                                    <small class="text-muted">Available</small>
                                                </div>
                                            </div>
                                            
                                            <div class="d-grid gap-2">
                                                <a href="{{ route('vendors.services.services', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" 
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="bi bi-list me-1"></i>View Services
                                                </a>
                                                <a href="{{ route('vendors.services.services.create', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" 
                                                   class="btn btn-primary btn-sm">
                                                    <i class="bi bi-plus me-1"></i>Add Service
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-tools text-muted" style="font-size: 4rem;"></i>
                    <h5 class="mt-3 text-muted">No Service Categories Found</h5>
                    <p class="text-muted">Service categories will appear here once they are configured.</p>
                    <a href="/admin/bizspot-categories/business-type/{{ $servicesBusinessType->id }}" class="btn btn-primary" target="_blank">
                        <i class="bi bi-gear me-1"></i>Configure Categories
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Quick Actions -->
    @if($serviceCategories->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('vendors.services.services', ['vendor' => $vendor, 'categoryId' => $serviceCategories->first()->id]) }}" 
                               class="btn btn-outline-primary w-100">
                                <i class="bi bi-list me-2"></i>View All Services
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('vendors.services.services.create', ['vendor' => $vendor, 'categoryId' => $serviceCategories->first()->id]) }}" 
                               class="btn btn-primary w-100">
                                <i class="bi bi-plus me-2"></i>Add New Service
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="/admin/bizspot-categories/business-type/{{ $servicesBusinessType->id }}" 
                               class="btn btn-info w-100" target="_blank">
                                <i class="bi bi-gear me-2"></i>Manage Categories
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('admin.vendors.show', $vendor) }}" 
                               class="btn btn-outline-secondary w-100">
                                <i class="bi bi-arrow-left me-2"></i>Back to Vendor
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<style>
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 25px rgba(0,0,0,0.15) !important;
}

.text-purple {
    color: #6f42c1 !important;
}

.text-orange {
    color: #fd7e14 !important;
}
</style>
@endsection