@extends('layouts.admin')

@section('title', 'Edit Page')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Edit Page: {{ $page->title }}</h1>
    <a href="{{ route('admin.pages.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to Pages
    </a>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-file-text me-2"></i>Page Information
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.pages.update', $page) }}">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        @if($domains->count() > 0)
                            <div class="col-md-6 mb-3">
                                <label for="domain_id" class="form-label">Domain <span class="text-danger">*</span></label>
                                <select class="form-select @error('domain_id') is-invalid @enderror" id="domain_id" name="domain_id" required>
                                    <option value="">Select Domain</option>
                                    @foreach($domains as $domain)
                                        <option value="{{ $domain->id }}" {{ old('domain_id', $page->domain_id) == $domain->id ? 'selected' : '' }}>
                                            {{ $domain->full_domain }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('domain_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                    <option value="draft" {{ old('status', $page->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published" {{ old('status', $page->status) == 'published' ? 'selected' : '' }}>Published</option>
                                    <option value="archived" {{ old('status', $page->status) == 'archived' ? 'selected' : '' }}>Archived</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        @else
                            <!-- Hidden domain field for regular admins -->
                            <input type="hidden" name="domain_id" value="{{ $page->domain_id }}">

                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                    <option value="draft" {{ old('status', $page->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published" {{ old('status', $page->status) == 'published' ? 'selected' : '' }}>Published</option>
                                    <option value="archived" {{ old('status', $page->status) == 'archived' ? 'selected' : '' }}>Archived</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="type" class="form-label">Page Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                    <option value="standard" {{ old('type', $page->type) == 'standard' ? 'selected' : '' }}>Standard Page</option>
                                    <option value="homepage" {{ old('type', $page->type) == 'homepage' ? 'selected' : '' }}>Homepage</option>
                                </select>
                                <small class="form-text text-muted">Homepage type uses the homepage sections management</small>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                    </div>

                    @if($domains->count() > 0)
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="type" class="form-label">Page Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                    <option value="standard" {{ old('type', $page->type) == 'standard' ? 'selected' : '' }}>Standard Page</option>
                                    <option value="homepage" {{ old('type', $page->type) == 'homepage' ? 'selected' : '' }}>Homepage</option>
                                </select>
                                <small class="form-text text-muted">Homepage type uses the homepage sections management</small>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label for="title" class="form-label">Page Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" 
                               id="title" name="title" value="{{ old('title', $page->title) }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="slug" class="form-label">Slug</label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                               id="slug" name="slug" value="{{ old('slug', $page->slug) }}">
                        <small class="form-text text-muted">Leave blank to auto-generate from title</small>
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="excerpt" class="form-label">Excerpt</label>
                        <textarea class="form-control @error('excerpt') is-invalid @enderror" 
                                  id="excerpt" name="excerpt" rows="3">{{ old('excerpt', $page->excerpt) }}</textarea>
                        <small class="form-text text-muted">Short description of the page</small>
                        @error('excerpt')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Content</label>
                        <div id="content-editor" class="@error('content') is-invalid @enderror"></div>
                        <textarea class="d-none" id="content" name="content">{{ old('content', $page->content) }}</textarea>
                        <small class="form-text text-muted">Main content of the page</small>
                        @error('content')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="template" class="form-label">Template</label>
                        <input type="text" class="form-control @error('template') is-invalid @enderror" 
                               id="template" name="template" value="{{ old('template', $page->template) }}">
                        <small class="form-text text-muted">Optional template name</small>
                        @error('template')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="featured_image" class="form-label">Featured Image</label>
                        <div class="input-group">
                            <input type="text" class="form-control @error('featured_image') is-invalid @enderror" 
                                   id="featured_image" name="featured_image" value="{{ old('featured_image', $page->featured_image) }}" 
                                   placeholder="Select an image" readonly>
                            <button class="btn btn-outline-secondary" type="button" id="lfm-featured-image" data-input="featured_image" data-preview="featured_image_preview">
                                <i class="bi bi-folder2-open"></i> Browse
                            </button>
                        </div>
                        <div id="featured_image_preview" class="mt-3">
                            @php
                                $imageUrl = old('featured_image', $page->featured_image);
                            @endphp
                            @if($imageUrl)
                                <img src="{{ $imageUrl }}" alt="Preview" class="img-thumbnail" style="max-height: 200px;">
                            @endif
                        </div>
                        <small class="form-text text-muted">Click browse to select an image from file manager</small>
                        @error('featured_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ route('admin.pages.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-modern-primary">
                            <i class="bi bi-check-circle me-2"></i>Update Page
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<!-- Quill.js CSS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
    .ql-toolbar {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: none;
        border-radius: 6px 6px 0 0;
    }
    .ql-container {
        border: 1px solid #ccc;
        border-radius: 0 0 6px 6px;
        min-height: 400px;
    }
    .ql-editor {
        font-size: 14px;
        line-height: 1.6;
    }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Quill.js
        const quill = new Quill('#content-editor', {
            theme: 'snow',
            placeholder: 'Start writing your content...',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'align': [] }],
                    ['link', 'image', 'video'],
                    ['blockquote', 'code-block'],
                    ['clean']
                ]
            }
        });

        // Custom image handler for Quill
        quill.getModule('toolbar').addHandler('image', function() {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.click();

            input.onchange = function() {
                const file = input.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const range = quill.getSelection();
                        const index = range ? range.index : quill.getLength();
                        quill.insertEmbed(index, 'image', e.target.result, 'user');
                    };
                    reader.readAsDataURL(file);
                }
            };
        });

        // Sync Quill content with hidden textarea
        const contentTextarea = document.getElementById('content');
        quill.on('text-change', function() {
            contentTextarea.value = quill.root.innerHTML;
        });

        // Set initial content if exists
        const initialContent = contentTextarea.value;
        if (initialContent) {
            quill.root.innerHTML = initialContent;
        }

        // Initialize file manager for featured image
        $('#lfm-featured-image').filemanager('image', {prefix: '/admin/filemanager'});
    });
</script>
@endpush
@endsection