@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        function progressColor($pct) {
            if ($pct >= 100) return 'bg-primary';
            if ($pct >= 50)  return 'bg-warning';
            return 'bg-danger';
        }
    @endphp
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card mb-3 shadow-sm">
                        <div class="row align-items-center">
                            <div class="card-header col-12 col-md-auto mb-2 mb-md-0 pb-md-3 pb-0">
                                <h5 class="mb-0">{{ $title_menu }}</h5>
                            </div>
                            <div class="col-12 col-md">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="card-body col-12 col-md-auto">
                                <div class="mb-3">
                                    <h5>Kelengkapan Data Pelamar</h5>
                                    
                                    <div class="collapsed rounded shadow-sm py-1 px-2 user-select-none" role="button"
                                        data-bs-toggle="collapse" data-bs-target="#kelengkapanCollapse" aria-expanded="false"
                                        aria-controls="kelengkapanCollapse" tabindex="0"
                                        style="cursor:pointer;transition:border-color 0.18s;border:1.5px solid transparent;"
                                        onmouseover="this.style.borderColor='var(--bs-primary)'"
                                        onmouseout="this.style.borderColor='transparent'">
                                        <div class="w-100 d-flex justify-content-between align-items-center fw-semibold">
                                            <span class="fw-bold">Overall Progress</span>
                                            <span class="fw-bold">{{ $overall }}%</span>
                                        </div>
                                        <div class="progress my-2" role="progressbar" aria-valuenow="{{ $overall }}"
                                            aria-valuemin="0" aria-valuemax="100" style="height: 18px;">
                                            <div class="progress-bar {{ progressColor($overall) }}" style="width: {{ $overall }}%"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="collapse mt-3" id="kelengkapanCollapse">
                                        <div class="row">
                                            @php
                                                $sections = [
                                                    'Data Diri',
                                                    'Kesehatan',
                                                    'Keluarga',
                                                    'Pendidikan',
                                                    'Pelatihan',
                                                    'Bahasa & IT',
                                                    'Deskripsi',
                                                    'Pekerjaan',
                                                    'Organisasi',
                                                    'Pertanyaan',
                                                ];
                                            @endphp
                                            @foreach ($sections as $section)
                                                @php $value = $progress[$section] ?? 0; @endphp
                                                <div class="col-12 col-md-6 mb-3">
                                                    <div class="d-flex align-items-center mb-1">
                                                        <p class="text-sm mb-0 flex-grow-1">{{ $section }}</p>
                                                        <span class="ms-2 text-dark">{{ $value }}%</span>
                                                    </div>
                                                    <div class="progress" role="progressbar"
                                                        aria-valuenow="{{ $value }}" aria-valuemin="0"
                                                        aria-valuemax="100" style="height: 12px;">
                                                        <div class="progress-bar {{ progressColor($value) }}" style="width: {{ $value }}%"></div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="mt-3 ps-3 border-start border-3 border-primary">
                                    <p class="mb-1">Dear Candidates,
                                    </p>
                                    <p class="mb-2">
                                        Thank you for applying for the job(s) and submitting your data. We will review your
                                        application carefully. You will be contacted by our recruitment team if your
                                        application meets our requirements. In the meantime, please feel free to wait and
                                        take care.
                                    </p>
                                    <p class="mb-0">Regards,<br>MSJ Recruitment
                                        &amp; Development</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
@endpush