@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">Pages</h4>
                        <p class="text-muted mb-0">Manage dynamic pages like Privacy Policy, Terms, etc.</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 Page
                        </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 Page
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <form action="{{ route('pages.store') }}" method="POST" id="addPageForm">
                                        @csrf

                                        <div class="modal-body">

                                            {{-- Title --}}
                                            <div class="mb-4">
                                                <label for="pageTitle" class="form-label fw-medium">
                                                    Page Title <span class="text-danger">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    id="pageTitle"
                                                    name="title"
                                                    class="form-control"
                                                    placeholder="e.g. Privacy Policy"
                                                    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>

                                        </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 Page
                                            </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">Slug</th>
                                <th class="bg-secondary text-white">Status</th>
                                <th class="bg-secondary text-white">Created</th>
                                <th class="bg-secondary text-white">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($pages as $key => $page)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar me-3">
                                                <div class="avatar-initial bg-label-primary rounded-circle">
                                                    <i class="icon-base ti tabler-file-text icon-14px"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $page->title }}</h6>
                                                <small class="text-muted">{{ Str::limit(strip_tags($page->description), 50) }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td><code>/{{ $page->slug }}</code></td>
                                    <td>
                                    <span class="badge bg-label-{{ $page->status == '1' ? 'success' : 'danger' }}">
                                        {{ $page->status == '1' ? 'Active' : 'Inactive' }}
                                    </span>
                                    </td>
                                    <td>{{ $page->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{{ $page->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{{ $page->id }}">
                                                <i class="icon-base ti tabler-trash icon-14px"></i>
                                                Delete
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $page->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>{{ $page->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('pages.destroy', $page->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--}}
                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $page->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('pages.update', $page->id) }}" method="POST" id="editPageForm{{ $page->id }}">
                                                @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="{{ $page->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="{{ $page->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" {{ $page->status == '1' ? 'selected' : '' }}>Active</option>
                                                                <option value="0" {{ $page->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{{ $page->id }}"
                                                            name="description"
                                                            class="form-control"
                                                            rows="6"
                                                        >{{ $page->description }}</textarea>
                                                    </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 pages 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 page 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();
                }
            });
        });
    </script>
@endsection