@extends('profile.layout')
@section('title', 'Tənzimləmələr: ' . $page->title)

@section('content')
<div class="max-w-6xl mx-auto">
<a href="{{ route('pages.htmleditor', [$profileUser, $page]) }}" class="text-sm text-muted hover:text-ink mb-4 inline-flex items-center gap-1.5"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Redaktora qayıt') }}</a>
<h1 class="text-2xl font-bold text-ink mb-6">{{ __('Səhifə tənzimləmələri') }}</h1>

<div class="card max-w-xl">
    <form method="POST" action="{{ route('pages.update', [$profileUser, $page]) }}" class="space-y-4" enctype="multipart/form-data">
        @csrf @method('PUT')
        <div><label class="label">{{ __('Səhifə başlığı') }}</label><input type="text" name="title" value="{{ $page->title }}" class="input" required></div>
        <div><label class="flex items-center gap-2"><input type="checkbox" name="is_active" value="1" {{ $page->is_active?'checked':'' }} class="rounded"> <span class="text-sm">{{ __('Səhifə aktivdir') }}</span></label></div>

        <hr class="border-line">
        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="image" class="w-4 h-4" /> Favicon</h3>
        <div><label class="label">Favicon şəkli (PNG, JPG, WebP)</label><input type="file" name="favicon" id="faviconInput" accept="image/png,image/jpeg,image/webp,image/gif" class="input" onchange="previewFavicon(this)">@if($page->favicon)<div class="mt-2 flex items-center gap-2"><img src="{{ $page->favicon }}" class="w-10 h-10 object-contain rounded border border-line" alt="Favicon"><span class="text-xs text-muted">Hazırkı favicon</span></div>@endif<div id="faviconPreview" style="display:none;" class="mt-2"><img id="faviconImg" src="" alt="Favicon" class="w-10 h-10 object-contain rounded border border-line"></div><p class="text-xs text-muted mt-1">Brauzer nişanında (tab) göstəriləcək kiçik şəkil. Yükləməsəniz, standart Libro.az ikonu göstəriləcək.</p></div>

        @if($canUseSeo)
        <hr class="border-line">

        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="search" class="w-4 h-4" /> SEO</h3>
        <div><label class="label">Meta başlıq (60-70 simvol)</label><input type="text" name="meta_title" value="{{ $page->meta_title }}" class="input" maxlength="70"></div>
        <div><label class="label">Meta təsvir (150-160 simvol)</label><textarea name="meta_description" class="input min-h-[80px]" maxlength="160">{{ $page->meta_description }}</textarea></div>
        <div><label class="label">OG şəkli</label><input type="file" name="og_image" id="ogImageInput" accept="image/*" class="input" onchange="previewOgImage(this)">@if($page->og_image)<div class="mt-2"><img src="{{ $page->og_image }}" class="w-24 h-24 object-cover rounded-lg border" alt="OG"></div>@endif<div id="ogImagePreview" style="display:none;" class="mt-2"><img id="ogImageImg" src="" alt="OG" class="w-24 h-24 object-cover rounded-lg border"></div></div>
        @endif

        @if($canUseCustomDomain)
        <hr class="border-line">
        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="globe" class="w-4 h-4" /> Öz domen (CNAME)</h3>
        <div><label class="label">Domen</label><input type="text" name="custom_domain" value="{{ $page->custom_domain }}" class="input" placeholder="mydomain.com"><p class="text-xs text-muted mt-1">DNS-də CNAME qeydini libro.az-a yönləndirin.</p></div>
        @endif

        @if($canRemoveWatermark)
        <hr class="border-line">
        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="ban" class="w-4 h-4" /> Su nişanı</h3>
        <div><label class="flex items-start gap-2 cursor-pointer">
            <input type="checkbox" name="hide_watermark" value="1" {{ $page->hide_watermark ? 'checked' : '' }} class="rounded mt-0.5">
            <span class="text-sm"><span class="font-medium">Su nişanını sil</span><span class="block text-xs text-muted mt-0.5">Səhifənin altındakı «Made in Libro.az» yazısı gizlədiləcək.</span></span>
        </label></div>
        @else
        <hr class="border-line">
        <div class="flex items-start gap-3 p-4 rounded-xl bg-surface2 border border-line">
            <span class="w-9 h-9 rounded-full bg-surface flex items-center justify-center shrink-0 text-muted"><x-icon name="lock" class="w-4 h-4" /></span>
            <div class="text-sm">
                <p class="font-semibold text-ink">Su nişanını silmək</p>
                <p class="text-muted mt-0.5">Bu funksiya {{ $watermarkPlanNames }} tarifində mövcuddur.</p>
                <a href="{{ route('profile.plans', $profileUser) }}" class="text-primary text-xs font-medium hover:underline mt-1 inline-block">Tariflərə bax</a>
            </div>
        </div>
        @endif

        @if($page->type === 'shop')
        <hr class="border-line">
        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="shopping-bag" class="w-4 h-4" /> Səbət</h3>
        <div><label class="flex items-start gap-2 cursor-pointer">
            <input type="checkbox" name="cart_enabled" value="1" {{ $page->cart_enabled ? 'checked' : '' }} class="rounded mt-0.5">
            <span class="text-sm"><span class="font-medium">Səbəti aktivləşdir</span><span class="block text-xs text-muted mt-0.5">Məhsullara «Səbətə əlavə et» düyməsi əlavə olunacaq və ziyarətçilər səbətdən sifariş verə biləcəklər.</span></span>
        </label></div>
        @endif

        <hr class="border-line">
        <h3 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="mail" class="w-4 h-4" /> {{ __('Sifariş bildirişləri') }}</h3>
        <div><label class="label">{{ __('E-poçt (sifarişlər bura göndəriləcək)') }}</label><input type="email" name="notification_email" value="{{ $page->notification_email }}" class="input" placeholder="example@email.com"><p class="text-xs text-muted mt-1">{{ __('Sifarişlər bu e-poçta göndəriləcək. Boş qoysanız, forma işləməyəcək.') }}</p></div>

        <button type="submit" class="btn btn-primary w-full">Saxla</button>
    </form>

    <div class="mt-6 pt-4 border-t text-sm text-muted">
        <p>{{ __('Publik link') }}: <a href="/{{ $page->slug }}" target="_blank" class="text-primary underline">libro.az/{{ $page->slug }}</a></p>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
function previewOgImage(input) {
    const preview = document.getElementById('ogImagePreview');
    const img = document.getElementById('ogImageImg');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => { img.src = e.target.result; preview.style.display = ''; };
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}
function previewFavicon(input) {
    const preview = document.getElementById('faviconPreview');
    const img = document.getElementById('faviconImg');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => { img.src = e.target.result; preview.style.display = ''; };
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}
</script>
@endpush