@extends('layouts.app')

@section('title', 'Chi tiết Phòng thi - NEU')

@section('content')

    <div class="hero-section">
        <div class="container">
            @include('partials.nav', ['class' => 'mb-8'])

            <a href="javascript:history.back()" class="btn btn-ghost mb-4 p-0 text-white-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                    <path d="m15 18-6-6 6-6" />
                </svg>
                Quay lại
            </a>

            <h1 class="hero-title mb-6">{{ $record->ten_mon ?: 'Chi tiết Phòng thi' }}</h1>

            <div class="room-meta-grid">
                <div class="room-meta-item">
                    <span class="room-meta-label">Phòng thi</span>
                    <span class="room-meta-value">{{ $record->phong_thi ?: 'Chưa xếp' }}</span>
                </div>
                <div class="room-meta-item">
                    <span class="room-meta-label">Sĩ số</span>
                    <span class="room-meta-value">{{ count($students) }} SV</span>
                </div>
                <div class="room-meta-item">
                    <span class="room-meta-label">Ca thi</span>
                    <span class="room-meta-value">Ca {{ $record->ca_thi ?: '-' }}</span>
                </div>
                <div class="room-meta-item">
                    <span class="room-meta-label">Ngày thi</span>
                    <span class="room-meta-value">{{ $record->ngay_thi ?: '-' }}</span>
                </div>
                <div class="room-meta-item">
                    <span class="room-meta-label">Giờ thi</span>
                    <span class="room-meta-value">{{ $record->gio_thi ?: '-' }}</span>
                </div>
                <div class="room-meta-item">
                    <span class="room-meta-label">Địa điểm</span>
                    <span class="room-meta-value">{{ $record->dia_diem_thi ?: 'NEU' }}</span>
                </div>
            </div>

            @if($record->link_zalo)
                <div class="mt-6">
                    <a href="{{ $record->link_zalo }}" target="_blank" class="btn btn-danger">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                        </svg>
                        Tham gia Nhóm Zalo
                    </a>
                </div>
            @endif
        </div>
    </div>

    <main class="container">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-4 mb-6">
            <div>
                <h2 class="card-title mb-0">Danh sách Sinh viên ({{ count($students) }})</h2>
            </div>
            <div class="search-wrapper position-relative w-100 max-w-300px">
                <svg class="search-icon search-icon-absolute" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" id="studentSearch" class="form-control ps-5" placeholder="Tìm tên hoặc mã SV...">
            </div>
        </div>

        <div class="profile-meta-lively mb-6">
            @if(($conditionCounts['Không được thi'] ?? 0) > 0)
                <x-badge type="destructive">
                    Không được thi: {{ $conditionCounts['Không được thi'] ?? 0 }}
                </x-badge>
            @endif
            @if(($conditionCounts['Hoãn thi'] ?? 0) > 0)
                <x-badge type="warning">
                    Hoãn thi: {{ $conditionCounts['Hoãn thi'] ?? 0 }}
                </x-badge>
            @endif
            <x-badge type="success">
                Đủ điều kiện: {{ $conditionCounts['Đủ điều kiện'] ?? 0 }}
            </x-badge>
        </div>
        <div class="student-grid">
            @foreach($students as $index => $sv)
                @php
                    $dk = trim(mb_strtoupper($sv->pivot->dieu_kien_thi ?? '', 'UTF-8'));
                    $statusClass = 'success';
                    if ($dk == 'HT' || strpos($dk, 'HOÃN') !== false) {
                        $statusClass = 'warning';
                    } elseif ($dk == 'KĐT' || strpos($dk, 'KHÔNG') !== false || strpos($dk, 'CẤM') !== false) {
                        $statusClass = 'destructive';
                    }

                    $firstChar = mb_substr(trim($sv->ten), 0, 1, 'UTF-8');
                    $colors = ['#f87171', '#fb923c', '#fbbf24', '#a3e635', '#4ade80', '#34d399', '#2dd4bf', '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185'];
                    $colorIndex = (crc32($sv->ma_sv) % count($colors));
                    $avatarBg = $colors[$colorIndex];
                @endphp
                <div class="card student-row"
                    data-search="{{ mb_strtolower($sv->ma_sv . ' ' . $sv->ho_dem . ' ' . $sv->ten, 'UTF-8') }}">
                    <!-- 1. Avatar + Name/ID -->
                    <div class="d-flex align-items-center gap-4 mb-5">
                        <div class="student-card-avatar"
                            style="background-color: {{ $avatarBg }}20; color: {{ $avatarBg }}; border: 1px solid {{ $avatarBg }}40;">
                            {{ mb_strtoupper($firstChar, 'UTF-8') }}
                        </div>
                        <div class="student-card-info">
                            <div class="student-card-name">
                                {{ $sv->ho_dem }} {{ $sv->ten }}
                            </div>
                            <div class="student-card-meta">
                                {{ $sv->ma_sv }}
                            </div>
                        </div>
                    </div>

                    <!-- 2 Column Layout -->
                    <div class="card-meta-row mb-0 pt-4 border-top-dashed">
                        <!-- 2. Lớp / Chuyên ngành -->
                        <div class="meta-col">
                            <span class="meta-label">LỚP / CHUYÊN NGÀNH</span>
                            <span class="meta-value">{{ $sv->lop_chuyen_nganh ?: 'Chưa cập nhật' }}</span>
                        </div>
                        <!-- 3. Điều kiện thi -->
                        <div class="meta-col">
                            <span class="meta-label">ĐIỀU KIỆN THI</span>
                            <span class="meta-value">
                                <x-badge type="{{ $statusClass }}">
                                    {{ $sv->pivot->dieu_kien_thi ?: 'Không xác định' }}
                                </x-badge>
                            </span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div id="noResults" class="d-none text-center text-muted py-12 px-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="mx-auto mb-4 opacity-50">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <p>Không tìm thấy sinh viên nào phù hợp.</p>
        </div>
    </main>

    @include('partials.footer')
@endsection

@section('scripts')
    @parent
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('studentSearch');
            const studentRows = document.querySelectorAll('.student-row');
            const noResults = document.getElementById('noResults');

            searchInput.addEventListener('input', function (e) {
                const term = e.target.value.toLowerCase().trim();
                let hasVisible = false;

                studentRows.forEach(row => {
                    const searchData = row.getAttribute('data-search');
                    if (searchData.includes(term)) {
                        row.style.display = 'block';
                        hasVisible = true;
                    } else {
                        row.style.display = 'none';
                    }
                });

                if (!hasVisible && term !== '') {
                    noResults.style.display = 'block';
                } else {
                    noResults.style.display = 'none';
                }
            });
        });
    </script>
@endsection