@extends('layouts.form')

@section('content')
    <h2 class="text-2xl font-bold mb-6 text-gray-900">Basic Competency Test</h2>
    <form method="POST" action="{{ route('competency-test.form.store') }}">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">

        <!-- Applicant Info (Readonly) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <p class="text-sm text-gray-500">Nama</p>
                <p class="font-semibold text-gray-900">{{ $application->full_name }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Posisi</p>
                <p class="font-semibold text-gray-900">{{ $application->job->title ?? '-' }}</p>
            </div>
            <div>
                <label for="assessment_date" class="form-label">Tgl Test</label>
                <input type="date" id="assessment_date" name="assessment_date"
                    value="{{ old('assessment_date', now()->format('Y-m-d')) }}" class="form-input">
            </div>
            <div>
                <label for="examiner_name" class="form-label">Pemeriksa</label>
                <input type="text" id="examiner_name" name="examiner_name" value="{{ old('examiner_name') }}"
                    class="form-input" placeholder="Nama Pemeriksa">
            </div>
        </div>

        <!-- Assessment Criteria -->
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Penilaian Aspek Basic Competency Test</h3>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="px-2 py-2 text-left w-32">Aspek</th>
                            <th class="px-2 py-2 text-left">Uraian</th>
                            <th class="px-2 py-2 text-center w-32">Nilai (0-100)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $aspects = [
                                'score_perseptual' => [
                                    'label' => 'Perseptual',
                                    'desc' =>
                                        'Kemampuan dalam melihat suatu masalah dari berbagai sudut pandang, berpikir antisipatif.',
                                ],
                                'score_ketelitian' => [
                                    'label' => 'Ketelitian',
                                    'desc' =>
                                        'Kecermatan, sikap kehati-hatian atau tidak membuat dan mengulang kesalahan dalam pekerjaan.',
                                ],
                                'score_verbal' => [
                                    'label' => 'Verbal',
                                    'desc' =>
                                        'Pengetahuan kosakata & bahasa yang meliputi memahami makna, maksud yang disampaikan dan menarik kesimpulan secara garis besarnya.',
                                ],
                                'score_numerik' => [
                                    'label' => 'Numerik',
                                    'desc' =>
                                        'Kemampuan berpikir secara matematis dan logis, menganalisa suatu masalah hitungan dan mencari penyelesiannya secara praktis dengan menggunakan penalaran.',
                                ],
                                'score_logika' => [
                                    'label' => 'Logika',
                                    'desc' =>
                                        'Menguji kemampuan seseorang berfikir sesuai nalar/masuk akal untuk menganalisa masalah dan mencari solusinya.',
                                ],
                            ];
                        @endphp

                        @foreach ($aspects as $name => $data)
                            <tr class="border-b border-gray-200">
                                <td class="px-2 py-3 font-medium">{{ $data['label'] }}</td>
                                <td class="px-2 py-3 text-gray-600">{{ $data['desc'] }}</td>
                                <td class="px-2 py-3">
                                    <input type="number" name="{{ $name }}" value="{{ old($name) }}"
                                        min="0" max="100" class="form-input text-center score-input"
                                        data-aspect="{{ $name }}">
                                </td>
                            </tr>
                        @endforeach
                        <tr class="bg-gray-50 font-semibold">
                            <td colspan="2" class="px-2 py-3 text-right">Rata-rata Nilai</td>
                            <td class="px-2 py-3 text-center" id="average-score">0</td>
                        </tr>
                        <tr class="bg-gray-50 font-semibold">
                            <td colspan="2" class="px-2 py-3 text-right">Kriteria</td>
                            <td class="px-2 py-3 text-center" id="rating-label">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Notes -->
        <div class="mb-6">
            <label for="notes" class="form-label">Catatan Tambahan</label>
            <textarea id="notes" name="notes" rows="4" class="form-textarea" placeholder="Masukkan catatan tambahan...">{{ old('notes') }}</textarea>
        </div>

        <button type="submit" class="w-full btn-primary">Submit Test</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const scoreInputs = document.querySelectorAll('.score-input');
            const averageScoreEl = document.getElementById('average-score');
            const ratingLabelEl = document.getElementById('rating-label');

            function calculateAverage() {
                let total = 0;
                let count = 0;

                scoreInputs.forEach(input => {
                    if (input.value !== '') {
                        total += parseFloat(input.value);
                        count++;
                    }
                });

                const average = count > 0 ? (total / count).toFixed(2) : 0;
                averageScoreEl.textContent = average;

                updateRatingLabel(average);
            }

            function updateRatingLabel(score) {
                let label = '-';
                let colorClass = 'text-gray-500';

                if (score >= 90) {
                    label = 'Sangat Memuaskan (SM)';
                    colorClass = 'text-green-600';
                } else if (score >= 80) {
                    label = 'Memuaskan (M)';
                    colorClass = 'text-blue-600';
                } else if (score >= 70) {
                    label = 'Cukup Memuaskan (C)';
                    colorClass = 'text-indigo-600';
                } else if (score >= 60) {
                    label = 'Kurang Memuaskan (KM)';
                    colorClass = 'text-yellow-600';
                } else if (score > 0) {
                    label = 'Tidak Memuaskan (TM)';
                    colorClass = 'text-red-600';
                }

                ratingLabelEl.textContent = label;
                ratingLabelEl.className = 'px-2 py-3 text-center font-bold ' + colorClass;
            }

            scoreInputs.forEach(input => {
                input.addEventListener('input', calculateAverage);
            });

            // Initial calculation
            calculateAverage();
        });
    </script>
@endsection