@extends('layouts.app')

@section('title', 'Admin Panel — Chess Portfolio CRUD')

@section('content')
    <div class="min-h-screen bg-zinc-100 text-zinc-950 pb-16">
        <!-- Admin Top Header -->
        <header class="sticky top-0 z-40 bg-[#09090b] text-white border-b border-zinc-800">
            <div class="max-w-7xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <span class="w-9 h-9 bg-white text-zinc-950 flex items-center justify-center">
                        <x-chess-piece piece="king" class="w-5 h-5" />
                    </span>
                    <div>
                        <p class="font-mono text-[10px] uppercase tracking-[0.22em] text-zinc-400">COMMAND BOARD // CRUD</p>
                        <h1 class="font-display text-base sm:text-lg font-bold uppercase tracking-tight leading-none">
                            {{ $profile?->nama ?? auth()->user()->name }}
                        </h1>
                    </div>
                </div>

                <div class="flex items-center gap-2.5">
                    <a
                        href="{{ route('portfolio.index') }}"
                        class="inline-flex items-center gap-2 px-3.5 py-2 border border-zinc-700 hover:border-white font-mono text-[11px] uppercase tracking-wider text-zinc-200 hover:text-white transition"
                    >
                        <i class="fas fa-external-link-alt text-[10px]"></i>
                        <span class="hidden sm:inline">View Site</span>
                    </a>

                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 px-3.5 py-2 bg-white hover:bg-zinc-200 text-zinc-950 font-mono text-[11px] font-bold uppercase tracking-wider transition"
                        >
                            <i class="fas fa-sign-out-alt text-[10px]"></i>
                            <span>Logout</span>
                        </button>
                    </form>
                </div>
            </div>
        </header>

        <div class="max-w-7xl mx-auto px-5 sm:px-8 pt-8">
            <!-- Flash & Validation Alerts -->
            @if (session('admin_success'))
                <div class="mb-6 border-2 border-zinc-950 bg-zinc-950 text-white px-5 py-3.5 font-mono text-xs flex items-center justify-between gap-4">
                    <span class="inline-flex items-center gap-2.5">
                        <i class="fas fa-check"></i>
                        <span>{{ session('admin_success') }}</span>
                    </span>
                    <button type="button" onclick="this.parentElement.remove()" class="text-zinc-400 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-6 border-2 border-zinc-950 bg-white text-zinc-950 px-5 py-4 font-mono text-xs space-y-1">
                    <p class="font-bold uppercase tracking-wider mb-1">Please review the following errors:</p>
                    @foreach ($errors->all() as $error)
                        <p>&bull; {{ $error }}</p>
                    @endforeach
                </div>
            @endif

            <!-- Quick Telemetry Overview -->
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-8">
                @php
                    $stats = [
                        ['label' => 'Education', 'count' => $educations->count(), 'tab' => 'educations'],
                        ['label' => 'Experience', 'count' => $experiences->count(), 'tab' => 'experiences'],
                        ['label' => 'Skills', 'count' => $skills->count(), 'tab' => 'skills'],
                        ['label' => 'Portfolios', 'count' => $portfolios->count(), 'tab' => 'portfolios'],
                        ['label' => 'Socials', 'count' => $socialMedias->count(), 'tab' => 'socials'],
                        ['label' => 'Inbox / Notes', 'count' => $contactMessages->count() + $comments->count(), 'tab' => 'inbox'],
                    ];
                @endphp
                @foreach ($stats as $stat)
                    <button
                        type="button"
                        data-admin-tab-jump="{{ $stat['tab'] }}"
                        class="text-left bg-white border border-zinc-200 hover:border-zinc-950 p-4 transition"
                    >
                        <span class="block font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-400">{{ $stat['label'] }}</span>
                        <span class="font-display text-2xl font-bold text-zinc-950 mt-1 block">{{ str_pad((string) $stat['count'], 2, '0', STR_PAD_LEFT) }}</span>
                    </button>
                @endforeach
            </div>

            <!-- Section Tabs -->
            <div class="flex flex-wrap gap-1.5 border-b-2 border-zinc-950 mb-8" role="tablist">
                @php
                    $tabs = [
                        'profile' => 'Profile',
                        'educations' => 'Education',
                        'experiences' => 'Experience',
                        'skills' => 'Skills & Chess',
                        'portfolios' => 'Projects / Certs',
                        'socials' => 'Social Media',
                        'inbox' => 'Inbox & Comments',
                    ];
                @endphp
                @foreach ($tabs as $key => $label)
                    <button
                        type="button"
                        data-admin-tab="{{ $key }}"
                        class="admin-tab-btn px-4 py-2.5 font-mono text-xs uppercase tracking-wider transition {{ $loop->first ? 'bg-zinc-950 text-white font-bold' : 'bg-white text-zinc-600 hover:text-zinc-950 border border-b-0 border-zinc-200' }}"
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            <!-- =========================================================
                 TAB 1: PROFILE
                 ========================================================= -->
            <section data-admin-panel="profile" class="admin-panel bg-white border-2 border-zinc-950 p-6 sm:p-8">
                <div class="flex items-center justify-between border-b border-zinc-200 pb-4 mb-6">
                    <div>
                        <h2 class="font-display text-2xl font-bold uppercase tracking-tight">Profile &amp; Main Details</h2>
                        <p class="font-mono text-xs text-zinc-500 mt-0.5">Updating fields here immediately refreshes Hero, About, ID Card, CV, and Footer.</p>
                    </div>
                    <x-chess-piece piece="king" class="w-6 h-6 text-zinc-950" />
                </div>

                <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Full Name *</label>
                            <input type="text" name="nama" value="{{ old('nama', $profile?->nama) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Monogram *</label>
                            <input type="text" name="monogram" value="{{ old('monogram', $profile?->monogram ?? 'AYA') }}" required maxlength="10" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Player Code *</label>
                            <input type="text" name="player_code" value="{{ old('player_code', $profile?->player_code ?? 'PLAYER_001') }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                    </div>

                    <div>
                        <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Role / Position *</label>
                        <input type="text" name="posisi" value="{{ old('posisi', $profile?->posisi) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Location *</label>
                            <input type="text" name="lokasi" value="{{ old('lokasi', $profile?->lokasi) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Work Status *</label>
                            <input type="text" name="status_kerja" value="{{ old('status_kerja', $profile?->status_kerja) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Availability *</label>
                            <input type="text" name="ketersediaan" value="{{ old('ketersediaan', $profile?->ketersediaan) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Semester / Rank *</label>
                            <input type="text" name="semester_label" value="{{ old('semester_label', $profile?->semester_label) }}" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Primary Focus</label>
                            <input type="text" name="fokus_utama" value="{{ old('fokus_utama', $profile?->fokus_utama) }}" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Email</label>
                            <input type="email" name="email" value="{{ old('email', $profile?->email) }}" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">GitHub Username</label>
                            <input type="text" name="github_username" value="{{ old('github_username', $profile?->github_username) }}" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Footer Motto</label>
                            <input type="text" name="motto" value="{{ old('motto', $profile?->motto) }}" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                        <div>
                            <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">External CV Link (use # for built-in CV modal)</label>
                            <input type="text" name="cv_link" value="{{ old('cv_link', $profile?->cv_link ?? '#') }}" class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">
                        </div>
                    </div>

                    <div>
                        <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Profile Bio / Summary *</label>
                        <textarea name="deskripsi" rows="3" required class="w-full px-3.5 py-2.5 border border-zinc-300 text-sm focus:outline-none focus:border-zinc-950">{{ old('deskripsi', $profile?->deskripsi) }}</textarea>
                    </div>

                    <div>
                        <label class="block font-mono text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1">Upload New Profile Photo (optional)</label>
                        <input type="file" name="foto_profil_file" accept="image/*" class="block w-full text-xs font-mono border border-dashed border-zinc-400 p-3 bg-zinc-50">
                        @if (filled($profile?->foto_profil))
                            <p class="font-mono text-[11px] text-zinc-500 mt-1">Current photo: {{ $profile->foto_profil }}</p>
                        @endif
                    </div>

                    <button type="submit" class="px-6 py-3 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-widest transition">
                        Save Profile Changes
                    </button>
                </form>
            </section>

            <!-- =========================================================
                 TAB 2: EDUCATIONS
                 ========================================================= -->
            <section data-admin-panel="educations" class="admin-panel hidden space-y-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-4">Add Education History</h2>
                    <form action="{{ route('admin.educations.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @csrf
                        <input type="text" name="nama_institusi" required placeholder="Institution Name *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="jurusan" required placeholder="Major / Program *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="jenjang" placeholder="Degree / Level (e.g. Undergraduate S1)" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="lokasi" placeholder="Location" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="tahun" required placeholder="Display Period (e.g. 2024 - Present) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="number" name="tahun_mulai" required value="2024" placeholder="Start Year (number) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <textarea name="deskripsi" rows="2" placeholder="Short description" class="md:col-span-2 px-3.5 py-2.5 border border-zinc-300 text-sm"></textarea>
                        <div class="flex items-end gap-3">
                            <input type="number" name="urutan" value="0" placeholder="Order" class="w-24 px-3 py-2.5 border border-zinc-300 text-sm">
                            <button type="submit" class="flex-1 py-2.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-wider">Add</button>
                        </div>
                    </form>
                </div>

                <div class="space-y-4">
                    @foreach ($educations as $edu)
                        <div class="bg-white border border-zinc-300 p-5">
                            <form action="{{ route('admin.educations.update', $edu) }}" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                @csrf
                                @method('PUT')
                                <input type="text" name="nama_institusi" value="{{ $edu->nama_institusi }}" required class="px-3 py-2 border border-zinc-300 text-sm font-semibold">
                                <input type="text" name="jurusan" value="{{ $edu->jurusan }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="jenjang" value="{{ $edu->jenjang }}" placeholder="Degree / Level" class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="lokasi" value="{{ $edu->lokasi }}" placeholder="Location" class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="tahun" value="{{ $edu->tahun }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="number" name="tahun_mulai" value="{{ $edu->tahun_mulai }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <textarea name="deskripsi" rows="2" class="md:col-span-2 px-3 py-2 border border-zinc-300 text-sm">{{ $edu->deskripsi }}</textarea>
                                <div class="flex items-end gap-2">
                                    <input type="number" name="urutan" value="{{ $edu->urutan }}" class="w-20 px-3 py-2 border border-zinc-300 text-sm">
                                    <button type="submit" class="px-4 py-2 bg-zinc-950 text-white font-mono text-[11px] font-bold uppercase">Save</button>
                                </div>
                            </form>
                            <form action="{{ route('admin.educations.destroy', $edu) }}" method="POST" onsubmit="return confirm('Delete this education record?')" class="mt-3 text-right">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="font-mono text-[11px] uppercase tracking-wider text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </section>

            <!-- =========================================================
                 TAB 3: EXPERIENCES
                 ========================================================= -->
            <section data-admin-panel="experiences" class="admin-panel hidden space-y-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-1">Add Experience (Work / Committee / Organization)</h2>
                    <p class="font-mono text-xs text-zinc-500 mb-4">Add work internships, event committees, or student organization leadership—each updates the Chronicle Timeline and printable CV automatically.</p>
                    <form action="{{ route('admin.experiences.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @csrf
                        <input type="text" name="peran" required placeholder="Role / Position *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="nama_organisasi" required placeholder="Company / Committee / Organization *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <select name="kategori" required class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            @foreach ($experienceCategories as $cat)
                                <option value="{{ $cat }}">{{ $cat }}</option>
                            @endforeach
                        </select>
                        <input type="text" name="tahun" required placeholder="Period (e.g. 2025 - 2026) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="number" name="tahun_mulai" required value="2026" placeholder="Start Year *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <select name="bidak_catur" class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            @foreach ($chessPieces as $piece)
                                <option value="{{ $piece }}">{{ ucfirst($piece) }}</option>
                            @endforeach
                        </select>
                        <textarea name="deskripsi" rows="2" placeholder="Role description & responsibilities" class="md:col-span-2 px-3.5 py-2.5 border border-zinc-300 text-sm"></textarea>
                        <textarea name="catatan_narasi" rows="2" placeholder="Timeline narrative highlight" class="px-3.5 py-2.5 border border-zinc-300 text-sm"></textarea>
                        <div class="md:col-span-3 flex items-center justify-end gap-3">
                            <input type="number" name="urutan" value="0" placeholder="Order" class="w-24 px-3 py-2.5 border border-zinc-300 text-sm">
                            <button type="submit" class="px-6 py-2.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-wider">Add Experience</button>
                        </div>
                    </form>
                </div>

                <div class="space-y-4">
                    @foreach ($experiences as $exp)
                        <div class="bg-white border border-zinc-300 p-5">
                            <form action="{{ route('admin.experiences.update', $exp) }}" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                @csrf
                                @method('PUT')
                                <input type="text" name="peran" value="{{ $exp->peran }}" required class="px-3 py-2 border border-zinc-300 text-sm font-semibold">
                                <input type="text" name="nama_organisasi" value="{{ $exp->nama_organisasi }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <select name="kategori" required class="px-3 py-2 border border-zinc-300 text-sm bg-white">
                                    @foreach ($experienceCategories as $cat)
                                        <option value="{{ $cat }}" @selected(strcasecmp((string) $exp->kategori, $cat) === 0)>{{ $cat }}</option>
                                    @endforeach
                                </select>
                                <input type="text" name="tahun" value="{{ $exp->tahun }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="number" name="tahun_mulai" value="{{ $exp->tahun_mulai }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <select name="bidak_catur" class="px-3 py-2 border border-zinc-300 text-sm bg-white">
                                    @foreach ($chessPieces as $piece)
                                        <option value="{{ $piece }}" @selected($exp->bidak_catur === $piece)>{{ ucfirst($piece) }}</option>
                                    @endforeach
                                </select>
                                <textarea name="deskripsi" rows="2" class="md:col-span-2 px-3 py-2 border border-zinc-300 text-sm">{{ $exp->deskripsi }}</textarea>
                                <textarea name="catatan_narasi" rows="2" class="px-3 py-2 border border-zinc-300 text-sm">{{ $exp->catatan_narasi }}</textarea>
                                <div class="md:col-span-3 flex items-center justify-end gap-2">
                                    <input type="number" name="urutan" value="{{ $exp->urutan }}" class="w-20 px-3 py-2 border border-zinc-300 text-sm">
                                    <button type="submit" class="px-4 py-2 bg-zinc-950 text-white font-mono text-[11px] font-bold uppercase">Save</button>
                                </div>
                            </form>
                            <form action="{{ route('admin.experiences.destroy', $exp) }}" method="POST" onsubmit="return confirm('Delete this experience record?')" class="mt-2 text-right">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="font-mono text-[11px] uppercase tracking-wider text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </section>

            <!-- =========================================================
                 TAB 4: SKILLS & CHESS PIECES
                 ========================================================= -->
            <section data-admin-panel="skills" class="admin-panel hidden space-y-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-1">Add Skill / Chess Piece</h2>
                    <p class="font-mono text-xs text-zinc-500 mb-4">Skills in category <strong>technical</strong> appear on the Interactive Chessboard; category <strong>pillar</strong> appears as strategic pillar cards below the board.</p>
                    <form action="{{ route('admin.skills.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        @csrf
                        <input type="text" name="nama_skill" required placeholder="Skill Name (e.g. PHP 8) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <select name="kategori" class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            <option value="technical">Technical (Chessboard)</option>
                            <option value="pillar">Pillar (Strategy Card)</option>
                        </select>
                        <input type="text" name="kode_notasi" required value="e4" placeholder="Chess Notation (e4 / Nf3) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <select name="bidak_catur" class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            @foreach ($chessPieces as $piece)
                                <option value="{{ $piece }}">{{ ucfirst($piece) }}</option>
                            @endforeach
                        </select>
                        <input type="number" name="tingkat_kemahiran" min="0" max="100" value="85" required placeholder="Proficiency (0-100) *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="deskripsi" placeholder="Short skill description" class="md:col-span-2 px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <div class="flex items-center gap-2">
                            <input type="number" name="urutan" value="0" class="w-20 px-3 py-2.5 border border-zinc-300 text-sm">
                            <button type="submit" class="flex-1 py-2.5 bg-zinc-950 text-white font-mono text-xs font-bold uppercase">Add</button>
                        </div>
                    </form>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach ($skills as $skill)
                        <div class="bg-white border border-zinc-300 p-5">
                            <form action="{{ route('admin.skills.update', $skill) }}" method="POST" class="space-y-3">
                                @csrf
                                @method('PUT')
                                <div class="flex items-center gap-3">
                                    <span class="w-9 h-9 bg-zinc-950 text-white flex items-center justify-center shrink-0">
                                        <x-chess-piece :piece="$skill->bidak_catur" class="w-5 h-5" />
                                    </span>
                                    <input type="text" name="nama_skill" value="{{ $skill->nama_skill }}" required class="flex-1 px-3 py-2 border border-zinc-300 text-sm font-bold">
                                </div>
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                    <select name="kategori" class="px-2.5 py-2 border border-zinc-300 text-xs bg-white">
                                        <option value="technical" @selected($skill->kategori === 'technical')>Technical</option>
                                        <option value="pillar" @selected($skill->kategori === 'pillar')>Pillar</option>
                                    </select>
                                    <select name="bidak_catur" class="px-2.5 py-2 border border-zinc-300 text-xs bg-white">
                                        @foreach ($chessPieces as $piece)
                                            <option value="{{ $piece }}" @selected($skill->bidak_catur === $piece)>{{ ucfirst($piece) }}</option>
                                        @endforeach
                                    </select>
                                    <input type="text" name="kode_notasi" value="{{ $skill->kode_notasi }}" required class="px-2.5 py-2 border border-zinc-300 text-xs font-mono">
                                    <input type="number" name="tingkat_kemahiran" value="{{ $skill->tingkat_kemahiran }}" min="0" max="100" required class="px-2.5 py-2 border border-zinc-300 text-xs font-mono">
                                </div>
                                <input type="text" name="deskripsi" value="{{ $skill->deskripsi }}" placeholder="Description" class="w-full px-3 py-2 border border-zinc-300 text-xs">
                                <div class="flex items-center justify-between pt-1">
                                    <div class="flex items-center gap-2">
                                        <span class="font-mono text-[10px] text-zinc-400">ORDER:</span>
                                        <input type="number" name="urutan" value="{{ $skill->urutan }}" class="w-16 px-2 py-1 border border-zinc-300 text-xs">
                                    </div>
                                    <button type="submit" class="px-4 py-2 bg-zinc-950 text-white font-mono text-[11px] font-bold uppercase">Save</button>
                                </div>
                            </form>
                            <form action="{{ route('admin.skills.destroy', $skill) }}" method="POST" onsubmit="return confirm('Delete this skill?')" class="mt-2 text-right">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="font-mono text-[11px] uppercase text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </section>

            <!-- =========================================================
                 TAB 5: PORTFOLIOS (PROJECTS, CERTIFICATES, AWARDS)
                 ========================================================= -->
            <section data-admin-panel="portfolios" class="admin-panel hidden space-y-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-4">Add Project / Certificate / Award</h2>
                    <form action="{{ route('admin.portfolios.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @csrf
                        <select name="kategori" class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            <option value="project">Project</option>
                            <option value="certificate">Certificate</option>
                            <option value="award">Award / Achievement</option>
                        </select>
                        <input type="text" name="judul" required placeholder="Title / Certificate Name *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="sub_judul" placeholder="Subtitle / Role" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="penyelenggara" placeholder="Issuer / Stack Summary" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="tahun" value="2026" required placeholder="Year *" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <select name="bidak_catur" class="px-3.5 py-2.5 border border-zinc-300 text-sm bg-white">
                            @foreach ($chessPieces as $piece)
                                <option value="{{ $piece }}">{{ ucfirst($piece) }}</option>
                            @endforeach
                        </select>
                        <input type="text" name="tech_stack_input" placeholder="Tags (comma-separated: Laravel, MySQL, Tailwind)" class="md:col-span-2 px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="link_detail" value="#" placeholder="Detail Link / Demo URL" class="px-3.5 py-2.5 border border-zinc-300 text-sm">
                        <textarea name="deskripsi" rows="2" placeholder="Description" class="md:col-span-2 px-3.5 py-2.5 border border-zinc-300 text-sm"></textarea>
                        <div class="space-y-2">
                            <input type="file" name="gambar_file" accept="image/*" class="block w-full text-xs font-mono border border-dashed border-zinc-400 p-2 bg-zinc-50">
                            <div class="flex items-center justify-between gap-2">
                                <label class="inline-flex items-center gap-2 text-xs font-mono">
                                    <input type="checkbox" name="is_featured" value="1" checked class="accent-zinc-950">
                                    <span>Featured</span>
                                </label>
                                <button type="submit" class="px-5 py-2 bg-zinc-950 text-white font-mono text-xs font-bold uppercase">Add Item</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="space-y-4">
                    @foreach ($portfolios as $port)
                        <div class="bg-white border border-zinc-300 p-5">
                            <form action="{{ route('admin.portfolios.update', $port) }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                @csrf
                                @method('PUT')
                                <select name="kategori" class="px-3 py-2 border border-zinc-300 text-sm bg-white">
                                    <option value="project" @selected($port->kategori === 'project')>Project</option>
                                    <option value="certificate" @selected($port->kategori === 'certificate')>Certificate</option>
                                    <option value="award" @selected($port->kategori === 'award')>Award</option>
                                </select>
                                <input type="text" name="judul" value="{{ $port->judul }}" required class="px-3 py-2 border border-zinc-300 text-sm font-bold">
                                <input type="text" name="sub_judul" value="{{ $port->sub_judul }}" placeholder="Subtitle" class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="penyelenggara" value="{{ $port->penyelenggara }}" placeholder="Issuer / Stack" class="px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="tahun" value="{{ $port->tahun }}" required class="px-3 py-2 border border-zinc-300 text-sm">
                                <select name="bidak_catur" class="px-3 py-2 border border-zinc-300 text-sm bg-white">
                                    @foreach ($chessPieces as $piece)
                                        <option value="{{ $piece }}" @selected($port->bidak_catur === $piece)>{{ ucfirst($piece) }}</option>
                                    @endforeach
                                </select>
                                <input type="text" name="tech_stack_input" value="{{ is_array($port->tech_stack) ? implode(', ', $port->tech_stack) : '' }}" placeholder="Tags (comma-separated)" class="md:col-span-2 px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="link_detail" value="{{ $port->link_detail }}" placeholder="Detail link" class="px-3 py-2 border border-zinc-300 text-sm">
                                <textarea name="deskripsi" rows="2" class="md:col-span-2 px-3 py-2 border border-zinc-300 text-sm">{{ $port->deskripsi }}</textarea>
                                <div class="space-y-2">
                                    <input type="text" name="gambar" value="{{ $port->gambar }}" placeholder="Image path" class="w-full px-3 py-1.5 border border-zinc-300 text-xs font-mono">
                                    <input type="file" name="gambar_file" accept="image/*" class="block w-full text-[11px] font-mono">
                                    <div class="flex items-center justify-between pt-1">
                                        <label class="inline-flex items-center gap-1.5 text-xs font-mono">
                                            <input type="checkbox" name="is_featured" value="1" @checked($port->is_featured) class="accent-zinc-950">
                                            <span>Featured</span>
                                        </label>
                                        <input type="number" name="urutan" value="{{ $port->urutan }}" class="w-16 px-2 py-1 border border-zinc-300 text-xs">
                                        <button type="submit" class="px-4 py-2 bg-zinc-950 text-white font-mono text-[11px] font-bold uppercase">Save</button>
                                    </div>
                                </div>
                            </form>
                            <form action="{{ route('admin.portfolios.destroy', $port) }}" method="POST" onsubmit="return confirm('Delete this portfolio item?')" class="mt-2 text-right">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="font-mono text-[11px] uppercase text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </section>

            <!-- =========================================================
                 TAB 6: SOCIAL MEDIAS
                 ========================================================= -->
            <section data-admin-panel="socials" class="admin-panel hidden space-y-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-4">Add Social Media / Contact Link</h2>
                    <form action="{{ route('admin.social-medias.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-5 gap-3">
                        @csrf
                        <input type="text" name="nama_platform" required placeholder="Platform (GitHub) *" class="px-3 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="url" required placeholder="URL (https://...) *" class="md:col-span-2 px-3 py-2.5 border border-zinc-300 text-sm">
                        <input type="text" name="username" placeholder="Label / @username" class="px-3 py-2.5 border border-zinc-300 text-sm">
                        <div class="flex gap-2">
                            <input type="text" name="icon_class" value="fab fa-github" placeholder="FA Icon" class="w-full px-3 py-2.5 border border-zinc-300 text-xs font-mono">
                            <button type="submit" class="px-4 py-2.5 bg-zinc-950 text-white font-mono text-xs font-bold uppercase">Add</button>
                        </div>
                    </form>
                </div>

                <div class="space-y-3">
                    @foreach ($socialMedias as $soc)
                        <div class="bg-white border border-zinc-300 p-4 flex flex-col md:flex-row md:items-center gap-3">
                            <form action="{{ route('admin.social-medias.update', $soc) }}" method="POST" class="flex-1 grid grid-cols-1 sm:grid-cols-5 gap-2.5 items-center">
                                @csrf
                                @method('PUT')
                                <input type="text" name="nama_platform" value="{{ $soc->nama_platform }}" required class="px-3 py-2 border border-zinc-300 text-sm font-semibold">
                                <input type="text" name="url" value="{{ $soc->url }}" required class="sm:col-span-2 px-3 py-2 border border-zinc-300 text-sm">
                                <input type="text" name="username" value="{{ $soc->username }}" class="px-3 py-2 border border-zinc-300 text-sm">
                                <div class="flex items-center gap-2">
                                    <input type="text" name="icon_class" value="{{ $soc->icon_class }}" class="w-full px-2.5 py-2 border border-zinc-300 text-xs font-mono">
                                    <button type="submit" class="px-3.5 py-2 bg-zinc-950 text-white font-mono text-[11px] font-bold uppercase shrink-0">Save</button>
                                </div>
                            </form>
                            <form action="{{ route('admin.social-medias.destroy', $soc) }}" method="POST" onsubmit="return confirm('Delete this link?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="font-mono text-[11px] uppercase text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            </section>

            <!-- =========================================================
                 TAB 7: INBOX MESSAGES & GUESTBOOK COMMENTS
                 ========================================================= -->
            <section data-admin-panel="inbox" class="admin-panel hidden grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-4">Inbox Messages ({{ $contactMessages->count() }})</h2>
                    <div class="space-y-3">
                        @forelse ($contactMessages as $msg)
                            <div class="border border-zinc-200 p-4 bg-zinc-50">
                                <div class="flex items-start justify-between gap-2">
                                    <div>
                                        <p class="font-bold text-sm text-zinc-950">{{ $msg->nama }} <span class="font-mono text-xs font-normal text-zinc-500">&lt;{{ $msg->email }}&gt;</span></p>
                                        <p class="font-mono text-[11px] uppercase text-zinc-500">{{ $msg->subjek ?: 'No Subject' }}</p>
                                    </div>
                                    <form action="{{ route('admin.messages.destroy', $msg) }}" method="POST" onsubmit="return confirm('Delete this message?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="font-mono text-[10px] uppercase text-zinc-500 hover:text-zinc-950 underline">Delete</button>
                                    </form>
                                </div>
                                <p class="text-sm text-zinc-700 mt-2 leading-relaxed">{{ $msg->pesan }}</p>
                            </div>
                        @empty
                            <p class="font-mono text-xs text-zinc-500 py-6 text-center">No incoming messages yet.</p>
                        @endforelse
                    </div>
                </div>

                <div class="bg-white border-2 border-zinc-950 p-6">
                    <h2 class="font-display text-xl font-bold uppercase mb-4">Visitor Comments ({{ $comments->count() }})</h2>
                    <div class="space-y-3">
                        @forelse ($comments as $comment)
                            <div class="border border-zinc-200 p-4 bg-zinc-50 flex items-start justify-between gap-3">
                                <div>
                                    <p class="font-bold text-sm text-zinc-950">{{ $comment->nama }} <span class="font-mono text-[10px] text-zinc-400 font-normal">{{ $comment->created_at?->format('d M Y') }}</span></p>
                                    <p class="text-sm text-zinc-700 mt-1 leading-relaxed">{{ $comment->komentar }}</p>
                                </div>
                                <form action="{{ route('admin.comments.destroy', $comment) }}" method="POST" onsubmit="return confirm('Delete this comment?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="font-mono text-[10px] uppercase text-zinc-500 hover:text-zinc-950 underline shrink-0">Delete</button>
                                </form>
                            </div>
                        @empty
                            <p class="font-mono text-xs text-zinc-500 py-6 text-center">No visitor comments yet.</p>
                        @endforelse
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tabBtns = document.querySelectorAll('.admin-tab-btn');
        const panels = document.querySelectorAll('.admin-panel');

        const activateAdminTab = (tabKey) => {
            const validKeys = Array.from(tabBtns).map((b) => b.dataset.adminTab);
            const target = validKeys.includes(tabKey) ? tabKey : 'profile';

            tabBtns.forEach((btn) => {
                const active = btn.dataset.adminTab === target;
                btn.classList.toggle('bg-zinc-950', active);
                btn.classList.toggle('text-white', active);
                btn.classList.toggle('font-bold', active);
                btn.classList.toggle('bg-white', !active);
                btn.classList.toggle('text-zinc-600', !active);
            });

            panels.forEach((panel) => {
                panel.classList.toggle('hidden', panel.dataset.adminPanel !== target);
            });

            if (window.location.hash !== `#${target}`) {
                history.replaceState(null, '', `#${target}`);
            }
        };

        const initialHash = window.location.hash.replace('#', '');
        activateAdminTab(initialHash || 'profile');

        tabBtns.forEach((btn) => {
            btn.addEventListener('click', () => activateAdminTab(btn.dataset.adminTab));
        });

        document.querySelectorAll('[data-admin-tab-jump]').forEach((card) => {
            card.addEventListener('click', () => activateAdminTab(card.dataset.adminTabJump));
        });
    });
</script>
@endpush