@extends('layouts.admin')

@section('title', 'Create Sub Category')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Create Sub Category</h1>
            <p class="text-muted mb-0">Add a new subcategory under "{{ $mainCategory->name }}"</p>
        </div>
        <div>
            <a href="{{ route('admin.bizspot-categories.business-type', $mainCategory->business_type_id) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Categories
            </a>
        </div>
    </div>

    <!-- Main Category Info -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <div class="d-flex align-items-center">
                <i class="{{ $mainCategory->icon ?? 'fas fa-tag' }} me-2"></i>
                <div>
                    <h6 class="mb-0">Creating subcategory for: {{ $mainCategory->name }}</h6>
                    <small class="opacity-75">{{ $mainCategory->description ?? 'No description available' }}</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Form Column -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Sub Category Information</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.bizspot-categories.store-sub', $mainCategory->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Name Field -->
                        <div class="mb-3">
                            <label for="name" class="form-label">Sub 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., Burgers & Sandwiches">
                            @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 Field -->
                        <div class="mb-3">
                            <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 specific businesses fit in this subcategory...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Image Field -->
                        <div class="mb-3">
                            <label for="image" class="form-label">Sub 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 sub category (recommended: 300x200px, max 2MB)</div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-lg"></i> Create Sub Category
                            </button>
                            <a href="{{ route('admin.bizspot-categories.business-type', $mainCategory->business_type_id) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-lg"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Help Panel -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle"></i> Guidelines
                    </h5>
                </div>
                <div class="card-body">
                    <h6 class="text-primary">Example Subcategories:</h6>
                    <ul class="list-unstyled small text-muted mb-3">
                        @if(stripos($mainCategory->name, 'food') !== false || stripos($mainCategory->name, 'restaurant') !== false)
                            <li>• Burgers & Sandwiches</li>
                            <li>• Pizza & Italian</li>
                            <li>• Asian Cuisine</li>
                            <li>• Healthy & Vegan</li>
                        @elseif(stripos($mainCategory->name, 'service') !== false)
                            <li>• Beauty & Salon</li>
                            <li>• Repair & Maintenance</li>
                            <li>• Consultation</li>
                            <li>• Installation</li>
                        @else
                            <li>• Specific product types</li>
                            <li>• Service variations</li>
                            <li>• Target demographics</li>
                            <li>• Specialty offerings</li>
                        @endif
                    </ul>

                    <h6 class="text-primary">Best Practices:</h6>
                    <ul class="list-unstyled small text-muted mb-3">
                        <li>• Be more specific than the main category</li>
                        <li>• Use customer-friendly language</li>
                        <li>• Consider search behavior</li>
                        <li>• Avoid overlap with other subcategories</li>
                    </ul>

                    <div class="alert alert-info">
                        <small>
                            <i class="bi bi-lightbulb"></i>
                            <strong>Tip:</strong> Subcategories help customers find exactly what they're looking for more quickly.
                        </small>
                    </div>
                </div>
            </div>

            <!-- Existing Subcategories -->
            @if($mainCategory->subCategories && $mainCategory->subCategories->count() > 0)
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-list"></i> Existing Subcategories
                    </h5>
                </div>
                <div class="card-body">
                    @foreach($mainCategory->subCategories->take(5) as $subCategory)
                    <div class="d-flex align-items-center mb-2">
                        <i class="bi bi-tag text-primary me-2"></i>
                        <span class="small">{{ $subCategory->name }}</span>
                    </div>
                    @endforeach
                    @if($mainCategory->subCategories->count() > 5)
                    <div class="small text-muted">... and {{ $mainCategory->subCategories->count() - 5 }} more</div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection