@extends('layouts.admin')

@section('title', __('menu-bar.title'))
@section('content')
    <x-admin.page-header
        :title="__('menu-bar.title')"
        :description="__('menu-bar.description')"
        :eyebrow="__('menu-bar.eyebrow')"
    />

    {{-- Exact preview of the Angular frontend navbar, powered by the saved backend values. --}}
    <section class="frontend-navbar-preview-panel" aria-labelledby="frontend-navbar-preview-title">
        <div class="frontend-navbar-preview-heading">
            <div>
                <strong id="frontend-navbar-preview-title">معاينة شريط الـFrontend</strong>
                <span>هذه هي نفس القائمة التي يستقبلها الموقع من الـAPI.</span>
            </div>
            <span class="frontend-navbar-status {{ $settings->is_enabled ? 'is-active' : '' }}">
                <span aria-hidden="true"></span>
                {{ $settings->is_enabled ? 'نشط في الموقع' : 'معطل' }}
            </span>
        </div>

        @php($currentLogoUrl = old('brand_logo_url', $settings->resolvedBrandLogoUrl()))
        <div class="frontend-navbar-preview" dir="rtl">
            <a class="frontend-navbar-brand" href="{{ url('/') }}" aria-label="الصفحة الرئيسية لـ Seven Tech">
                <span class="frontend-navbar-mark">
                    <img
                        @if($currentLogoUrl) src="{{ $currentLogoUrl }}" @endif
                        alt=""
                        data-brand-logo-preview
                        @if(!$currentLogoUrl) hidden @endif
                    >
                    <svg data-brand-logo-placeholder viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true" @if($currentLogoUrl) hidden @endif>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16l-8 14"/>
                    </svg>
                </span>
            </a>

            <nav class="frontend-navbar-links" aria-label="قائمة التنقل الرئيسية">
                @forelse($links->where('is_active', true) as $link)
                    <a
                        class="frontend-navbar-link {{ $loop->first ? 'is-current' : '' }}"
                        href="{{ $link->url }}"
                        @if($link->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                    >
                        {{ $link->label }}
                        @if($link->badge_text)
                            <small>{{ $link->badge_text }}</small>
                        @endif
                    </a>
                @empty
                    <span class="frontend-navbar-empty">لا توجد روابط نشطة</span>
                @endforelse
            </nav>

            <div class="frontend-navbar-actions">
                @if($settings->cta_button_enabled)
                    <a class="frontend-navbar-cta" href="{{ $settings->cta_button_url }}" target="{{ $settings->cta_button_target }}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <rect x="3" y="4" width="18" height="18" rx="2"/>
                            <path d="M16 2v4M8 2v4M3 10h18"/>
                        </svg>
                        <span>{{ $settings->cta_button_text }}</span>
                    </a>
                @endif

                @if($settings->is_theme_toggle_enabled)
                    <button class="frontend-navbar-icon-button" type="button" aria-label="تبديل نمط الألوان">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <circle cx="12" cy="12" r="5"/>
                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                        </svg>
                    </button>
                @endif

                <button class="frontend-navbar-icon-button frontend-navbar-menu-button" type="button" aria-label="فتح قائمة التنقل">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M4 7h16M4 12h16M4 17h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </section>

    {{-- SECTION 1 & 2: Main Settings & Action Button Form --}}
    <form class="panel form-stack" method="POST" action="{{ route('admin.menu-bar.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <input type="hidden" name="lock_version" value="{{ $settings->lock_version }}">

        {{-- 1. Brand & General Settings --}}
        <fieldset class="permission-group">
            <legend>{{ __('menu-bar.sections.general') }}</legend>
            <div class="form-grid">
                <div class="field">
                    <label for="brand_name">{{ __('menu-bar.fields.brand_name') }}</label>
                    <input id="brand_name" name="brand_name" value="{{ old('brand_name', $settings->brand_name) }}" required>
                </div>

                <div class="field">
                    <label for="brand_logo_url">{{ __('menu-bar.fields.brand_logo_url') }}</label>
                    <x-admin.media-picker
                        name="brand_logo_url"
                        id="brand_logo_url"
                        value-mode="url"
                        :selected="old('brand_logo_url', $settings->brand_logo_url)"
                        empty-label="استخدام شعار 7 Tech الافتراضي"
                    />
                    <small class="field-hint">اختر الشعار من معرض الصور أو ارفع صورة جديدة؛ لا توجد حاجة لكتابة مسار يدوي.</small>
                </div>

                <div class="field full">
                    <div style="display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.25rem;">
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="is_sticky" value="0">
                            <input type="checkbox" name="is_sticky" value="1" @checked(old('is_sticky', $settings->is_sticky))>
                            <span><strong>{{ __('menu-bar.fields.is_sticky') }}</strong></span>
                        </label>
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="is_enabled" value="0">
                            <input type="checkbox" name="is_enabled" value="1" @checked(old('is_enabled', $settings->is_enabled))>
                            <span><strong>{{ __('menu-bar.fields.is_enabled') }}</strong></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('menu-bar.actions.save_settings') }}</button>
            </div>
        </fieldset>

        {{-- 2. CTA Button & Controls --}}
        <fieldset class="permission-group" style="margin-top: 1rem;">
            <legend>{{ __('menu-bar.sections.cta_and_controls') }}</legend>
            <div class="form-grid">
                <div class="field">
                    <label for="cta_button_text">{{ __('menu-bar.fields.cta_button_text') }}</label>
                    <input id="cta_button_text" name="cta_button_text" value="{{ old('cta_button_text', $settings->cta_button_text) }}" required placeholder="طلب عرض سعر ←">
                </div>

                <div class="field full">
                    <label for="cta_button_url">{{ __('menu-bar.fields.cta_button_url') }}</label>
                    <input id="cta_button_url" name="cta_button_url" value="{{ old('cta_button_url', $settings->cta_button_url) }}" required placeholder="/quote أو /contact أو https://..." dir="ltr" style="font-family: monospace; font-size: 0.9rem; width: 100%;">
                </div>

                <div class="field">
                    <label for="cta_button_target">{{ __('menu-bar.fields.cta_button_target') }}</label>
                    <select id="cta_button_target" name="cta_button_target">
                        <option value="_self" @selected(old('cta_button_target', $settings->cta_button_target) === '_self')>{{ __('menu-bar.fields.target_self') }}</option>
                        <option value="_blank" @selected(old('cta_button_target', $settings->cta_button_target) === '_blank')>{{ __('menu-bar.fields.target_blank') }}</option>
                    </select>
                </div>

                <div class="field">
                    <label for="language_switcher_label">{{ __('menu-bar.fields.language_switcher_label') }}</label>
                    <input id="language_switcher_label" name="language_switcher_label" value="{{ old('language_switcher_label', $settings->language_switcher_label) }}" placeholder="English">
                </div>

                <div class="field full">
                    <div style="display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.25rem;">
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="cta_button_enabled" value="0">
                            <input type="checkbox" name="cta_button_enabled" value="1" @checked(old('cta_button_enabled', $settings->cta_button_enabled))>
                            <span><strong>{{ __('menu-bar.fields.cta_button_enabled') }}</strong></span>
                        </label>
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="is_language_switcher_enabled" value="0">
                            <input type="checkbox" name="is_language_switcher_enabled" value="1" @checked(old('is_language_switcher_enabled', $settings->is_language_switcher_enabled))>
                            <span><strong>{{ __('menu-bar.fields.is_language_switcher_enabled') }}</strong></span>
                        </label>
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="is_theme_toggle_enabled" value="0">
                            <input type="checkbox" name="is_theme_toggle_enabled" value="1" @checked(old('is_theme_toggle_enabled', $settings->is_theme_toggle_enabled))>
                            <span><strong>{{ __('menu-bar.fields.is_theme_toggle_enabled') }}</strong></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 1.25rem; display: flex; justify-content: flex-end;">
                <button class="button" type="submit">💾 {{ __('menu-bar.actions.save_settings') }}</button>
            </div>
        </fieldset>

        <div class="form-actions" style="margin-top: 1.5rem; display: flex; justify-content: flex-end;">
            <button class="button" type="submit" style="min-width: 14rem; font-weight: 700;">💾 {{ __('menu-bar.actions.save_settings') }}</button>
        </div>
    </form>

    {{-- SECTION 3: Navigation Links Management --}}
    <section class="panel form-stack" style="margin-top: 1.5rem;">
        <div class="section-heading" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h2>{{ __('menu-bar.sections.links') }} ({{ $links->count() }} روابط)</h2>
                <p class="field-hint">تحكم في نصوص، روابط، وترتيب الروابط الظاهرة في القائمة الرئيسية مع دعم الفتح في نافذة جديدة.</p>
            </div>
            <button type="button" class="button" data-ui-action="toggle-target" data-ui-arg1="create-link-panel">
                {{ __('menu-bar.actions.add_link') }}
            </button>
        </div>

        {{-- Add New Link Collapsible Form --}}
        <div id="create-link-panel" class="hidden" style="margin-bottom: 1.5rem; background: rgba(0,0,0,0.3); border: 1px dashed rgba(255, 101, 0, 0.4); border-radius: 12px; padding: 1.25rem;">
            <form class="form-grid" method="POST" action="{{ route('admin.menu-bar.links.store') }}">
                @csrf
                <div class="field">
                    <label for="new_link_label">{{ __('menu-bar.fields.link_label') }}</label>
                    <input id="new_link_label" name="label" required placeholder="مثال: من نحن">
                </div>

                <div class="field">
                    <label for="new_link_url">{{ __('menu-bar.fields.link_url') }}</label>
                    <input id="new_link_url" name="url" required placeholder="مثال: /about أو https://...">
                </div>

                <div class="field">
                    <label for="new_link_order">{{ __('menu-bar.fields.display_order') }}</label>
                    <input id="new_link_order" name="display_order" type="number" min="0" max="65535" value="{{ $links->count() + 1 }}" required>
                </div>

                <div class="field">
                    <label for="new_link_badge">{{ __('menu-bar.fields.badge_text') }}</label>
                    <input id="new_link_badge" name="badge_text" placeholder="مثال: جديد (اختياري)">
                </div>

                <div class="field full">
                    <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1" checked>
                            <span><strong>{{ __('menu-bar.fields.active') }}</strong></span>
                        </label>
                        <label class="checkbox" style="cursor: pointer;">
                            <input type="hidden" name="open_in_new_tab" value="0">
                            <input type="checkbox" name="open_in_new_tab" value="1">
                            <span><strong>{{ __('menu-bar.fields.open_in_new_tab') }}</strong></span>
                        </label>
                    </div>
                </div>

                <div class="form-actions full" style="margin-top: 0.5rem;">
                    <button class="button" type="submit">{{ __('menu-bar.actions.add_link') }}</button>
                </div>
            </form>
        </div>

        {{-- Existing Links Cards Grid --}}
        @if($links->isNotEmpty())
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem;">
                @foreach($links as $link)
                    <article class="pricing-card" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 1.25rem; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 0.85rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.5rem;">
                            <strong style="color: #fff; font-size: 1rem;">
                                #{{ $link->display_order }} - {{ $link->label }}
                            </strong>
                            <span class="badge" style="background: {{ $link->is_active ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)' }}; color: {{ $link->is_active ? '#22c55e' : '#ef4444' }}; font-size: 0.75rem;">
                                {{ $link->is_active ? __('menu-bar.fields.active') : __('menu-bar.fields.inactive') }}
                            </span>
                        </div>

                        <form class="form-stack" method="POST" action="{{ route('admin.menu-bar.links.update', $link) }}" style="display: flex; flex-direction: column; gap: 0.75rem;">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="lock_version" value="{{ $link->lock_version }}">

                            <div class="field">
                                <label style="font-size: 0.82rem; color: #aaa;">{{ __('menu-bar.fields.link_label') }}</label>
                                <input name="label" value="{{ $link->label }}" required style="font-weight: 600;">
                            </div>

                            <div class="field">
                                <label style="font-size: 0.82rem; color: #aaa;">{{ __('menu-bar.fields.link_url') }}</label>
                                <input name="url" value="{{ $link->url }}" required dir="ltr">
                            </div>

                            <div class="form-grid" style="grid-template-columns: 1fr 1fr; gap: 0.5rem;">
                                <div class="field">
                                    <label style="font-size: 0.82rem; color: #aaa;">{{ __('menu-bar.fields.display_order') }}</label>
                                    <input name="display_order" type="number" min="0" max="65535" value="{{ $link->display_order }}" required>
                                </div>
                                <div class="field">
                                    <label style="font-size: 0.82rem; color: #aaa;">{{ __('menu-bar.fields.badge_text') }}</label>
                                    <input name="badge_text" value="{{ $link->badge_text }}" placeholder="جديد">
                                </div>
                            </div>

                            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem;">
                                <label class="checkbox" style="cursor: pointer; font-size: 0.82rem;">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" name="is_active" value="1" @checked($link->is_active)>
                                    <span>{{ __('menu-bar.fields.active') }}</span>
                                </label>
                                <label class="checkbox" style="cursor: pointer; font-size: 0.82rem;">
                                    <input type="hidden" name="open_in_new_tab" value="0">
                                    <input type="checkbox" name="open_in_new_tab" value="1" @checked($link->open_in_new_tab)>
                                    <span>{{ __('menu-bar.fields.open_in_new_tab') }}</span>
                                </label>
                            </div>

                            <button class="button" type="submit" style="width: 100%; font-size: 0.88rem; padding: 0.5rem 1rem; margin-top: 0.35rem;">
                                💾 {{ __('menu-bar.actions.save_link') }}
                            </button>
                        </form>

                        <form method="POST" action="{{ route('admin.menu-bar.links.destroy', $link) }}" data-confirm="{{ __('menu-bar.actions.confirm_delete_link') }}">
                            @csrf
                            @method('DELETE')
                            <button class="button button-danger" type="submit" style="width: 100%; font-size: 0.82rem; padding: 0.35rem 0.75rem; background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25);">
                                🗑️ {{ __('menu-bar.actions.delete_link') }}
                            </button>
                        </form>
                    </article>
                @endforeach
            </div>
        @else
            <div class="empty-state" style="text-align: center; color: var(--muted, #888); padding: 2rem 1rem; border: 1px dashed rgba(255,255,255,0.08); border-radius: 12px;">
                {{ __('menu-bar.empty_links') }}
            </div>
        @endif
    </section>

@endsection