@extends('layouts.app')
@section('title', 'Pengaturan')

@push('styles')
<style>
    /* ===== SETTINGS PAGE STYLES ===== */

    .settings-wrap {
        max-width: 680px;
        margin: 0 auto;
    }

    .settings-title {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1E293B;
        margin: 0 0 2rem 0;
    }

    .settings-subtitle {
        font-size: .9375rem;
        color: #64748B;
        margin: 4px 0 0;
        font-weight: 400;
    }

    /* Card */
    .settings-card {
        background: #ffffff;
        border: 1px solid #E2E8F0;
        border-radius: 14px;
        padding: 1.5rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    .settings-card-title {
        font-size: .9375rem;
        font-weight: 700;
        color: #1E293B;
        margin-bottom: 1.25rem;
    }

    /* Notif item */
    .notif-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .75rem 0;
        border-bottom: 1px solid #F1F5F9;
    }

    .notif-item:last-child {
        border-bottom: none;
    }

    .notif-label {
        font-size: .875rem;
        font-weight: 600;
        color: #1E293B;
    }

    .notif-desc {
        font-size: .75rem;
        color: #94A3B8;
    }

    /* Toggle switch */
    .toggle-wrap {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .toggle-wrap input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-track {
        position: absolute;
        inset: 0;
        background: #CBD5E1;
        border-radius: 24px;
        transition: background .2s;
        cursor: pointer;
    }

    .toggle-track::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        background: white;
        border-radius: 50%;
        transition: transform .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

    .toggle-track.is-on {
        background: #1A56DB;
    }

    .toggle-track.is-on::after {
        transform: translateX(20px);
    }

    /* Appearance Section */
    .appearance-section {
        margin-bottom: 1.5rem;
    }

    .appearance-label {
        font-size: .875rem;
        font-weight: 700;
        color: #1E293B;
        margin-bottom: 1rem;
    }

    /* Theme cards */
    .theme-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .theme-card {
        text-align: center;
        cursor: pointer;
        padding: .75rem;
        border: 2px solid #E2E8F0;
        border-radius: 12px;
        transition: all .2s ease;
        background: #ffffff;
        position: relative;
    }

    .theme-card-preview {
        width: 100%;
        height: 100px;
        border-radius: 8px;
        margin-bottom: .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        color: #64748B;
        font-weight: 500;
        overflow: hidden;
        position: relative;
    }

    .theme-card-preview.light {
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        color: #1E293B;
    }

    .theme-card-preview.light::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 8px;
        height: 8px;
        background: #94A3B8;
        border-radius: 50%;
    }

    .theme-card-preview.light::after {
        content: '';
        position: absolute;
        width: 60%;
        height: 3px;
        background: #CBD5E1;
        border-radius: 2px;
        top: 50%;
    }

    .theme-card-preview.dark {
        background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
        color: #94A3B8;
    }

    .theme-card-preview.dark::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 8px;
        height: 8px;
        background: #64748B;
        border-radius: 50%;
    }

    .theme-card-preview.dark::after {
        content: '';
        width: 60%;
        height: 3px;
        background: #475569;
        border-radius: 2px;
        top: 50%;
    }

    .theme-card-preview.auto {
        background: linear-gradient(90deg, #F8FAFC 0%, #1E293B 100%);
    }

    .theme-card-preview.auto::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 8px;
        height: 8px;
        background: #94A3B8;
        border-radius: 50%;
    }

    .theme-card-preview.auto::after {
        content: '';
        width: 60%;
        height: 3px;
        background: linear-gradient(90deg, #CBD5E1 0%, #475569 100%);
        border-radius: 2px;
        top: 50%;
    }

    .theme-card-name {
        font-size: .875rem;
        font-weight: 600;
        color: #64748B;
    }

    .theme-card:hover {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .theme-card.is-active {
        border-color: #3B82F6;
        background: #EFF6FF;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .theme-card.is-active::after {
        content: '✓';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        background: #3B82F6;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        font-weight: bold;
    }

    .theme-hint {
        font-size: .75rem;
        color: #94A3B8;
        margin-top: .5rem;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
            opacity: 1;
        }
        50% {
            transform: translateY(-8px);
            opacity: 0.5;
        }
    }

    /* Animation cards preview styling for dark mode */
    .dark #animationCards .theme-card-preview {
        background: #334155 !important;
    }

    .dark #animationCards .theme-card-preview div[style*="background: #F1F5F9"],
    .dark #animationCards .theme-card-preview div[style*="background:#F1F5F9"] {
        background: #64748b !important;
    }

    .dark #animationCards .theme-card-preview div[style*="background: #94A3B8"],
    .dark #animationCards .theme-card-preview div[style*="background:#94A3B8"] {
        background: #64748b !important;
    }

    .dark #animationCards .theme-card-preview div[style*="background: #CBD5E1"],
    .dark #animationCards .theme-card-preview div[style*="background:#CBD5E1"] {
        background: #475569 !important;
    }

    /* Danger card */
    .danger-card {
        background: #ffffff;
        border: 1px solid #FECACA;
        border-radius: 14px;
        padding: 1.5rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    .danger-title {
        font-size: .9375rem;
        font-weight: 700;
        color: #DC2626;
        margin-bottom: 1.25rem;
    }

    .danger-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .danger-label {
        font-size: .875rem;
        font-weight: 600;
        color: #1E293B;
    }

    .danger-desc {
        font-size: .75rem;
        color: #94A3B8;
    }

    .btn-danger {
        background: #FEE2E2;
        color: #DC2626;
        border: 1px solid #FECACA;
        padding: .5rem 1rem;
        border-radius: 8px;
        font-size: .8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s;
    }

    .btn-danger:hover {
        background: #FECACA;
    }

    /* Success alert */
    .alert-success {
        background: #D1FAE5;
        border: 1px solid #6EE7B7;
        color: #065F46;
        padding: .875rem 1rem;
        border-radius: 10px;
        margin-bottom: 1.5rem;
        font-size: .875rem;
    }

    /* ===== DARK MODE OVERRIDES ===== */

    .dark .settings-title {
        color: #f1f5f9;
    }

    .dark .settings-subtitle {
        color: #94a3b8;
    }

    .dark .settings-card {
        background: #1e293b;
        border-color: #334155;
    }

    .dark .settings-card-title {
        color: #f1f5f9;
    }

    .dark .notif-item {
        border-bottom-color: #334155;
    }

    .dark .notif-label {
        color: #e2e8f0;
    }

    .dark .notif-desc {
        color: #64748b;
    }

    .dark .theme-btn {
        border-color: #334155;
        color: #94a3b8;
        background: transparent;
    }

    .dark .theme-btn:hover {
        border-color: #60a5fa;
        color: #93c5fd;
    }

    .dark .theme-btn.is-active {
        border-color: #3b82f6;
        color: #60a5fa;
        background: #1e3a5f;
    }

    .dark .theme-hint {
        color: #64748b;
    }

    .dark .theme-card {
        background: #334155;
        border-color: #475569;
    }

    .dark .theme-card:hover {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }

    .dark .theme-card.is-active {
        background: #1e3a5f;
        border-color: #3b82f6;
    }

    .dark .theme-card-name {
        color: #cbd5e1;
    }

    .dark .appearance-label {
        color: #f1f5f9;
    }

    .dark .danger-card {
        background: #1e293b;
        border-color: #7f1d1d;
    }

    .dark .danger-label {
        color: #e2e8f0;
    }

    .dark .danger-desc {
        color: #64748b;
    }

    .dark .btn-danger {
        background: #450a0a;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    .dark .btn-danger:hover {
        background: #7f1d1d;
    }

    .dark .alert-success {
        background: #064e3b;
        border-color: #065f46;
        color: #6ee7b7;
    }

    /* Dark mode for theme card preview */
    .dark .theme-card-preview.light {
        background: #334155;
        border-color: #475569;
        color: #cbd5e1;
    }

    .dark .theme-card-preview.dark {
        background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
        color: #64748b;
    }

    .dark .theme-card-preview.auto {
        background: linear-gradient(90deg, #334155 0%, #0F172A 100%);
    }

    /* Ensure settings wrap has proper background in dark mode */
    .dark .settings-wrap {
        background-color: transparent;
    }

    /* Toggle track dark mode */
    .dark .toggle-track {
        background: #475569;
    }

    .dark .toggle-track.is-on {
        background: #3B82F6;
    }

    /* News upload section dark mode */
    .dark input[type="text"],
    .dark textarea {
        background: #334155 !important;
        color: #f1f5f9 !important;
        border-color: #475569 !important;
    }

    .dark input[type="text"]:focus,
    .dark textarea:focus {
        border-color: #60a5fa !important;
        outline: none !important;
    }

    .dark input[type="file"] {
        color: #f1f5f9 !important;
    }

    .dark div[style*="border: 2px dashed"] {
        border-color: #475569 !important;
        background: #334155 !important;
    }

    .dark button[type="button"] {
        color: #60a5fa !important;
    }

    .dark #fileName {
        color: #60a5fa !important;
    }

    /* File upload info text */
    .dark div[style*="background: #F8FAFF"] {
        background: #334155 !important;
        border-color: #475569 !important;
    }

    .dark div[style*="background: #F8FAFF"] p {
        color: #cbd5e1 !important;
    }

    .dark div[style*="border-top: 1px solid #E2E8F0"] {
        border-top-color: #475569 !important;
    }

</style>
@endpush

@section('content')
<div class="settings-wrap">

    <div>
        <h1 class="settings-title">Pengaturan</h1>
        <p class="settings-subtitle">Preferensi akun kamu</p>
    </div>

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

    {{-- Notifikasi --}}
    <div class="settings-card">
        <div class="settings-card-title">🔔 Notifikasi</div>
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf @method('PUT')
            @foreach([
                ['news_notif', 'Berita & Info', 'Tips dan berita finansial'],
            ] as [$key, $label, $desc])
            @php $isChecked = Auth::user()->settings[$key] ?? false; @endphp
            <div class="notif-item">
                <div>
                    <div class="notif-label">{{ $label }}</div>
                    <div class="notif-desc">{{ $desc }}</div>
                </div>
                <label class="toggle-wrap">
                    <input type="checkbox" name="{{ $key }}" value="1"
                        {{ $isChecked ? 'checked' : '' }}
                        onchange="this.closest('form').submit()">
                    <span class="toggle-track {{ $isChecked ? 'is-on' : '' }}"
                        onclick="
                            let cb = this.previousElementSibling;
                            cb.checked = !cb.checked;
                            this.classList.toggle('is-on', cb.checked);
                        "></span>
                </label>
            </div>
            @endforeach
        </form>
    </div>

    {{-- Berita & Informasi --}}
    <div class="settings-card">
        <div class="settings-card-title">📰 Berita & Informasi</div>
        
        {{-- Upload Form --}}
        {{--
=================================================================
PATCH index.blade.php — 2 perubahan
Route di web.php Anda: route('settings.update') ✅ sudah cocok
=================================================================

─── PERUBAHAN 1: Form Notifikasi (sekitar baris 566–590) ────────

Ganti seluruh blok <form> notifikasi yang ada dengan ini:
--}}

<form action="{{ route('settings.update') }}" method="POST">
    @csrf @method('PUT')
    {{-- Penanda: form ini untuk notifikasi --}}
    <input type="hidden" name="_form_type" value="notification">

    @foreach([
        ['news_notif',    'Berita & Info',        'Tips dan berita finansial'],
        ['promo_notif',   'Promo & Penawaran',    'Informasi promo eksklusif untuk Anda'],
        ['report_notif',  'Laporan Analisis',     'Notifikasi saat analisis Z-Score selesai'],
        ['email_notif',   'Email Notifikasi',     'Kirim ringkasan aktivitas via email'],
        ['browser_notif', 'Browser Notification', 'Tampilkan notifikasi di browser Anda'],
    ] as [$key, $label, $desc])

    @php $isChecked = Auth::user()->settings[$key] ?? false; @endphp

    <div class="notif-item">
        <div>
            <div class="notif-label">{{ $label }}</div>
            <div class="notif-desc">{{ $desc }}</div>
        </div>
        <label class="toggle-wrap">
            <input type="checkbox" name="{{ $key }}" value="1"
                {{ $isChecked ? 'checked' : '' }}
                onchange="this.closest('form').submit()">
            <span class="toggle-track {{ $isChecked ? 'is-on' : '' }}"
                onclick="
                    let cb = this.previousElementSibling;
                    cb.checked = !cb.checked;
                    this.classList.toggle('is-on', cb.checked);
                "></span>
        </label>
    </div>

    @endforeach
</form>

{{--
─── PERUBAHAN 2: Form Upload Berita (sekitar baris 598–599) ─────

Cari baris:
    <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data" ...>
    @csrf @method('PUT')

Tambahkan tepat SETELAH @csrf @method('PUT'):
--}}

<input type="hidden" name="_form_type" value="news">

{{--
─── PERUBAHAN 3: Daftar Berita (ganti placeholder statis) ───────

Ganti blok "Berita Terbaru" (sekitar baris 697–711) dengan:
--}}

<div style="border-top: 1px solid #E2E8F0; padding-top: 1rem; margin-top: 1rem;">
    <div style="font-size: .875rem; font-weight: 600; color: #1E293B; margin-bottom: 1rem;">
        Berita Terbaru
    </div>

    @forelse($userNews as $item)
    <div style="
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .75rem 0;
        border-bottom: 1px solid #F1F5F9;
    ">
        {{-- Thumbnail --}}
        @if($item->image_path)
            <img src="{{ asset('storage/' . $item->image_path) }}"
                 alt="{{ $item->title }}"
                 style="width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;">
        @else
            <div style="
                width:56px;height:56px;background:#F1F5F9;border-radius:8px;
                flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;
            ">📰</div>
        @endif

        {{-- Konten --}}
        <div style="flex:1;min-width:0;">
            <div style="font-size:.875rem;font-weight:600;color:#1E293B;
                        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                {{ $item->title }}
            </div>
            @if($item->description)
            <div style="font-size:.75rem;color:#94A3B8;margin-top:2px;
                        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                {{ $item->description }}
            </div>
            @endif
            <div style="font-size:.6875rem;color:#CBD5E1;margin-top:4px;">
                {{ $item->created_at->diffForHumans() }}
            </div>
        </div>
    </div>
    @empty
    <div style="
        background:#F8FAFF;padding:1rem;border-radius:8px;
        text-align:center;color:#94A3B8;font-size:.875rem;border:1px solid #E2E8F0;
    ">
        ℹ️ Belum ada berita yang diupload
    </div>
    @endforelse
</div>
    </div>

    {{-- Tampilan --}}
    <div class="settings-card">
        <div class="settings-card-title">🎨 Tampilan</div>

        {{-- Color Mode --}}
        <div class="appearance-section">
            <div class="appearance-label">Color Mode</div>
            <div class="theme-cards" id="colorModeCards">
                @foreach([
                    
                    ['auto', 'Auto', 'auto'],
                    
                ] as [$val, $lbl, $preview])
                <div class="theme-card" data-theme="{{ $val }}" onclick="setTheme('{{ $val }}')">
                    <div class="theme-card-preview {{ $preview }}"></div>
                    <div class="theme-card-name">{{ $lbl }}</div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Background Animation --}}
        <div class="appearance-section">
            <div class="appearance-label">Background Animation</div>
            <div class="theme-cards" id="animationCards">
                @foreach([
                    ['enabled', 'Enabled'],
                    ['auto', 'Auto'],
                    ['disabled', 'Disabled']
                ] as [$val, $lbl])
                <div class="theme-card" data-animation="{{ $val }}" onclick="setAnimation('{{ $val }}')">
                    <div class="theme-card-preview" style="background: #F1F5F9; display: flex; align-items: center; justify-content: center; gap: 6px;">
                        @if($val === 'enabled')
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%; animation: float 3s infinite;"></div>
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%; animation: float 3s 0.3s infinite;"></div>
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%; animation: float 3s 0.6s infinite;"></div>
                        @elseif($val === 'auto')
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%;"></div>
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%;"></div>
                        <div style="width: 6px; height: 6px; background: #94A3B8; border-radius: 50%;"></div>
                        @else
                        <div style="width: 6px; height: 6px; background: #CBD5E1; border-radius: 50%;"></div>
                        <div style="width: 6px; height: 6px; background: #CBD5E1; border-radius: 50%;"></div>
                        <div style="width: 6px; height: 6px; background: #CBD5E1; border-radius: 50%;"></div>
                        @endif
                    </div>
                    <div class="theme-card-name">{{ $lbl }}</div>
                </div>
                @endforeach
            </div>
        </div>

        <p class="theme-hint">Pengaturan tema disimpan otomatis di perangkat ini.</p>
    </div>

    {{-- Zona Berbahaya --}}
    <div class="danger-card">
        <div class="danger-title">⚠️ Zona Berbahaya</div>
        <div class="danger-row">
            <div>
                <div class="danger-label">Hapus Akun</div>
                <div class="danger-desc">Semua data akan dihapus permanen</div>
            </div>
            <button class="btn-danger"
                onclick="if(confirm('Yakin hapus akun? Tindakan ini tidak bisa dibatalkan.')) document.getElementById('delete-form').submit()">
                Hapus Akun
            </button>
        </div>
        <form id="delete-form" action="{{ route('profile.destroy') }}" method="POST" style="display:none">
            @csrf @method('DELETE')
        </form>
    </div>

