@extends('layouts.admin')

@section('page-title', isset($page) ? 'Edit: ' . $page->title : 'Tambah Halaman Baru')

@section('header-actions')
    <a href="{{ route('admin.pages.index', ['brand_id' => $brandId ?? optional($page)->brand_id]) }}" class="btn-admin-ghost">← Kembali</a>
@endsection

@section('content')
<div class="admin-form-wrap">
    <form method="POST"
          action="{{ isset($page) ? route('admin.pages.update', $page) : route('admin.pages.store') }}"
          enctype="multipart/form-data">
        @csrf
        @if (isset($page)) @method('PUT') @endif

        <div class="form-grid">

            {{-- Left: Main Content --}}
            <div class="form-col">

                <div class="form-card">
                    <h3 class="form-card-title">Konten Halaman</h3>

                    <div class="form-group">
                        <label class="form-label">Brand <span class="required">*</span></label>
                        <select name="brand_id" class="form-select" required
                                onchange="loadBrandPages(this.value)">
                            <option value="">-- Pilih Brand --</option>
                            @foreach ($brands as $brand)
                                <option value="{{ $brand->id }}"
                                    {{ old('brand_id', isset($page) ? $page->brand_id : $brandId) == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Judul Halaman <span class="required">*</span></label>
                        <input type="text" name="title" class="form-input"
                               value="{{ old('title', $page->title ?? '') }}" required
                               oninput="generateSlug(this.value)">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Slug</label>
                        <div class="input-prefix">
                            <span class="prefix">/brand/</span>
                            <input type="text" name="slug" id="slug" class="form-input"
                                   value="{{ old('slug', $page->slug ?? '') }}"
                                   placeholder="otomatis dari judul">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Ringkasan (Excerpt)</label>
                        <textarea name="excerpt" class="form-textarea" rows="3"
                                  placeholder="Deskripsi singkat halaman ini...">{{ old('excerpt', $page->excerpt ?? '') }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Konten (HTML / Rich Text)</label>
                        <textarea name="content" id="content" class="form-textarea" rows="10"
                                  placeholder="Konten utama halaman...">{{ old('content', $page->content ?? '') }}</textarea>
                        <p class="form-hint">Mendukung HTML. Untuk halaman dinamis, gunakan field Sections JSON di bawah.</p>
                    </div>
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">Sections JSON
                        <span style="font-weight:400; color:var(--muted); font-size:12px;">(untuk template dinamis)</span>
                    </h3>
                    <div class="form-group">
                        <textarea name="sections" id="sections-json" class="form-textarea"
                                  rows="16" style="font-family:monospace; font-size:12px;"
                                  placeholder='{ "hero": { "headline": "...", "subheadline": "..." } }'>{{ old('sections', isset($page) && $page->sections ? json_encode($page->sections, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : '') }}</textarea>
                        <p class="form-hint">Format JSON. Digunakan oleh template <code>home</code>, <code>compro</code>, dll.</p>
                    </div>
                    <button type="button" onclick="formatJson()" class="btn-sm btn-ghost" style="margin-top:4px;">
                        Format JSON
                    </button>
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">SEO</h3>
                    <div class="form-group">
                        <label class="form-label">Meta Title</label>
                        <input type="text" name="meta_title" class="form-input" maxlength="160"
                               value="{{ old('meta_title', $page->meta_title ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Meta Description</label>
                        <textarea name="meta_description" class="form-textarea" rows="2" maxlength="320">{{ old('meta_description', $page->meta_description ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Right: Settings --}}
            <div class="form-col form-col--side">

                <div class="form-card">
                    <h3 class="form-card-title">Pengaturan</h3>

                    <div class="form-group">
                        <label class="form-label">Template <span class="required">*</span></label>
                        <select name="template" class="form-select" required>
                            @foreach ($templates as $val => $label)
                                <option value="{{ $val }}"
                                    {{ old('template', $page->template ?? 'default') === $val ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        <p class="form-hint">Menentukan tampilan blade yang digunakan.</p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Status <span class="required">*</span></label>
                        <select name="status" class="form-select" required>
                            <option value="draft"     {{ old('status', $page->status ?? 'draft') === 'draft'     ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status', $page->status ?? '') === 'published' ? 'selected' : '' }}>Publish</option>
                        </select>
                    </div>

                    @if (isset($page) && $page->published_at)
                        <p class="form-hint">Dipublish: {{ $page->published_at->format('d M Y, H:i') }}</p>
                    @endif
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">Featured Image</h3>

                    {{-- Preview --}}
                    <img id="mp-preview-featured_image"
                         src="{{ isset($page) && $page->featured_image_url ? $page->featured_image_url : '' }}"
                         style="width:100%; height:140px; object-fit:cover; border-radius:8px; border:1px solid var(--border); margin-bottom:10px; {{ isset($page) && $page->featured_image_url ? '' : 'display:none;' }}"
                         alt="Featured image">

                    {{-- Hidden input stores URL / path --}}
                    <input type="hidden" name="featured_image_url" id="mp-input-featured_image"
                           value="{{ old('featured_image_url', isset($page) ? $page->featured_image : '') }}">

                    <div class="form-group">
                        <button type="button" onclick="openMediaPicker('featured_image')"
                                class="btn-admin-ghost" style="width:100%; justify-content:center; display:flex;">
                            🖼 Pilih dari Media Library
                        </button>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Atau Upload Langsung</label>
                        <input type="file" name="featured_image" class="form-file" accept="image/*"
                               onchange="previewFile(this, 'mp-preview-featured_image')">
                        <p class="form-hint">JPG, PNG, WebP. Maks 5MB.</p>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-admin-primary btn-full">
                        {{ isset($page) ? 'Simpan Perubahan' : 'Buat Halaman' }}
                    </button>
                    @if (isset($page) && $page->is_published)
                        <a href="{{ route('subweb.page', [optional($page->brand)->slug, $page->slug]) }}"
                           target="_blank" class="btn-admin-ghost" style="text-align:center;">
                            Lihat Halaman ↗
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </form>
</div>
@include('partials._media-picker')

@endsection

@push('scripts')
<script>
function generateSlug(title) {
    const slug = title.toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim();
    const el = document.getElementById('slug');
    if (!el.dataset.manual) el.value = slug;
}
document.getElementById('slug')?.addEventListener('input', function () {
    this.dataset.manual = '1';
});
function formatJson() {
    const el = document.getElementById('sections-json');
    try {
        const parsed = JSON.parse(el.value);
        el.value = JSON.stringify(parsed, null, 2);
    } catch (e) {
        alert('JSON tidak valid: ' + e.message);
    }
}
function previewFile(input, previewId) {
    if (!input.files || !input.files[0]) return;
    const reader = new FileReader();
    reader.onload = (e) => {
        const img = document.getElementById(previewId);
        if (img) { img.src = e.target.result; img.style.display = 'block'; }
    };
    reader.readAsDataURL(input.files[0]);
}
</script>
@endpush