@php
    use App\Models\EnrollmentModule\Enrollment;
@endphp
<div class="row">
    <div class="">
        <div class="card">
            <div class="px-4 py-3 border-bottom">
                <div class="d-flex justify-content-between">
                    <h5 class="card-title fw-semibold mb-0 lh-sm">Student's Enrollment Courses</h5>
                    <button type="button" class="btn me-1 mb-1 btn-primary text-white btn-lg fs-4 font-medium" data-content="{{ route('enrollment.add.modal', ['student_id' => encrypt($student->id)]) }}" data-bs-toggle="modal" data-bs-target="#largeModal">
                        <i class="ti ti-plus me-0 me-md-1 fs-4"></i> Add Enrollment
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="row">
    @foreach($student->enrollments as $enrollment)
        <div class="col-4 mb-3">
            <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                <div class="card-body p-4">
                    <div class="nav nav-pills rounded align-items-center flex-row">
                        <div class="col-11">
                            <h6>Course: {{ $enrollment->course?->name }} </h6>
                            <h6>Track#{{ $enrollment->track?->track_num }} {{ $enrollment->track?->title }}</h6>
                            <h6>Level#{{ $enrollment->level?->level_num }} {{ $enrollment->level?->title }}</h6>
                            <h6>Class#{{ $enrollment->latest_enrollment_class?->class?->name }}</h6>
                            <span class="badge bg-success">
                                {{ Enrollment::status($enrollment->status) }}
                            </span>
                        </div>
                        <div class="col-1">
                            <a href="javascript:void(0)" data-content="{{ route('enrollment.edit.modal', ['id' => encrypt($enrollment->id)]) }}" class="" title="Edit" data-bs-toggle="modal" data-bs-target="#largeModal">
                                <i class="fs-4 ti ti-edit"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>