@extends('layouts.admin')

@section('title', 'Create Main Category - ' . $businessType->name)

@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">Create Main Category</h1>
        <p class="text-muted mb-0">Add a new main category for {{ $businessType->name }}</p>
    </div>
    <div>
        <a href="{{ route('admin.bizspot-categories.business-type', $businessType->id) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to {{ $businessType->name }}
        </a>
    </div>
</div>

<!-- Business Type Context -->
<div class="card border-0 shadow-sm mb-4">
    <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' }} me-3"></i>
            <div>
                <h6 class="card-title mb-1 text-white fw-bold">Creating category for: {{ $businessType->name }}</h6>
                <p class="mb-0 text-white-50 small">{{ $businessType->description }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Create Form -->
<div class="row">
    <div class="col-lg-8">
        <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">Main Category Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.bizspot-categories.store-main', $businessType->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <!-- Category Name -->
                        <div class="col-12">
                            <label for="name" class="form-label">Category Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" required
                                   placeholder="e.g., Fast Food & Quick Bites">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">This will be automatically converted to a URL-friendly slug</div>
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4" 
                                      placeholder="Describe what types of businesses fit in this category...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Icon -->
                        <div class="col-12">
                            <label for="icon" class="form-label">Icon (FontAwesome class)</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i id="icon-preview" class="fas fa-tag"></i>
                                </span>
                                <input type="text" class="form-control @error('icon') is-invalid @enderror" 
                                       id="icon" name="icon" value="{{ old('icon', 'fas fa-tag') }}"
                                       placeholder="fas fa-hamburger">
                                @error('icon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">
                                Use FontAwesome classes like "fas fa-hamburger", "fas fa-tools", "fas fa-shopping-bag"
                            </div>
                        </div>

                        <!-- Image -->
                        <div class="col-12">
                            <label for="image" class="form-label">Category Image</label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                   id="image" name="image" accept="image/*">
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Upload an image for this category (recommended: 300x200px, max 2MB)</div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-check-lg me-1"></i>
                                    Create Main Category
                                </button>
                                <a href="{{ route('admin.bizspot-categories.business-type', $businessType->id) }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg me-1"></i>
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Help Panel -->
    <div class="col-lg-4">
        <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-info-circle me-2"></i>
                    Category Guidelines
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="fw-bold text-primary">{{ $businessType->name }} Examples:</h6>
                    <ul class="list-unstyled small text-muted">
                        @if($businessType->slug === 'food-menu')
                            <li>• Fast Food & Quick Bites</li>
                            <li>• Fine Dining & Restaurants</li>
                            <li>• Cafes & Beverages</li>
                            <li>• Desserts & Bakeries</li>
                        @elseif($businessType->slug === 'services')
                            <li>• Professional Services</li>
                            <li>• Personal Care & Beauty</li>
                            <li>• Health & Medical</li>
                            <li>• Home Services</li>
                        @elseif($businessType->slug === 'retail')
                            <li>• Electronics & Technology</li>
                            <li>• Clothing & Fashion</li>
                            <li>• Home & Garden</li>
                            <li>• Health & Beauty</li>
                        @endif
                    </ul>
                </div>

                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Best Practices:</h6>
                    <ul class="list-unstyled small text-muted">
                        <li>• Use clear, descriptive names</li>
                        <li>• Keep names concise but specific</li>
                        <li>• Think about customer search behavior</li>
                        <li>• Group similar business types together</li>
                    </ul>
                </div>

                <div class="alert alert-info">
                    <small>
                        <i class="bi bi-lightbulb me-1"></i>
                        <strong>Tip:</strong> After creating the main category, you can add subcategories to further organize businesses.
                    </small>
                </div>
            </div>
        </div>

        <!-- Existing Categories Preview -->
        @if($businessType->mainCategories->count() > 0)
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">
                    <i class="bi bi-list me-2"></i>
                    Existing Categories
                </h5>
            </div>
            <div class="card-body">
                @foreach($businessType->mainCategories->take(5) as $category)
                <div class="d-flex align-items-center mb-2">
                    <i class="{{ $category->icon }} text-primary me-2"></i>
                    <span class="small">{{ $category->name }}</span>
                </div>
                @endforeach
                @if($businessType->mainCategories->count() > 5)
                <div class="small text-muted">... and {{ $businessType->mainCategories->count() - 5 }} more</div>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
// Icon preview
document.getElementById('icon').addEventListener('input', function() {
    const iconClass = this.value || 'fas fa-tag';
    const preview = document.getElementById('icon-preview');
    preview.className = iconClass;
});
</script>
@endsection