@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'مسح رمز QR للحضور' : 'Scan QR Attendance')

@section('content')
@php $isAr = app()->getLocale() === 'ar'; @endphp

<div class="container py-10" style="max-width:480px;">
    <div class="card rounded-3 shadow-sm border-0">
        <div class="card-body p-8 text-center">

            @if(!request()->has('token'))
                {{-- No token: show scanner instructions --}}
                <div class="mb-6">
                    <i class="ki-outline ki-scan-barcode" style="font-size:4rem;color:#6366f1;"></i>
                </div>
                <h2 class="fs-2 fw-bolder mb-3">
                    {{ $isAr ? 'مسح رمز QR للحضور' : 'Scan Attendance QR Code' }}
                </h2>
                <p class="text-muted fs-6 mb-6">
                    {{ $isAr ? 'امسح رمز QR الذي يعرضه المعلم لتسجيل حضورك تلقائياً.' : 'Scan the QR code shown by your teacher to automatically record your attendance.' }}
                </p>
                <div class="alert alert-light-primary border border-primary border-dashed rounded-2 p-4 text-start">
                    <div class="d-flex align-items-center gap-3">
                        <i class="ki-outline ki-information-5 fs-2 text-primary"></i>
                        <span class="fs-7 text-gray-700">
                            {{ $isAr ? 'استخدم كاميرا هاتفك لمسح رمز QR أو اطلب من المعلم مشاركة الرابط معك.' : 'Use your phone camera to scan the QR code, or ask your teacher to share the link.' }}
                        </span>
                    </div>
                </div>

            @elseif($error)
                {{-- Error state --}}
                <div class="mb-6">
                    <i class="ki-outline ki-cross-circle" style="font-size:4rem;color:#f1416c;"></i>
                </div>
                <h2 class="fs-2 fw-bolder text-danger mb-3">
                    {{ $isAr ? 'تعذّر تسجيل الحضور' : 'Attendance Failed' }}
                </h2>
                <p class="text-muted fs-6 mb-6">{{ $error }}</p>
                <a href="{{ route('student.home') }}" class="btn btn-light-primary">
                    {{ $isAr ? 'العودة للرئيسية' : 'Back to Home' }}
                </a>

            @elseif($success)
                {{-- Success state --}}
                <div class="mb-6">
                    <i class="ki-outline ki-check-circle" style="font-size:4rem;color:#50cd89;"></i>
                </div>
                <h2 class="fs-2 fw-bolder text-success mb-3">
                    {{ $isAr ? 'تم تسجيل حضورك بنجاح!' : 'Attendance Recorded!' }}
                </h2>
                @if($attendance)
                <div class="bg-light rounded-2 p-5 mb-6 text-start">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted fs-7">{{ $isAr ? 'المادة' : 'Course' }}</span>
                        <span class="fw-bold fs-7">{{ $attendance->course->name ?? '-' }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted fs-7">{{ $isAr ? 'التاريخ' : 'Date' }}</span>
                        <span class="fw-bold fs-7">{{ $attendance->date->format('d M, Y') }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted fs-7">{{ $isAr ? 'النوع' : 'Type' }}</span>
                        <span class="fw-bold fs-7">
                            {{ $attendance->type === 'school' ? ($isAr ? 'حصة مدرسية' : 'School') : ($isAr ? 'حصة افتراضية' : 'Virtual') }}
                        </span>
                    </div>
                </div>
                @endif
                <a href="{{ route('student.home') }}" class="btn btn-success">
                    {{ $isAr ? 'العودة للرئيسية' : 'Back to Home' }}
                </a>
            @endif

        </div>
    </div>
</div>
@endsection