@extends('admin.layouts.app')

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

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.categories.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to Categories
        </a>
        <h1 class="text-2xl font-bold text-white mt-4">Create New Category</h1>
    </div>

    <div class="max-w-4xl mx-auto">
        @if(session('success'))
        <div class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-xl mb-6">
            {{ session('success') }}
        </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl mb-6">
                <ul class="list-disc ml-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div class="glass-card rounded-2xl p-8 space-y-6">
                <!-- Parent Category -->
                <div>
                    <label for="parent_id" class="block text-sm font-medium text-slate-300 mb-2">Parent Category
                        (Optional)</label>
                    <select name="parent_id" id="parent_id"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        <option value="">None (Top Level)</option>
                        @foreach($parent_categories as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                {{ $parent->name }}</option>
                        @endforeach
                    </select>
                    <p class="text-[11px] text-slate-500 mt-1">Select a parent category to create a subcategory.</p>
                </div>

                <!-- Category Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-slate-300 mb-2">Category Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" placeholder="e.g., Electronics"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all"
                        required>
                </div>

                <!-- Slug -->
                <div>
                    <label for="slug" class="block text-sm font-medium text-slate-300 mb-2">Slug (Optional)</label>
                    <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                        placeholder="e.g., electronics-devices"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    <p class="text-[11px] text-slate-500 mt-1">Leave blank to auto-generate from name.</p>
                </div>

                <!-- Category Image -->
                <div>
                    <label for="image" class="block text-sm font-medium text-slate-300 mb-2">Category Image</label>
                    <input type="file" name="image" id="image"
                        class="w-full text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 cursor-pointer">
                    <p class="text-[11px] text-slate-500 mt-1">Upload an image (JPG, PNG, GIF). Max 5MB.</p>
                </div>

                <!-- Schema Markup -->
                <div>
                    <label for="schema_markup" class="block text-sm font-medium text-slate-300 mb-2">Schema Markup
                        (JSON-LD)</label>
                    <textarea name="schema_markup" id="schema_markup" rows="4"
                        placeholder='<script type="application/ld+json">{ ... }</script>'
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all font-mono text-sm">{{ old('schema_markup') }}</textarea>
                    <p class="text-[11px] text-slate-500 mt-1">Paste your custom Schema.org JSON-LD code here.</p>
                </div>

                <hr class="border-slate-800">

                <div class="pt-2">
                    <h3 class="text-lg font-bold text-white mb-6">SEO Settings</h3>

                    <div class="space-y-6">
                        <!-- SEO Title -->
                        <div x-data="{ count: {{ strlen(old('seo_title', '')) }} }">
                            <div class="flex justify-between items-center mb-2">
                                <label for="seo_title" class="block text-sm font-medium text-slate-300">SEO Title</label>
                                <span class="text-[11px] text-slate-500"><span :class="count > 60 ? 'text-red-500' : ''"
                                        x-text="count"></span>/60 chars</span>
                            </div>
                            <input type="text" name="seo_title" id="seo_title"
                                x-on:input="count = $event.target.value.length" value="{{ old('seo_title') }}"
                                placeholder="Custom SEO Title"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- Meta Description -->
                        <div x-data="{ count: {{ strlen(old('meta_description', '')) }} }">
                            <div class="flex justify-between items-center mb-2">
                                <label for="meta_description" class="block text-sm font-medium text-slate-300">Meta
                                    Description</label>
                                <span class="text-[11px] text-slate-500"><span :class="count > 160 ? 'text-red-500' : ''"
                                        x-text="count"></span>/160 chars</span>
                            </div>
                            <textarea name="meta_description" id="meta_description"
                                x-on:input="count = $event.target.value.length" rows="3"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">{{ old('meta_description') }}</textarea>
                        </div>

                        <!-- Breadcrumbs Title -->
                        <div>
                            <label for="breadcrumbs_title" class="block text-sm font-medium text-slate-300 mb-2">Breadcrumbs
                                Title</label>
                            <input type="text" name="breadcrumbs_title" id="breadcrumbs_title"
                                value="{{ old('breadcrumbs_title') }}" placeholder="Short title for breadcrumbs"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- Canonical URL -->
                        <div>
                            <label for="canonical_url" class="block text-sm font-medium text-slate-300 mb-2">Canonical
                                URL</label>
                            <input type="url" name="canonical_url" id="canonical_url" value="{{ old('canonical_url') }}"
                                placeholder="https://example.com/custom-canonical"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>

                        <!-- No Follow -->
                        <div class="flex items-start gap-3">
                            <input type="checkbox" name="nofollow" id="nofollow" value="1" {{ old('nofollow') ? 'checked' : '' }}
                                class="mt-1 w-4 h-4 bg-slate-900 border-slate-700 rounded text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <div>
                                <label for="nofollow" class="text-sm font-medium text-slate-300">Set rel="nofollow" for this
                                    category link</label>
                                <p class="text-[11px] text-slate-500">If checked, search engines will be instructed not to
                                    follow links to this category page.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="border-slate-800">

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-4">Status</label>
                    <div class="flex gap-6">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="active" {{ old('status', 'active') == 'active' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Active</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="inactive" {{ old('status') == 'inactive' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Inactive</span>
                        </label>
                    </div>
                </div>

                <div class="pt-4 flex flex-col sm:flex-row justify-end gap-3">
                <a href="{{ route('admin.categories.index') }}" class="px-6 py-4 text-slate-400 hover:text-white transition-colors text-center order-3 sm:order-1">Cancel</a>
                <button type="submit" name="create_another" value="1" class="bg-slate-800 hover:bg-slate-700 text-white font-bold px-6 py-4 rounded-xl border border-slate-700 transition-all order-2 sm:order-2">
                    Save & Create Another
                </button>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-12 py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all flex-1 sm:flex-none order-1 sm:order-3">
                    Create Category
                </button>
            </div>
            </div>
        </form>
    </div>
@endsection