@extends('layouts.admin')
@section('title', $page->exists ? 'পেজ এডিট' : 'নতুন পেজ')

@push('styles')
<style>
.slug-preview { font-family: monospace; font-size: .78rem; color: #6b7280; margin-top: 4px; }
#contentArea {
    width: 100%; min-height: 420px; resize: vertical;
    border: 1px solid #d1d5db; border-radius: 0 0 6px 6px;
    padding: 14px 16px; font-size: .9rem; line-height: 1.8;
    font-family: 'Inter', sans-serif; outline: none;
    border-top: none;
}
#contentArea:focus { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,.12); }
.editor-toolbar {
    border: 1px solid #d1d5db; border-radius: 6px 6px 0 0;
    padding: 6px 10px; background: #f9fafb;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.editor-toolbar button {
    type: button;
    border: 1px solid #e5e7eb; background: #fff; border-radius: 4px;
    padding: 3px 8px; font-size: .78rem; cursor: pointer;
    color: #374151; transition: background .1s;
}
.editor-toolbar button:hover { background: #f3f4f6; }
.editor-toolbar .sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 2px; }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0">
        <i class="bi bi-file-earmark-text me-2"></i>
        {{ $page->exists ? 'পেজ এডিট: ' . $page->title : 'নতুন পেজ তৈরি' }}
    </h5>
    <a href="{{ route('admin.static-pages.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>ফিরে যান
    </a>
</div>

