@if (isset($graduationTimelines))
@if (count($graduationTimelines) > 0)
<div class="row">
    <div class="col-lg-12 pt-0">
        <div class="card py-0 pt-2 pb-3 mb-4">
            <div class="card-header mx-auto ms-auto pb-0  border-0 pt-0">
                <h3 class="card-title border-0 mx-auto ms-auto  text-center align-items-center flex-column">
                    <span class="card-label fw-bolder fs-3 mb-1">
                        GRADUATION CLEARANCE TIMELINE
                        <i v-if="!state.showGraduation" class="ki-duotone cursor-pointer fs-1 text-success ki-eye" @click="state.showGraduation = true"> 
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                        </i>
                        <i v-if="state.showGraduation" class="ki-duotone  cursor-pointer fs-1 text-success ki-eye-slash"  @click="state.showGraduation = false">
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                            <i class="path4"></i>
                        </i>
                    </span>
                    <span class="mt-1 fw-bold fs-7">{{ $graduationTimelines[0]['year_level'] }} - {{ $graduationTimelines[0]['year_level'] + 1 }} </span>
                </h3>
            </div>
            <div class="card-body pb-0" v-if="state.showGraduation">
                <table class="table mt-4 table-hover table-striped table-sm align-middle gs-4 gy-2"> 
                    <thead>
                        <tr class="fw-bold text-muted bg-light">
                            <th class="ps-4 rounded-start">Department</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Remarks</th>
                            <th class="rounded-end">Processed By</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($graduationTimelines as $item)
                        <tr>
                            <td class="fs-7 fw-bold">{{ implode(' ', explode('_', $item['departments'])) }}</td>
                            <td>
                                <span class="badge badge-secondary
                                @if (in_array($item->status_name, ['Not Approved', 'Incomplete', 'Not Allowed To Re-Enroll','Unpaid Balance', 'Book Replacement', 'Unpaid Balance', 'Not Allowed To Enroll']))
                                    {{'badge-danger'}}
                                @elseif (in_array($item->status_name, [ 'Approved', 'Approved With Condition', 'Enrolled', 'Enrolled With Condition']))
                                    {{'badge-success'}}
                                @elseif (in_array($item->status_name, ['Pending Clearance']))
                                    {{'badge-warning'}}
                                @endif">{{ $item->status_name }}</span>
                            </td>
                            <td>
                                @if (!is_null($item['staff_name'] ))
                                <p class="fw-bold mb-0">
                                    {{ date('m/d/Y', strtotime($item['process_date'])) }}
                                </p>
                                @endif
                            </td>
                            <td>{{ $item->process_remarks }}</td>
                            <td>{{ $item->staff_name }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>
@endif
@endif