</div>

@push('scripts')
<script>
    // Update theme cards
    function updateThemeCards(active) {
        document.querySelectorAll('#colorModeCards .theme-card').forEach(card => {
            card.classList.toggle('is-active', card.dataset.theme === active);
        });
    }

    // Update animation cards
    function updateAnimationCards(active) {
        document.querySelectorAll('#animationCards .theme-card').forEach(card => {
            card.classList.toggle('is-active', card.dataset.animation === active);
        });
    }

    // Set theme dengan smooth transition
    function setTheme(value) {
        localStorage.setItem('theme', value);
        updateThemeCards(value);

        // Add transition class for smooth change
        document.documentElement.style.transition = 'background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease';
        
        // Remove existing theme classes
        document.documentElement.classList.remove('dark', 'light');
        
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (value === 'dark') {
            document.documentElement.classList.add('dark');
        } else if (value === 'light') {
            document.documentElement.classList.add('light');
        } else if (value === 'auto') {
            if (prefersDark) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.add('light');
            }
        }

        // Remove transition after complete
        setTimeout(() => {
            document.documentElement.style.transition = '';
        }, 300);
    }

    // Set animation
    function setAnimation(value) {
        localStorage.setItem('animation', value);
        updateAnimationCards(value);
        
        // Apply animation
        const body = document.documentElement;
        if (value === 'enabled') {
            body.style.animation = 'float 3s infinite';
        } else if (value === 'auto') {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (!prefersDark) {
                body.style.animation = 'float 3s infinite';
            } else {
                body.style.animation = 'none';
            }
        } else {
            body.style.animation = 'none';
        }
    }

    // Initialize on load
    document.addEventListener('DOMContentLoaded', function() {
        const currentTheme = localStorage.getItem('theme') || 'auto';
        const currentAnimation = localStorage.getItem('animation') || 'auto';
        
        updateThemeCards(currentTheme);
        updateAnimationCards(currentAnimation);

        // Apply theme
        document.documentElement.classList.remove('dark', 'light');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (currentTheme === 'dark') {
            document.documentElement.classList.add('dark');
        } else if (currentTheme === 'light') {
            document.documentElement.classList.add('light');
        } else if (currentTheme === 'auto') {
            if (prefersDark) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.add('light');
            }
        }

        // Apply animation
        if (currentAnimation === 'enabled') {
            document.documentElement.style.animation = 'float 3s infinite';
        }

        // Listen to OS theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            if (localStorage.getItem('theme') === 'auto') {
                document.documentElement.classList.toggle('dark', e.matches);
            }
        });
    });
</script>
@endpush
@endsection