@extends('layouts.master')

@section('content')
<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .neon-glow {
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    }

    .neon-border {
        border: 1px solid rgba(0, 255, 157, 0.2);
    }

    .terminal-bg {
        background: linear-gradient(180deg, #10141a 0%, #0d1117 100%);
    }

    .bg-primary {
        background-color: #00ff9d;
    }

    .text-surface {
        color: #000;
    }
</style>
<main class="pt-8 p-12 min-h-screen">

    <!-- Header Section -->
    <div class="flex justify-between items-end mb-12">
        <div class="max-w-2xl">
            <nav class="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-4">
                <span>ADMIN</span>
                <span class="material-symbols-outlined text-[10px]">chevron_right</span>
                <span class="text-primary underline decoration-primary/30 underline-offset-4">
                    PERSONA_MANAGEMENT
                </span>
            </nav>

            <h2 class="text-5xl font-black font-headline text-on-surface tracking-tighter mb-4">
                Academic Personas
            </h2>

            <!-- <p class="text-on-surface-variant text-lg leading-relaxed opacity-70">
                Define logical data boundaries for educational card collections. System-level organizational control.
            </p> -->
        </div>

        <!-- Create Button -->
        <a href="{{ route('personas.create') }}"
            class="group flex items-center gap-2 px-8 py-4 bg-primary text-surface font-black rounded-lg shadow-[0_0_20px_rgba(0,255,157,0.4)] hover:shadow-[0_0_30px_rgba(0,255,157,0.6)] active:scale-95 transition-all duration-300">
            <span class="material-symbols-outlined group-hover:rotate-90 transition-transform duration-300">
                add_circle
            </span>
            <span class="uppercase tracking-tighter">Create Persona</span>
        </a>
    </div>

    <!-- Bento Stats Grid -->
    <div class="grid grid-cols-12 gap-6 mb-12">

        <!-- Registry Count -->
        <div class="col-span-4 p-8 rounded-xl bg-surface-container border border-outline-variant/10 relative overflow-hidden group">
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-primary/10 transition-colors"></div>

            <span class="text-[10px] font-black uppercase tracking-widest text-primary/60">
                Registry Count
            </span>

            <div class="mt-4 flex items-baseline gap-3">
                <span class="text-6xl font-black font-headline text-on-surface tracking-tighter">
                    {{ $personas->count() }}
                </span>
                <span class="text-primary font-bold text-xs px-2 py-1 bg-primary/10 rounded">
                    TOTAL
                </span>
            </div>
        </div>

        <!-- Notification -->
        <!-- <div class="col-span-8 p-8 rounded-xl bg-[#161b22] border-l-4 border-primary relative overflow-hidden shadow-[inset_0_0_30px_rgba(0,255,157,0.03)]">
            <div class="relative z-10">
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
                    <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary">
                        System Notification // Optimization Tip
                    </span>
                </div>

                <h3 class="text-2xl font-bold mt-2 max-w-xl text-on-surface tracking-tight leading-tight">
                    <span class="text-primary">Engagement Spike:</span>
                    Metadata-rich categories yield
                    <span class="px-1 bg-primary/20 text-primary italic">
                        higher throughput
                    </span>
                    in interaction logs.
                </h3>
            </div>

            <span class="material-symbols-outlined absolute -right-6 -bottom-6 text-[12rem] text-primary opacity-[0.03] rotate-12 pointer-events-none">
                terminal
            </span>
        </div> -->
    </div>

    <!-- Table Header -->
    <div class="grid grid-cols-12 px-8 py-4 bg-surface-container-low/50 border-b border-outline-variant/20 rounded-t-xl">
        <div class="col-span-4 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
            Identity // Timestamp
        </div>

        <div class="col-span-3 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
            Data_Preview
        </div>
        <div class="col-span-2 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 text-center">
            Status
        </div>
        <div class="col-span-3 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 text-right">
            Access_Protocols
        </div>
    </div>

    <!-- Category Rows -->
    <div class="space-y-4">

        @forelse($personas as $persona)

        @php
        $name = translate_field($persona->name);
        $desc = translate_field($persona->description);
        @endphp

        <div class="grid grid-cols-12 items-center px-8 py-6 bg-surface-container hover:bg-[#1c222c] border border-outline-variant/10 rounded-xl transition-all duration-300 group hover:neon-border">

            <!-- Left -->
            <div class="col-span-4 flex items-center gap-5">
                <div class="w-14 h-14 rounded bg-[#10141a] border border-outline-variant flex items-center justify-center text-primary group-hover:neon-glow transition-all">
                    <span class="material-symbols-outlined text-3xl">category</span>
                </div>

                <div>
                    <h4 class="text-xl font-black text-on-surface tracking-tight">
                 

                       {{ strtoupper($name) }}
                    </h4>
                    <p class="text-[10px] font-mono text-primary/40 uppercase">
                        STAMP: {{ $persona->created_at->format('d.m.Y') }}
                    </p>
                </div>
            </div>



            <!-- Description -->
            <div class="col-span-3">
                <p class="text-sm text-on-surface-variant/60 font-medium italic border-l border-outline-variant/30 pl-4">
                

                    {{ $desc ?? 'No description available...' }}
                </p>
            </div>
            <div class="col-span-2 text-center">
                <span class="px-4 py-1.5 border rounded font-black text-xs tracking-tighter
        {{ $persona->is_active == 1 
            ? 'bg-[#00FF9D]/10 text-primary border-primary/20 opacity-100' 
            : 'bg-gray-500/10 text-gray-400 border-gray-500/20 opacity-50' }}">

                    {{ $persona->is_active == 1 ? 'ACTIVE' : 'INACTIVE' }}

                </span>
            </div>

            <!-- Actions -->
            <div class="col-span-3 flex justify-end gap-3">

                <!-- View -->
                <!-- <button class="w-10 h-10 flex items-center justify-center border border-outline-variant text-on-surface-variant hover:border-primary hover:text-primary rounded transition-all">
                    <span class="material-symbols-outlined text-xl">visibility</span>
                </button> -->

                <!-- Edit -->
                <a href="{{ route('personas.edit', $persona->id) }}"
                    class="w-10 h-10 flex items-center justify-center border border-outline-variant text-on-surface-variant hover:border-primary hover:text-primary rounded transition-all">
                    <span class="material-symbols-outlined text-xl">edit</span>
                </a>

                <!-- Delete -->
                <form method="POST"
                    action="{{ route('personas.destroy', $persona->id) }}"
                    onsubmit="return confirm('Delete this persona?')">

                    @csrf
                    @method('DELETE')

                    <button class="w-10 h-10 flex items-center justify-center border border-outline-variant text-error/60 hover:bg-error/10 hover:border-error/40 rounded transition-all">
                        <span class="material-symbols-outlined text-xl">delete</span>
                    </button>
                </form>

            </div>
        </div>

        @empty
        <div class="text-center py-10 text-gray-400">
            No categories found.
        </div>
        @endforelse

    </div>

</main>

@endsection