@extends('layouts.app')

@section('title', $pageTitle ?? 'Developer Control Center')

@section('content')
<style>
    .dev-root{
        background:
            radial-gradient(900px 320px at 0% 0%, rgba(59,130,246,.12), transparent 60%),
            radial-gradient(700px 260px at 100% 0%, rgba(16,185,129,.10), transparent 55%),
            radial-gradient(800px 340px at 50% 100%, rgba(168,85,247,.10), transparent 60%);
    }
    .dev-panel{
        background: rgba(255,255,255,.76);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(148,163,184,.18);
        box-shadow: 0 16px 36px rgba(15,23,42,.07);
    }
    .dark .dev-panel{
        background: rgba(15,23,42,.52);
        border-color: rgba(148,163,184,.12);
        box-shadow: 0 18px 40px rgba(2,6,23,.22);
    }
    .dev-module{
        border-radius: 22px;
        border: 1px solid rgba(148,163,184,.16);
        background: rgba(255,255,255,.66);
        padding: 1rem;
        transition: .2s ease;
    }
    .dev-module:hover{
        transform: translateY(-2px);
        box-shadow: 0 14px 24px rgba(15,23,42,.06);
        border-color: rgba(59,130,246,.25);
    }
    .dark .dev-module{
        background: rgba(255,255,255,.03);
        border-color: rgba(148,163,184,.10);
    }
    .dev-badge{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        padding:.45rem .8rem;
        border-radius:999px;
        background:rgba(59,130,246,.10);
        color:rgb(37 99 235);
        font-size:11px;
        font-weight:700;
    }
    .dark .dev-badge{
        background:rgba(96,165,250,.14);
        color:rgb(147 197 253);
    }
    .dev-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:14px;
        padding:.75rem 1rem;
        font-size:12px;
        font-weight:700;
        text-decoration:none;
        transition:.2s ease;
    }
    .dev-btn:hover{ transform: translateY(-1px); }
    .dev-btn-primary{ background:#2563eb; color:#fff; }
    .dev-btn-success{ background:#059669; color:#fff; }
    .dev-btn-warning{ background:#f59e0b; color:#111827; }
    .dev-btn-danger{ background:#dc2626; color:#fff; }

    .dev-lookup{
        border-radius:20px;
        border:1px solid rgba(148,163,184,.16);
        background:rgba(255,255,255,.64);
        padding:1rem;
    }
    .dark .dev-lookup{
        background:rgba(255,255,255,.03);
        border-color:rgba(148,163,184,.10);
    }
    .dev-input{
        width:100%;
        height:46px;
        border-radius:14px;
        border:1px solid rgba(148,163,184,.28);
        background:transparent;
        padding:0 14px;
        font-size:14px;
        color:rgb(15 23 42);
        outline:none;
    }
    .dev-input:focus{
        border-color:rgba(59,130,246,.55);
        box-shadow:0 0 0 4px rgba(59,130,246,.10);
    }
    .dark .dev-input{
        color:rgb(248 250 252);
        border-color:rgba(148,163,184,.18);
    }
</style>

<div class="dev-root rounded-[28px] p-4 md:p-6">
    <div class="dev-panel rounded-[28px] p-5 md:p-6">
        <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
            <div>
                <div class="mb-3 flex flex-wrap items-center gap-2">
                    <span class="dev-badge">Developer Only</span>
                    <span class="dev-badge">Full Access</span>
                    <span class="dev-badge">One Page Control</span>
                </div>
                <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
                    Developer Control Center
                </h1>
                <p class="mt-2 max-w-3xl text-sm leading-7 text-slate-600 dark:text-slate-300">
                    Halo {{ $userName }}. Halaman ini dibuat khusus untuk developer agar semua akses inti ada dalam satu halaman:
                    buka modul, edit data, ubah transaksi, hapus data, dan masuk ke semua area tanpa harus keliling dashboard biasa.
                </p>
            </div>

            <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 bg-white/70 px-4 py-3 dark:border-slate-700 dark:bg-white/[0.03]">
                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Akses</div>
                    <div class="mt-1 text-lg font-bold text-slate-900 dark:text-white">Penuh</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white/70 px-4 py-3 dark:border-slate-700 dark:bg-white/[0.03]">
                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Mode</div>
                    <div class="mt-1 text-lg font-bold text-slate-900 dark:text-white">1 Halaman</div>
                </div>
                <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 dark:border-rose-500/20 dark:bg-rose-500/10">
                    <div class="text-xs font-semibold uppercase tracking-wide text-rose-600 dark:text-rose-300">Status</div>
                    <div class="mt-1 text-lg font-bold text-rose-700 dark:text-rose-200">Istimewa</div>
                </div>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
            @foreach($quickLookup as $key => $lookup)
                <form method="GET" action="{{ $lookup['base_url'] }}" class="dev-lookup">
                    <div class="mb-2 text-sm font-bold text-slate-800 dark:text-white/90">{{ $lookup['title'] }}</div>
                    <div class="text-xs text-slate-500 dark:text-slate-400">Masuk cepat ke halaman data yang ingin diedit atau dihapus.</div>
                    <div class="mt-3 flex gap-2">
                        <input
                            type="text"
                            name="{{ $lookup['param'] }}"
                            class="dev-input"
                            placeholder="{{ $lookup['placeholder'] }}"
                        >
                        <button class="dev-btn dev-btn-primary min-w-[92px]" type="submit">Buka</button>
                    </div>
                </form>
            @endforeach
        </div>

        <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
            @foreach($dangerActions as $action)
                <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-500/20 dark:bg-amber-500/10">
                    <div class="text-sm font-bold text-slate-900 dark:text-white">{{ $action['title'] }}</div>
                    <div class="mt-1 text-xs leading-6 text-slate-600 dark:text-slate-300">{{ $action['description'] }}</div>
                    <a href="{{ $action['url'] }}" class="dev-btn dev-btn-warning mt-4">{{ $action['button'] }}</a>
                </div>
            @endforeach
        </div>

        <div class="mt-7">
            <div class="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-900 dark:text-white">Semua Akses Developer</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        Fokus penuh ke edit, ubah, hapus, dan buka semua modul penting dari satu tempat.
                    </p>
                </div>
                <span class="dev-badge">{{ count($modules) }} blok akses</span>
            </div>

            <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
                @foreach($modules as $module)
                    <div class="dev-module">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ $module['title'] }}</h3>
                                <p class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400">
                                    {{ $module['description'] }}
                                </p>
                            </div>
                            <span class="dev-badge">{{ strtoupper($module['icon']) }}</span>
                        </div>

                        <div class="mt-4 grid grid-cols-2 gap-2">
                            @foreach($module['items'] as $item)
                                <a
                                    href="{{ $item['url'] }}"
                                    class="dev-btn dev-btn-{{ $item['style'] }}"
                                >
                                    {{ $item['label'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="mt-7 rounded-2xl border border-slate-200 bg-white/70 p-4 dark:border-slate-700 dark:bg-white/[0.03]">
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 class="text-base font-bold text-slate-900 dark:text-white">Catatan Implementasi</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        Halaman ini memang dirancang sebagai pusat kontrol developer, bukan dashboard statistik.
                    </p>
                </div>
                <span class="dev-badge">Admin Area</span>
            </div>

            <ul class="mt-4 space-y-2 text-sm leading-7 text-slate-600 dark:text-slate-300">
                <li>• Pakai route khusus dan middleware role developer / superadmin.</li>
                <li>• Semua tombol diarahkan ke halaman sumber agar developer bisa langsung edit / ubah / hapus data.</li>
                <li>• Modul sengaja dibuat 1 halaman supaya tidak perlu buka sidebar satu-satu.</li>
                <li>• Bagian penghasilan dan statistik berat dihilangkan agar fokus ke kontrol penuh.</li>
            </ul>
        </div>
    </div>
</div>
@endsection