@extends('layouts.master')

@section('title', 'Request Detail')

@section('style')
    <style>
    </style>
@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">

            <div class="col-lg-12">
                <h1 class="mb-4">@yield('title')</h1>

                <div class="card">
                    <div class="card-body">

                        <h3>Applicant Information</h3>
                        <br>
                        <div class="row g-3">
                            @forelse($applicants ?? [] as $index => $applicant)
                                <div class="col-sm-6 col-lg-4">
                                    <div class="card h-100">
                                        <div class="card-body">
                                            <h5 class="card-title">#{{ $index + 1 }} — {{ $applicant->firstname }}
                                                {{ $applicant->lastname }}</h5>
                                            <p class="mb-1"><strong>Program:</strong> {{ $applicant->program }}</p>
                                            <p class="mb-1"><strong>School:</strong> {{ $applicant->school }}</p>
                                            <p class="mb-1"><strong>Degree:</strong> {{ $applicant->degree }}</p>
                                            <a href="{{ route('applications.show', $applicant->id) }}"
                                                class="btn btn-sm btn-primary mt-2">ดูรายละเอียด</a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p class="text-muted">ยังไม่มีผู้สมัคร</p>
                                </div>
                            @endforelse
                        </div>

                        <hr class="my-8" />

                        <h3>Progress Bar</h3>
                        <br>
                        {{-- <p class="lead fs-lg mb-8">We make your spending <span class="underline">stress-free</span>
                            for you to have the perfect control.</p> --}}
                        <div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper line">
                            <div class="col-md-6 col-lg-3"> <span
                                    class="icon btn btn-circle btn-lg btn-soft-primary pe-none mb-4"><span
                                        class="number">01</span></span>
                                <h4 class="mb-1">ส่งข้อมูลผใบสมัคร</h4>
                                <p class="mb-0">ระบบได้รับข้อมูลใบสมัครของคุณแล้ว กำลังเข้าสู่ขั้นตอนถัดไป</p>
                            </div>
                            <div class="col-md-6 col-lg-3"> <span
                                    class="icon btn btn-circle btn-lg btn-primary pe-none mb-4"><span
                                        class="number">02</span></span>
                                <h4 class="mb-1">อยู่ระหว่างตรวจสอบคุณสมบัติของผู้สมัคร</h4>
                                <p class="mb-0">เจ้าหน้าที่กำลังตรวจสอบข้อมูลของผู้สมัครอย่างละเอียด</p>
                            </div>
                            <div class="col-md-6 col-lg-3"> <span
                                    class="icon btn btn-circle btn-lg btn-soft-primary pe-none mb-4"><span
                                        class="number">03</span></span>
                                <h4 class="mb-1">คณะกรรมการคัดเลือกผู้สมัคร</h4>
                                <p class="mb-0">ข้อมูลของคุณถูกส่งให้คณะกรรมการเพื่อพิจารณาคัดเลือก</p>
                            </div>
                            <div class="col-md-6 col-lg-3"> <span
                                    class="icon btn btn-circle btn-lg btn-soft-primary pe-none mb-4"><span
                                        class="number">04</span></span>
                                <h4 class="mb-1">ผ่านการคัดเลือก/ไม่ผ่านการคัดเลือก</h4>
                                <p class="mb-0">ระบบจะแจ้งผลการคัดเลือกเมื่อกระบวนการทั้งหมดเสร็จสิ้น</p>
                            </div>
                        </div>

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

    @include('layouts.footer')
@endsection