@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 terminal-bg">

    <!-- HEADER -->
    <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">
                    INSIGHT_MANAGEMENT
                </span>
            </nav>

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

        <!-- CREATE -->
        <a href="{{ route('industries.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 Industry
            </span>
        </a>
    </div>
    {{-- LANGUAGE SWITCH --}}
    <div class="flex gap-2 mt-4 mb-2">
        @foreach($languages as $l)
        <a href="{{ request()->fullUrlWithQuery(['lang' => $l->code]) }}"
            class="px-3 py-1 text-xs border rounded 
        {{ $lang == $l->code ? 'bg-primary text-black' : 'text-white border-gray-600' }}">
            {{ strtoupper($l->code) }}
        </a>
        @endforeach
    </div>
    <div class="space-y-8">

        <!-- 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">
                Name
            </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">
                Actions
            </div>

        </div>

        <!-- ROWS -->
        <div class="space-y-4">

            @forelse($industries as $industry)
            <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 group hover:neon-border">



                <!-- Persona -->
                <div class="col-span-3">

                    <p class="text-sm text-on-surface-variant/60 italic border-l border-outline-variant/30 pl-4">
                        <span class="material-symbols-outlined" style="vertical-align: middle;">business</span>
                        <span>{{ $industry->industry_name[$lang] ?? 'No name available' }}</span>
                    </p>
                </div>

                <!-- STATUS -->
                <div class="col-span-2 text-center">
                    <span class="px-4 py-1.5 border rounded font-black text-xs tracking-tighter
                    {{ $industry->is_active 
                        ? 'bg-[#00FF9D]/10 text-primary border-primary/20' 
                        : 'bg-gray-500/10 text-gray-400 border-gray-500/20' }}">
                        {{ $industry->is_active ? 'ACTIVE' : 'INACTIVE' }}
                    </span>
                </div>

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

                    <!-- EDIT -->
                    <a href="{{ route('industries.edit', $industry->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('industries.destroy', $industry->id) }}"
                        onsubmit="return confirm('Delete this industry?')">

                        @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 personas found.
            </div>
            @endforelse
            <!-- Pagination -->
            <div class="mt-10">
                {{ $industries->links() }}
            </div>
        </div>
</main>

@endsection