@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css">
<!-- 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">

            {{-- Flash Messages --}}
            @if (session()->has('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif


            {{-- Add More Button --}}
            <div class="mb-3">
                @if(!$formMode && !$viewMode)
                <button wire:click="$set('formMode', true)" class="btn btn-primary">
                    <i class="fa-solid fa-plus"></i> Add More
                </button>
                @endif
            </div>

            {{-- Form Section (toggle with Add More) --}}
            @if($formMode)
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $updateMode ? 'Edit News' : 'Add News' }}</h5>
                    <button wire:click="resetFields" class="btn btn-sm btn-secondary">
                        <i class="fa-solid fa-xmark"></i> Close
                    </button>
                </div>
                <div class="card-body">
                    <form wire:submit.prevent="{{ $updateMode ? 'update' : 'save' }}" enctype="multipart/form-data">
                        <div class="row gy-3">

                            <div class="row">
                                @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif

                                <!-- Title -->
                                <div class="col-xxl-3 col-md-6 my-2">
                                    <label class="form-label">Title *</label>
                                    <input type="text"
                                        class="form-control @error('title') is-invalid @enderror"
                                        wire:model.defer="title">
                                    @error('title')
                                    <span class="invalid-feedback mt-1">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Alias -->
                                <div class="col-xxl-3 col-md-6 my-2">
                                    <label class="form-label">Slug *</label>
                                    <input type="text" class="form-control @error('alias') is-invalid @enderror" wire:model.defer="alias">
                                    @error('alias') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>

                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label for="is_gabbar" class="field-required">
                                        News Type :*
                                    </label>

                                    <select id="is_gabbar" wire:model="is_gabbar" class="form-control @error('is_gabbar') is-invalid @enderror">
                                        <option value="">Select News Type</option>
                                        <option value="1">News</option>
                                        <option value="2">Press Release</option>
                                        <option value="3">Price Pridiction</option>
                                        <option value="4">Guest Post</option>
                                        <option value="5">Blog</option>
                                        <option value="6">Draft</option>
                                    </select>
                                    @error('is_gabbar')
                                    <span class="invalid-feedback mt-1">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Author ID -->
                                <div class="col-xxl-3 col-md-6 my-2">
                                    <label class="form-label">Author *</label>
                                    <select class="form-control @error('author_id') is-invalid @enderror" wire:model.defer="author_id">
                                        <option value="">-- Select Author --</option>
                                        @foreach($authors as $author)
                                        <option value="{{ $author->id }}">{{ $author->dispaly_name }}</option>
                                        @endforeach
                                    </select>

                                    @error('author_id')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Author -->
                                <div class="col-xxl-3 col-md-6 my-2">
                                    <label class="form-label">Author Name</label>
                                    <input type="text" class="form-control" wire:model.defer="author_name">
                                </div>


                                <!--  tag -->
                                <div class="col-xxl-6 col-md-6 my-2">
                                    <label class="form-label">Tags</label>
                                    <input type="text" class="form-control" wire:model.defer="tags">
                                </div>

                                <!-- H1 Title Field -->
                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label for="h1_title" class="field-required">H1 Title:</label>
                                    <input type="text" id="h1_title" wire:model.defer="h1_title"
                                        class="form-control @error('h1_title') is-invalid @enderror" placeholder="H1 Keywords">
                                    @error('h1_title') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- H2 Title Field -->
                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label for="h2_title" class="field-required">H2 Title:</label>
                                    <input type="text" id="h2_title" wire:model.defer="h2_title"
                                        class="form-control @error('h2_title') is-invalid @enderror" placeholder="H2 Keywords">
                                    @error('h2_title') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>
                                <div wite:ignore>
                                    <div x-data="select2Dropdown()" x-init="initSelect2()" wire:ignore class="col-md-6 mt-3">
                                        <label>Categories *</label>
                                        <select x-ref="select" wire:model.defer="categories"
                                            id="UserIdSelect"
                                            class="form-control"
                                            style="height: 130px;" multiple>
                                            @foreach($category as $cat)
                                            <option value="{{ $cat->id }}"
                                                @if(in_array($cat->id, (array) $categories)) selected @endif>
                                                {{ $cat->name }}
                                            </option>
                                            @endforeach


                                        </select>
                                        @error('categories')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>


                                </div>

                                <!-- Status Field -->
                                <div class="form-group col-sm-12 col-lg-3 my-2">
                                    <label class="form-label">
                                        Status
                                    </label>
                                    <select wire:model.defer="status" class="form-control @error('status') is-invalid @enderror">
                                        <option value="0">Inactive</option>
                                        <option value="1">Active</option>
                                    </select>
                                    @error('status')
                                    <span class="invalid-feedback mt-1">{{ $message }}</span>
                                    @enderror
                                </div>


                                <div class="col-xxl-3 col-md-6 my-2">
                                    <label class="form-label">Is Home</label>
                                    <select class="form-control" wire:model.defer="is_home">
                                        <option value="">-- Select Show Home News--</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>


                                </div>
                                <!-- Is SEO Check Field -->
                                <div class="col-xxl-6 col-md-6 my-2">
                                    <label class="custom-switch-label">Is SEO:</label>
                                    <select class="form-control @error('is_seo_check') is-invalid @enderror" wire:model.defer="is_seo_check">
                                        <option value="">Select Is Seo</option>
                                        <option value="1"> Yes </option>
                                        <option value="0"> No </option>
                                    </select>
                                    @error('is_seo_check') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>


                                <!-- Publishedat Field -->
                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label class="form-label field-required">
                                        Publishedat :*
                                    </label>

                                    <input type="datetime-local" wire:model.defer="publishedAt"
                                        class="form-control @error('publishedAt') is-invalid @enderror">

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

                                <!-- Status Field (is_rss_feed) -->
                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label for="is_rss_feed" class="field-required"> Is_Rss_Feed :</label>
                                    <select id="is_rss_feed" wire:model="is_rss_feed"
                                        class="form-control @error('is_rss_feed') is-invalid @enderror">
                                        <option value="">-- Select --</option>
                                        <option value="1"> Yes </option>
                                        <option value="0"> No </option>
                                        <option value="2"> Review </option>
                                    </select>
                                    @error('is_rss_feed') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- Rss Field -->
                                <div class="form-group col-sm-6 my-2">
                                    <label class="form-label">Dynamic Rss feed :</label> <br>

                                    <label class="me-3">
                                        <input type="radio" wire:model.defer="dynamic_rss_feed" value="1"> <b>Daily Hunt</b>
                                    </label>
                                    <label class="me-3">
                                        <input type="radio" wire:model.defer="dynamic_rss_feed" value="2"> <b>CMC</b>
                                    </label>
                                    <label class="me-3">
                                        <input type="radio" wire:model.defer="dynamic_rss_feed" value="3"> <b>Suncrypto</b>
                                    </label>
                                    <label class="me-3">
                                        <input type="radio" wire:model.defer="dynamic_rss_feed" value="4"> <b>Binance</b>
                                    </label>

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


                                <div class="col-md-6">
                                    <label class="form-label">Image *</label>
                                    <input type="file" wire:model="image" accept=".webp, .png, .jpg, .jpeg" class="form-control @error('image') is-invalid @enderror">

                                    @error('image')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror


                                    {{-- Otherwise show old image when editing --}}
                                    @if($oldImage)
                                    <div class="mt-2">
                                        <img src="{{ Storage::disk('s3')->url($oldImage) }}" alt="Old Image" class="img-thumbnail" width="120" height="120">
                                    </div>
                                    @endif
                                </div>


                                <!-- Image Alt Title -->
                                <div class="form-group col-sm-12 col-lg-6 my-2">
                                    <label class="form-label field-required">
                                        Img_Alt_Title :
                                    </label>
                                    <input type="text" wire:model.defer="img_alt_title" placeholder="Image Alt Title"
                                        class="form-control @error('img_alt_title') is-invalid @enderror">

                                    @error('img_alt_title')
                                    <span class="invalid-feedback mt-1">{{ $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>


                                <!-- Focus Keyword Field -->
                                <div class="form-group col-sm-6">
                                    <label class="form-label field-required">
                                        Focus_Keyword :
                                    </label>
                                    <input type="text" wire:model.defer="focus_keyword"
                                        class="form-control @error('focus_keyword') is-invalid @enderror">
                                    @error('focus_keyword')
                                    <span class="invalid-feedback mt-1">{{ $message }}</span>
                                    @enderror
                                </div>



                                <!-- profile Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label>Profile:</label>
                                    <input type="text" class="form-control @error('profile') is-invalid @enderror" wire:model.defer="profile"
                                        placeholder="Enter profile">
                                    @error('profile') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>
                                <!-- breadcrumbs Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Breadcrumbs:</label>
                                    <input type="text" class="form-control @error('breadcrumbs') is-invalid @enderror"
                                        wire:model.defer="breadcrumbs" placeholder="Enter breadcrumbs">
                                    @error('breadcrumbs') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- organization Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label>Organization:</label>
                                    <input type="text" class="form-control @error('organization') is-invalid @enderror"
                                        wire:model.defer="organization" placeholder="Enter organization">
                                    @error('organization') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- article Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Article:</label>
                                    <textarea class="form-control @error('article') is-invalid @enderror" wire:model.defer="article" rows="4"
                                        placeholder="Write article content..."></textarea>
                                    @error('article') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- discussion forum Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Discussion Forum:</label>
                                    <textarea class="form-control @error('discussion_forum') is-invalid @enderror"
                                        wire:model.defer="discussion_forum" rows="3" placeholder="Discussion forum content..."></textarea>
                                    @error('discussion_forum') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>


                                <!-- faq Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">FAQ:</label>
                                    <textarea class="form-control @error('faq') is-invalid @enderror" wire:model.defer="faq" rows="3"
                                        placeholder="FAQ content..."></textarea>
                                    @error('faq') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- image metadata Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Image Metadata:</label>
                                    <textarea class="form-control @error('image_metadata') is-invalid @enderror" wire:model.defer="image_metadata"
                                        rows="2" placeholder="Enter image metadata..."></textarea>
                                    @error('image_metadata') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- new article Field (hidden) -->
                                <input type="hidden" wire:model.defer="new_article">

                                <!-- paywalled content Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Paywalled Content:</label>
                                    <textarea class="form-control @error('paywalled_content') is-invalid @enderror"
                                        wire:model.defer="paywalled_content" rows="3" placeholder="Enter paywalled content..."></textarea>
                                    @error('paywalled_content') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- product Field (hidden) -->
                                <input type="hidden" wire:model.defer="product">




                                <!-- review snippets Field -->
                                <div class="form-group col-sm-6 col-lg-6">
                                    <label class="field-required">Review Snippets:</label>
                                    <textarea class="form-control @error('review_snippets') is-invalid @enderror" wire:model.defer="review_snippets"
                                        rows="3" placeholder="Enter review snippets..."></textarea>
                                    @error('review_snippets') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- sitelinks Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label class="field-required">Sitelinks:</label>
                                    <input type="text" class="form-control @error('sitelinks') is-invalid @enderror" wire:model.defer="sitelinks"
                                        placeholder="Enter sitelinks">
                                    @error('sitelinks') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- video Field -->
                                <div class="form-group col-sm-12 col-lg-6">
                                    <label>Video:</label>
                                    <input type="text" class="form-control @error('video') is-invalid @enderror" wire:model.defer="video"
                                        placeholder="Enter video link">
                                    @error('video') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- Seo Title Field -->
                                <div class="form-group col-sm-12">
                                    <label class="field-required">SEO Title:*</label>
                                    <input type="text" class="form-control @error('seo_title') is-invalid @enderror"
                                        wire:model.defer="seo_title">
                                    @error('seo_title') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- Meta Keywords Field -->
                                <div class="form-group col-sm-12">
                                    <label class="field-required">Meta Keywords:*</label>
                                    <input type="text"
                                        class="form-control @error('meta_keywords') is-invalid @enderror" wire:model.defer="meta_keywords">
                                    @error('meta_keywords') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>

                                <!-- Meta Description Field -->
                                <div class="form-group col-sm-12">
                                    <label class="field-required">Meta Description:*</label>
                                    <textarea class="form-control @error('meta_description') is-invalid @enderror"
                                        wire:model.defer="meta_description" rows="3"></textarea>
                                    @error('meta_description') <span class="invalid-feedback mt-1">{{ $message }}</span> @enderror
                                </div>


                                <!-- Submit Buttons -->
                                <div class="col-xxl-12 mt-4">
                                    <button type="submit" class="btn btn-primary me-2">{{ $updateMode ? 'Update' : 'Save' }}</button>
                                    <button type="button" class="btn btn-secondary" wire:click="resetFields">Cancel</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            @endif

            {{-- View Section --}}
            @if($viewMode && $cryptoToView)
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Crypto News Details</h5>
                    <button wire:click="$set('viewMode', false)" class="btn btn-sm btn-secondary">
                        <i class="fa-solid fa-xmark"></i> Close
                    </button>
                </div>
                <div class="card-body">
                    @include('livewire.admin.partials.crypto-news-view')
                </div>
            </div>
            @endif

            {{-- Table Section --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">All News</h5>
                </div>
                {{-- Filters --}}
                <div class="row mb-3 g-2">
                    <!-- Search -->
                    <div class="col-md-3">
                        <input type="text" wire:model.debounce.500ms="search" class="form-control" placeholder="Search by title...">
                    </div>

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

                    <!-- Created By -->
                    <div class="col-md-2">
                        <select class="form-control" wire:model="created_by">
                            <option value="">All Authors</option>
                            @foreach($authors as $author)
                            <option value="{{ $author->id }}">{{ $author->dispaly_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Is SEO Check -->
                    <div class="col-md-2">
                        <select wire:model="is_seo_check" class="form-control">
                            <option value="">All SEO Check Status</option>
                            <option value="1">Checked</option>
                            <option value="0">Not Checked</option>
                        </select>
                    </div>

                    <!-- News Type -->
                    <div class="col-md-2">
                        <select wire:model="is_gabbar" class="form-control">
                            <option value="">All News Types</option>
                            <option value="1">News</option>
                            <option value="2">Press Release</option>
                            <option value="3">Price Pridiction</option>
                            <option value="4">Guest Post</option>
                            <option value="5">Blog</option>
                            <option value="6">Draft</option>
                        </select>
                    </div>

                    <!-- Action Buttons -->
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary me-1" wire:click="applySearch" title="Apply Filters">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>

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

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px;">SR No.</th>
                                <th style="width: 80px;">Image</th>
                                <th>Title</th>
                                <th style="width: 120px;">Author</th>
                                <th style="width: 150px;">Uploaded At</th>
                                <th style="width: 150px;">Published At</th>
                                <th style="width: 120px;">News Type</th>
                                <th style="width: 80px;">SEO Check</th>
                                <th style="width: 150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($cryptos as $index => $crypto)

                            <tr>
                                <td>{{ $cryptos->firstItem() + $index }}</td>
                                <td>
                                    @if($crypto->image)
                                    <img src="{{ $crypto->image }}" alt="{{ $crypto->img_alt_title }}" class="img-thumbnail" width="50" height="50" style="width: 50px; height: 50px; object-fit: cover;">
                                    @else
                                    <span class="text-muted">No Image</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="text-truncate" style="max-width: 300px;" title="{{ $crypto->title }}">
                                        {{ $crypto->title }}
                                    </div>
                                </td>

                                <td>{{ $crypto->postAuthor->dispaly_name ?? 'N/A' }}</td>
                                <td>{{ $crypto->created_at ? $crypto->created_at->format('d M Y h:i A') : 'N/A' }}</td>
                                <td>{{ $crypto->publishedAt ? date('d M Y h:i A', $crypto->publishedAt) : 'N/A' }}</td>
                                <td>
                                    @switch($crypto->is_gabbar)
                                    @case(1)
                                    <span class="badge bg-success">News</span>
                                    @break
                                    @case(2)
                                    <span class="badge bg-info">Press Release</span>
                                    @break
                                    @case(3)
                                    <span class="badge bg-warning">Sponsored</span>
                                    @break
                                    @case(4)
                                    <span class="badge bg-primary">Guest News</span>
                                    @break
                                    @case(5)
                                    <span class="badge bg-secondary">Blog</span>
                                    @break
                                    @case(6)
                                    <span class="badge bg-success">Crypto News</span>
                                    @break
                                    @default
                                    <span class="badge bg-dark">Draft</span>
                                    @endswitch
                                </td>
                                <td class="text-center">
                                    @if($crypto->is_seo_check)
                                    <span class="badge bg-success">Yes</span>
                                    @else
                                    <span class="badge bg-danger">No</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button wire:click="view({{ $crypto->id }})" class="btn btn-sm btn-info" title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                        <button wire:click="edit({{ $crypto->id }})" class="btn btn-sm btn-warning" title="Edit" onclick="initSelect2()">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </button>
                                        <!-- <button class="btn btn-sm btn-danger"
                                                onclick="if(confirm('Are you sure you want to delete this?')) { @this.call('delete', {{ $crypto->id }}) }"
                                                title="Delete">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button> -->
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fa-solid fa-inbox fa-3x mb-3"></i>
                                        <p>No records found</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="mt-3">
                    {{ $cryptos->links() }}
                </div>
            </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 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>

<!-- Optional CSS to fix spacing -->
<style>
    .fr-view p {
        margin: 0;
        /* Remove extra top/bottom margin */
        line-height: 1.5;
        /* Adjust line height if needed */
    }

    .fr-view img {
        max-width: 100%;
        height: auto;
    }
</style>


<script>
    function select2Dropdown() {
        return {
            initialized: false,
            initSelect2() {
                if (!this.initialized) {
                    this.initialized = true;

                    // Initialize Select2
                    $(this.$refs.select).select2({
                        placeholder: "Select categories",
                        width: '100%'
                    });

                    // Sync with Livewire model
                    $(this.$refs.select).on('change', (e) => {
                        @this.set('categories', $(e.target).val());
                    });
                }
            }
        }
    }
</script>



@endpush