@if (isset($examTimelines))
@if (count($examTimelines) > 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">
                        Exam Clearance Timeline
                        <i v-if="!state.examShow" class="ki-duotone cursor-pointer fs-1 text-success ki-eye" @click="state.examShow = true"> 
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                        </i>
                        <i v-if="state.examShow" class="ki-duotone  cursor-pointer fs-1 text-success ki-eye-slash"  @click="state.examShow = false">
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                            <i class="path4"></i>
                        </i>
                        @if ($examTimelines['status'] == 1)
                        <a href="/exam-permit/print" target="_blank" >
                            <i class="ki-duotone ki-printer ms-3 fs-1 text-success ">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                                <span class="path5"></span>
                            </i>
                        </a>
                        @endif
                    </span>
                    <span class="mt-1 fw-bold fs-7">{{ $examTimelines['clearance'][0]['title'] }}</span>
                </h3>
            </div>
            <div class="card-body pb-0" v-if="state.examShow">
                <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($examTimelines['clearance'] as $item)
                        @if (!is_null($item['clearance']))
                        <tr>
                            <td class="fs-7 fw-bold"> {{ implode(' ', explode('_', $item['departments'])) }}</td>
                            <td>
                                <span class="badge badge-secondary
                                @if (in_array($item['clearance']['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['clearance']['status_name'], [ 'Approved', 'Approved With Condition', 'Enrolled', 'Enrolled With Condition']))
                                    {{'badge-success'}}
                                @elseif (in_array($item->status_name, ['Pending Clearance']))
                                    {{'badge-warning'}}
                                @endif">{{ $item['clearance']['status_name'] }}</span>
                            </td>
                            <td>
                                @if (!is_null($item['clearance']['staff_name'] ))
                                    <p class=" mb-0" >{{ date('m/d/Y', strtotime($item['clearance']['process_date'])) }}</p>
                                @endif
                            </td>
                            <td>{{$item['clearance']['process_remarks']}}</td>
                            <td>{{$item['clearance']['staff_name']}}</td>
                        </tr>
                        @endif 
                        @endforeach

                    </tbody>
                </table>

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