@extends('layouts.admin.app')

@section('content')
    <main class="mt-5" style="z-index: 0" x-data="{
        tab: 1
    }">
        <div class="container-fluid px-4">
            <a href="{{ route('admin.room.index') }}" class="text-success fw-bold text-decoration-none">
                <i class="fas fa-arrow-left me-2"></i>Kembali Ke Kelas
            </a>
            <div class="card my-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h5">
                            {{ request()->room->name }}
                        </div>
                        <div class="small text-muted">Kelas / Detail Kelas </div>
                    </div>
                    <div class="d-flex justify-content-end align-items-center">
                        <button
                            :class="`btn btn-light border-0 fw-bold py-3 me-2 ${tab == 1 ? 'text-success border-bottom border-success border-3 rounded-0' : 'rounded-3'}`"
                            @click="tab = 1">
                            Sesi kelas
                        </button>
                        <button
                            :class="`btn btn-light border-0 fw-bold rounded-0 py-3 me-2 ${tab == 2 ? 'text-success border-bottom border-success border-3 rounded-0' : 'rounded-3'}`"
                            @click="tab = 2">
                            List Peserta
                        </button>
                        <button
                            :class="`btn btn-light border-0 fw-bold rounded-0 py-3 me-2 position-relative ${tab == 3 ? 'text-success border-bottom border-success border-3 rounded-0' : 'rounded-3'}`"
                            @click="tab = 3">
                            <span
                                class="badge bg-danger rounded-pill position-absolute end-0">{{ $candidates->count() }}</span>
                            Peserta Baru
                        </button>
                        <button
                            :class="`btn btn-light border-0 fw-bold rounded-0 py-3 me-2 position-relative ${tab == 4 ? 'text-success border-bottom border-success border-3 rounded-0' : 'rounded-3'}`"
                            @click="tab = 4">
                            <span
                                class="badge bg-danger rounded-pill position-absolute end-0">{{ $rejected_candidates->count() }}</span>
                            Peserta Ditolak
                        </button>
                    </div>
                </div>
                <div :class="`card-body p-0 ${tab != 1 ? 'd-none' : ''}`">
                    @include('kelas.detail.sesi')
                </div>
                <div :class="`card-body p-0 ${tab != 2 ? 'd-none' : ''}`">
                    @include('kelas.detail.peserta')
                </div>
                <div :class="`card-body p-0 ${tab != 3 ? 'd-none' : ''}`">
                    @include('kelas.detail.peserta-baru')
                </div>
                <div :class="`card-body p-0 ${tab != 4 ? 'd-none' : ''}`">
                    @include('kelas.detail.peserta-ditolak')
                </div>
            </div>
        </div>
    </main>
@endsection