<form method="POST"
      action="{{ $page->exists ? route('admin.static-pages.update', $page) : route('admin.static-pages.store') }}">
    @csrf
    @if($page->exists) @method('PUT') @endif

    <div class="row g-3">
        <div class="col-lg-8">

            {{-- Title + Slug --}}
            <div class="card mb-3">
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">পেজের শিরোনাম <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="titleInput" class="form-control"
                               value="{{ old('title', $page->title) }}"
                               placeholder="যেমন: যোগাযোগ, বিজ্ঞাপন মূল্য" required autofocus>
                    </div>
                    <div>
                        <label class="form-label fw-semibold">Slug (URL)</label>
                        <input type="text" name="slug" id="slugInput" class="form-control"
                               value="{{ old('slug', $page->slug) }}"
                               placeholder="auto-generated from title">
                        <div class="slug-preview">
                            URL: {{ url('/page/') }}/<span id="slugDisplay">{{ $page->slug ?: '...' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Content --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4">
                    <i class="bi bi-body-text me-2"></i>কন্টেন্ট
                    <small class="text-muted ms-2" style="font-size:.72rem">HTML সাপোর্ট করে</small>
                </div>
                <div class="card-body p-0">
                    <div class="editor-toolbar">
                        <button type="button" onclick="fmt('bold')"><b>B</b></button>
                        <button type="button" onclick="fmt('italic')"><i>I</i></button>
                        <button type="button" onclick="fmt('underline')"><u>U</u></button>
                        <div class="sep"></div>
                        <button type="button" onclick="wrapTag('h2')">H2</button>
                        <button type="button" onclick="wrapTag('h3')">H3</button>
                        <button type="button" onclick="wrapTag('p')">¶</button>
                        <div class="sep"></div>
                        <button type="button" onclick="insertLink()"><i class="bi bi-link-45deg"></i> Link</button>
                        <div class="sep"></div>
                        <button type="button" onclick="togglePreview()" id="previewBtn">
                            <i class="bi bi-eye"></i> Preview
                        </button>
                    </div>
                    <textarea name="content" id="contentArea"
                              placeholder="এখানে কন্টেন্ট লিখুন... (HTML ব্যবহার করা যাবে)">{{ old('content', $page->content) }}</textarea>
                    <div id="previewArea"
                         style="display:none;padding:16px 20px;min-height:200px;
                                border:1px solid #d1d5db;border-top:none;
                                border-radius:0 0 6px 6px;font-size:.9rem;line-height:1.8"></div>
                </div>
            </div>

        </div>

        <div class="col-lg-4">

            {{-- Publish --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-gear me-2"></i>প্রকাশনা</div>
                <div class="card-body p-4">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_active"
                               value="1" id="isActive"
                               {{ old('is_active', $page->is_active ?? true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="isActive">সক্রিয় (প্রকাশিত)</label>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check2 me-1"></i>
                            {{ $page->exists ? 'আপডেট করুন' : 'পেজ তৈরি করুন' }}
                        </button>
                        @if($page->exists)
                        <a href="{{ $page->url }}" target="_blank" class="btn btn-outline-secondary">
                            <i class="bi bi-box-arrow-up-right me-1"></i>পেজ দেখুন
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            {{-- URL --}}
            <div class="card">
                <div class="card-body p-4">
                    <p class="mb-1 fw-semibold" style="font-size:.85rem">পেজ URL:</p>
                    <code style="font-size:.75rem;word-break:break-all">
                        {{ url('/page/') }}/<span id="sideSlug">{{ $page->slug ?: '...' }}</span>
                    </code>
                    <hr class="my-3">
                    <p class="mb-0 text-muted" style="font-size:.78rem">
                        <i class="bi bi-info-circle me-1"></i>
                        Menu Management-এ এই URL যোগ করলে নেভবারে দেখাবে।
                    </p>
                </div>
            </div>

        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
/* ── Slug auto-generate ─────────────────────────── */
var titleInput = document.getElementById('titleInput');
var slugInput  = document.getElementById('slugInput');
var slugDisp   = document.getElementById('slugDisplay');
var sideSlug   = document.getElementById('sideSlug');

function toSlug(str) {
    return str.toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/--+/g, '-')
        .replace(/^-+|-+$/g, '');
}

titleInput.addEventListener('input', function () {
    if (!slugInput.dataset.manual) {
        var s = toSlug(this.value);
        slugInput.value = s;
        slugDisp.textContent = s || '...';
        if (sideSlug) sideSlug.textContent = s || '...';
    }
});

slugInput.addEventListener('input', function () {
    this.dataset.manual = '1';
    slugDisp.textContent = this.value || '...';
    if (sideSlug) sideSlug.textContent = this.value || '...';
});

/* ── Simple toolbar helpers ─────────────────────── */
function fmt(cmd) {
    document.getElementById('contentArea').focus();
    document.execCommand(cmd, false, null);
}

function wrapTag(tag) {
    var ta = document.getElementById('contentArea');
    var start = ta.selectionStart, end = ta.selectionEnd;
    var sel = ta.value.substring(start, end) || 'কন্টেন্ট এখানে';
    var replacement = '<' + tag + '>' + sel + '</' + tag + '>';
    ta.value = ta.value.substring(0, start) + replacement + ta.value.substring(end);
    ta.focus();
}

function insertLink() {
    var url = prompt('লিংক দিন:', 'https://');
    if (!url) return;
    var ta = document.getElementById('contentArea');
    var start = ta.selectionStart, end = ta.selectionEnd;
    var sel = ta.value.substring(start, end) || 'লিংক টেক্সট';
    var html = '<a href="' + url + '">' + sel + '</a>';
    ta.value = ta.value.substring(0, start) + html + ta.value.substring(end);
    ta.focus();
}

/* ── Preview toggle ─────────────────────────────── */
var previewing = false;
function togglePreview() {
    var ta   = document.getElementById('contentArea');
    var prev = document.getElementById('previewArea');
    var btn  = document.getElementById('previewBtn');
    previewing = !previewing;
    if (previewing) {
        prev.innerHTML = ta.value;
        ta.style.display   = 'none';
        prev.style.display = 'block';
        btn.innerHTML = '<i class="bi bi-pencil"></i> Edit';
    } else {
        ta.style.display   = 'block';
        prev.style.display = 'none';
        btn.innerHTML = '<i class="bi bi-eye"></i> Preview';
    }
}
</script>
@endpush