@push('styles')
<!-- Froala CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@4.1.4/css/froala_editor.pkgd.min.css">
@endpush

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div
                        class="page-title-box d-sm-flex align-items-center justify-content-center bg-galaxy-transparent">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ URL::to('admin/dashboard') }}" title="Dashbard">
                                        <i class="fa fa-home me-1 fs-10" aria-hidden="true"></i>Dashboard</a></li>
                                @if($formMode)
                                <li class="breadcrumb-item "><a href="" title="Crypto Project"
                                        class="text-decoration-none">Crypto Project</a></li>
                                <li class="breadcrumb-item active"> {{ $updateMode ? 'Edit' : 'Create' }}</li>
                                @else
                                <li class="breadcrumb-item active">Crypto Project</li>
                                @endif
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="card">

                @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
                @endif
                <div class="card-header d-flex justify-content-between">
                    <h4 class="card-title">Crypto Project</h4>

                    {{-- Add More button (only if form is hidden) --}}
                    @if(($role_id == 1) || in_array(78, $permissions))
                    @if(!$formMode)
                    <button class="btn btn-primary" wire:click="create">+ Add More</button>
                    @endif
                    @endif
                </div>

                {{-- Show form --}}
                @if($formMode)
                <div class="card-body">
                    <form wire:submit.prevent="{{ $updateMode ? 'update' : 'store' }}"   enctype="multipart/form-data">
                        <div class="row gy-4">

                            <div class="col-md-6">
                                <label for="image">Image</label>
                                <input type="file" id="image" class="form-control @error('image') is-invalid @enderror"
                                    wire:model="image" accept=".jpeg,.png,.jpg">
                                @error('image') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror

                                <div class="mt-2">
                                    @if($image instanceof \Livewire\Features\SupportFileUploads\TemporaryUploadedFile)
                                    {{-- Preview new uploaded file --}}
                                    <img src="{{ $image->temporaryUrl() }}" width="80" height="80" class="mt-2">
                                    @elseif($existingImage)
                                    {{-- Show existing image from database --}}
                                    <img src="{{  url($existingImage) }}" width="80" height="80" class="mt-2">
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Slug</label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror"
                                    wire:model.defer="slug" @if($viewMode) readonly @endif>
                                @error('slug') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Project Name</label>
                                <input type="text" class="form-control @error('project_name') is-invalid @enderror"
                                    wire:model.defer="project_name" @if($viewMode) readonly @endif>
                                @error('project_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>


                            <div x-data="select2Dropdown(@entangle('founder_id'))" x-init="initSelect2()" wire:ignore
                                class="col-md-6">
                                <label>Founder Name</label>
                                <select x-ref="select" class="form-control @error('founder_id') is-invalid @enderror"
                                    multiple @if($viewMode) disabled @endif>
                                    @foreach ($founders as $id => $name)
                                    <option value="{{ $id }}" @if(in_array($id, (array) $founder_id)) selected @endif>
                                        {{ $name }}
                                    </option>
                                    @endforeach
                                </select>

                                @error('founder_id')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label>Funding Year</label>
                                <input type="text" class="form-control @error('funding_year') is-invalid @enderror"
                                    wire:model.defer="funding_year" @if($viewMode) readonly @endif>
                                @error('funding_year') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            {{-- <div class="col-md-6">
                                    <label>Category</label>
                                    <input type="text" class="form-control @error('category') is-invalid @enderror"
                                        wire:model.defer="category" @if($viewMode) readonly @endif>
                                    @error('category') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div> --}}

                        <div x-data="select2Dropdown(@entangle('category'))" x-init="initSelect2()" wire:ignore
                            class="col-md-6">
                            <label>Category</label>
                            <select x-ref="select" class="form-control @error('category') is-invalid @enderror"
                                multiple @if($viewMode) disabled @endif>
                                @foreach ($categories as $id => $title)
                                <option value="{{ $id }}" @if(in_array($id, (array) $category)) selected @endif>
                                    {{ $title }}
                                </option>
                                @endforeach
                            </select>

                            @error('category')
                            <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>White Paper Url</label>
                            <input type="text" class="form-control @error('white_paper_url') is-invalid @enderror"
                                wire:model.defer="white_paper_url" @if($viewMode) readonly @endif>
                            @error('white_paper_url') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Website Url</label>
                            <input type="text" class="form-control @error('website_url') is-invalid @enderror"
                                wire:model.defer="website_url" @if($viewMode) readonly @endif>
                            @error('website_url') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Breadcrumb </label>
                            <input type="text" class="form-control @error('breadcrumbs') is-invalid @enderror"
                                wire:model.defer="breadcrumbs" @if($viewMode) readonly @endif>
                            @error('breadcrumbs') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                        <div x-data="seoEditor()" x-init="init()"
                            x-on:load-editor.window="loadContent($event.detail)" class="col-md-12 my-2">
                            <div class="col-md-12" wire:ignore>
                                <label class="form-label">Full Description *</label>

                                <!-- Important: Add hidden input bound to Livewire -->
                                <textarea id="description" x-ref="editor">{{ $this->description }}</textarea>
                            </div>
                        </div>
                        <div>
                            <input type="hidden" wire:model.defer="description"
                                class="form-control @error('description') is-invalid @enderror">
                            @error('description')
                            <small class="invalid-feedback mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div>
                            <div x-data="seoEditors()" x-init="init()"
                                x-on:load-editor.window="loadContent($event.detail)" class="col-md-12 my-2">
                                <div class="col-md-12" wire:ignore>
                                    <label class="form-label">Short Description *</label>

                                    <!-- Important: Add hidden input bound to Livewire -->
                                    <textarea id="short_description" x-ref="editor">{{ $this->short_description }}</textarea>
                                </div>
                            </div>

                            <div class="col-12">
                                <label>Faq (Json)</label>
                                <textarea type="text"
                                    class="form-control @error('faq') is-invalid @enderror"
                                    wire:model.defer="faq" rows="9" @if($viewMode) readonly
                                    @endif></textarea>
                                @error('faq') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <input type="hidden" wire:model.defer="short_description"
                                    class="form-control @error('short_description') is-invalid @enderror">
                                @error('short_description')
                                <small class="invalid-feedback mt-1">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label>Seo Title</label>
                                <input type="text" class="form-control @error('seoTitle') is-invalid @enderror"
                                    wire:model.defer="seoTitle" @if($viewMode) readonly @endif>
                                @error('seoTitle') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-12">
                                <label>Meta Keywords</label>
                                <input type="text" class="form-control @error('metaKeywords') is-invalid @enderror"
                                    wire:model.defer="metaKeywords" @if($viewMode) readonly @endif>
                                @error('metaKeywords') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-12">
                                <label>Meta Description</label>
                                <textarea type="text"
                                    class="form-control @error('metaDescription') is-invalid @enderror"
                                    wire:model.defer="metaDescription" rows="9" @if($viewMode) readonly
                                    @endif></textarea>
                                @error('metaDescription') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            @if(!$viewMode)
                            <div class="col-12 mt-3">
                                <button type="submit" class="btn btn-primary">
                                    {{ $updateMode ? 'Update' : 'Save' }}
                                </button>
                                <button type="button" class="btn btn-secondary" wire:click="resetFields">
                                    Cancel
                                </button>
                            </div>
                            @else
                            <div class="col-12 mt-3">
                                <button type="button" class="btn btn-secondary" wire:click="resetFields">
                                    Close
                                </button>
                            </div>
                            @endif

                        </div>
                    </form>
                </div>
                @endif
                @if($viewMode)

                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-sm-12 col-xl-6">
                            <div class="d-flex flex-wrap">
                                <label class="form-label width-label">Project Name:</label>
                                <p>{{ $project_name ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xl-6">
                            <div class="d-flex flex-wrap">
                                <label class="form-label width-label">Founder Name:</label>
                                <p>
                                    {{ collect($founder_id)
                    ->map(fn($id) => $founders[$id] ?? null)
                    ->filter()
                    ->implode(', ') }}
                                </p>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xl-6">
                            <div class="d-flex flex-wrap">
                                <label class="form-label width-label">Funding Year:</label>
                                <p>{{ $funding_year ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xl-6">
                            <div class="d-flex flex-wrap">
                                <label class="form-label width-label">Category:</label>
                                <p>{{ $category_names }}</p>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xl-6">
                            <div class="d-flex flex-wrap">
                                <label class="form-label width-label">Description:</label>
                                <p>{!! $description ?? '-' !!}</p>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-end">
                        <button type="button" wire:click="resetFields" class="btn btn-secondary">Close</button>
                    </div>
                </div>

                <style>
                    .width-label {
                        width: 100px;
                    }
                </style>
                @endif

                {{-- Table --}}
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="row mb-3">
                            <!-- Search -->
                            <div class="col-md-3">
                                <input type="text" wire:model.debounce.500ms="search" class="form-control"
                                    placeholder="Search">
                            </div>

                            <!-- Month filter -->
                            <div class="col-md-3">
                                <select wire:model="month" class="form-control">
                                    <option value="">Filter by Month</option>
                                    @for($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}">{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                        @endfor
                                </select>
                            </div>

                            <!-- Reset -->
                            <div class="col-md-1">
                                <button type="button" class="btn btn-primary" wire:click="applySearch">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                </button>

                                <button type="button" class="btn btn-primary" wire:click="resetFilters">
                                    <i class="fa-solid fa-arrows-rotate"></i>
                                </button>
                            </div>
                        </div>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Project Name</th>
                                    <th>Founder Name</th>
                                    <th>Funding Year</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($projects as $project)

                            
                                <tr>
                                    <td>
                                        @if($project->image)
                                        <img src="{{ url($project->image) }}" alt="{{ $project->name }}" width="50"
                                            height="50">
                                        @else
                                        <span class="text-muted">No Image</span>
                                        @endif
                                    </td>
                                    <td>{{ $project->project_name }}</td>
                                    <td>
                                        {{ collect($project->founder_id)
                                    ->map(fn($id) => $founders[$id] ?? null)
                                    ->filter()
                                    ->implode(', ')
                                                                                            }}
                                    </td>
                                    <td>{{ $project->funding_year }}</td>
                                    <td>
                                        @if(($role_id == 1) || in_array(79, $permissions))
                                        <button class="btn btn-success" wire:click="view({{ $project->id }})"><i
                                                class="fa-solid fa-eye"></i></button>
                                        @endif

                                        @if(($role_id == 1) || in_array(80, $permissions))
                                        <button class="btn btn-info" wire:click="edit({{ $project->id }})"><i
                                                class="fa-solid fa-pen-to-square"></i></button>
                                        @endif

                                        @if(($role_id == 1) || in_array(81, $permissions))
                                        <button class="btn btn-danger" wire:click="delete({{ $project->id }})"><i
                                                class="fa-solid fa-trash-can"></i></button>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="3" class="text-center">No records found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                        {{ $projects->links() }}
                    </div>
                </div>

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

    @push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
    <!-- Froala JS -->
    <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.1.4/js/froala_editor.pkgd.min.js"></script>

    <script>
        function select2Dropdown(livewireProperty) {
            return {
                value: livewireProperty,

                initSelect2() {
                    const select = $(this.$refs.select);

                    select.select2({
                        width: '100%'
                    });

                    // UI → Alpine
                    select.on('change', () => {
                        this.value = select.val();
                    });

                    // Alpine → Livewire (DYNAMIC PROPERTY)
                    this.$watch('value', val => {
                        @this.set(livewireProperty, val);
                    });

                    // Livewire → UI (edit mode)
                    Livewire.hook('message.processed', () => {
                        let current = @this.get(livewireProperty);
                        if (current) {
                            select.val(current).trigger('change.select2');
                        }
                    });
                }
            }
        }
    </script>

    <script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

    <script>
        function seoEditor() {
            return {
                editor: null,

                init() {
                    this.$nextTick(() => this.initEditor());
                },

                initEditor(content = null) {
                    if (CKEDITOR.instances['description']) {
                        CKEDITOR.instances['description'].destroy(true);
                    }

                    const csrfToken = document
                        .querySelector('meta[name="csrf-token"]')
                        .getAttribute('content');

                    this.editor = CKEDITOR.replace('description', {
                        extraPlugins: 'sourcearea,font,justify,colorbutton,panelbutton,floatpanel,uploadimage',
                        removePlugins: 'easyimage,cloudservices',

                        toolbar: [{
                                name: 'document',
                                items: ['Source', 'Preview', 'Print']
                            },
                            {
                                name: 'clipboard',
                                items: ['Cut', 'Copy', 'Paste', 'Undo', 'Redo']
                            },
                            {
                                name: 'basicstyles',
                                items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat']
                            },
                            {
                                name: 'paragraph',
                                items: ['NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight']
                            },
                            {
                                name: 'links',
                                items: ['Link', 'Unlink']
                            },
                            {
                                name: 'insert',
                                items: ['Image', 'Table', 'HorizontalRule']
                            },
                            {
                                name: 'styles',
                                items: ['Format', 'Font', 'FontSize']
                            },
                            {
                                name: 'colors',
                                items: ['TextColor', 'BGColor']
                            },
                            {
                                name: 'tools',
                                items: ['Maximize']
                            }
                        ],

                        filebrowserUploadUrl: '/admin/upload-description-image?_token=' + csrfToken,
                        filebrowserUploadMethod: 'form',
                        uploadUrl: '/admin/upload-description-image?_token=' + csrfToken,

                        fileTools_requestHeaders: {
                            'X-CSRF-TOKEN': csrfToken
                        },

                        height: 400,
                        allowedContent: true,
                        contentsCss: ['https://cdn.ckeditor.com/4.22.1/full/contents.css'],

                        // **Custom Link Validation:**
                        linkShowTargetTab: true, // Shows the "Target" tab on the link dialog
                        linkAllowedDomains: [], // This can be populated dynamically to allow certain domains
                    });

                    this.editor.on('instanceReady', () => {
                        let value = content ?? @this.get('description') ?? '';
                        this.editor.setData(value);
                    });

                    this.editor.on('change', () => {
                        @this.set('description', this.editor.getData());
                    });

                    this.editor.on('blur', () => {
                        @this.set('description', this.editor.getData());
                    });

                    // 🔹 CUSTOM UPLOAD REQUEST
                    this.editor.on('fileUploadRequest', function(evt) {
                        var fileLoader = evt.data.fileLoader;
                        var xhr = fileLoader.xhr;
                        var formData = new FormData();

                        xhr.open('POST', '/admin/upload-description-image', true);
                        formData.append('_token', csrfToken);
                        formData.append('upload', fileLoader.file, fileLoader.fileName);

                        xhr.send(formData);
                        evt.stop();
                    });

                    // 🔹 HANDLE UPLOAD RESPONSE
                    this.editor.on('fileUploadResponse', function(evt) {
                        evt.stop();

                        var xhr = evt.data.fileLoader.xhr;
                        var response = JSON.parse(xhr.responseText);

                        if (response.uploaded) {
                            evt.data.url = response.url;
                        } else {
                            evt.data.message = 'Upload failed';
                            evt.cancel();
                        }
                    });

                    if (this.$refs.editor) {
                        this.$refs.editor.loadContent = (data) => {
                            this.initEditor(data);
                        };
                    }
                },

                loadContent(data) {
                    if (this.editor) {
                        this.editor.setData(data || '');
                    } else {
                        this.initEditor(data);
                    }
                }
            };
        }

        // THIS IS THE IMPORTANT FIX (AUTO SET URL FIELD)
        CKEDITOR.on('dialogDefinition', function(ev) {
            if (ev.data.name === 'link') {
                var dialogDefinition = ev.data.definition;

                // Target the URL field in the link dialog
                var urlField = dialogDefinition.getContents('info').get('url');

                // Define the custom URL validation logic
                urlField.validate = function() {
                    var url = this.getValue(); // Get the URL input value
                    console.log('URL to validate:', url); // Debug: Print the entered URL

                    const disallowedDomains = ['google.com','www.google.com','local.cryptohindi.com', 'cryptohindinews.in'];

                    try {
                        // Attempt to parse the URL
                        if (!/^https?:\/\//i.test(url)) {
                            url = 'http://' + url;
                        }
                        const parsedUrl = new URL(url);
                        const linkDomain = parsedUrl.hostname;
                        console.log('Parsed URL:', parsedUrl); // Debug: Print the parsed URL object
                        console.log('Domain:', linkDomain); // Debug: Print the extracted domain

                        // Check if the domain is in the disallowed list
                        if (disallowedDomains.includes(linkDomain)) {
                            console.log('Domain is disallowed:', linkDomain); // Debug: Show the disallowed domain
                            alert('This domain is not allowed for interlinking.');
                            return false; // Prevent the link from being inserted
                        }

                    } catch (e) {
                        // Handle any errors in parsing (e.g., malformed URL)
                        console.log('Error parsing URL:', e); // Debug: Print the error
                        alert('Invalid URL');
                        return false;
                    }

                    return true; // If everything is fine, allow the link
                };
            }
        });

        CKEDITOR.on('dialogDefinition', function(ev) {
            if (ev.data.name === 'image') {
                var infoTab = ev.data.definition.getContents('info');
                var urlField = infoTab.get('txtUrl');

                CKEDITOR.on('fileUploadResponse', function(evt) {
                    try {
                        var res = JSON.parse(evt.data.fileLoader.xhr.responseText);
                        if (res.uploaded && res.url) {
                            urlField.default = res.url;

                            var dialog = CKEDITOR.dialog.getCurrent();
                            if (dialog) {
                                dialog.setValueOf('info', 'txtUrl', res.url);
                            }
                        }
                    } catch (e) {}
                });
            }
        });

        window.addEventListener('load-editor', event => {
            if (window.Alpine && window.Alpine.store('editor')) {
                window.Alpine.store('editor').loadContent(event.detail);
            }
        });
    </script>

    <script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

    <script>
        function seoEditors() {
            return {
                editor: null,

                init() {
                    this.$nextTick(() => this.initEditor());
                },

                initEditor(content = null) {
                    if (CKEDITOR.instances['short_description']) {
                        CKEDITOR.instances['short_description'].destroy(true);
                    }

                    const csrfToken = document
                        .querySelector('meta[name="csrf-token"]')
                        .getAttribute('content');

                    this.editor = CKEDITOR.replace('short_description', {
                        extraPlugins: 'sourcearea,font,justify,colorbutton,panelbutton,floatpanel,uploadimage',
                        removePlugins: 'easyimage,cloudservices',

                        toolbar: [{
                                name: 'document',
                                items: ['Source', 'Preview', 'Print']
                            },
                            {
                                name: 'clipboard',
                                items: ['Cut', 'Copy', 'Paste', 'Undo', 'Redo']
                            },
                            {
                                name: 'basicstyles',
                                items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat']
                            },
                            {
                                name: 'paragraph',
                                items: ['NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight']
                            },
                            {
                                name: 'links',
                                items: ['Link', 'Unlink']
                            },
                            {
                                name: 'insert',
                                items: ['Image', 'Table', 'HorizontalRule']
                            },
                            {
                                name: 'styles',
                                items: ['Format', 'Font', 'FontSize']
                            },
                            {
                                name: 'colors',
                                items: ['TextColor', 'BGColor']
                            },
                            {
                                name: 'tools',
                                items: ['Maximize']
                            }
                        ],

                        filebrowserUploadUrl: '/admin/upload-short_description-image?_token=' + csrfToken,
                        filebrowserUploadMethod: 'form',
                        uploadUrl: '/admin/upload-short_description-image?_token=' + csrfToken,

                        fileTools_requestHeaders: {
                            'X-CSRF-TOKEN': csrfToken
                        },

                        height: 400,
                        allowedContent: true,
                        contentsCss: ['https://cdn.ckeditor.com/4.22.1/full/contents.css'],

                        // **Custom Link Validation:**
                        linkShowTargetTab: true, // Shows the "Target" tab on the link dialog
                        linkAllowedDomains: [], // This can be populated dynamically to allow certain domains
                    });

                    this.editor.on('instanceReady', () => {
                        let value = content ?? @this.get('short_description') ?? '';
                        this.editor.setData(value);
                    });

                    this.editor.on('change', () => {
                        @this.set('short_description', this.editor.getData());
                    });

                    this.editor.on('blur', () => {
                        @this.set('short_description', this.editor.getData());
                    });

                    // 🔹 CUSTOM UPLOAD REQUEST
                    this.editor.on('fileUploadRequest', function(evt) {
                        var fileLoader = evt.data.fileLoader;
                        var xhr = fileLoader.xhr;
                        var formData = new FormData();

                        xhr.open('POST', '/admin/upload-short_description-image', true);
                        formData.append('_token', csrfToken);
                        formData.append('upload', fileLoader.file, fileLoader.fileName);

                        xhr.send(formData);
                        evt.stop();
                    });

                    // 🔹 HANDLE UPLOAD RESPONSE
                    this.editor.on('fileUploadResponse', function(evt) {
                        evt.stop();

                        var xhr = evt.data.fileLoader.xhr;
                        var response = JSON.parse(xhr.responseText);

                        if (response.uploaded) {
                            evt.data.url = response.url;
                        } else {
                            evt.data.message = 'Upload failed';
                            evt.cancel();
                        }
                    });

                    if (this.$refs.editor) {
                        this.$refs.editor.loadContent = (data) => {
                            this.initEditor(data);
                        };
                    }
                },

                loadContent(data) {
                    if (this.editor) {
                        this.editor.setData(data || '');
                    } else {
                        this.initEditor(data);
                    }
                }
            };
        }

   

        CKEDITOR.on('dialogDefinition', function(ev) {
            if (ev.data.name === 'image') {
                var infoTab = ev.data.definition.getContents('info');
                var urlField = infoTab.get('txtUrl');

                CKEDITOR.on('fileUploadResponse', function(evt) {
                    try {
                        var res = JSON.parse(evt.data.fileLoader.xhr.responseText);
                        if (res.uploaded && res.url) {
                            urlField.default = res.url;

                            var dialog = CKEDITOR.dialog.getCurrent();
                            if (dialog) {
                                dialog.setValueOf('info', 'txtUrl', res.url);
                            }
                        }
                    } catch (e) {}
                });
            }
        });

        window.addEventListener('load-editor', event => {
            if (window.Alpine && window.Alpine.store('editor')) {
                window.Alpine.store('editor').loadContent(event.detail);
            }
        });
    </script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/froala-editor@4.1.4/js/froala_editor.pkgd.min.js"></script>
    <script>
        function seoEditor() {
            return {
                editor: null,
                init() {
                    let self = this;

                    this.editor = new FroalaEditor('#description', {
                        height: 300,

                        // Use CSS classes instead of inline styles
                        useClasses: true,

                        // Remove extra <style> tags in pasted content
                        htmlRemoveTags: ['style'],

                        paragraphFormat: {
                            N: 'Normal',
                            H1: 'Heading 1',
                            H2: 'Heading 2',
                            H3: 'Heading 3',
                            H4: 'Heading 4',
                            H5: 'Heading 5',
                            H6: 'Heading 6'
                        },

                        // Image upload settings
                        imageUploadURL: '/admin/upload-description-image',
                        imageUploadParam: 'file',
                        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'webp'],
                        imageMaxSize: 5 * 1024 * 1024, // 5 MB

                        // Pass CSRF Token for Laravel
                        requestHeaders: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },

                        // Remove Froala Help button (optional, prevents footer sometimes)
                        removeButtons: ['help'],

                        // Events

                        events: {
                            'contentChanged': function() {
                                @this.set('description', self.editor.html.get());
                            },
                            'initialized': function() {
                                let html = self.editor.html.get();
                                html = html.replace(/<p[^>]*>Powered by .*<\/p>/g, '');
                                self.editor.html.set(html);
                            },

                            // NEW: Image upload error handler
                            'image.error': function(img, response) {
                                // Parse JSON response from Laravel
                                let res = {};
                                try {
                                    res = JSON.parse(response);
                                } catch (e) {
                                    res = {
                                        error: 'Unknown upload error'
                                    };
                                }

                                if (res.error) {
                                    // Show error message to user
                                    alert(res.error); // Or display in a custom div in your UI
                                }
                            }
                        }
                    });

                    // Load existing content
                    window.addEventListener('load-editor', e => {
                        self.editor.html.set(e.detail);
                    });
                }
            }
        }
    </script>
    <script>
        function seoEditors() {
            return {
                editor: null,
                init() {
                    let self = this;

                    this.editor = new FroalaEditor('#short_description', {
                        height: 300,

                        // Use CSS classes instead of inline styles
                        useClasses: true,

                        // Remove extra <style> tags in pasted content
                        htmlRemoveTags: ['style'],

                        paragraphFormat: {
                            N: 'Normal',
                            H1: 'Heading 1',
                            H2: 'Heading 2',
                            H3: 'Heading 3',
                            H4: 'Heading 4',
                            H5: 'Heading 5',
                            H6: 'Heading 6'
                        },

                        // Image upload settings
                        imageUploadURL: '/admin/upload-description-image',
                        imageUploadParam: 'file',
                        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'webp'],
                        imageMaxSize: 5 * 1024 * 1024, // 5 MB

                        // Pass CSRF Token for Laravel
                        requestHeaders: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },

                        // Remove Froala Help button (optional, prevents footer sometimes)
                        removeButtons: ['help'],

                        // Events

                        events: {
                            'contentChanged': function() {
                                @this.set('short_description', self.editor.html.get());
                            },
                            'initialized': function() {
                                let html = self.editor.html.get();
                                html = html.replace(/<p[^>]*>Powered by .*<\/p>/g, '');
                                self.editor.html.set(html);
                            },

                            // NEW: Image upload error handler
                            'image.error': function(img, response) {
                                // Parse JSON response from Laravel
                                let res = {};
                                try {
                                    res = JSON.parse(response);
                                } catch (e) {
                                    res = {
                                        error: 'Unknown upload error'
                                    };
                                }

                                if (res.error) {
                                    // Show error message to user
                                    alert(res.error); // Or display in a custom div in your UI
                                }
                            }
                        }
                    });

                    // Load existing content
                    window.addEventListener('load-editor', e => {
                        self.editor.html.set(e.detail);
                    });
                }
            }
        }
    </script> -->

    @endpush