<x-app-layout>
    <x-module-hero
        title="Create Category"
        description="Add a new mentorship category"
        icon="fa-plus-circle">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.categories.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Categories
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship applications')
                <a href="{{ route('mentorship.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @cannot('view mentorship applications')
                @can('view own mentorship applications')
                    <a href="{{ route('mentorship.applications.index') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-file-alt text-sm"></i> My Applications
                    </a>
                @endcan
            @endcannot
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-link text-sm"></i> Assignments
                </a>
            @endcan
            @can('view mentorship sessions')
                <a href="{{ route('mentorship.sessions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.index') || request()->routeIs('mentorship.sessions.show') || request()->routeIs('mentorship.sessions.create') || request()->routeIs('mentorship.sessions.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar-alt text-sm"></i> Sessions
                </a>
                <a href="{{ route('mentorship.sessions.calendar') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.calendar') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar text-sm"></i> Sessions Calendar
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-certificate text-sm"></i> Certificates
                </a>
            @endcan
            @can('download mentorship certificates')
                @cannot('view mentorship certificates')
                    <a href="{{ route('mentorship.certificates.my-certificates') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-award text-sm"></i> My Certificates
                    </a>
                @endcannot
            @endcan
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                @cannot('view mentorship payments')
                    <a href="{{ route('mentorship.payments.my-payments') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-history text-sm"></i> My Payments
                    </a>
                @endcannot
            @endcan
            @can('view mentorship categories')
                <a href="{{ route('mentorship.categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.categories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-folder text-sm"></i> Categories
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-exclamation-triangle text-red-500"></i>
                    <h4 class="font-medium text-red-800">Please fix the following errors:</h4>
                </div>
                <ul class="text-sm text-red-600 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('mentorship.categories.store') }}" method="POST">
            @csrf

            {{-- Basic Information --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-info-circle mr-2 text-green-600"></i> Basic Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                            Category Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                               required>
                        @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-1">
                            Parent Category
                        </label>
                        <select id="parent_id" name="parent_id"
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">None (Top-level category)</option>
                            @foreach($parentCategories as $parent)
                                <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                    {{ $parent->name }}
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500">Select a parent to create a sub-category.</p>
                        @error('parent_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">
                            Sort Order
                        </label>
                        <input type="number" id="sort_order" name="sort_order"
                               value="{{ old('sort_order', 0) }}" min="0"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        <p class="mt-1 text-xs text-gray-500">Lower numbers appear first.</p>
                        @error('sort_order')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                            Description
                        </label>
                        <textarea id="description" name="description" rows="3"
                                  class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">{{ old('description') }}</textarea>
                        @error('description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Display Settings --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-palette mr-2 text-green-600"></i> Display Settings
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">
                            Icon Class
                        </label>
                        <input type="text" id="icon" name="icon" value="{{ old('icon') }}"
                               placeholder="fas fa-folder"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        <p class="mt-1 text-xs text-gray-500">FontAwesome icon class (e.g., fas fa-folder)</p>
                        @error('icon')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label for="color" class="block text-sm font-medium text-gray-700 mb-1">
                            Color
                        </label>
                        <input type="text" id="color" name="color" value="{{ old('color') }}"
                               placeholder="#16a34a"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        <p class="mt-1 text-xs text-gray-500">Hex color code for UI display.</p>
                        @error('color')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="is_active" name="is_active" value="1"
                                   {{ old('is_active', 1) ? 'checked' : '' }}
                                   class="w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            <span class="text-sm text-gray-700">Category is active</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- SEO (Optional) --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-search mr-2 text-green-600"></i> SEO (Optional)
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="meta_title" class="block text-sm font-medium text-gray-700 mb-1">Meta Title</label>
                        <input type="text" id="meta_title" name="meta_title" value="{{ old('meta_title') }}"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('meta_title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-1">Meta Description</label>
                        <textarea id="meta_description" name="meta_description" rows="2"
                                  class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">{{ old('meta_description') }}</textarea>
                        @error('meta_description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex justify-end gap-3">
                <a href="{{ route('mentorship.categories.index') }}"
                   class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-sm">Cancel</a>
                <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                    <i class="fas fa-save mr-1"></i> Create Category
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
