@extends('layouts.app')

@if(isset($student))
    @section('title', 'Lịch thi của ' . $student['ho_ten'] . ' - ' . $student['ma_sv'])
    @section('og_title', 'Lịch thi của ' . $student['ho_ten'] . ' - ' . $student['ma_sv'])
    @section('og_description', 'Xem lịch thi chi tiết của sinh viên ' . $student['ho_ten'] . ' tại hệ thống tra cứu nội bộ NEU.')
@else
    @section('title', 'Tra cứu Lịch Thi - NEU')
@endif

@section('content')
    <div class="hero-section">
        <div class="container">
            @include('partials.nav')
            <div class="hero-container">
                <div class="hero-left">
                    <h1 class="hero-title">Tra cứu Lịch thi</h1>
                    <p class="hero-desc">Hệ thống quản lý lịch thi nội bộ NEU.</p>

                    <form action="{{ route('search.index') }}" method="GET" class="hero-search-form" id="searchForm">
                        <input type="text" name="ma_sv" id="ma_sv_input" list="recent_searches" placeholder="Nhập mã sinh viên (VD: 19230788)..."
                            value="{{ $ma_sv ?? '' }}" class="form-control" required autocomplete="on">
                        <datalist id="recent_searches"></datalist>
                        <button type="submit" class="btn btn-primary">Tìm kiếm</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <main class="container">
        @if(session('success'))
            <x-alert type="success">
                {{ session('success') }}
            </x-alert>
        @endif
        @if(session('error'))
            <x-alert type="error">
                {{ session('error') }}
            </x-alert>
        @endif

        @if($ma_sv)
            @if(count($records) > 0)
                @php
                    $totalExams = 0;
                    $eligible = 0;
                    $ineligible = 0;
                    $postponed = 0;

                    foreach ($records as $dayRecords) {
                        $totalExams += count($dayRecords);
                        foreach ($dayRecords as $record) {
                            $dk = trim(mb_strtoupper($record->pivot->dieu_kien_thi ?? '', 'UTF-8'));
                            if ($dk == 'HT') {
                                $postponed++;
                            } elseif ($dk == 'KĐT' || strpos($dk, 'KHÔNG') !== false || strpos($dk, 'CẤM') !== false) {
                                $ineligible++;
                            } else {
                                $eligible++;
                            }
                        }
                    }
                @endphp
                <div class="timeline">
                    <!-- User Profile Node -->
                    <div class="timeline-user-node">
                        <div class="user-avatar">
                            <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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                                <circle cx="12" cy="7" r="4" />
                            </svg>
                        </div>
                        <div class="user-info">
                            <h2 class="profile-name-lively">{{ $student['ho_ten'] }}</h2>
                            <div class="profile-meta-lively">
                                <span class="meta-item">Mã SV: <strong>{{ $student['ma_sv'] }}</strong></span>
                                <span class="meta-dot">•</span>
                                <span class="meta-item">Lớp:
                                    <strong>{{ $student['lop_chuyen_nganh'] ?: 'Chưa cập nhật' }}</strong></span>
                            </div>

                            <div class="user-stats-box">
                                <div class="stat-item">
                                    <span class="stat-value">{{ $eligible }}</span>
                                    <span class="stat-label">Đủ điều kiện</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-value text-warning">{{ $postponed }}</span>
                                    <span class="stat-label text-warning">Hoãn thi</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-value text-destructive">{{ $ineligible }}</span>
                                    <span class="stat-label text-destructive">Không đủ ĐK</span>
                                </div>
                            </div>

                            <div class="mt-5">
                                <a href="{{ route('calendar.export', $student['ma_sv']) }}" class="btn btn-primary">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                        <line x1="16" y1="2" x2="16" y2="6"></line>
                                        <line x1="8" y1="2" x2="8" y2="6"></line>
                                        <line x1="3" y1="10" x2="21" y2="10"></line>
                                        <line x1="12" y1="14" x2="12" y2="18"></line>
                                        <line x1="10" y1="16" x2="14" y2="16"></line>
                                    </svg>
                                    Thêm lịch thi vào Calendar
                                </a>
                            </div>
                        </div>
                    </div>
                    @foreach($records as $date => $dayRecords)
                        <div class="timeline-group">
                            <h3 class="timeline-date">{{ $date ?: 'Chưa xác định ngày' }}</h3>

                            <div class="timeline-cards">
                                @foreach($dayRecords as $record)
                                    @php
                                        $dk = trim(mb_strtoupper($record->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';
                                        }
                                    @endphp
                                    <div onclick="window.location.href='{{ route('room.detail', $record->id) }}'" class="cursor-pointer card card-pastel-{{ $loop->index % 4 }}">
                                        <div class="card-top">
                                            <span class="card-index">Ca {{ $record->ca_thi ?: '-' }}</span>
                                            <svg class="card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M7 17L17 7M17 7H7M17 7V17"></path>
                                            </svg>
                                        </div>

                                        <h4 class="card-title-lively">
                                            {{ $record->ten_mon ?: 'Chưa cập nhật môn thi' }}
                                        </h4>

                                        <div class="card-meta-row">
                                            <div class="meta-col">
                                                <span class="meta-label">Thời gian</span>
                                                <span class="meta-value">{{ $record->gio_thi ?: '-' }}</span>
                                            </div>
                                            <div class="meta-col">
                                                <span class="meta-label">Phòng thi</span>
                                                <span class="meta-value">{{ $record->phong_thi ?: 'Chưa xếp' }}</span>
                                            </div>
                                        </div>

                                        <div class="card-meta-row">
                                            <div class="meta-col">
                                                <span class="meta-label">Địa điểm</span>
                                                <span class="meta-value">{{ $record->dia_diem_thi ?: 'NEU' }}</span>
                                            </div>
                                            <div class="meta-col">
                                                <span class="meta-label">Trạng thái</span>
                                                <span class="meta-value">
                                                    @if($record->pivot->dieu_kien_thi)
                                                        <x-badge type="{{ $statusClass }}">
                                                            {{ $record->pivot->dieu_kien_thi }}
                                                        </x-badge>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>

                                        @if(!empty($record->link_zalo))
                                            <div class="zalo-action">
                                                <button class="btn btn-primary"
                                                    onclick="event.preventDefault(); window.open('{{ $record->link_zalo }}', '_blank')">
                                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                                        <path
                                                            d="M12 2C6.48 2 2 6.03 2 11c0 2.85 1.48 5.38 3.8 7.03L5 22l4.06-2.02c.94.3 1.96.48 3.02.48 5.52 0 10-4.03 10-9S17.52 2 12 2z" />
                                                    </svg>
                                                    Nhóm Zalo Lớp
                                                </button>
                                            </div>
                                        @else
                                            <div class="zalo-action mt-4">
                                                @auth
                                                    <form action="{{ route('room.zalo', $record->id) }}" method="POST" class="d-flex gap-2 align-items-center" onclick="event.stopPropagation()">
                                                        @csrf
                                                        <input type="url" name="link_zalo" class="form-control flex-grow-1" placeholder="https://zalo.me/g/..." pattern=".*zalo\.me.*" title="Vui lòng nhập đúng link nhóm Zalo (phải chứa zalo.me)" required onclick="event.stopPropagation()">
                                                        <button type="submit" class="btn btn-outline" >Thêm Link</button>
                                                    </form>
                                                @else
                                                    <p class="fs-6 text-muted m-0">
                                                        <a href="{{ route('auth.google') }}" class="text-primary fw-medium text-decoration-none" onclick="event.stopPropagation()">Đăng nhập</a> để thêm Link Zalo
                                                    </p>
                                                @endauth
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="empty-state">
                    <img src="{{ asset('empty.webp') }}" alt="Tìm kiếm" class="empty-state-img">
                    <h3>Không tìm thấy dữ liệu</h3>
                    <p>Không có lịch thi nào cho mã sinh viên "{{ $ma_sv }}". Vui lòng kiểm tra lại.</p>
                </div>
            @endif
        @else
            <div class="empty-state">
                <img src="{{ asset('empty.webp') }}" alt="Tìm kiếm" class="empty-state-img">
                <h3>Vui lòng nhập mã sinh viên</h3>
                <p>Nhập mã sinh viên của bạn vào ô tìm kiếm phía trên để xem chi tiết lịch thi.</p>
            </div>
        @endif
    </main>

    @include('partials.footer')

@endsection