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

                    {{-- Add More button (only if form is hidden) --}}
                    @if(($role_id == 1) || in_array(66, $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>Review Count</label>
                                    <input type="number" class="form-control @error('review_count') is-invalid @enderror"
                                        wire:model.defer="review_count" @if($viewMode) readonly @endif>
                                    @error('review_count') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label>Title</label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror"
                                        wire:model.defer="title" @if($viewMode) readonly @endif>
                                    @error('title') <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>
                                    <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 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">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>{{ $infulencer_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>Title</th>
                                    <th>Total Review</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($review_projects as $review)
                                    <tr>
                                        <td>
                                           {{  $review->title }}
                                        </td>
                                        <td>{{ $review->review_count }}</td>
                                        <td>
                                            @if(($role_id == 1) || in_array(53, $permissions))
                                                <button class="btn btn-success" wire:click="view({{ $review->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({{ $review->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({{ $review->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>
                        {{ $review_projects->links() }}
                    </div>
                </div>

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

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