@php
    $isEdit = isset($category) && $category->exists && $category->id;
    
    // ✅ USE ID FOR UPDATE ROUTE
    $formAction = $isEdit 
        ? route('admin.blog-categories.update', $category->id)  // ✅ ID
        : route('admin.blog-categories.store');
    
    $formMethod = $isEdit ? 'PUT' : 'POST';
    $formTitle = $isEdit ? 'Edit Blog Category' : 'Create Blog Category';
    $submitText = $isEdit ? 'Update Category' : 'Save Category';
@endphp

<style>
    /* ============================================
       BLOG CATEGORY FORM - CUSTOM STYLES
    ============================================ */

    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    /* Slug Preview */
    .slug-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        background: #F8F9FA;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
        color: #6B7280;
        margin-top: 6px;
    }

    .slug-preview code {
        color: #C1121F;
        font-weight: 600;
        background: transparent;
        padding: 0;
    }

    .btn-regenerate {
        background: none;
        border: none;
        color: #6B7280;
        cursor: pointer;
        padding: 2px 8px;
        font-size: 12px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-regenerate:hover {
        color: #C1121F;
    }

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

<!-- ============================================
   ALERT MESSAGES
============================================ -->

@if ($errors->any())
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>
        <strong>Validation Errors!</strong>
        <ul style="margin: 4px 0 0 20px; padding: 0;">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

@if (session('success'))
<div class="alert-box alert-success" style="margin-bottom: 20px;">
    <i class="bi bi-check-circle-fill"></i>
    <span>
        <strong>Success!</strong> {{ session('success') }}
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

@if (session('error'))
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>
        <strong>Error!</strong> {{ session('error') }}
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

<!-- ============================================
   FORM CARD
============================================ -->

<div class="form-card">

    <div class="form-card-header" style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #E8E8E8;">
        <h4 style="font-size: 18px; font-weight: 600; color: #1A1A2E; margin: 0;">
            <i class="bi bi-tag" style="color: #C1121F;"></i>
            {{ $formTitle }}
        </h4>
        <a href="{{ route('admin.blog-categories.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to List
        </a>
    </div>

    <!-- ===== FORM START ===== -->
    <form action="{{ $formAction }}" method="POST" id="categoryForm">
        @csrf
        @if($isEdit)
        @method('PUT')
        @endif

        <!-- ===== BASIC INFORMATION ===== -->
        <div class="form-section">
            <div class="section-header">
                <i class="bi bi-info-circle"></i>
                <h5>Basic Information</h5>
            </div>

            <!-- Name -->
            <div class="form-group-custom">
                <label>Name <span class="required">*</span></label>
                <input type="text"
                    name="name"
                    id="name"
                    class="form-control-custom @error('name') is-invalid @enderror"
                    value="{{ old('name', $category->name ?? '') }}"
                    placeholder="Enter category name"
                    required>
                @error('name')
                <span class="error-text">{{ $message }}</span>
                @enderror
                <span class="form-hint">
                    <i class="bi bi-info-circle"></i>
                    Slug will be auto-generated from name.
                </span>
            </div>

            <!-- Slug -->
            <div class="form-group-custom">
                <label>Slug <span class="required">*</span></label>
                <div class="input-with-prefix">
                    <span class="prefix">{{ url('/') }}/blog/category/</span>
                    <input type="text"
                        name="slug"
                        id="slug"
                        class="form-control-custom @error('slug') is-invalid @enderror"
                        value="{{ old('slug', $category->slug ?? '') }}"
                        placeholder="category-slug"
                        required>
                </div>
                @error('slug')
                <span class="error-text">{{ $message }}</span>
                @enderror

                <div class="slug-preview">
                    <i class="bi bi-link"></i>
                    Preview: <code id="slugPreview">
                        @if(isset($category) && $category->exists)
                        {{ $category->slug }}
                        @else
                        auto-generated
                        @endif
                    </code>
                    <button type="button" class="btn-regenerate" onclick="generateSlug()">
                        <i class="bi bi-arrow-repeat"></i> Regenerate
                    </button>
                </div>
            </div>

            <!-- Description -->
            <div class="form-group-custom">
                <label>Description</label>
                <textarea name="description"
                    id="description"
                    rows="4"
                    class="form-control-custom @error('description') is-invalid @enderror"
                    placeholder="Enter category description (optional)">{{ old('description', $category->description ?? '') }}</textarea>
                @error('description')
                <span class="error-text">{{ $message }}</span>
                @enderror
                <span class="form-hint">
                    <i class="bi bi-info-circle"></i>
                    Maximum 1000 characters.
                </span>
            </div>
        </div>

        <!-- ===== SETTINGS ===== -->
        <div class="form-section mt-4">
            <div class="section-header">
                <i class="bi bi-gear"></i>
                <h5>Settings</h5>
            </div>

            <!-- ===== STATUS - DROPDOWN (Working) ===== -->
            <div class="form-group-custom">
                <label>Status <span class="required">*</span></label>
                <select name="status" class="form-control-custom @error('status') is-invalid @enderror">
                    <option value="1" {{ old('status', $category->status ?? 1) == 1 ? 'selected' : '' }}>
                        Active
                    </option>
                    <option value="0" {{ old('status', $category->status ?? 1) == 0 ? 'selected' : '' }}>
                        Inactive
                    </option>
                </select>
                @error('status')
                <span class="error-text">{{ $message }}</span>
                @enderror
                <span class="form-hint">
                    <i class="bi bi-info-circle"></i>
                    Active categories will be visible on the website.
                </span>
            </div>

            <!-- Sort Order -->
            <div class="form-group-custom" style="margin-bottom: 0;">
                <label>Sort Order</label>
                <input type="number"
                    name="sort_order"
                    id="sort_order"
                    class="form-control-custom @error('sort_order') is-invalid @enderror"
                    value="{{ old('sort_order', $category->sort_order ?? 0) }}"
                    placeholder="0"
                    min="0">
                @error('sort_order')
                <span class="error-text">{{ $message }}</span>
                @enderror
                <span class="form-hint">
                    <i class="bi bi-info-circle"></i>
                    Lower numbers appear first.
                </span>
            </div>
        </div>

        <!-- ===== FORM ACTIONS ===== -->
        <div class="form-actions" style="margin-top: 8px;">
            <button type="submit" class="btn-submit">
                <i class="bi bi-save"></i>
                {{ $submitText }}
            </button>
            <a href="{{ route('admin.blog-categories.index') }}" class="btn-cancel">
                <i class="bi bi-x-circle"></i> Cancel
            </a>
            <button type="reset" class="btn-reset-custom" style="width: auto; padding: 10px 20px;">
                <i class="bi bi-arrow-counterclockwise"></i> Reset
            </button>
        </div>

    </form>
</div>

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

        // ============================================
        // AUTO-GENERATE SLUG FROM NAME
        // ============================================
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        const slugPreview = document.getElementById('slugPreview');

        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = generateSlugFromText(this.value);
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                    updateSlugPreview(slug);
                }
            });

            if (!slugInput.value) {
                slugInput.dataset.autoGenerated = 'true';
            }
        }

        // ============================================
        // UPDATE SLUG PREVIEW
        // ============================================
        window.updateSlugPreview = function(slug) {
            const slugPreview = document.getElementById('slugPreview');
            if (slugPreview) {
                slugPreview.textContent = slug || 'auto-generated';
            }
        };

        // ============================================
        // GENERATE SLUG FUNCTION
        // ============================================
        window.generateSlug = function() {
            const nameInput = document.getElementById('name');
            const slugInput = document.getElementById('slug');

            if (nameInput && nameInput.value) {
                const slug = generateSlugFromText(nameInput.value);
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
                updateSlugPreview(slug);
            } else {
                alert('Please enter a name first to generate slug.');
                nameInput.focus();
            }
        };

        // ============================================
        // GENERATE SLUG FROM TEXT
        // ============================================
        function generateSlugFromText(text) {
            return text
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }

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

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

        // ============================================
        // INITIAL SLUG PREVIEW
        // ============================================
        if (slugInput && slugInput.value) {
            updateSlugPreview(slugInput.value);
        }

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