@extends('layouts.admin')

@section('title', app()->isLocale('ar') ? 'تحسين محركات البحث والتتبع' : 'SEO & Analytics Tracking')
@section('content')
    <x-admin.page-header
        :title="app()->isLocale('ar') ? 'تحسين محركات البحث والتتبع' : 'SEO & Analytics Tracking'"
        :description="app()->isLocale('ar') ? 'إدارة أكواد ووسوم التتبع والتحليلات لموقع الويب (Google Tag & Meta Pixel).' : 'Manage global tracking tags, analytics scripts, and pixel pixels.'"
        :eyebrow="app()->isLocale('ar') ? 'التسويق الرقمي والتحليلات' : 'Analytics & Marketing'"
    />

    @if(session('status'))
        <div class="alert alert-success" style="margin-bottom: 1.5rem; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; padding: 1rem 1.25rem; border-radius: 0.75rem;">
            {{ session('status') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.seo.tracking.update') }}" class="stack">
        @csrf
        @method('PUT')

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;">
            {{-- Google Tag Card --}}
            <section class="panel form-stack" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem;">
                    <div style="display: flex; align-items: center; gap: 0.75rem;">
                        <span style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(249, 115, 22, 0.15); color: #f97316; font-weight: 700; font-size: 1.1rem;">G</span>
                        <div>
                            <h2 style="font-size: 1.15rem; font-weight: 700; margin: 0;">Google Tag (GA4 / GTM)</h2>
                            <p class="muted" style="margin: 0; font-size: 0.85rem;">{{ app()->isLocale('ar') ? 'تتبع زيارات وتحليلات جوجل و Google Analytics' : 'Google Analytics 4 & Tag Manager' }}</p>
                        </div>
                    </div>
                    <label class="checkbox" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
                        <input type="checkbox" name="google_tag_enabled" value="1" @checked($googleTagEnabled)>
                        <span style="font-size: 0.9rem; font-weight: 600;">{{ app()->isLocale('ar') ? 'تفعيل' : 'Active' }}</span>
                    </label>
                </div>

                <div class="field">
                    <label for="google_tag_id">
                        {{ app()->isLocale('ar') ? 'معرّف القياس (Measurement ID / GTM ID)' : 'Measurement / Tag ID' }}
                    </label>
                    <input id="google_tag_id" name="google_tag_id" value="{{ old('google_tag_id', $googleTagId) }}" placeholder="e.g. G-XXXXXXXXXX or GTM-XXXXXXX" dir="ltr" style="font-family: monospace;">
                    <small class="muted">{{ app()->isLocale('ar') ? 'مثال: G-123456789 أو GTM-ABC1234' : 'e.g. G-XXXXXXXXXX' }}</small>
                </div>

                <div class="field full">
                    <label for="google_tag_snippet">
                        {{ app()->isLocale('ar') ? 'كود التضمين المباشر (Google Tag Script Snippet)' : 'Custom Script Snippet (Optional)' }}
                    </label>
                    <textarea id="google_tag_snippet" name="google_tag_snippet" rows="6" placeholder="<!-- Google tag (gtag.js) -->
<script async src=&quot;https://www.googletagmanager.com/gtag/js?id=G-XXXXX&quot;></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXX');
</script>" dir="ltr" style="font-family: monospace; font-size: 0.825rem; background: var(--surface-soft);">{{ old('google_tag_snippet', $googleTagSnippet) }}</textarea>
                </div>

                <div class="form-actions" style="margin-top: 1rem; display: flex; justify-content: flex-end;">
                    <button class="button" type="submit">💾 {{ app()->isLocale('ar') ? 'حفظ إعدادات Google Tag' : 'Save Google Tag' }}</button>
                </div>
            </section>

            {{-- Meta Pixel Card --}}
            <section class="panel form-stack" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
                <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem;">
                    <div style="display: flex; align-items: center; gap: 0.75rem;">
                        <span style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(59, 130, 246, 0.15); color: #3b82f6; font-weight: 700; font-size: 1.1rem;">M</span>
                        <div>
                            <h2 style="font-size: 1.15rem; font-weight: 700; margin: 0;">Meta Pixel (Facebook Pixel)</h2>
                            <p class="muted" style="margin: 0; font-size: 0.85rem;">{{ app()->isLocale('ar') ? 'تتبع الحملات الإعلانية والتحويلات عبر فيسبوك وإنستغرام' : 'Facebook & Instagram conversions tracking' }}</p>
                        </div>
                    </div>
                    <label class="checkbox" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
                        <input type="checkbox" name="meta_pixel_enabled" value="1" @checked($metaPixelEnabled)>
                        <span style="font-size: 0.9rem; font-weight: 600;">{{ app()->isLocale('ar') ? 'تفعيل' : 'Active' }}</span>
                    </label>
                </div>

                <div class="field">
                    <label for="meta_pixel_id">
                        {{ app()->isLocale('ar') ? 'معرّف بكسل فيسبوك (Pixel ID)' : 'Pixel ID' }}
                    </label>
                    <input id="meta_pixel_id" name="meta_pixel_id" value="{{ old('meta_pixel_id', $metaPixelId) }}" placeholder="e.g. 123456789012345" dir="ltr" style="font-family: monospace;">
                    <small class="muted">{{ app()->isLocale('ar') ? 'مثال: 123456789012345' : 'e.g. 123456789012345' }}</small>
                </div>

                <div class="field full">
                    <label for="meta_pixel_snippet">
                        {{ app()->isLocale('ar') ? 'كود البكسل المباشر (Meta Pixel Script Snippet)' : 'Custom Script Snippet (Optional)' }}
                    </label>
                    <textarea id="meta_pixel_snippet" name="meta_pixel_snippet" rows="6" placeholder="<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
...
</script>" dir="ltr" style="font-family: monospace; font-size: 0.825rem; background: var(--surface-soft);">{{ old('meta_pixel_snippet', $metaPixelSnippet) }}</textarea>
                </div>

                <div class="form-actions" style="margin-top: 1rem; display: flex; justify-content: flex-end;">
                    <button class="button" type="submit">💾 {{ app()->isLocale('ar') ? 'حفظ إعدادات Meta Pixel' : 'Save Meta Pixel' }}</button>
                </div>
            </section>
        </div>

        <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;">
                💾 {{ app()->isLocale('ar') ? 'حفظ إعدادات التتبع' : 'Save Tracking Settings' }}
            </button>
        </div>
    </form>
@endsection