{{-- Astro Bilge admin paneline gomulu modul: kendi tasarim dili korunuyor ama
     artik bagimsiz bir sayfa degil, admin.layout'un icerik alaninda render
     ediliyor (sol menu + ust bar astrobilge'den geliyor). Tum CSS ".sma-scope"
     altina izole edildi ki admin panelin geri kalanini etkilemesin. --}}
@extends('admin.layout')

@section('title', 'Sosyal Medya Otomasyonu')
@section('page-title', 'Sosyal Medya Otomasyonu')

@section('content')
<div class="sma-scope">
    {{-- admin.layout'ta bu meta yok (astrobilge admin'i AJAX yerine @csrf formlarıyla
         çalışıyor); modülün ses önizleme fetch'i bunu okuduğu için burada ekleniyor. --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .sma-scope {
            color-scheme: light;
            --green-50: #dcfce7;
            --green-100: #dcfce7;
            --green-200: #bbf7d0;
            --green-600: #16a34a;
            --green-700: #15803d;
            --green-900: #14532d;
            --ink: #1a2e22;
            --muted: #5b6b62;
            --border: #e2e8e4;
            --radius: 12px;
        }
        .sma-scope, .sma-scope * { box-sizing: border-box; }
        .sma-scope {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            background: #ffffff;
            color: var(--ink);
            margin: 0;
            padding: 0 0 72px;
            line-height: 1.5;
        }
        .sma-scope a { color: inherit; }
        .sma-scope header {
            background: var(--green-900);
            padding: 18px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
        }
        .sma-scope header a.brand {
            color: #ffffff;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.05rem;
            letter-spacing: .01em;
        }
        .sma-scope nav a {
            margin-left: 24px;
            color: rgba(255,255,255,.82);
            text-decoration: none;
            font-weight: 600;
            font-size: .92rem;
            padding-bottom: 2px;
            border-bottom: 2px solid transparent;
            transition: color .15s ease, border-color .15s ease;
        }
        .sma-scope nav a:hover { color: #ffffff; border-color: rgba(255,255,255,.5); }
        .sma-scope main { max-width: 900px; margin: 40px auto; padding: 0 24px; }
        .sma-scope h1 {
            font-size: 1.65rem;
            font-weight: 700;
            color: var(--green-900);
            letter-spacing: -.01em;
            margin: 0 0 8px;
        }
        .sma-scope h2 { color: var(--green-900); letter-spacing: -.005em; }
        .sma-scope .hero { text-align: center; padding: 48px 0 24px; }
        .sma-scope .hero-badge {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 999px;
            border: 1px solid var(--green-200);
            color: var(--green-900);
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .06em;
            margin-bottom: 24px;
        }
        .sma-scope .hero-title {
            font-size: 2.6rem;
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.02em;
            color: var(--ink);
            margin: 0 0 20px;
        }
        .sma-scope .hero-title span { color: var(--green-900); }
        .sma-scope .hero-subtitle {
            font-size: 1.05rem;
            color: var(--muted);
            max-width: 560px;
            margin: 0 auto 40px;
            line-height: 1.6;
        }
        .sma-scope .hero-modes {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .sma-scope .mode-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 180px;
            padding: 32px 20px;
            border-radius: 16px;
            border: 1px solid var(--border);
            background: #ffffff;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(20,83,45,.03), 0 6px 16px rgba(20,83,45,.05);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        .sma-scope .mode-card:hover {
            transform: translateY(-3px);
            border-color: var(--green-600);
            box-shadow: 0 10px 24px rgba(20,83,45,.14);
        }
        .sma-scope .mode-icon { font-size: 2.2rem; }
        .sma-scope .mode-label { font-weight: 700; color: var(--ink); font-size: 1rem; }
        .sma-scope .card {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 26px;
            margin-bottom: 24px;
            box-shadow: 0 1px 2px rgba(20,83,45,.03), 0 6px 16px rgba(20,83,45,.05);
        }
        .sma-scope /* Ayarların MoneyPrinterTurbo'daki gibi gruplu kartlar/sütunlar halinde
           gösterildiği form düzeni — renk paleti aynı kalıyor, .sma-scope sadece yerleşim
           tek sütundan çok sütuna geçiyor. Kart sayısı moda göre değiştiği için
           (Görsel modunda "Ses Ayarları" kartı hiç yok) auto-fit kullanılıyor, .sma-scope sabit bir sütun sayısı değil. */
        .panel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            align-items: start;
            margin-bottom: 20px;
        }
        .sma-scope .panel-grid .card { margin-bottom: 0; }
        .sma-scope label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .87rem; color: var(--ink); }
        .sma-scope input[type=text], .sma-scope input[type=password], .sma-scope input[type=file], .sma-scope input[type=datetime-local], .sma-scope input[type=time], .sma-scope textarea {
            width: 100%;
            padding: 11px 14px;
            border-radius: 9px;
            border: 1px solid #cdd6d0;
            background: #ffffff;
            color: var(--ink);
            font-size: .97rem;
            font-family: inherit;
            margin-bottom: 16px;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .sma-scope input[type=text]:focus, .sma-scope input[type=password]:focus, .sma-scope input[type=datetime-local]:focus, .sma-scope textarea:focus, .sma-scope select:focus {
            outline: none;
            border-color: var(--green-600);
            box-shadow: 0 0 0 3px rgba(22,163,74,.14);
        }
        .sma-scope textarea { resize: vertical; }
        .sma-scope select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border-radius: 7px;
            border: 1px solid #cdd6d0;
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b62' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px 6px;
            color: var(--ink);
            padding: 7px 28px 7px 10px;
            font-family: inherit;
            cursor: pointer;
            transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .12s ease;
        }
        .sma-scope select:hover {
            border-color: var(--green-600);
            background-color: var(--green-50);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(20,83,45,.12);
        }
        .sma-scope .custom-select {
            position: relative;
            width: 100%;
        }
        .sma-scope .custom-select select {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
        }
        .sma-scope .custom-select-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border-radius: 7px;
            border: 1px solid #cdd6d0;
            background-color: #ffffff;
            color: var(--ink);
            padding: 7px 10px;
            font-size: inherit;
            font-family: inherit;
            cursor: pointer;
            user-select: none;
            transition: border-color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .15s ease;
        }
        .sma-scope .custom-select-trigger:hover {
            border-color: var(--green-600);
            background-color: var(--green-50);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(20,83,45,.12);
        }
        .sma-scope .custom-select.open .custom-select-trigger {
            border-color: var(--green-600);
            box-shadow: 0 0 0 3px rgba(22,163,74,.16);
        }
        .sma-scope .custom-select-trigger .chevron {
            flex-shrink: 0;
            color: var(--muted);
            transition: transform .15s ease;
        }
        .sma-scope .custom-select.open .chevron { transform: rotate(180deg); color: var(--green-600); }
        .sma-scope .custom-select-list {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            z-index: 30;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 10px 28px rgba(20,83,45,.14), 0 2px 6px rgba(0,0,0,.06);
            max-height: 240px;
            overflow-y: auto;
            padding: 6px;
            display: none;
        }
        .sma-scope .custom-select.open .custom-select-list { display: block; }
        .sma-scope .custom-select-option {
            padding: 8px 10px;
            border-radius: 7px;
            cursor: pointer;
            font-size: .92rem;
            color: var(--ink);
            transition: background-color .1s ease;
        }
        .sma-scope .custom-select-option:hover { background: var(--green-50); }
        .sma-scope .custom-select-option.selected { background: var(--green-100); color: #166534; font-weight: 600; }
        .sma-scope .custom-select.accent .custom-select-trigger {
            background: var(--green-900);
            border-color: transparent;
            color: #ffffff;
            font-weight: 600;
        }
        .sma-scope .custom-select.accent .custom-select-trigger:hover {
            filter: brightness(1.06);
            box-shadow: 0 3px 10px rgba(20,83,45,.28);
        }
        .sma-scope .custom-select.accent .chevron { color: rgba(255,255,255,.85); }
        .sma-scope .custom-select.accent.open .chevron { color: #ffffff; }
        .sma-scope .custom-select.accent.open .custom-select-trigger { box-shadow: 0 0 0 3px rgba(20,83,45,.28); }
        .sma-scope .prompt-box {
            border: 1px solid #cdd6d0;
            border-radius: 9px;
            background: #ffffff;
            margin-bottom: 8px;
            transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
        }
        .sma-scope .prompt-box.dragover { border-color: var(--green-600); background-color: var(--green-50); }
        .sma-scope .prompt-box:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
        .sma-scope .prompt-box textarea {
            border: none;
            margin-bottom: 0;
            border-radius: 9px 9px 0 0;
            box-shadow: none !important;
        }
        .sma-scope .prompt-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 8px 12px;
            border-top: 1px solid var(--border);
        }
        .sma-scope .attach-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: 1px dashed #cdd6d0;
            color: var(--muted);
            padding: 5px 12px;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: none;
            transition: border-color .15s ease, color .15s ease, background-color .15s ease;
        }
        .sma-scope .attach-btn:hover { border-color: var(--green-600); color: var(--green-900); background: var(--green-50); filter: none; }
        .sma-scope .reference-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--green-50);
            border: 1px solid var(--green-200);
            border-radius: 999px;
            padding: 4px 6px 4px 4px;
            font-size: .82rem;
            color: var(--ink);
        }
        .sma-scope .reference-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
        .sma-scope .reference-chip button {
            background: none;
            border: none;
            color: var(--muted);
            cursor: pointer;
            padding: 0 2px;
            font-size: .85rem;
            box-shadow: none;
        }
        .sma-scope .reference-chip button:hover { color: #dc2626; filter: none; }
        .sma-scope .dropzone {
            border: 2px dashed #cdd6d0;
            border-radius: 10px;
            padding: 22px;
            text-align: center;
            cursor: pointer;
            background: #fbfdfb;
            transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
            margin-bottom: 10px;
        }
        .sma-scope .dropzone:hover { border-color: var(--green-600); background-color: var(--green-50); }
        .sma-scope .dropzone.dragover { border-color: var(--green-600); background-color: var(--green-50); transform: scale(1.01); }
        .sma-scope .btn-clear {
            background: var(--green-900);
            color: #ffffff;
            border: none;
            padding: 7px 16px;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(20,83,45,.15);
            transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
        }
        .sma-scope .btn-clear:hover { box-shadow: 0 3px 10px rgba(20,83,45,.25); filter: brightness(1.05); }
        .sma-scope .btn-clear:active { transform: translateY(1px); }
        .sma-scope .platform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .sma-scope .platform-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #fbfdfb;
            transition: border-color .15s ease, background .15s ease;
        }
        .sma-scope .platform-option:has(input:checked) {
            border-color: var(--green-200);
            background: var(--green-50);
        }
        .sma-scope .platform-option.disabled { opacity: .55; }
        .sma-scope .toggle-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
        .sma-scope .toggle-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: #fbfdfb;
            cursor: pointer;
            font-weight: 600;
            font-size: .92rem;
            text-decoration: none;
            color: var(--ink);
            transition: border-color .15s ease, background-color .15s ease;
        }
        .sma-scope .toggle-option:hover { border-color: var(--green-600); }
        .sma-scope .toggle-option:has(input:checked) { border-color: var(--green-600); background: var(--green-50); color: var(--green-900); }
        .sma-scope .toggle-option input { width: auto; margin: 0; }
        .sma-scope .sma-topnav {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .sma-scope .sma-topnav .toggle-option.is-active {
            border-color: var(--green-600);
            background: var(--green-900);
            color: #ffffff;
        }
        .sma-scope .badge {
            display: inline-block;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .02em;
            padding: 3px 9px;
            border-radius: 999px;
            margin-left: 6px;
        }
        .sma-scope .badge-mvp { background: var(--green-100); color: #166534; }
        .sma-scope .badge-pending_review { background: #dbeafe; color: #1e40af; }
        .sma-scope .badge-stub { background: #fef3c7; color: #92400e; }
        .sma-scope .badge-unsupported { background: #fee2e2; color: #991b1b; }
        .sma-scope button {
            background: var(--green-900);
            color: #ffffff;
            border: none;
            padding: 12px 24px;
            border-radius: 9px;
            font-size: .96rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(20,83,45,.15);
            transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
        }
        .sma-scope button:hover { filter: brightness(1.18); box-shadow: 0 2px 6px rgba(20,83,45,.28); }
        .sma-scope button:active { transform: translateY(1px); }
        .sma-scope button:disabled { opacity: .55; cursor: not-allowed; }
        .sma-scope .alert {
            padding: 13px 16px;
            border-radius: 9px;
            margin-bottom: 20px;
            font-size: .92rem;
            border-left: 3px solid transparent;
        }
        .sma-scope .alert-success { background: var(--green-100); color: #166534; border-left-color: var(--green-600); }
        .sma-scope .alert-error { background: #fee2e2; color: #991b1b; border-left-color: #dc2626; }
        .sma-scope table { width: 100%; border-collapse: collapse; }
        .sma-scope th {
            text-align: left;
            padding: 9px 10px;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--muted);
            border-bottom: 1px solid var(--border);
        }
        .sma-scope td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: .9rem; }
        .sma-scope tbody tr:hover { background: var(--green-50); }
        .sma-scope a.link { color: var(--green-600); font-weight: 600; text-decoration: none; }
        .sma-scope a.link:hover { text-decoration: underline; }
        .sma-scope .status-pill {
            display: inline-block;
            padding: 3px 11px;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .01em;
        }
        .sma-scope .status-queued, .sma-scope .status-generating_story, .sma-scope .status-generating_media, .sma-scope .status-publishing { background: #dbeafe; color: #1e40af; }
        .sma-scope .status-done, .sma-scope .status-success { background: var(--green-100); color: #166534; }
        .sma-scope .status-failed { background: #fee2e2; color: #991b1b; }
        .sma-scope .status-pending_api_approval { background: #fef3c7; color: #92400e; }
        .sma-scope .status-awaiting_approval { background: #ede9fe; color: #5b21b6; }
        .sma-scope .status-scheduled { background: #cffafe; color: #155e75; }
        .sma-scope .muted { color: var(--muted); font-size: .85rem; }
        .sma-scope img.preview, .sma-scope video.preview { max-width: 260px; border-radius: 10px; display: block; margin-top: 10px; border: 1px solid var(--border); }
    
    </style>

    <nav class="sma-topnav">
        <a href="{{ route('admin.social-automation.jobs.index') }}" class="toggle-option {{ request()->routeIs('admin.social-automation.jobs.index') || request()->routeIs('admin.social-automation.jobs.create') ? 'is-active' : '' }}">Ana Sayfa</a>
        <a href="{{ route('admin.social-automation.jobs.history') }}" class="toggle-option {{ request()->routeIs('admin.social-automation.jobs.history') || request()->routeIs('admin.social-automation.jobs.show') ? 'is-active' : '' }}">Önceki Görevler</a>
        <a href="{{ route('admin.social-automation.recurring.index') }}" class="toggle-option {{ request()->routeIs('admin.social-automation.recurring.*') ? 'is-active' : '' }}">Otomatik İçerik</a>
        <a href="{{ route('admin.social-automation.metrics.index') }}" class="toggle-option {{ request()->routeIs('admin.social-automation.metrics.*') ? 'is-active' : '' }}">Metrikler</a>
        <a href="{{ route('admin.social-automation.settings.index') }}" class="toggle-option {{ request()->routeIs('admin.social-automation.settings.*') ? 'is-active' : '' }}">Ayarlar</a>
    </nav>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif

    @yield('sma_content')

    <script>
    (function () {
        function enhanceSelect(select) {
            if (select.dataset.enhanced) return;
            select.dataset.enhanced = '1';

            var wrapper = document.createElement('div');
            wrapper.className = 'custom-select' + (select.classList.contains('accent-select') ? ' accent' : '');
            select.parentNode.insertBefore(wrapper, select);
            wrapper.appendChild(select);

            var trigger = document.createElement('div');
            trigger.className = 'custom-select-trigger';
            trigger.tabIndex = 0;

            var label = document.createElement('span');
            var chevron = document.createElement('span');
            chevron.className = 'chevron';
            chevron.innerHTML = '&#9662;';
            trigger.appendChild(label);
            trigger.appendChild(chevron);
            wrapper.appendChild(trigger);

            var list = document.createElement('div');
            list.className = 'custom-select-list';
            wrapper.appendChild(list);

            function renderOptions() {
                list.innerHTML = '';
                Array.from(select.options).forEach(function (opt) {
                    var item = document.createElement('div');
                    item.className = 'custom-select-option' + (opt.selected ? ' selected' : '');
                    item.textContent = opt.textContent;
                    item.addEventListener('click', function (e) {
                        e.stopPropagation();
                        select.value = opt.value;
                        select.dispatchEvent(new Event('change', { bubbles: true }));
                        syncLabel();
                        close();
                    });
                    list.appendChild(item);
                });
            }

            function syncLabel() {
                var selected = select.options[select.selectedIndex];
                label.textContent = selected ? selected.textContent : '';
                Array.from(list.children).forEach(function (item, i) {
                    item.classList.toggle('selected', !!(select.options[i] && select.options[i].selected));
                });
            }

            function open() {
                document.querySelectorAll('.custom-select.open').forEach(function (el) {
                    if (el !== wrapper) el.classList.remove('open');
                });
                renderOptions();
                wrapper.classList.add('open');
            }
            function close() { wrapper.classList.remove('open'); }
            function toggle() { wrapper.classList.contains('open') ? close() : open(); }

            trigger.addEventListener('click', toggle);
            trigger.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); }
                if (e.key === 'Escape') close();
            });

            syncLabel();
        }

        document.addEventListener('click', function (e) {
            if (!e.target.closest('.custom-select')) {
                document.querySelectorAll('.custom-select.open').forEach(function (el) { el.classList.remove('open'); });
            }
        });

        document.querySelectorAll('select').forEach(enhanceSelect);
    })();
    </script>
</div>
@endsection