@extends('layouts.app')

@section('title', 'Dashboard & Konfigurasi Super Admin')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">

    <!-- Header Section -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">Dashboard Super Admin</h1>
            <p class="text-sm text-gray-500">Pusat kendali konfigurasi sistem global dan pemantauan aktivitas pengguna.</p>
        </div>

        <a href="{{ route('superadmin.users.index') }}"
            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg shadow flex items-center gap-2 transition-all self-start md:self-auto">
            <i class="fa-solid fa-users-gear"></i> Kelola 12 Role Akun
        </a>
    </div>

    <!-- Alert Notifikasi -->
    @if (session('success'))
        <div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-800 rounded-r-lg text-sm font-medium shadow-sm">
            <i class="fa-solid fa-circle-check mr-2"></i> {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-800 rounded-r-lg text-sm font-medium shadow-sm">
            <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ session('error') }}
        </div>
    @endif

    <!-- Cards Summary Statistics -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Total Pengguna Terdaftar</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-1">{{ number_format($totalUsers) }}</h3>
                <p class="text-[11px] text-gray-500 mt-0.5">Semua akun lintas 12 role</p>
            </div>
            <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center text-xl">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Total Akun SKPD/UKPD</p>
                <h3 class="text-2xl font-bold text-slate-800 mt-1">{{ number_format($totalSkpd) }}</h3>
                <p class="text-[11px] text-gray-500 mt-0.5">Kepala & Staf Operator</p>
            </div>
            <div class="w-12 h-12 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center text-xl">
                <i class="fa-solid fa-building-columns"></i>
            </div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Status Saklar Fase Utama</p>
                <h3 class="text-lg font-bold {{ ($settings['fase_registrasi'] ?? 'closed') == 'open' ? 'text-emerald-600' : 'text-rose-600' }} mt-1 flex items-center gap-2">
                    <i class="fa-solid fa-circle text-xs"></i> {{ strtoupper($settings['fase_registrasi'] ?? 'closed') }}
                </h3>
                <p class="text-[11px] text-gray-500 mt-0.5">Pengajuan usulan SHS</p>
            </div>
            <div class="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center text-xl">
                <i class="fa-solid fa-toggle-on"></i>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Form Konfigurasi Sistem Global -->
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
            <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2 pb-3 border-b border-gray-100">
                <i class="fa-solid fa-sliders text-amber-500"></i> Form Konfigurasi Sistem Global
            </h3>

            <form action="{{ route('superadmin.settings.update') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Nama Aplikasi / System Heading</label>
                    <input type="text" name="app_name" value="{{ $settings['app_name'] ?? 'E-Harga & E-Budgeting Pemprov BPAD' }}"
                        class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-amber-500 outline-none">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Saklar Fase Registrasi Usulan</label>
                        <select name="fase_registrasi" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-amber-500 outline-none font-semibold">
                            <option value="open" {{ ($settings['fase_registrasi'] ?? '') == 'open' ? 'selected' : '' }}>OPEN (Pengajuan Dibuka)</option>
                            <option value="closed" {{ ($settings['fase_registrasi'] ?? '') == 'closed' ? 'selected' : '' }}>CLOSED (Pengajuan Ditutup)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Tahun Anggaran Aktif</label>
                        <input type="number" name="tahun_anggaran" value="{{ $settings['tahun_anggaran'] ?? (date('Y') + 1) }}"
                            class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-amber-500 outline-none font-bold text-blue-700">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Pengumuman Running Text / Notice Banner</label>
                    <textarea name="announcement" rows="3" placeholder="Pesan pengumuman penting untuk seluruh user..."
                        class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-amber-500 outline-none">{{ $settings['announcement'] ?? '' }}</textarea>
                </div>

                <div class="flex justify-end pt-2">
                    <button type="submit" class="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-semibold text-sm rounded-lg shadow flex items-center gap-2">
                        <i class="fa-solid fa-floppy-disk"></i> Simpan Konfigurasi
                    </button>
                </div>
            </form>
        </div>

        <!-- Log Aktivitas Terakhir -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-sm font-bold text-slate-800 flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
                <span><i class="fa-solid fa-clock-rotate-left text-blue-600 mr-2"></i> Log Aktivitas Terakhir</span>
                <span class="text-[10px] bg-slate-100 text-slate-600 font-bold px-2 py-0.5 rounded">Live</span>
            </h3>

            <div class="space-y-3 max-h-[380px] overflow-y-auto pr-1">
                @forelse ($logs as $log)
                    <div class="p-3 bg-slate-50 border rounded-lg text-xs space-y-1">
                        <div class="flex justify-between items-center text-gray-500 font-mono text-[10px]">
                            <span>{{ $log->created_at->diffForHumans() }}</span>
                            <span class="font-bold text-blue-600">{{ $log->instansi ?? 'Sistem' }}</span>
                        </div>
                        <p class="font-semibold text-slate-800">{{ $log->action }}</p>
                        <p class="text-[11px] text-gray-500 italic">User ID: {{ $log->user_id }}</p>
                    </div>
                @empty
                    <p class="text-xs text-gray-400 text-center py-8">Belum ada catatan log aktivitas.</p>
                @endforelse
            </div>
        </div>
    </div>

</div>
@endsection