@extends('layouts.app')
@section('title', 'تسجيل الحضور')
@section('content')

<style>
    /* إخفاء غائب عندما يكون الطالب Checked */
    .student-card:has(.student-checkbox:checked) .status-absent {
        display: none;
    }

    /* إخفاء حاضر عندما يكون الطالب Unchecked */
    .student-card:not(:has(.student-checkbox:checked)) .status-present {
        display: none;
    }

    /* تأثير عند مرور الماوس على كارت الطالب */
    .student-card {
        transition: all 0.3s ease; /* جعل الحركة ناعمة */
        border: 1px solid transparent !important; /* حدود شفافة افتراضياً */
    }

    .student-card:hover {
        background-color: #f8f9fa; /* تغيير خفيف في لون الخلفية */
        transform: translateY(-2px); /* رفعه للأعلى قليلاً (اختياري) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* تقوية الظل */
        border-color: #0d6efd !important; /* إظهار حدود بلون أزرق خفيف (لون براند بوتستراف) */
    }

    /* تمييز الـ Label ليكون التفاعل كاملاً */
    .student-card label:hover {
        background-color: rgba(13, 110, 253, 0.03); /* صبغة زرقاء خفيفة جداً */
    }
</style>


<div class="container">
    <x-header title="تسجيل حضور" />

    <x-alert />

    {{--  --}}
    <div class=" py-3" dir="rtl">
        <div class="card border-0 shadow-sm rounded-4 mb-4 bg-primary text-white">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-center">
                        <h5 class="fw-bold mb-1 text-center">{{ $lesson->group->name }}</h5>
                        <p class="mb-0 small opacity-75">
                            <!-- المادة العلمية -->
                            <span class="d-inline-block text-nowrap mr-3">
                                <i class="fas fa-book-open text-primary ms-1"></i> {{ $lesson->group->subject->name }}
                            </span>
                            
                            <!-- الفاصل الجمالي (يختفي في الشاشات الصغيرة جداً لو حبيت) -->
                            <span class="mx-2 text-secondary" style="font-size: 0.8rem;">&bull;</span>

                            <!-- الوقت الحالي -->
                            <span class="d-inline-block text-nowrap mr-3">
                                <i class="fas fa-clock text-info ms-1"></i> {{ now()->format('h:i A') }}
                            </span>

                            <span class="mx-2 text-secondary" style="font-size: 0.8rem;">&bull;</span>

                            <!-- نظام السداد -->
                            <span class="d-inline-block text-nowrap">
                                <i class="fas fa-wallet text-success ms-1"></i> 
                                <span class="fw-bold">قيمة الإشتراك:</span> ({{ $group->student_fee ?? 'غير محدد' }}) {{ $group->subscription_type === 'monthly' ? 'للشهر' : 'للحصة' }}
                            </span>
                        </p>
                    </div>

                    <div class="bg-white text-primary rounded-circle d-md-flex align-items-center justify-content-center shadow-sm d-none " style="width: 45px; height: 45px;">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </div>

        @php
            // التحقق من اكتمال البيانات
            $isComplete = $group->teacher_id && $group->start_time && $group->end_time;

            $admin = \App\Models\User::role('Admin')->first();
            $adminPhone = $admin ? '+2' . $admin->phone : ''; 
            $userName = Auth::user()->name;

            // تحديد محتوى الرسالة بناءً على العائق اللي واجه المستخدم
            $reason = "إلغاء الحصة";

            $message = "تحية طيبة،\nبرجاء المساعدة في: *$reason*\n";
            $message .= "اسم المجموعة: *(" . $group->name . ")*\n";
            $message .= "رقم ID: (" . $group->id . ")\n";
            $message .= "المرسل: " . $userName;

            $waUrl = "https://wa.me/" . $adminPhone . "?text=" . urlencode($message);
        @endphp

        <div class="d-flex justify-content-between align-items-center mb-3 px-2">
    
            <h6 class="fw-bold text-secondary mb-0">
                قائمة الطلاب ({{ $students->count() }})
            </h6>

            @can('lesson.cancel')
                <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3 py-1" style="font-size: 0.75rem;" data-bs-toggle="modal" data-bs-target="#cancelModal">
                    <i class="bi bi-x-circle ms-1"></i> إلغاء الحصة
                </button>
            @else
                <a href="{{ $waUrl }}" target="_blank" class="btn btn-outline-danger btn-sm rounded-pill px-2 py-1" style="font-size: 0.7rem;">
                    <i class="fab fa-whatsapp ms-1"></i> اطلب إلغاء الحصة
                </a>
            @endcan

        </div>

        <form action="{{ route('attendance.store') }}" method="POST">
            @csrf
            
            <input type="hidden" name="lesson_id" value="{{ $lesson->id }}">

            <div class="row g-2">
                @forelse($students as $student)
                    @php
                        // الرصيد الحالي للطالب
                        $currentBalance = $student->balance;
                        // إجمالي ما دفعه الطالب في هذه الحصة مسبقاً (من المتغير اللي بعتناه من الكنتروللر)
                        $alreadyPaid = $lessonPayments[$student->id] ?? 0;
                    @endphp

                    <div class="col-12 mb-2">
                        <div class="card border-0 shadow-sm rounded-3 overflow-hidden student-card">
                            <label class="card-body p-2 p-md-3 m-0 w-100" style="cursor: pointer;">
                                <div class="row g-2 align-items-center">
                                    
                                    {{-- 1. Checkbox الحضور --}}
                                    <div class="col-auto">
                                        <input class="form-check-input shadow-none student-checkbox" 
                                            type="checkbox" 
                                            name="attendance[{{ $student->id }}]"
                                            value="present"
                                            style="width: 28px; height: 28px;"
                                            @if($lesson->attendanceRecords->isEmpty() || $lesson->attendanceRecords->where('student_id', $student->id)->where('is_present', 1)->first())
                                            checked
                                            @endif
                                        >
                                    </div>

                                    {{-- 2. بيانات الطالب والمالية --}}
                                    <div class="col d-flex align-items-center justify-content-between">
                                        
                                        {{-- الاسم والكود --}}
                                        <div class="text-end ms-2">
                                            <h6 class="fw-bold mb-0 text-dark" style="font-size: 0.95rem;">{{ $student->name }}</h6>
                                            <small class="text-muted">كود: {{ $student->id }}</small>
                                        </div>

                                        {{-- حقل المبلغ والرصيد --}}
                                        <div class="text-center" style="width: 130px;" dir="ltr">
                                            <div class="input-group input-group-sm mb-1">
                                                <span class="input-group-text bg-light px-1" style="font-size: 0.7rem;">ج.م</span>
                                                <input type="number" name="payments[{{ $student->id }}]" 
                                                    class="form-control text-center fw-bold border-primary-subtle p-1" 
                                                    placeholder="{{ $alreadyPaid > 0 ? '+ إضافة' : '0' }}"
                                                    step="0.5">
                                            </div>
                                            
                                            {{-- تنبيه لو الطالب دفع قبل كدة في نفس الحصة --}}
                                            @if($alreadyPaid > 0)
                                                <div class="mt-1">
                                                    <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size: 0.7rem;">
                                                        <i class="bi bi-check-all"></i> دفع مسبقاً: {{ $alreadyPaid }}
                                                    </span>
                                                </div>
                                            @endif

                                            {{-- عرض رصيد الطالب الحقيقي وتلوينه حسب الحالة --}}
                                            <small class="fw-bold d-block {{ $currentBalance < 0 ? 'text-danger' : 'text-success' }}" style="font-size: 0.75rem;">
                                                الرصيد الحالي: {{ $currentBalance }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                @empty
                    {{-- الرسالة في حالة عدم وجود طلاب --}}
                @endforelse
            </div>

            <div class="mt-4 mb-5">
                <button type="submit" class="btn btn-success btn-lg w-100 fw-bold shadow-sm py-3 rounded-3">
                    <i class="bi bi-cloud-check ms-2"></i>
                    حفظ كشف الحضور
                </button>
            </div>
        </form>
    </div>

    <div class="modal fade" id="cancelModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow rounded-4">
                <form action="{{ route('lesson.cancel', $lesson->id) }}" method="POST">
                    @csrf
                    <div class="modal-header border-0 pb-0">
                        <h5 class="fw-bold text-danger">إلغاء الحصة</h5>
                        <button type="button" class="btn-close ms-0 me-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-3">
                        <p class="text-muted small mb-3">برجاء تحديد سبب الإلغاء:</p>
                        <select name="cancellation_reason" class="form-select border-danger rounded-3 tom-select">
                            <option value="">-- اختر السبب --</option>
                            <option value="اعتذار من المدرس">اعتذار المدرس</option>
                            <option value="سوء الأحوال الجوية">سوء الأحوال الجوية</option>
                            <option value="عطل فني بالمكان">عطل فني بالمكان</option>
                            <option value="أخرى">اكتب سبباً آخر</option>
                        </select>

                        <div class="form-floating mt-3">
                            <p class="text-muted small mb-2">أو اكتب سبباً آخر:</p>
                            <textarea name="manual_reason" class="form-control" rows="2" placeholder="اكتب السبب هنا إذا لم يكن موجوداً بالقائمة..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light text-secondary fw-bold" data-bs-dismiss="modal">تراجع</button>
                        <button type="submit" class="btn btn-danger fw-bold px-4">تأكيد الإلغاء</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
@endsection