@extends('layouts.admin')

@section('title', 'Tambah Nilai')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Tambah Nilai</h2>
    <a href="{{ route('scores.index') }}" class="btn btn-secondary">Kembali</a>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@php
$data = $internships->map(fn ($i) => [
    'id' => $i->id,
    'label' => $i->student->user->name.' - '.$i->student->nis.' ('.$i->company->name.')',
    'has_defense' => !!$i->defenseSchedule?->session?->completed,
    'scores' => $i->scores->mapWithKeys(fn ($s) => [(string) $s->score_category_id => (string) $s->score])->toArray(),
])->values();
$sidangId = $sidangCategory ? (string) $sidangCategory->id : null;
@endphp

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('scores.store') }}" id="scoreForm">
            @csrf
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="internship_id" class="form-label">Siswa</label>
                    <select name="internship_id" id="internship_id" class="form-select @error('internship_id') is-invalid @enderror" required>
                        <option value="">-- Pilih Siswa --</option>
                        @foreach ($internships as $internship)
                        <option value="{{ $internship->id }}" {{ old('internship_id') == $internship->id ? 'selected' : '' }}>
                            {{ $internship->student->user->name }} ({{ $internship->student->nis }} - {{ $internship->company->name }})
                        </option>
                        @endforeach
                    </select>
                    @error('internship_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div id="sidangNotice" class="alert alert-info d-none"></div>

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 60%;">Kategori Nilai</th>
                            <th style="width: 40%;">Nilai</th>
                        </tr>
                    </thead>
                    <tbody id="scoreBody">
                        @forelse ($categories as $category)
                        <tr data-category-id="{{ $category->id }}" data-is-sidang="{{ $sidangId && $category->id == $sidangId ? '1' : '0' }}">
                            <td>{{ $category->name }}</td>
                            <td>
                                <input type="hidden" name="scores[{{ $loop->index }}][score_category_id]" value="{{ $category->id }}">
                                <input type="number" name="scores[{{ $loop->index }}][score]" class="form-control score-input" min="0" max="100" step="0.01" placeholder="0-100">
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center text-muted">Belum ada kategori nilai. Buat kategori terlebih dahulu.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <button type="submit" class="btn btn-primary">Simpan Semua Nilai</button>
        </form>
    </div>
</div>

@push('scripts')
<script>
    const internshipsData = @json($data);
    const sidangCategoryId = @json($sidangId);

    function renderScores() {
        const select = document.getElementById('internship_id');
        const id = select.value;
        const body = document.getElementById('scoreBody');
        const notice = document.getElementById('sidangNotice');
        const rows = body.querySelectorAll('tr[data-category-id]');

        if (!id) {
            rows.forEach(r => {
                r.querySelector('.score-input').value = '';
                r.querySelector('.score-input').disabled = false;
            });
            notice.classList.add('d-none');
            return;
        }

        const entry = internshipsData.find(e => String(e.id) === String(id));
        const scores = entry ? entry.scores : {};

        rows.forEach(r => {
            const catId = r.getAttribute('data-category-id');
            const isSidang = r.getAttribute('data-is-sidang') === '1';
            const scoreInput = r.querySelector('.score-input');
            scoreInput.value = scores[catId] || '';

            if (isSidang) {
                scoreInput.disabled = !(entry && entry.has_defense);
                if (scoreInput.disabled) {
                    scoreInput.value = '';
                }
            } else {
                scoreInput.disabled = false;
            }
        });

        if (entry && !entry.has_defense) {
            notice.textContent = 'Siswa ini belum melaksanakan sidang, sehingga nilai "Sidang Laporan" tidak dapat diisi.';
            notice.classList.remove('d-none');
        } else {
            notice.classList.add('d-none');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const select = document.getElementById('internship_id');
        select.addEventListener('change', renderScores);
        renderScores();

        const form = document.getElementById('scoreForm');
        form.addEventListener('submit', function (e) {
            if (!select.value) {
                e.preventDefault();
                alert('Pilih siswa terlebih dahulu.');
            }
        });
    });
</script>
@endpush
@endsection