<x-filament::page>

    @php
    $record = (object) [
    'name' => 'Rekayasa Perangkat Lunak',
    'description' => 'Software Engineering Department',
    'icon_color' => '#6366F1',

    'headOfDepartment' => (object) [
    'name' => 'Budi Santoso, S.Kom',
    'nip' => '198908172019031001',
    'foto' => 'https://i.pravatar.cc/100?img=12',
    ],

    'students' => collect(range(1, 120)),
    'teachers' => collect(range(1, 12)),

    'classes' => collect([
    (object) [
    'name' => 'X RPL 1',
    'students' => collect(range(1, 36)),
    'homeroom_teacher' => (object) [
    'name' => 'Andi Wijaya, S.Kom',
    'foto' => 'https://i.pravatar.cc/100?img=5',
    ],
    ],
    (object) [
    'name' => 'XI RPL 2',
    'students' => collect(range(1, 32)),
    'homeroom_teacher' => null,
    ],
    ]),
    ];
    @endphp


    {{-- ================= HEADER ================= --}}
    {{-- ================= FILTER BAR ================= --}}


    {{-- Menggunakan w-full untuk memastikan grid mengambil seluruh lebar --}}
    <div class="flex lg:flex-row flex-col gap-[25px]">

        {{-- ============ LEFT (Department Info) ============ --}}
        {{-- Saya ubah menjadi col-span-1 agar tetap rapi di layar lebar --}}
        <div class="flex flex-col gap-4 w-[390px]">
            <x-filament::section>
                <div class="flex items-center gap-2 mb-6">
                    <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100">
                        <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v2h8v-2zM2 8a2 2 0 11-4 0 2 2 0 014 0zM6 15a4 4 0 00-8 0v2h8v-2z" />
                        </svg>
                    </div>
                    <h2 class="text-sm font-bold text-gray-900">
                        {{ __('Department Profile') }}
                    </h2>
                </div>

                <!-- Department Icon Section -->
                <div class="">
                    <h3 class="text-xs font-semibold text-gray-600 uppercase tracking-wide">
                        {{ __('Department Icon') }}
                    </h3>
                    <div class="flex items-center gap-2">
                        <div class="flex items-center justify-center w-18 h-18 rounded-lg"
                            style="">
                            <svg class="w-12 h-12" style="" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5z" />
                            </svg>
                        </div>
                        <x-filament::button color="gray">
                            <div class="text-xs w-20">
                                {{ __('Change Icon') }}
                            </div>
                        </x-filament::button>
                    </div>
                </div>

                <!-- Department Details -->
                <div class="space-y-4 w-full">
                    <div class="flex flex-col gap-2">
                        <p class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">
                            {{ __('Department Name (Indonesian)') }}
                        </p>
                        <input
                            type="text"
                            value="Rekayasa Perangkat Lunak"
                            class="block text-xs w-full rounded-lg outline-0 border-gray-200 shadow border border[1px] border-slate-200 bg-gray-50 px-3 py-2.5 text-sm text-gray-900"
                            placeholder="Nama jurusan..." />
                    </div>

                    <div class="flex flex-col gap-2">
                        <p class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">
                            {{ __('Display Name (English)') }}
                        </p>
                        <input
                            type="text"
                            value="Rekayasa Perangkat Lunak"
                            class="block text-xs w-full rounded-lg outline-0 border-gray-200 shadow border border[1px] border-slate-200 bg-gray-50 px-3 py-2.5 text-sm text-gray-900"
                            placeholder="Display name" />
                    </div>

                    <!-- Head of Department -->
                    <div class="flex flex-col gap-2">
                        <p class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide mb-1">
                            {{ __('Head of Department (KAPROG)') }}
                        </p>
                        <input
                            type="text"
                            value="kepala departemen"
                            class="block text-xs w-full rounded-lg outline-0 border-gray-200 shadow border border[1px] border-slate-200 bg-gray-50 px-3 py-2.5 text-sm text-gray-900"
                            placeholder="Display name" />
                        @if($record->headOfDepartment)
                        <div class="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <img src="{{ $record->headOfDepartment->foto ?? '/placeholder.svg?height=40&width=40' }}"
                                alt="{{ $record->headOfDepartment->name }}"
                                class="w-9 h-9 rounded-full object-cover">
                            <div>
                                <p class="text-[9px] font-semibold text-gray-900">
                                    {{ __('Selected:') }} {{ $record->headOfDepartment->name }}
                                </p>
                                <p class="text-[10px] text-gray-500">
                                    NIP. {{ $record->headOfDepartment->nip }}
                                </p>
                            </div>
                        </div>
                        @else
                        <p class="text-sm text-gray-500 italic">
                            {{ __('No head of department assigned') }}
                        </p>
                        @endif
                    </div>
                </div>
            </x-filament::section>
            <x-filament::section>
                <!-- Quick Stats -->
                <div class="">
                    <h3 class="text-sm font-bold text-gray-900 mb-4">
                        {{ __('Quick Stats') }}
                    </h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">
                                {{ __('Total Students') }}
                            </p>
                            <p class="mt-1 text-lg font-bold text-gray-900">
                                {{ $record->students->count() ?? 0 }}
                            </p>
                        </div>
                        <div>
                            <p class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">
                                {{ __('Total Teachers') }}
                            </p>
                            <p class="mt-1 text-lg font-bold text-gray-900">
                                {{ $record->teachers->count() ?? 0 }}
                            </p>
                        </div>
                    </div>
                </div>
            </x-filament::section>
        </div>

        {{-- ============ RIGHT COLUMN (Class Management) ============ --}}
        {{-- Karena Full Width, kolom kanan kita buat lebih lebar (span-2 atau span-3 di layar besar) --}}
        <div class="w-full">
            <x-filament::section>

                <div class="flex justify-between items-center mb-5">
                    <div>
                        <h2 class="text-md font-semibold text-gray-900">
                            Class Management
                        </h2>
                        <p class="text-xs text-gray-500">
                            Tahun Akademik 2026/2027
                        </p>
                    </div>

                    <x-filament::button>
                        + Add New Class
                    </x-filament::button>
                </div>


                {{-- TABLE --}}
                <div class="border border-slate-300 rounded-lg overflow-hidden bg-white">
                    <table class="w-full text-xs">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-600 uppercase">
                                    Class Name
                                </th>
                                <th class="text-left px-4 py-3 text-xs font-semibold text-gray-600 uppercase">
                                    Homeroom Teacher
                                </th>
                                <th class="text-center px-4 py-3 text-xs font-semibold text-gray-600 uppercase">
                                    Students
                                </th>
                                <th class="text-center px-4 py-3 text-xs font-semibold text-gray-600 uppercase">
                                    Actions
                                </th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-gray-200">
                            @foreach($record->classes as $class)
                            <tr class="hover:bg-gray-200 transition">
                                <td class="px-4 py-3 text-[10px] font-medium text-gray-900">
                                    {{ $class->name }}
                                </td>

                                <td class="px-4 py-3">
                                    @if($class->homeroom_teacher)
                                    <div class="flex items-center gap-2">
                                        <img src="{{ $class->homeroom_teacher->foto }}" class="w-8 h-8 rounded-full object-cover">
                                        <span class="text-gray-800">
                                            {{ $class->homeroom_teacher->name }}
                                        </span>
                                    </div>
                                    @else
                                    <span class="text-gray-400 italic">
                                        Not Assigned
                                    </span>
                                    @endif
                                </td>

                                <td class="px-4 py-3 text-center font-semibold text-gray-900">
                                    {{ $class->students->count() }}
                                </td>

                                <td class="px-4 py-3">
                                    <div class="flex items-center justify-center gap-1">
                                        {{-- Actions --}}
                                        <button class="p-2 text-gray-400 hover:text-blue-600 transition">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                        </button>
                                        <button class="p-2 text-gray-400 hover:text-blue-600 transition">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.5v15m7.5-7.5h-15" />
                                            </svg>
                                        </button>
                                        <button class="p-2 text-gray-400 hover:text-red-600 transition">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 text-xs text-gray-500">
                    Classes are linked to Curriculum 2013 Revision.
                    <a href="#" class="text-primary-600 hover:underline">Change setting</a>
                </div>

            </x-filament::section>
        </div>

    </div>

</x-filament::page>