@extends('layouts.admin')

@section('title', 'تعديل مقالة | Help Numo')
@section('page-title', 'تعديل مقالة: ' . $article->title)

@section('admin_content')
    @php
        $libraryPublicUrl = url(route('library.article.show', $article->slug));
        $articleViewUrl = $article->status === 'published'
            ? route('library.article.show', $article->slug)
            : route('admin.articles.preview', $article);
    @endphp
    <div class="card mb-3 article-edit-preview-bar">
        <a
            href="{{ $articleViewUrl }}"
            class="btn btn--secondary"
            target="_blank"
            rel="noopener"
            title="{{ $article->status === 'published' ? 'فتح صفحة المقالة (عام أو خاص)' : 'معاينة المسودة (يتطلب تسجيل الدخول)' }}"
        >
            <span class="article-edit-preview-bar__btn-icon" aria-hidden="true">👁</span>
            <span>معاينة المقالة</span>
        </a>
        <button
            type="button"
            class="btn btn--secondary"
            id="article-copy-public-url-btn"
            data-url="{{ $libraryPublicUrl }}"
            @if ($article->status !== 'published') disabled title="انشر المقالة أولاً ليعمل الرابط للعملاء"@endif
        >
            <span class="article-edit-preview-bar__btn-icon" aria-hidden="true">📋</span>
            <span class="article-edit-preview-bar__btn-label">نسخ الرابط</span>
        </button>
    </div>
    <form id="article-form" class="card" action="{{ route('admin.articles.update', $article) }}" method="POST">
        @method('PUT')
        @include('admin.articles._form', ['article' => $article, 'submitLabel' => 'تحديث المقال'])
    </form>
@endsection

@push('scripts')
    <script>
        (function () {
            function copyTextToClipboard(text) {
                if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
                    return navigator.clipboard.writeText(text).catch(function () {
                        return copyWithExecCommand(text);
                    });
                }
                return Promise.resolve(copyWithExecCommand(text));
            }

            function copyWithExecCommand(text) {
                var ta = document.createElement('textarea');
                ta.value = text;
                ta.setAttribute('readonly', '');
                ta.style.position = 'fixed';
                ta.style.left = '-9999px';
                ta.style.top = '0';
                document.body.appendChild(ta);
                ta.focus();
                ta.select();
                ta.setSelectionRange(0, text.length);
                try {
                    document.execCommand('copy');
                } finally {
                    document.body.removeChild(ta);
                }
            }

            const btn = document.getElementById('article-copy-public-url-btn');
            if (!btn || btn.disabled) return;
            const icon = btn.querySelector('.article-edit-preview-bar__btn-icon');
            const label = btn.querySelector('.article-edit-preview-bar__btn-label');
            btn.addEventListener('click', function () {
                const url = btn.getAttribute('data-url');
                copyTextToClipboard(url).then(function () {
                    if (icon) icon.textContent = '✓';
                    if (label) label.textContent = 'تم النسخ';
                    setTimeout(function () {
                        if (icon) icon.textContent = '📋';
                        if (label) label.textContent = 'نسخ الرابط';
                    }, 2000);
                });
            });
        })();
    </script>
@endpush