@extends('layouts.admin')
@section('title', $page->exists ? 'Edit Page' : 'Add Page')

@section('content')
<h2 class="fw-semibold mb-4">{{ $page->exists ? 'Edit Page' : 'Add Page' }}</h2>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <form action="{{ $page->exists ? route('admin.pages.update', $page) : route('admin.pages.store') }}"
              method="POST" enctype="multipart/form-data">
            @csrf
            @if($page->exists) @method('PUT') @endif

            {{-- ===== TYPE SELECTOR ===== --}}
            <div class="mb-4">
                <label class="form-label fw-medium">Item Type</label>
                <select name="type" id="type" class="form-select">
                    <option value="page"  {{ old('type', $page->type ?? 'page') == 'page'  ? 'selected' : '' }}>Page (Title + Content)</option>
                    <option value="link"  {{ old('type', $page->type ?? '') == 'link'  ? 'selected' : '' }}>Link (External/Internal URL)</option>
                    <option value="pdf"   {{ old('type', $page->type ?? '') == 'pdf'   ? 'selected' : '' }}>PDF Upload</option>
                    <option value="photo" {{ old('type', $page->type ?? '') == 'photo' ? 'selected' : '' }}>Photo (Gallery)</option>
                    <option value="map"   {{ old('type', $page->type ?? '') == 'map'   ? 'selected' : '' }}>Map</option>
                </select>
                @error('type')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            {{-- ===================================================== --}}
            {{-- ===== COMMON FIELDS — HAMESHA DIKHENGE (kisi bhi type ke liye) ===== --}}
            {{-- ===================================================== --}}
            <div class="mb-3">
                <label class="form-label">Title <span class="text-danger">*</span></label>
                <input type="text" name="title" id="title" class="form-control"
                    value="{{ old('title', $page->title) }}" required>
                @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Menu / Submenu</label>
                <select name="menu_item_id" class="form-select">
                    <option value="">-- None (menu me mat dikhao) --</option>
                    @foreach($menus as $menu)
                        <option value="{{ $menu['id'] }}"
                            {{ old('menu_item_id', $page->menu_item_id) == $menu['id'] ? 'selected' : '' }}>
                            {{ $menu['title'] }}
                        </option>
                    @endforeach
                </select>
                @error('menu_item_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            {{-- Featured Image — photo type ke liye hide hoga --}}
            <div class="mb-3" id="featured-image-field">
                <label class="form-label">Featured Image (optional)</label>
                <input type="file" name="featured_image" class="form-control" accept="image/*">
                @if($page->featured_image)
                    <img src="{{ asset('storage/' . $page->featured_image) }}" class="mt-2 rounded" style="max-height:120px">
                @endif
                @error('featured_image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <hr class="mb-4">

            {{-- ===================================================== --}}
            {{-- ===== PAGE TYPE: sirf Content ===== --}}
            {{-- ===================================================== --}}
            <div class="type-section" data-type="page">
                <div class="mb-3">
                    <label class="form-label">Content</label>
                    <textarea name="content" id="editor" rows="12">{{ old('content', $page->content) }}</textarea>
                    @error('content')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- ===================================================== --}}
            {{-- ===== LINK FIELD ===== --}}
            {{-- ===================================================== --}}
            <div class="type-section" data-type="link">
                <div class="mb-3">
                    <label class="form-label">URL</label>
                    <input type="text" name="link_url" class="form-control"
                        value="{{ old('link_url', $page->link_url ?? '') }}"
                        placeholder="e.g. https://example.com or /internal-page">
                    @error('link_url')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- ===================================================== --}}
            {{-- ===== PDF FIELD ===== --}}
            {{-- ===================================================== --}}
            <div class="type-section" data-type="pdf">
                <div class="mb-3">
                    <label class="form-label">PDF File</label>
                    <input type="file" name="pdf_file" class="form-control" accept="application/pdf">
                    @if($page->pdf_file)
                        <div class="mt-2">
                            <a href="{{ asset('storage/' . $page->pdf_file) }}" target="_blank" class="small">
                                <i class="bi bi-file-earmark-pdf text-danger me-1"></i>
                                View current PDF
                            </a>
                        </div>
                    @endif
                    @error('pdf_file')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- ===================================================== --}}
            {{-- ===== PHOTO / GALLERY FIELD ===== --}}
            {{-- ===================================================== --}}
            <div class="type-section" data-type="photo">
                <div class="mb-3">
                    <label class="form-label">Gallery Images</label>
                    <input type="file" name="gallery_images[]" id="gallery_images" class="form-control"
                        accept="image/*" multiple>
                    <div class="form-text">Ek se zyada photos select kar sakte ho (Ctrl/Cmd dabakar select karo).</div>
                    @error('gallery_images')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    @error('gallery_images.*')<div class="text-danger small mt-1">{{ $message }}</div>@enderror

                    <div id="gallery-preview" class="d-flex flex-wrap gap-2 mt-2"></div>

                    @if($page->exists && $page->gallery && count($page->gallery))
                        <div class="mt-3">
                            <label class="form-label small text-muted">Current Gallery</label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($page->gallery as $image)
                                    <div class="position-relative">
                                        <img src="{{ asset('storage/' . $image) }}" class="rounded border"
                                            style="width:90px;height:90px;object-fit:cover">
                                        <div class="form-check position-absolute top-0 end-0 bg-white bg-opacity-75 rounded-circle m-1">
                                            <input class="form-check-input" type="checkbox"
                                                name="remove_gallery[]" value="{{ $image }}" title="Remove this image">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- ===================================================== --}}
            {{-- ===== MAP FIELD ===== --}}
            {{-- ===================================================== --}}
            <div class="type-section" data-type="map">
                <div class="mb-3">
                    <label class="form-label">Map Image</label>
                    <input type="file" name="map_image" class="form-control" accept="image/*">
                    @if($page->map_image)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $page->map_image) }}" class="rounded border" style="max-height:200px">
                        </div>
                    @endif
                    @error('map_image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- ===== COMMON: ACTIVE STATUS ===== --}}
            <div class="mb-3 form-check mt-4">
                <input type="checkbox" name="is_active" value="1" class="form-check-input" id="is_active"
                    {{ old('is_active', $page->is_active ?? true) ? 'checked' : '' }}>
                <label class="form-check-label" for="is_active">Active (publicly visible)</label>
            </div>

            <button class="btn btn-primary">{{ $page->exists ? 'Update' : 'Save' }}</button>
            <a href="{{ route('admin.pages.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </form>
    </div>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
<script>
    let editorInstance = null;

    function initEditor() {
        if (editorInstance) return;
        ClassicEditor.create(document.querySelector('#editor'))
            .then(editor => { editorInstance = editor; })
            .catch(error => console.error(error));
    }

    // ===== TYPE TOGGLE LOGIC =====
    const typeSelect = document.getElementById('type');
    const sections = document.querySelectorAll('.type-section');
    const featuredImageField = document.getElementById('featured-image-field');

    function toggleSections() {
        const selected = typeSelect.value;

        sections.forEach(section => {
            section.style.display = (section.dataset.type === selected) ? 'block' : 'none';
        });

        // Featured Image sirf "photo" type ke liye hide, baaki sabke liye visible
        featuredImageField.style.display = (selected === 'photo') ? 'none' : 'block';

        if (selected === 'page') initEditor();
    }

    typeSelect.addEventListener('change', toggleSections);
    toggleSections(); // run on page load (for edit mode)

    // ===== Gallery image preview =====
    document.getElementById('gallery_images').addEventListener('change', function (e) {
        const preview = document.getElementById('gallery-preview');
        preview.innerHTML = '';
        [...e.target.files].forEach(file => {
            const reader = new FileReader();
            reader.onload = ev => {
                const img = document.createElement('img');
                img.src = ev.target.result;
                img.className = 'rounded border';
                img.style = 'width:90px;height:90px;object-fit:cover';
                preview.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
    });
</script>
@endsection