@if (isset($timeLines))
@if (count($timeLines) > 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">
                        Enrollment Clearance Timeline
                        <i v-if="!state.show" class="ki-duotone cursor-pointer fs-1 text-success ki-eye" @click="state.show = true"> 
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                        </i>
                        <i v-if="state.show" class="ki-duotone  cursor-pointer fs-1 text-success ki-eye-slash"  @click="state.show = 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">{{ $timeLines[0]['level'] }}</span>
                </h3>
            </div>
            <div class="card-body pb-0 table-responsive" v-if="state.show">
               <div class="table-responsive">
                <table class="table mt-4 table-hover table-striped table-sm align-middle w-100 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($timeLines as $item)
                        <tr>
                            <td class="fs-7 fw-bold">{{ ucwords(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>
</div>
@endif
@endif