@extends('admin.layout')

@section('title', 'Write New Blog Article')

@push('styles')
<!-- Cropper.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" />
<style>
    .ck-editor__editable_inline {
        min-height: 380px;
        font-family: var(--font-body);
        font-size: 1rem;
        color: #1e293b;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
    .ck-toolbar {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        background-color: #f8fafc !important;
    }
    /* Cropper Container */
    .crop-stage-wrapper {
        max-height: 480px;
        background: #0f172a;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .crop-stage-wrapper img {
        max-width: 100%;
        max-height: 460px;
        display: block;
    }
</style>
@endpush

@section('content')
<div class="container-fluid p-0">
    <!-- Header Page Action Bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <a href="{{ route('admin.blogcontent.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                    <i class="bi bi-arrow-left me-1"></i> Back to Articles
                </a>
                <span class="badge bg-warning-subtle text-dark rounded-pill px-3 py-1">New Article</span>
            </div>
            <h2 class="fw-bold font-heading mb-0 text-dark">
                Create Blog Article
            </h2>
        </div>
    </div>

    <!-- Error Alerts -->
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-exclamation-octagon-fill me-2 fs-5"></i>
            <strong class="d-block mb-1">Please fix the following validation errors:</strong>
            <ul class="mb-0 ps-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Dedicated Create Article Form (NO POPUP) -->
    <form action="{{ route('admin.blogcontent.store') }}" method="POST" id="createBlogForm">
        @csrf
        <div class="row g-4">
            <!-- Left / Main Column: Title, Content Rich Editor -->
            <div class="col-lg-8">
                <!-- Article Main Content Card -->
                <div class="card border-0 rounded-4 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <!-- Title Field -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-bold font-heading text-dark fs-6">
                                Article Title (title) <span class="text-danger">*</span>
                            </label>
                            <input 
                                type="text" 
                                name="title" 
                                id="title" 
                                value="{{ old('title') }}" 
                                class="form-control form-control-lg rounded-3 border-2" 
                                required 
                                autofocus
                            >
                        </div>

                        <!-- SEO URL Slug Field -->
                        <div class="mb-4">
                            <label for="seourl" class="form-label fw-semibold text-dark small">
                                SEO URL Slug (seourl) <span class="text-muted fw-normal">(Auto-generated from title if empty)</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted small">/blog/</span>
                                <input 
                                    type="text" 
                                    name="seourl" 
                                    id="seourl" 
                                    value="{{ old('seourl') }}" 
                                    class="form-control rounded-end-3" 
                                >
                            </div>
                        </div>

                        <!-- Rich Text Content Editor (FCK / CKEditor) -->
                        <div class="mb-2">
                            <label for="blogContentEditor" class="form-label fw-bold font-heading text-dark fs-6 d-flex justify-content-between align-items-center">
                                <span>Article Content (content) <span class="text-danger">*</span></span>
                                <span class="badge bg-light text-muted border fw-normal small">
                                    <i class="bi bi-code-slash me-1"></i> Rich Text WYSIWYG
                                </span>
                            </label>
                            <textarea 
                                name="content" 
                                id="blogContentEditor" 
                                class="form-control"
                            >{{ old('content') }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- SEO Meta Information Card -->
                <div class="card border-0 rounded-4 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                        <h5 class="fw-bold text-dark mb-0 font-heading">
                            <i class="bi bi-search text-primary me-2"></i> Search Engine Optimization (SEO Meta)
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <!-- Meta Title -->
                        <div class="mb-3">
                            <label for="metatitle" class="form-label fw-semibold text-dark small">
                                Meta Title (metatile / metatitle)
                            </label>
                            <input 
                                type="text" 
                                name="metatitle" 
                                id="metatitle" 
                                value="{{ old('metatitle') }}" 
                                class="form-control rounded-3" 
                            >
                        </div>

                        <!-- Meta Description -->
                        <div class="mb-3">
                            <label for="metadesp" class="form-label fw-semibold text-dark small">
                                Meta Description (metadesp)
                            </label>
                            <textarea 
                                name="metadesp" 
                                id="metadesp" 
                                rows="3" 
                                class="form-control rounded-3" 
                            >{{ old('metadesp') }}</textarea>
                        </div>

                        <!-- Meta Keywords -->
                        <div class="mb-2">
                            <label for="keyword" class="form-label fw-semibold text-dark small">
                                Keywords (keyword)
                            </label>
                            <input 
                                type="text" 
                                name="keyword" 
                                id="keyword" 
                                value="{{ old('keyword') }}" 
                                class="form-control rounded-3" 
                            >
                            <small class="text-muted">Separate multiple search tags with commas.</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar Column: Category, Author, Featured Image, Publishing -->
            <div class="col-lg-4">
                <!-- Taxonomy & Attribution Card -->
                <div class="card border-0 rounded-4 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                        <h6 class="fw-bold text-dark mb-0 font-heading">
                            <i class="bi bi-diagram-3-fill text-primary me-2"></i> Attribution & Taxonomy
                        </h6>
                    </div>
                    <div class="card-body p-4">
                        <!-- Category (catid) -->
                        <div class="mb-3">
                            <label for="catid" class="form-label fw-semibold text-dark small">
                                Blog Category (catid)
                            </label>
                            <select name="catid" id="catid" class="form-select rounded-3">
                                <option value="">-- Select Category --</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->blogcatid }}" {{ old('catid') == $category->blogcatid ? 'selected' : '' }}>
                                        {{ $category->catname }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-1">
                                Need a new category? <a href="{{ route('admin.blogcat.index') }}" target="_blank">Manage categories</a>
                            </small>
                        </div>

                        <!-- Author (authorid / autthorid) -->
                        <div class="mb-2">
                            <label for="authorid" class="form-label fw-semibold text-dark small">
                                Blog Author (authorid / autthorid)
                            </label>
                            <select name="authorid" id="authorid" class="form-select rounded-3">
                                <option value="">-- Select Author --</option>
                                @foreach($authors as $author)
                                    <option value="{{ $author->blogauthorid }}" {{ old('authorid') == $author->blogauthorid ? 'selected' : '' }}>
                                        {{ $author->blogauthorname }} ({{ $author->designation ?: 'Author' }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-1">
                                Need to add an author? <a href="{{ route('admin.blogauthor.index') }}" target="_blank">Manage authors</a>
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Featured Image Card with jQuery Cropper -->
                <div class="card border-0 rounded-4 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold text-dark mb-0 font-heading">
                            <i class="bi bi-image text-warning me-2"></i> Featured Image (blogimage)
                        </h6>
                        <span class="badge bg-warning-subtle text-dark small">415 × 210 px</span>
                    </div>
                    <div class="card-body p-4">
                        <!-- Hidden input storing cropped base64 image data -->
                        <input type="hidden" name="cropped_image" id="cropped_image">

                        <!-- Image Preview Area -->
                        <div id="imagePreviewContainer" class="mb-3 text-center d-none">
                            <div class="position-relative d-inline-block w-100">
                                <img id="croppedPreviewImg" src="" alt="Cropped Preview" class="img-fluid rounded-3 border shadow-sm w-100" style="max-height: 220px; object-fit: cover;">
                                <div class="mt-2 d-flex gap-2 justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3" id="recropBtn">
                                        <i class="bi bi-crop me-1"></i> Re-Crop
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger rounded-pill px-3" id="removeImgBtn">
                                        <i class="bi bi-trash me-1"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Initial Upload Input Trigger -->
                        <div id="uploadTriggerContainer">
                            <label for="imageUploadInput" class="form-label fw-semibold text-dark small">
                                Upload & Crop Thumbnail Image
                            </label>
                            <input 
                                type="file" 
                                id="imageUploadInput" 
                                name="blogimage"
                                class="form-control rounded-3" 
                                accept="image/png, image/jpeg, image/webp, image/jpg"
                            >
                            <small class="text-muted d-block mt-1">
                                Thumbnail automatically cropped to 415 × 210 px. Saved inside /uploads/blog/.
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Publishing Controls Card (Bottom) -->
                <div class="card border-0 rounded-4 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                        <h6 class="fw-bold text-dark mb-0 font-heading">
                            <i class="bi bi-send-fill text-success me-2"></i> Publishing Status
                        </h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-3">
                            <label for="status" class="form-label fw-semibold text-dark small">Status</label>
                            <select name="status" id="status" class="form-select rounded-3">
                                <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>
                                    ✅ Published (Live on Academy Blog)
                                </option>
                                <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>
                                    📝 Draft (Save internally)
                                </option>
                                <option value="archived" {{ old('status') === 'archived' ? 'selected' : '' }}>
                                    📁 Archived
                                </option>
                            </select>
                        </div>

                        <!-- Publication Date (publish_date) -->
                        <div class="mb-3">
                            <label for="publish_date" class="form-label fw-semibold text-dark small">
                                <i class="bi bi-calendar3 text-primary me-1"></i> Publication Date
                            </label>
                            <input 
                                type="date" 
                                name="publish_date" 
                                id="publish_date" 
                                value="{{ old('publish_date', date('Y-m-d')) }}" 
                                class="form-control rounded-3 @error('publish_date') is-invalid @enderror"
                            >
                            @error('publish_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted" style="font-size: 0.75rem;">Display date shown on academy readers' portals.</small>
                        </div>

                        <!-- Feature Blog Checkbox -->
                        <div class="mb-3 p-3 bg-light rounded-3 border">
                            <div class="form-check form-switch mb-1">
                                <input class="form-check-input" type="checkbox" role="switch" id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold text-dark small" for="is_featured">
                                    <i class="bi bi-stars text-warning me-1"></i> Feature on Home Page
                                </label>
                            </div>
                            <div class="text-muted" style="font-size: 0.76rem;">
                                When enabled, this blog will be displayed at the top as the <strong>Featured Insight</strong> banner.
                            </div>
                        </div>

                        <div class="d-grid gap-2 pt-2">
                            <button type="submit" class="btn btn-warning rounded-pill py-2 fw-bold text-dark shadow-sm" style="background-color: var(--iq-orange); border: none; color: #fff !important;">
                                <i class="bi bi-check-circle-fill me-1"></i> Save & Publish Article
                            </button>
                            <a href="{{ route('admin.blogcontent.index') }}" class="btn btn-light rounded-pill py-2">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- ================= IMAGE CROPPER MODAL (jQuery Cropper) ================= -->
<div class="modal fade" id="cropperModal" tabindex="-1" aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-dark font-heading" id="cropperModalLabel">
                    <i class="bi bi-crop text-warning me-2"></i> Crop Blog Thumbnail (415 × 210 px)
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-3">
                <!-- Aspect Ratio Selector Controls -->
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 bg-light p-2 rounded-3 border">
                    <div class="btn-group btn-group-sm" role="group" id="ratioButtonGroup">
                        <button type="button" class="btn btn-outline-secondary active ratio-btn" data-ratio="1.97619047619">415×210 (Thumbnail)</button>
                        <button type="button" class="btn btn-outline-secondary ratio-btn" data-ratio="1.77777777778">16:9</button>
                        <button type="button" class="btn btn-outline-secondary ratio-btn" data-ratio="1.33333333333">4:3</button>
                        <button type="button" class="btn btn-outline-secondary ratio-btn" data-ratio="1">1:1</button>
                        <button type="button" class="btn btn-outline-secondary ratio-btn" data-ratio="NaN">Free</button>
                    </div>

                    <!-- Rotate & Zoom Tools -->
                    <div class="d-flex align-items-center gap-1">
                        <button type="button" class="btn btn-sm btn-light border" id="zoomInBtn" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
                        <button type="button" class="btn btn-sm btn-light border" id="zoomOutBtn" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
                        <button type="button" class="btn btn-sm btn-light border" id="rotateLeftBtn" title="Rotate Left"><i class="bi bi-arrow-counterclockwise"></i></button>
                        <button type="button" class="btn btn-sm btn-light border" id="rotateRightBtn" title="Rotate Right"><i class="bi bi-arrow-clockwise"></i></button>
                        <button type="button" class="btn btn-sm btn-light border" id="resetCropBtn" title="Reset"><i class="bi bi-arrow-repeat"></i></button>
                    </div>
                </div>

                <!-- Cropper Image Canvas Stage -->
                <div class="crop-stage-wrapper">
                    <img id="cropperSourceImg" src="" alt="Source for cropping">
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning rounded-pill px-4 fw-semibold text-dark" id="applyCropBtn" style="background-color: var(--iq-orange); border: none; color: #fff !important;">
                    <i class="bi bi-check-lg me-1"></i> Crop & Apply Image
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- jQuery & Cropper.js CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cropper/1.0.1/jquery-cropper.min.js"></script>

<!-- CKEditor 5 Classic CDN for Rich Text Formatting (FCK / CKEditor) -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 1. Initialize CKEditor 5 WYSIWYG
        ClassicEditor
            .create(document.querySelector('#blogContentEditor'), {
                toolbar: [
                    'heading', '|', 
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'link', 'bulletedList', 'numberedList', 'blockQuote', '|',
                    'insertTable', 'undo', 'redo'
                ],
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                    ]
                }
            })
            .then(editor => {
                window.editorInstance = editor;
            })
            .catch(error => {
                console.error('CKEditor initialization error:', error);
            });

        // 2. Slug manual tracking
        const seourlInput = document.getElementById('seourl');
        if (seourlInput) {
            seourlInput.addEventListener('input', function () {
                this.dataset.manual = this.value ? 'true' : 'false';
            });
        }

        // 3. jQuery Cropper Setup
        let $image = $('#cropperSourceImg');
        let cropperModal = new bootstrap.Modal(document.getElementById('cropperModal'));
        let currentRatio = 415 / 210;

        // When user selects a file
        $('#imageUploadInput').on('change', function (e) {
            let files = e.target.files;
            if (files && files.length > 0) {
                let file = files[0];
                let reader = new FileReader();
                reader.onload = function (event) {
                    // Destroy previous cropper instance if any
                    $image.cropper('destroy');
                    $image.attr('src', event.target.result);

                    cropperModal.show();

                    // Initialize cropper after modal is shown
                    setTimeout(function () {
                        $image.cropper({
                            aspectRatio: currentRatio,
                            viewMode: 1,
                            autoCropArea: 0.95,
                            responsive: true,
                            restore: true,
                            guides: true,
                            highlight: true,
                            cropBoxMovable: true,
                            cropBoxResizable: true
                        });
                    }, 300);
                };
                reader.readAsDataURL(file);
            }
        });

        // Aspect ratio buttons
        $('.ratio-btn').on('click', function () {
            $('.ratio-btn').removeClass('active');
            $(this).addClass('active');
            let ratio = parseFloat($(this).data('ratio'));
            currentRatio = ratio;
            $image.cropper('setAspectRatio', ratio);
        });

        // Zoom / Rotate / Reset controls
        $('#zoomInBtn').on('click', function () { $image.cropper('zoom', 0.1); });
        $('#zoomOutBtn').on('click', function () { $image.cropper('zoom', -0.1); });
        $('#rotateLeftBtn').on('click', function () { $image.cropper('rotate', -90); });
        $('#rotateRightBtn').on('click', function () { $image.cropper('rotate', 90); });
        $('#resetCropBtn').on('click', function () { $image.cropper('reset'); });

        // Apply crop button
        $('#applyCropBtn').on('click', function () {
            let canvas = $image.cropper('getCroppedCanvas', {
                width: 415,
                height: 210,
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high'
            });

            if (canvas) {
                let croppedBase64 = canvas.toDataURL('image/jpeg', 0.9);

                // Set value into hidden input
                $('#cropped_image').val(croppedBase64);

                // Update preview image
                $('#croppedPreviewImg').attr('src', croppedBase64);
                $('#imagePreviewContainer').removeClass('d-none');
                $('#uploadTriggerContainer').addClass('d-none');

                cropperModal.hide();
            }
        });

        // Re-crop button
        $('#recropBtn').on('click', function () {
            cropperModal.show();
            setTimeout(function () {
                $image.cropper('setAspectRatio', currentRatio);
            }, 300);
        });

        // Remove image button
        $('#removeImgBtn').on('click', function () {
            $('#cropped_image').val('');
            $('#imageUploadInput').val('');
            $('#imagePreviewContainer').addClass('d-none');
            $('#uploadTriggerContainer').removeClass('d-none');
        });
    });
</script>
@endpush