@extends('admin.layouts.app')

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

@section('content')

<style>
    /* ============================================
       CREATE BLOG CATEGORY - CUSTOM STYLES
       (Only new styles not in existing theme)
    ============================================ */

    /* Form section spacing */
    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    /* Color preview for status toggle */
    .color-preview {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
        vertical-align: middle;
        margin-right: 8px;
    }

    /* Responsive fixes */
    @media (max-width: 576px) {
        .form-section {
            padding: 14px 16px !important;
        }
    }
</style>

<!-- ============================================
   CREATE BLOG CATEGORY - REDSPIDER THEME
============================================ -->

<div class="pages-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li>
                <a href="{{ route('admin.blog-categories.index') }}">
                    <i class="bi bi-tags"></i> Blog Categories
                </a>
            </li>
            <li class="active">Create Category</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Create Blog Category</h1>
            <p>
                <i class="bi bi-plus-circle"></i> Add a new category for your blog posts
            </p>
        </div>
        <a href="{{ route('admin.blog-categories.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Categories
        </a>
    </div>

    <!-- ===== FORM CARD ===== -->
    <div class="form-card">

        <!-- ===== INCLUDE FORM ===== -->
        @include('admin.blog-categories._form')

    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // AUTO SLUG GENERATION
        // ============================================
        const nameInput = document.querySelector('input[name="name"]');
        const slugInput = document.querySelector('input[name="slug"]');

        if (nameInput && slugInput) {
            nameInput.addEventListener('keyup', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = this.value
                        .toLowerCase()
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                }
            });
        }

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const name = document.querySelector('input[name="name"]');
                if (name && !name.value.trim()) {
                    e.preventDefault();
                    name.classList.add('is-invalid');
                    alert('Please enter a category name.');
                    name.focus();
                }
            });

            // Remove error state on input
            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }

        console.log('✅ Create Blog Category loaded successfully!');
    });
</script>

@endsection