@extends('layouts.admin')

@section('title', 'Pengaturan Tema')

@section('content')
<div class="max-w-6xl mx-auto space-y-8 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 p-6 rounded-xl shadow">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">🎨 Daftar Tema</h1>
        <a href="{{ route('admin.theme-setting.create') }}"
           class="inline-flex items-center gap-2 px-5 py-2 bg-[color:var(--primary-color)] text-white rounded-lg shadow hover:scale-105 transition">
            <i class="fas fa-plus"></i> Tambah Tema
        </a>
    </div>

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: '{{ session('success') }}',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
            });
        </script>
    @endif

    <div class="overflow-x-auto">
        <table class="w-full text-sm border dark:border-gray-700">
            <thead class="bg-gray-100 dark:bg-gray-900">
                <tr class="text-left">
                    <th class="px-4 py-2">ID - Nama</th>
                    <th class="px-4 py-2">Warna Utama</th>
                    <th class="px-4 py-2">H1</th>
                    <th class="px-4 py-2">H2</th>
                    <th class="px-4 py-2">Paragraf</th>
                    <th class="px-4 py-2">Mode</th>
                    <th class="px-4 py-2">Gambar</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2 text-right">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($themes as $theme)
                    <tr class="border-t dark:border-gray-700">
                        <td class="px-4 py-2 font-semibold">#{{ $theme->id }} - {{ $theme->name }}</td>
                        <td class="px-4 py-2">
                            <span class="inline-block w-5 h-5 rounded-full border mr-1" style="background: {{ $theme->primary_color }}"></span>
                            {{ $theme->primary_color }}
                        </td>
                        <td class="px-4 py-2">
                            <span class="inline-block w-5 h-5 rounded-full border" style="background: {{ $theme->h1_color }}"></span>
                        </td>
                        <td class="px-4 py-2">
                            <span class="inline-block w-5 h-5 rounded-full border" style="background: {{ $theme->h2_color }}"></span>
                        </td>
                        <td class="px-4 py-2">
                            <span class="inline-block w-5 h-5 rounded-full border" style="background: {{ $theme->p_color }}"></span>
                        </td>
                        <td class="px-4 py-2 capitalize">{{ $theme->default_mode }}</td>
                        <td class="px-4 py-2">
                            @if($theme->main_bg_image)
                                <img src="{{ asset('storage/' . $theme->main_bg_image) }}" class="w-12 h-12 object-cover rounded" alt="bg">
                            @endif
                        </td>
                        <td class="px-4 py-2">
                            @if($theme->aktif)
                                <span class="text-green-600 dark:text-green-400 font-bold">Aktif</span>
                            @else
                                <form action="{{ route('admin.theme-setting.update', $theme->id) }}" method="POST" onsubmit="return window.confirmThemeActivation(this)">
                                    @csrf @method('PUT')
                                    <input type="hidden" name="aktif" value="1">
                                    <input type="hidden" name="name" value="{{ $theme->name }}">
                                    <input type="hidden" name="primary_color" value="{{ $theme->primary_color }}">
                                    <input type="hidden" name="h1_color" value="{{ $theme->h1_color }}">
                                    <input type="hidden" name="h2_color" value="{{ $theme->h2_color }}">
                                    <input type="hidden" name="p_color" value="{{ $theme->p_color }}">
                                    <input type="hidden" name="default_mode" value="{{ $theme->default_mode }}">
                                    <button type="submit" class="inline-flex items-center gap-2 px-3 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-700 dark:text-yellow-200 font-semibold text-sm rounded hover:brightness-110 transition">
                                        <i class="fas fa-magic"></i> Aktifkan
                                    </button>
                                </form>
                            @endif
                        </td>
                        <td class="px-4 py-2 text-right space-x-2">
                            <a href="{{ route('admin.theme-setting.edit', $theme->id) }}" class="text-blue-600 dark:text-blue-400 hover:underline">Edit</a>
                            <button type="button" onclick="confirmDeleteTheme(this)" data-form-id="delete-form-{{ $theme->id }}"
                                class="text-red-600 dark:text-red-400 hover:underline text-sm">
                                Hapus
                            </button>
                            <form id="delete-form-{{ $theme->id }}" action="{{ route('admin.theme-setting.destroy', $theme->id) }}" method="POST" class="hidden">
                                @csrf @method('DELETE')
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Live Preview Section --}}
    <div class="mt-12 p-6 rounded-xl border dark:border-gray-700 bg-gray-50 dark:bg-gray-900" style="@if($active && $active->main_bg_image) background-image: url('{{ asset('storage/' . $active->main_bg_image) }}'); background-size: cover; background-position: center; @endif">
        <h2 class="text-xl font-semibold mb-4 bg-white/60 dark:bg-gray-800/70 px-4 py-2 rounded shadow inline-block">🧪 Preview Tema Aktif</h2>
        @php $active = $themes->firstWhere('aktif', 1); @endphp
        @if($active)
            <div class="space-y-4 bg-white/70 dark:bg-gray-800/70 p-6 rounded-xl shadow" style="--primary-color: {{ $active->primary_color }}; --h1-color: {{ $active->h1_color }}; --h2-color: {{ $active->h2_color }}; --p-color: {{ $active->p_color }}">
                <h1 class="text-3xl font-bold" style="color: var(--h1-color)">Contoh Judul H1</h1>
                <h2 class="text-xl font-semibold" style="color: var(--h2-color)">Contoh Subjudul H2</h2>
                <p class="text-base leading-relaxed" style="color: var(--p-color)">
                    Ini adalah teks paragraf yang mengikuti tema warna aktif. Warna, latar belakang, dan gaya teks akan menyesuaikan secara otomatis.
                </p>
                <button class="px-4 py-2 text-white rounded shadow" style="background-color: var(--primary-color)">Contoh Tombol</button>
            </div>
        @else
            <p class="text-gray-500 dark:text-gray-400">Belum ada tema aktif untuk ditampilkan.</p>
        @endif
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmThemeActivation(form) {
        const themeName = form.querySelector('input[name="name"]').value || 'tema ini';
        Swal.fire({
            title: 'Aktifkan Tema?',
            text: `Tema "${themeName}" akan diterapkan ke frontend.`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Aktifkan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
        return false;
    }

    function confirmDeleteTheme(button) {
        const formId = button.getAttribute('data-form-id');
        const form = document.getElementById(formId);
        Swal.fire({
            title: 'Yakin ingin menghapus tema ini?',
            text: "Tindakan ini tidak dapat dibatalkan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e3342f',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    }
</script>
@endsection