@php
$isEdit = isset($blog) && $blog->exists && $blog->id;

// ✅ FORCE USE ID - NOT SLUG
$formAction = $isEdit
? route('admin.blogs.update', $blog->id) // ✅ USE ID
: route('admin.blogs.store');

$formMethod = $isEdit ? 'PUT' : 'POST';
$formTitle = $isEdit ? 'Edit Blog Post' : 'Create Blog Post';
$submitText = $isEdit ? 'Update Blog' : 'Save Blog';
@endphp



<!-- ============================================
   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>{{ 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>{{ 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-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-newspaper" style="color: #C1121F;"></i>
        {{ $formTitle }}
    </h4>
    <a href="{{ route('admin.blogs.index') }}" class="btn-back">
        <i class="bi bi-arrow-left"></i> Back to List
    </a>
</div>

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

    <div class="row">
        <!-- ===== LEFT COLUMN ===== -->
        <div class="col-lg-8">

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

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

                <!-- Slug -->
                <div class="form-group-custom">
                    <label>Slug <span class="required">*</span></label>
                    <div class="input-with-prefix">
                        <span class="prefix">{{ url('/') }}/blog/</span>
                        <input type="text"
                            name="slug"
                            id="slug"
                            class="form-control-custom @error('slug') is-invalid @enderror"
                            value="{{ old('slug', $blog->slug ?? '') }}"
                            placeholder="blog-slug"
                            required
                            data-auto-generated="{{ isset($blog) && $blog->slug ? 'false' : 'true' }}">
                    </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($blog) && $blog->slug)
                            {{ $blog->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>

                <!-- Content -->
                <div class="form-group-custom">
                    <label>Content <span class="required">*</span></label>
                    <textarea name="content"
                        id="content"
                        rows="12"
                        class="form-control-custom @error('content') is-invalid @enderror"
                        placeholder="Write your blog content here..."
                        required>{{ old('content', $blog->content ?? '') }}</textarea>
                    @error('content')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Excerpt -->
                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Excerpt (Short Description)</label>
                    <textarea name="excerpt"
                        id="excerpt"
                        rows="3"
                        class="form-control-custom @error('excerpt') is-invalid @enderror"
                        placeholder="Brief summary of your blog post">{{ old('excerpt', $blog->excerpt ?? '') }}</textarea>
                    @error('excerpt')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Maximum 500 characters.</span>
                </div>
            </div>

            <!-- SEO Section -->
            <div class="form-section">
                <div class="section-header">
                    <i class="bi bi-search"></i>
                    <h5>SEO Settings</h5>
                    <span class="badge-optional">Optional</span>
                </div>

                <!-- Meta Title -->
                <div class="form-group-custom">
                    <label>Meta Title</label>
                    <input type="text"
                        name="meta_title"
                        id="meta_title"
                        class="form-control-custom @error('meta_title') is-invalid @enderror"
                        value="{{ old('meta_title', $blog->meta_title ?? '') }}"
                        placeholder="SEO title (max 60 chars)">
                    <span class="form-hint" id="metaTitleCount">0 / 60 characters</span>
                    @error('meta_title')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Meta Description -->
                <div class="form-group-custom">
                    <label>Meta Description</label>
                    <textarea name="meta_description"
                        id="meta_description"
                        rows="2"
                        class="form-control-custom @error('meta_description') is-invalid @enderror"
                        placeholder="SEO description (max 160 chars)">{{ old('meta_description', $blog->meta_description ?? '') }}</textarea>
                    <span class="form-hint" id="metaDescCount">0 / 160 characters</span>
                    @error('meta_description')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Meta Keywords -->
                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Meta Keywords</label>
                    <input type="text"
                        name="meta_keywords"
                        class="form-control-custom @error('meta_keywords') is-invalid @enderror"
                        value="{{ old('meta_keywords', $blog->meta_keywords ?? '') }}"
                        placeholder="SEO keywords (comma separated)">
                    @error('meta_keywords')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <!-- ===== RIGHT COLUMN ===== -->
        <div class="col-lg-4">

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

                <!-- Category -->
                <div class="form-group-custom">
                    <label>Category</label>
                    <select name="blog_category_id" class="form-control-custom @error('blog_category_id') is-invalid @enderror">
                        <option value="" disabled selected>Select Category</option>
                        <option value="">Uncategorized</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('blog_category_id', $blog->blog_category_id ?? '') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('blog_category_id')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Status -->
                <div class="form-group-custom">
                    <label>Status <span class="required">*</span></label>
                    <select name="status" id="status" class="form-control-custom @error('status') is-invalid @enderror" required>
                        <option value="draft" {{ old('status', $blog->status ?? 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status', $blog->status ?? 'draft') == 'published' ? 'selected' : '' }}>Published</option>
                    </select>
                    @error('status')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Published At -->
                <div class="form-group-custom" id="publishedAtGroup" style="{{ old('status', $blog->status ?? 'draft') == 'published' ? '' : 'display: none;' }}">
                    <label>Published Date</label>
                    <input type="datetime-local"
                        name="published_at"
                        class="form-control-custom @error('published_at') is-invalid @enderror"
                        value="{{ old('published_at', isset($blog) && $blog->published_at ? $blog->published_at->format('Y-m-d\TH:i') : '') }}">
                    @error('published_at')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Leave empty to use current date/time</span>
                </div>
            </div>

            <!-- Featured Image -->
            <div class="form-section">
                <div class="section-header">
                    <i class="bi bi-image"></i>
                    <h5>Featured Image</h5>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <input type="file"
                        name="featured_image"
                        id="featuredImage"
                        class="form-control-custom @error('featured_image') is-invalid @enderror"
                        accept="image/*"
                        style="display: none;"
                        onchange="previewImage(this)">
                    <div id="imagePreview">
                        @if(isset($blog) && $blog->featured_image)
                        <div class="image-preview-wrapper">
                            <img src="{{ asset('storage/' . $blog->featured_image) }}" alt="Featured Image">
                            <div>
                                <div class="file-name">Current Image</div>
                                <div class="file-size">Click below to change</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeImage()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                        @else
                        <div class="file-upload-area" onclick="document.getElementById('featuredImage').click()">
                            <i class="bi bi-cloud-upload"></i>
                            <p>Click to upload featured image</p>
                            <small>PNG, JPG, WEBP (Max 2MB)</small>
                        </div>
                        @endif
                    </div>
                    @error('featured_image')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Recommended: 1200 x 630 pixels</span>
                </div>
            </div>
        </div>
    </div>



    <!-- ===== FORM ACTIONS ===== -->
    <div class="form-actions">
        @php
        $user = Auth::guard('admin')->user();
        $isAdmin = $user && ($user->id == 1 || $user->role_id == 2);
        $isUser = $user && $user->id != 1 && $user->role_id != 2;
        @endphp

        @if(isset($blog) && $blog->exists)
        {{-- EDIT MODE --}}
        @if($blog->isLocked())
        <button type="button" class="btn btn-secondary" disabled>
            <i class="bi bi-lock"></i> Locked - Under Review
        </button>
        @else
        @if($isAdmin)
        <button type="submit" class="btn-submit">
            <i class="bi bi-save"></i> Update Blog
        </button>
        @elseif($isUser)
        <button type="submit" class="btn-submit" style="background: #f59e0b; border-color: #f59e0b;" name="submit_action" value="review">
            <i class="bi bi-send"></i> Submit for Review
        </button>
        <small class="text-muted d-block mt-1">Your changes will be sent for approval.</small>
        @endif
        @endif
        @else
        {{-- CREATE MODE --}}
        <button type="submit" class="btn-submit">
            <i class="bi bi-save"></i> Save Blog
        </button>
        @endif

        <a href="{{ route('admin.blogs.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>


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

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

        if (titleInput && slugInput) {
            titleInput.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) {
            if (slugPreview) {
                slugPreview.textContent = slug || 'auto-generated';
            }
        };

        // ============================================
        // GENERATE SLUG FUNCTION
        // ============================================
        window.generateSlug = function() {
            if (titleInput && titleInput.value) {
                const slug = generateSlugFromText(titleInput.value);
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
                updateSlugPreview(slug);
            } else {
                alert('Please enter a title first to generate slug.');
                titleInput.focus();
            }
        };

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

        // ============================================
        // IMAGE PREVIEW
        // ============================================
        window.previewImage = function(input) {
            const previewContainer = document.getElementById('imagePreview');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewContainer.innerHTML = `
                        <div class="image-preview-wrapper">
                            <img src="${e.target.result}" alt="Preview">
                            <div>
                                <div class="file-name">${file.name}</div>
                                <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeImage()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        };

        // ============================================
        // REMOVE IMAGE
        // ============================================
        window.removeImage = function() {
            const previewContainer = document.getElementById('imagePreview');
            const imageInput = document.getElementById('featuredImage');

            if (previewContainer) {
                previewContainer.innerHTML = `
                    <div class="file-upload-area" onclick="document.getElementById('featuredImage').click()">
                        <i class="bi bi-cloud-upload"></i>
                        <p>Click to upload featured image</p>
                        <small>PNG, JPG, WEBP (Max 2MB)</small>
                    </div>
                `;
            }

            if (imageInput) {
                imageInput.value = '';
            }
        };

        // ============================================
        // STATUS TOGGLE FOR PUBLISHED AT
        // ============================================
        const statusSelect = document.getElementById('status');
        const publishedAtGroup = document.getElementById('publishedAtGroup');

        if (statusSelect && publishedAtGroup) {
            statusSelect.addEventListener('change', function() {
                if (this.value === 'published') {
                    publishedAtGroup.style.display = 'block';
                } else {
                    publishedAtGroup.style.display = 'none';
                }
            });
        }

        // ============================================
        // META TITLE CHARACTER COUNT
        // ============================================
        const metaTitle = document.getElementById('meta_title');
        const metaTitleCount = document.getElementById('metaTitleCount');

        if (metaTitle && metaTitleCount) {
            metaTitle.addEventListener('input', function() {
                const count = this.value.length;
                metaTitleCount.textContent = count + ' / 60 characters';
                metaTitleCount.style.color = count > 60 ? '#DC2626' : '#6B7280';
            });
            // Trigger on load
            setTimeout(function() {
                metaTitle.dispatchEvent(new Event('input'));
            }, 100);
        }

        // ============================================
        // META DESCRIPTION CHARACTER COUNT
        // ============================================
        const metaDesc = document.getElementById('meta_description');
        const metaDescCount = document.getElementById('metaDescCount');

        if (metaDesc && metaDescCount) {
            metaDesc.addEventListener('input', function() {
                const count = this.value.length;
                metaDescCount.textContent = count + ' / 160 characters';
                metaDescCount.style.color = count > 160 ? '#DC2626' : '#6B7280';
            });
            setTimeout(function() {
                metaDesc.dispatchEvent(new Event('input'));
            }, 100);
        }

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

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

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