@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.All Departments'))
@section('page_heading', __('dashboard.All Departments'))
@section('skip_page_hero', true)

@section('content')
@php($isArabic = app()->getLocale() === 'ar')
<div class="space-y-6 pb-20">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-black text-surface-900 dark:text-white">{{ __('dashboard.All Departments') }}</h1>
                <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'كل قسم يمكن أن يحتوي على عدة مواد عبر صفوف ومراحل مختلفة، ويتم ربط المواد من شاشة المواد نفسها.' : 'Each department can contain multiple subjects across different grades and stages, and subjects are linked from the subjects screen itself.' }}</p>
            </div>

            <a href="{{ route('admin.departments.create') }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>{{ __('dashboard.Add New Department') }}</span>
            </a>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-3">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي الأقسام' : 'Total departments' }}</p>
            <p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($totalDepartments) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أقسام بمسؤول' : 'Departments with head' }}</p>
            <p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($assignedDepartments) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مواد مرتبطة بالأقسام' : 'Subjects linked to departments' }}</p>
            <p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($subjectsInsideDepartments) }}</p>
        </article>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        @if($departments->isEmpty())
            <div class="px-6 py-16 text-center">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-surface-100 text-surface-400 dark:bg-surface-800 dark:text-surface-500">
                    <i class="fa-solid fa-building text-2xl"></i>
                </div>
                <h3 class="mt-5 text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.No data found') }}</h3>
            </div>
        @else
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @foreach($departments as $department)
                    <article class="px-6 py-5 transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-3">
                                    <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $department->name }}</h2>
                                    <span class="rounded-full bg-surface-100 px-3 py-1 text-[10px] font-black uppercase tracking-[0.18em] text-surface-600 dark:bg-surface-800 dark:text-surface-300">#{{ $department->id }}</span>
                                    <span class="rounded-full bg-brand-50 px-3 py-1 text-[10px] font-black uppercase tracking-[0.18em] text-brand-700 dark:bg-brand-500/10 dark:text-brand-300">{{ $department->subjects_count }} {{ $isArabic ? 'مواد' : 'subjects' }}</span>
                                </div>
                                <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">
                                    {{ $department->staff?->name ?: __('dashboard.Not Assigned') }}
                                </p>
                                <p class="mt-2 text-xs font-bold {{ $department->head_can_teach ? 'text-emerald-600 dark:text-emerald-300' : 'text-surface-500 dark:text-surface-400' }}">
                                    {{ $department->head_can_teach ? ($isArabic ? 'وضع رئيس القسم المدرّس مفعل' : 'Head teaching mode enabled') : ($isArabic ? 'وضع رئيس القسم المدرّس غير مفعل' : 'Head teaching mode disabled') }}
                                </p>
                                <p class="mt-2 text-xs leading-6 text-surface-500 dark:text-surface-400">
                                    @if($department->subjects->isNotEmpty())
                                        {{ $department->subjects->take(4)->map(fn ($subject) => trim(($subject->name ?? '') . ($subject->grade?->name ? ' • ' . $subject->grade->name : '')))->filter()->join(' • ') }}
                                        @if($department->subjects_count > 4)
                                            {{ $isArabic ? ' • وأكثر' : ' • and more' }}
                                        @endif
                                    @else
                                        {{ $isArabic ? 'لا توجد مواد مرتبطة بهذا القسم بعد. اربط المواد من شاشة المواد.' : 'No subjects are linked to this department yet. Link them from the subjects screen.' }}
                                    @endif
                                </p>
                            </div>

                            <div class="flex justify-end">
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" @click.outside="open = false" type="button"
                                            class="w-8 h-8 flex items-center justify-center rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-500 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
                                        <i class="fa-solid fa-ellipsis-vertical text-xs"></i>
                                    </button>
                                    <div x-show="open" x-cloak x-transition
                                         class="absolute end-0 z-50 mt-1 w-44 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg overflow-hidden">
                                        <a href="{{ route('admin.departments.edit', $department->id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                                            <i class="fa-solid fa-pen-to-square w-4 text-center text-surface-400 text-xs"></i>{{ __('dashboard.Edit') }}
                                        </a>
                                        <div class="border-t border-surface-100 dark:border-surface-800"></div>
                                        <form method="POST" action="{{ route('admin.departments.destroy', $department->id) }}" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
                                                <i class="fa-solid fa-trash w-4 text-center text-xs"></i>{{ __('dashboard.Delete') }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            @if ($departments->hasPages())
                <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">
                    {{ $departments->appends(request()->query())->links() }}
                </div>
            @endif
        @endif
    </section>
</div>
@endsection