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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3 py-md-4">
        <div class="row g-2 g-md-3 mb-3 mb-md-4">

            @php
                $stats = [
                    ['label' => 'Total Pelamar', 'value' => $total_pelamar, 'icon' => 'users', 'color' => 'primary'],
                    ['label' => 'Menunggu Review', 'value' => $total_active, 'icon' => 'clock', 'color' => 'warning'],
                    ['label' => 'Dalam Proses', 'value' => $total_process, 'icon' => 'spinner', 'color' => 'info'],
                    ['label' => 'Diterima', 'value' => $total_accepted, 'icon' => 'check-circle', 'color' => 'success'],
                ];
            @endphp

            @foreach ($stats as $s)
                <div class="col-6 col-md-6 col-xl-3">

                    <div class="card shadow-sm h-100 border-0">
                        <div class="card-body p-3">

                            <div class="d-flex align-items-center justify-content-between">

                                <div class="flex-grow-1">

                                    <div class="text-muted text-uppercase fw-bold mb-1"
                                        style="font-size:10px; letter-spacing:.4px;">
                                        {{ $s['label'] }}
                                    </div>

                                    <div class="fw-bold"
                                        style="font-size: clamp(20px,4vw,28px); line-height:1; font-variant-numeric: tabular-nums;                         ">
                                        {{ number_format($s['value']) }}
                                    </div>

                                </div>

                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 bg-gradient-{{ $s['color'] }} text-white"
                                    style="width:44px;height:44px;">
                                    <i class="fas fa-{{ $s['icon'] }}"></i>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            @endforeach
        </div>


        <div class="row g-2 g-md-3">

            <div class="col-12 col-lg-8">
                <div class="card h-100 shadow-sm">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0 text-sm text-md-base">Departemen dengan Pelamar Terbanyak</h6>
                    </div>

                    <div class="card-body pt-2 p-2 p-md-3">
                        <div class="position-relative" style="height:240px; min-height:220px; max-height:45vh;">
                            <canvas id="chart-applicants"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-header p-3 pb-0">
                        <h6 class="mb-0 text-sm text-md-base">Ringkasan Status</h6>
                    </div>

                    <div class="card-body p-2 p-md-3">

                        @php
                            $statuses = [
                                ['label' => 'Active', 'value' => $total_active, 'color' => 'primary'],
                                ['label' => 'Dalam Proses', 'value' => $total_process, 'color' => 'info'],
                                ['label' => 'Diterima', 'value' => $total_accepted, 'color' => 'success'],
                                ['label' => 'Ditolak', 'value' => $total_rejected, 'color' => 'danger'],
                            ];
                        @endphp

                        @foreach ($statuses as $s)
                            @php
                                $pct = $total_pelamar > 0 ? round(($s['value'] / $total_pelamar) * 100) : 0;
                            @endphp

                            <div class="mb-2 mb-md-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="text-xs text-md-sm fw-bold">{{ $s['label'] }}</span>
                                    <span class="text-xs text-md-sm text-muted">{{ $s['value'] }}</span>
                                </div>

                                <div class="progress" style="height:6px;">
                                    <div class="progress-bar bg-{{ $s['color'] }}" style="width: {{ $pct }}%">
                                    </div>
                                </div>
                            </div>
                        @endforeach

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


        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow">

                    <div
                        class="card-header p-3 d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
                        <h6 class="mb-0">Pelamar Terbaru</h6>
                        <a href="{{ url('tsappl') }}" class="btn btn-sm btn-primary w-100 w-md-auto">Lihat Semua</a>
                    </div>

                    <div class="card-body p-2 p-md-3">

                        <div class="d-none d-md-block">

                            <div class="row py-3">
                                <div class="col-lg">
                                    <div class="nav-wrapper">
                                        <div class="form-control border-0">

                                            <div class="table-responsive">
                                                <table class="table display align-middle" id="recent_applicants_table">

                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th class="text-uppercase text-secondary text-xxs fw-bold">Nama
                                                            </th>
                                                            <th class="text-uppercase text-secondary text-xxs fw-bold">
                                                                Posisi</th>
                                                            <th class="text-uppercase text-secondary text-xxs fw-bold">
                                                                Status</th>
                                                            <th class="text-uppercase text-secondary text-xxs fw-bold">
                                                                Tanggal</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        @forelse($recent_applicants as $app)
                                                            @php
                                                                $statusColors = [
                                                                    'active' => 'primary',
                                                                    'test' => 'secondary',
                                                                    'interview' => 'info',
                                                                    'accepted' => 'success',
                                                                    'rejected' => 'danger',
                                                                ];
                                                                $statusLabels = [
                                                                    'active' => 'Active',
                                                                    'test' => 'Test',
                                                                    'interview' => 'Interview',
                                                                    'accepted' => 'Accepted',
                                                                    'rejected' => 'Rejected',
                                                                ];
                                                            @endphp

                                                            <tr>
                                                                <td class="text-sm font-weight-bold text-dark">
                                                                    {{ $app->nama }}
                                                                </td>

                                                                <td class="text-sm font-weight-normal">
                                                                    {{ $app->posisi }}
                                                                </td>

                                                                <td>
                                                                    <span
                                                                        class="badge rounded-pill bg-{{ $statusColors[$app->status] ?? 'secondary' }}">
                                                                        {{ $statusLabels[$app->status] ?? $app->status }}
                                                                    </span>
                                                                </td>

                                                                <td class="text-sm text-muted">
                                                                    {{ \Carbon\Carbon::parse($app->created_at)->format('d M Y H:i:s') }}
                                                                </td>
                                                            </tr>

                                                        @empty
                                                            <tr>
                                                                <td colspan="4" class="text-center text-muted py-4">
                                                                    Belum ada data pelamar.
                                                                </td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>

                                                </table>
                                            </div>

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

                        </div>

                        <div class="d-block d-md-none">
                            @forelse($recent_applicants as $app)
                                @php
                                    $statusColors = [
                                        'active' => 'primary',
                                        'test' => 'secondary',
                                        'interview' => 'info',
                                        'accepted' => 'success',
                                        'rejected' => 'danger',
                                    ];
                                    $statusLabels = [
                                        'active' => 'Active',
                                        'test' => 'Test',
                                        'interview' => 'Interview',
                                        'accepted' => 'Accepted',
                                        'rejected' => 'Rejected',
                                    ];
                                @endphp

                                <div class="card mb-3 border">
                                    <div class="card-body p-3">

                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <h6 class="mb-0 fw-bold">{{ $app->nama }}</h6>
                                                <small class="text-muted">{{ $app->posisi }}</small>
                                            </div>

                                            <span
                                                class="badge rounded-pill bg-{{ $statusColors[$app->status] ?? 'secondary' }}">
                                                {{ $statusLabels[$app->status] ?? $app->status }}
                                            </span>
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <small class="text-muted">Tanggal Apply</small>
                                            <small
                                                class="fw-bold">{{ \Carbon\Carbon::parse($app->created_at)->format('d M Y H:i:s') }}</small>
                                        </div>

                                    </div>
                                </div>

                            @empty
                                <div class="text-center text-muted py-4">Belum ada data pelamar.</div>
                            @endforelse
                        </div>

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

    </div>
@endsection


@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        var ctx = document.getElementById("chart-applicants").getContext("2d");

        new Chart(ctx, {
            type: "bar",
            data: {
                labels: {!! $chart_labels !!},
                datasets: [{
                    backgroundColor: "rgba(2,130,132,0.85)",
                    borderRadius: 6,
                    maxBarThickness: 28,
                    data: {!! $chart_values !!},
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            font: {
                                size: 10
                            }
                        },
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        });
    </script>
@endpush