@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="Founders"
                                        class="text-decoration-none">Founders</a></li>
                                <li class="breadcrumb-item active">{{ $updateMode ? 'Edit' : 'Create' }}</li>
                                @else
                                <li class="breadcrumb-item active">Founders</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">Founders Details</h4>

                    {{-- Add More button (only if form is hidden) --}}
                    @if(($role_id == 1) || in_array(72, $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' }}">
                        <div class="row gy-4">
                            <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>Founder Name</label>
                                <input type="text" class="form-control @error('founder_name') is-invalid @enderror"
                                    wire:model.defer="founder_name" @if($viewMode) readonly @endif>
                                @error('founder_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <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>Instagram</label>
                                <input type="text" class="form-control @error('instagram_url') is-invalid @enderror"
                                    wire:model.defer="instagram_url" @if($viewMode) readonly @endif>
                                @error('instagram_url') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

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

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

                            <div class="col-md-6">
                                <label>Twitter</label>
                                <input type="text" class="form-control @error('twitter_url') is-invalid @enderror"
                                    wire:model.defer="twitter_url" @if($viewMode) readonly @endif>
                                @error('twitter_url') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Designation</label>
                                <input type="text" class="form-control @error('designation') is-invalid @enderror"
                                    wire:model.defer="designation" @if($viewMode) readonly @endif>
                                @error('designation') <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 class="col-md-12">
                                    <label>Description</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror"
                                        wire:model.defer="description" @if($viewMode) readonly @endif></textarea>
                                    @error('description') <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 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 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>
                        <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>
                        @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">Image:</label>
                            <p>{{ $image ?? '-' }}</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>{{ $founder_name ?? '-' }}</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>Founder Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($founders as $founder)
                            <tr>
                                <td>
                                    @if($founder->image)
                                    <img src="{{ url($founder->image) }}" alt="{{ $founder->name }}" width="50"
                                        height="50">
                                    @else
                                    <span class="text-muted">No Image</span>
                                    @endif
                                </td>
                                <td>{{ $founder->founder_name }}</td>
                                <td>
                                    @if(($role_id == 1) || in_array(53, $permissions))
                                    <button class="btn btn-success" wire:click="view({{ $founder->id }})"><i
                                            class="fa-solid fa-eye"></i></button>
                                    @endif

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

                                    @if(($role_id == 1) || in_array(55, $permissions))
                                    <button class="btn btn-danger" wire:click="delete({{ $founder->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>
                    {{ $founders->links() }}
                </div>
            </div>

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

@push('scripts')
<!-- Froala JS -->
<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>
@endpush