@extends('crm.master')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Page Header -->
        <div class="row mb-6">
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h4 class="mb-1">Blogs</h4>
                        <p class="text-muted mb-0">Manage Blogs.</p>
                    </div>
                    <div>
                        {{-- Add New Page Button (replace existing one) --}}
                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPageModal">
                            <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
                            Add New Blog
                        </a>

                        <div class="modal fade" id="addPageModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <h5 class="modal-title">
                                            <i class="icon-base ti tabler-file-plus me-2 icon-16px"></i>
                                            Add New Blog
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <form action="{{ route('blogs.store') }}" method="POST" id="addPageForm" enctype="multipart/form-data">
                                        @csrf

                                        <div class="modal-body">

                                            {{-- Title --}}
                                            <div class="mb-4">
                                                <label for="pageTitle" class="form-label fw-medium">
                                                    Blog Title <span class="text-danger">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    id="pageTitle"
                                                    name="title"
                                                    class="form-control"
                                                    placeholder="e.g. My First Blog Post"
                                                    required
                                                >
                                            </div>

                                            {{-- Slug + Status --}}
                                            <div class="row mb-4">
                                                <div class="col-md-7">
                                                    <label for="pageSlug" class="form-label fw-medium">Slug</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">/</span>
                                                        <input
                                                            type="text"
                                                            id="pageSlug"
                                                            name="slug"
                                                            class="form-control"
                                                            placeholder="auto-generated-from-title"
                                                        >
                                                    </div>
                                                    <small class="text-muted">Leave blank to auto-generate from title.</small>
                                                </div>
                                                <div class="col-md-5">
                                                    <label for="pageStatus" class="form-label fw-medium">Status</label>
                                                    <select id="pageStatus" name="status" class="form-select">
                                                        <option value="1">Active</option>
                                                        <option value="0">Inactive</option>
                                                    </select>
                                                </div>
                                            </div>

                                            {{-- Description (CKEditor) --}}
                                            <div class="mb-2">
                                                <label for="pageDescription" class="form-label fw-medium">
                                                    Description <span class="text-danger">*</span>
                                                </label>
                                                <textarea
                                                    id="pageDescription"
                                                    name="description"
                                                    class="form-control"
                                                    rows="6"
                                                    placeholder="Write page content here..."
                                                ></textarea>
                                            </div>

                                            {{-- Image --}}
                                            <div class="mb-4">
                                                <label for="pageImage" class="form-label fw-medium">
                                                    Blog Image <span class="text-danger">*</span>
                                                </label>
                                                <input
                                                    type="file"
                                                    id="pageImage"
                                                    name="image"
                                                    class="form-control"
                                                    accept="image/*"
                                                    required
                                                >
                                            </div>

                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                                <i class="icon-base ti tabler-x me-1 icon-14px"></i>
                                                Cancel
                                            </button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="icon-base ti tabler-device-floppy me-1 icon-14px"></i>
                                                Save Blog
                                            </button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card crm-grid-card">
                    <div class="table-responsive crm-grid-wrap">
                        @include('crm.components.alerts')

                        <table class="table table-hover crm-grid-table">
                            <thead class="table-light">
                            <tr>
                                <th class="bg-secondary text-white">S.No</th>
                                <th class="bg-secondary text-white">Title</th>
                                <th class="bg-secondary text-white">Image</th>
                                <th class="bg-secondary text-white">Slug</th>
                                <th class="bg-secondary text-white">Status</th>
                                <th class="bg-secondary text-white">Created</th>
                                <th class="bg-secondary text-white text-center">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($blogs as $key => $blog)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>
                                        @if($blog->image)
                                            <img src="{{ asset('storage/blogs/' . $blog->image) }}"
                                                 width="60"
                                                 height="60"
                                                 style="object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
                                        @else
                                            <span class="text-muted">No Image</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <h6 class="mb-0">{{ $blog->title }}</h6>
                                                <small class="text-muted">{{ Str::limit(strip_tags($blog->description), 50) }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td><code>/{{ $blog->slug }}</code></td>
                                    <td>
                                    <span class="badge bg-label-{{ $blog->status == '1' ? 'success' : 'danger' }}">
                                        {{ $blog->status == '1' ? 'Active' : 'Inactive' }}
                                    </span>
                                    </td>
                                    <td>{{ $blog->created_at->format('d M, Y') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-primary waves-effect" data-bs-toggle="modal" data-bs-target="#editModal{{ $blog->id }}">
                                                <i class="icon-base ti tabler-edit icon-14px"></i>
                                                Edit
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger waves-effect" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $blog->id }}">
                                                <i class="icon-base ti tabler-trash icon-14px"></i>
                                                Delete
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $blog->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Confirm Delete</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure you want to delete <strong>{{ $blog->title }}</strong>?</p>
                                                <p class="text-muted small mb-0">This action cannot be undone.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                                    <i class="icon-base ti tabler-x me-1 icon-14px"></i>
                                                    No
                                                </button>
                                                <form action="{{ route('blogs.destroy', $blog->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="icon-base ti tabler-trash me-1 icon-14px"></i>
                                                        Yes, Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $blog->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">

                                            <div class="modal-header">
                                                <h5 class="modal-title">
                                                    <i class="icon-base ti tabler-file-pencil me-2 icon-16px"></i>
                                                    Edit Page
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>

                                            <form action="{{ route('blogs.update', $blog->id) }}" method="POST" id="editPageForm{{ $blog->id }}" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')

                                                <div class="modal-body">

                                                     Title
                                                    <div class="mb-4">
                                                        <label class="form-label fw-medium">
                                                            Page Title <span class="text-danger">*</span>
                                                        </label>
                                                        <input
                                                            type="text"
                                                            name="title"
                                                            class="form-control"
                                                            value="{{ $blog->title }}"
                                                            required
                                                        >
                                                    </div>

                                                     Slug + Status
                                                    <div class="row mb-4">
                                                        <div class="col-md-7">
                                                            <label class="form-label fw-medium">Slug</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">/</span>
                                                                <input
                                                                    type="text"
                                                                    name="slug"
                                                                    class="form-control"
                                                                    value="{{ $blog->slug }}"
                                                                >
                                                            </div>
                                                            <small class="text-muted">Leave blank to auto-generate from title.</small>
                                                        </div>
                                                        <div class="col-md-5">
                                                            <label class="form-label fw-medium">Status</label>
                                                            <select name="status" class="form-select">
                                                                <option value="1" {{ $blog->status == '1' ? 'selected' : '' }}>Active</option>
                                                                <option value="0" {{ $blog->status == '0' ? 'selected' : '' }}>Inactive</option>
                                                            </select>
                                                        </div>
                                                    </div>

{{--                                                     Description (CKEditor)--}}
                                                    <div class="mb-2">
                                                        <label class="form-label fw-medium">
                                                            Description <span class="text-danger">*</span>
                                                        </label>
                                                        <textarea
                                                            id="editPageDescription{{ $blog->id }}"
                                                            name="description"
                                                            class="form-control"
                                                            rows="6"
                                                        >{{ $blog->description }}</textarea>
                                                    </div>

                                                    {{-- Current Image Preview --}}
                                                    @if($blog->image)
                                                        <div class="mb-3">
                                                            <label class="form-label fw-medium">Current Image</label>
                                                            <br>
                                                            <img id="previewImage{{ $blog->id }}"
                                                                 src="{{ asset('storage/blogs/' . $blog->image) }}"
                                                                 width="120"
                                                                 height="120"
                                                                 style="object-fit: cover; border-radius: 10px;">
                                                        </div>
                                                    @endif

                                                    <div class="mb-3">
                                                        <label class="form-label fw-medium">Change Image</label>
                                                        <input type="file"
                                                               name="image"
                                                               class="form-control"
                                                               accept="image/*"
                                                               onchange="previewEditImage(event, {{ $blog->id }})">
                                                    </div>

                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                                        <i class="icon-base ti tabler-x me-1 icon-14px"></i>
                                                        Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">
                                                        <i class="icon-base ti tabler-device-floppy me-1 icon-14px"></i>
                                                        Update Page
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="icon-base ti tabler-file-off icon-24px mb-2 d-block"></i>
                                            <p class="mb-0">No Blogs found</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-script')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
    <style>
        .ck-editor__editable_inline {
            min-height: 200px !important;
        }
        .ck-editor__editable h1 { font-size: 1.4rem !important; }
        .ck-editor__editable h2 { font-size: 1.2rem !important; }
        .ck-editor__editable h3 { font-size: 1rem !important; }
        .ck-editor__editable p  { font-size: 0.875rem !important; }
        .ck-editor__editable li { font-size: 0.875rem !important; }
    </style>
    <script>
        let pageEditor;

        document.getElementById('addPageModal').addEventListener('shown.bs.modal', function () {
            if (!pageEditor) {
                ClassicEditor
                    .create(document.querySelector('#pageDescription'), {
                        toolbar: [
                            'heading', '|',
                            'bold', 'italic', 'underline', 'strikethrough', '|',
                            'bulletedList', 'numberedList', 'blockQuote', '|',
                            'link', 'insertTable', 'mediaEmbed', '|',
                            'undo', 'redo'
                        ],
                        placeholder: 'Write your blog content here...'
                    })
                    .then(editor => {
                        pageEditor = editor;
                    })
                    .catch(console.error);
            }
        });

        document.getElementById('pageTitle').addEventListener('input', function () {
            const slugField = document.getElementById('pageSlug');
            if (!slugField.dataset.manual) {
                slugField.value = this.value
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-');
            }
        });

        document.getElementById('pageSlug').addEventListener('input', function () {
            this.dataset.manual = this.value ? 'true' : '';
        });

        document.getElementById('addPageForm').addEventListener('submit', function () {
            if (pageEditor) {
                document.querySelector('#pageDescription').value = pageEditor.getData();
            }
        });

        document.getElementById('addPageModal').addEventListener('hidden.bs.modal', function () {
            if (pageEditor) {
                pageEditor.destroy().then(() => { pageEditor = null; });
            }
        });

        // Edit modal CKEditor instances
        let editEditors = {};

        document.querySelectorAll('[id^="editModal"]').forEach(function (modal) {
            const pageId = modal.id.replace('editModal', '');

            modal.addEventListener('shown.bs.modal', function () {
                if (!editEditors[pageId]) {
                    ClassicEditor
                        .create(document.querySelector('#editPageDescription' + pageId), {
                            toolbar: [
                                'heading', '|',
                                'bold', 'italic', 'underline', 'strikethrough', '|',
                                'bulletedList', 'numberedList', 'blockQuote', '|',
                                'link', 'insertTable', 'mediaEmbed', '|',
                                'undo', 'redo'
                            ],
                        })
                        .then(editor => {
                            editEditors[pageId] = editor;
                        })
                        .catch(console.error);
                }
            });

            modal.addEventListener('hidden.bs.modal', function () {
                if (editEditors[pageId]) {
                    editEditors[pageId].destroy().then(() => {
                        delete editEditors[pageId];
                    });
                }
            });

            document.getElementById('editPageForm' + pageId).addEventListener('submit', function () {
                if (editEditors[pageId]) {
                    document.querySelector('#editPageDescription' + pageId).value = editEditors[pageId].getData();
                }
            });
        });
        function previewEditImage(event, id) {
            const reader = new FileReader();

            reader.onload = function () {
                const output = document.getElementById('previewImage' + id);
                if (output) {
                    output.src = reader.result;
                }
            };

            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
@endsection