@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create Blog Category')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold">Create Blog Category</h1>
        <a href="{{ route('admin.blog-categories.index') }}"
            class="btn btn-primary btn-black">
            <i class="fas fa-arrow-left me-2"></i> Back to Categories
        </a>
    </div>

    <div class="bg-white shadow rounded-lg p-6">
        <form action="{{ route('admin.blog-categories.store') }}" method="POST" enctype="multipart/form-data"
            class="space-y-6">
            @csrf
            <input type="hidden" name="taxonomy_type" value="category">
            <input type="hidden" name="language_code" value="{{ defaultLanguage() }}">

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Left Side -->
                <div class="md:col-span-2 space-y-4">
                    <div class="input-with-label">
                        <label for="name">Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required>
                        @error('name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="input-with-label">
                        <label for="slug">Slug</label>
                        <input type="text" id="slug" name="slug" value="{{ old('slug') }}">
                        <small class="text-gray-500">Leave empty to auto-generate from name</small>
                        @error('slug')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="input-with-label">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Right Side -->
                <div class="space-y-4">
                    <div class="input-with-label">
                        <label for="parent_id">Parent Category</label>
                        <select id="parent_id" class="form-select" name="parent_id">
                            <option value="">None (Top Level)</option>
                            @foreach ($parentCategories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('parent_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('parent_id')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center gap-2">
                        <input type="hidden" name="meta_data[is_featured]" value="0">
                        <input type="checkbox" id="is_featured" name="meta_data[is_featured]" value="1"
                            {{ old('meta_data.is_featured') ? 'checked' : '' }}>
                        <label for="is_featured" class="text-gray-700">Is Featured Category</label>
                    </div>

                    <div class="input-with-label">
                        @include('backend::components.featured-image');
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button class="btn btn-primary" type="submit">Create Category</button>
                <a class="btn btn-secondary" href="{{ route('admin.blog-categories.index') }}">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {
                // Auto-generate slug from name
                $('#name').on('blur', function() {
                    if ($('#slug').val() === '') {
                        const name = $(this).val();
                        const slug = name.toLowerCase()
                            .replace(/[^\w\s-]/g, '')
                            .replace(/\s+/g, '-')
                            .replace(/-+/g, '-');
                        $('#slug').val(slug);
                    }
                });
            });
        })(jQuery);
    </script>
@endpush