@extends('layout.layout')

@section('content')
<style>
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

@include('components.alert')

<div class="container py-4">
    <input type="hidden" id="teacher_id" value="{{ $teacher_id }}">
    <input type="hidden" id="session_id" value="{{ $session_id }}">
    <input type="hidden" id="schedule_id" value="{{ $schedule_id }}">
    <input type="hidden" id="type" value="{{ $type }}">
    @csrf

    <span class="nav nav-tabs mb-3" id="scoreTabs" role="tablist">
        @foreach ($categories as $index => $category)
        <span role="presentation">
            <button class="nav-link {{ $index === 0 ? 'active' : '' }}" id="tab-{{ $category->id }}"
                data-bs-toggle="tab" data-bs-target="#content-{{ $category->id }}" type="button" role="tab">
                {{ $category->name }}
            </button>
        </span>
        @endforeach
    </span>
    <div class="tab-content" id="scoreTabsContent">
        @foreach ($categories as $index => $category)
        <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="content-{{ $category->id }}"
            role="tabpanel">
            <div class="accordion" id="accordion-{{ $category->id }}">
                @foreach ($category->sections as $sectionIndex => $section)
                @php
                $sectionId = 'category-' . $category->id . '-section-' . $section->id;
                @endphp

                <div class="accordion-item mb-3">
                    <h2 class="accordion-header" id="heading-{{ $sectionId }}">
                        <button
                            class="accordion-button mb-3 text-primary {{ $sectionIndex !== 0 ? 'collapsed' : '' }}"
                            type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapse-{{ $sectionId }}"
                            aria-expanded="{{ $sectionIndex === 0 ? 'true' : 'false' }}"
                            aria-controls="collapse-{{ $sectionId }}">
                            {{ $section->title }}
                        </button>
                    </h2>

                    <div id="collapse-{{ $sectionId }}"
                        class="accordion-collapse collapse {{ $sectionIndex === 0 ? 'show' : '' }}"
                        aria-labelledby="heading-{{ $sectionId }}"
                        data-bs-parent="#accordion-{{ $category->id }}">
                        <div class="accordion-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width: 3%" class="text-center">Score</th>
                                            <th style="width: 30%">Question</th>
                                            <th style="width: 30%">Note</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($section->questions as $question)
                                        @php
                                        $score = $existingAnswers[$question->id]['score'] ?? 0;
                                        $note = $existingAnswers[$question->id]['note'] ?? '';
                                        @endphp
                                        <tr>

                                            <td style="width: 3%;" class="text-center">
                                                @if($staff->jobTitle->slug == "supervisor")

                                                <div class="d-flex justify-content-center align-items-center gap-1">
                                                    <input type="number" min="0" max="{{ $question->full_score }}" step="0.25"
                                                        class="form-control text-center score-input"
                                                        value="{{ $score }}"
                                                        data-question-id="{{ $question->id }}"
                                                        data-max-score="{{ $question->full_score }}"
                                                        data-section-id="{{ $section->id }}"
                                                        style="width: 100px;">
                                                    <span>/ {{ fmod($question->full_score, 1) == 0 ? intval($question->full_score) : number_format($question->full_score, 2) }}</span>
                                                </div>
                                                @else

                                                <div class="d-flex justify-content-center align-items-center gap-1">
                                                    <input type="number" min="0" max="{{ $question->full_score }}" step="0.25"
                                                        class="form-control text-center score-input "
                                                        value="{{ $score }}"
                                                        data-question-id="{{ $question->id }}"
                                                        data-max-score="{{ $question->full_score }}"
                                                        data-section-id="{{ $section->id }}"
                                                        style="width: 100px;" disabled>
                                                    <span>/ {{ fmod($question->full_score, 1) == 0 ? intval($question->full_score) : number_format($question->full_score, 2) }}</span>
                                                </div>

                                                @endif
                                            </td>




                                            <td style="width: 30%">
                                                <div>{{ $question->question_text }}</div>
                                                @if ($question->details)
                                                <ul class="mt-1 small text-muted">
                                                    @foreach (json_decode($question->details, true) as $detail)
                                                    <li>{{ $detail }}</li>
                                                    @endforeach
                                                </ul>
                                                @endif
                                            </td>
                                            <td style="width: 30%;">
                                                @php
                                                $isSupervisor = $staff->jobTitle->slug === 'supervisor';
                                                @endphp

                                                <div class="position-relative">
                                                    <textarea
                                                        class="form-control note-input shadow-sm {{ $isSupervisor ? 'bg-white' : 'bg-light text-muted' }}"
                                                        data-question-id="{{ $question->id }}"
                                                        rows="2"
                                                        placeholder="{{ $isSupervisor ? 'Add note...' : '' }}"
                                                        {{ $isSupervisor ? '' : 'disabled' }}>{{ $note }}</textarea>

                                                    @unless($isSupervisor)
                                                    <small class="text-muted position-absolute bottom-0 end-0 me-2 mb-1" style="font-size: 11px;">
                                                        View only
                                                    </small>
                                                    @endunless
                                                </div>
                                            </td>

                                        </tr>
                                        @endforeach
                                        <tr class="bg-light fw-bold">
                                            <td style="width: 3%" class="text-center" id="section-total-{{ $section->id }}">0</td>
                                            <td>Sub-Parameter total</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</div>
<script>
    function updateSectionTotals() {
        document.querySelectorAll('[id^="section-total-"]').forEach(el => {
            el.innerText = '0.00';
        });
        document.querySelectorAll('.score-input').forEach(input => {
            const sectionId = input.dataset.sectionId;
            console.log(sectionId);
            console.log({
                sectionId,
                targetId: `section-total-${sectionId}`,
                element: document.getElementById(`section-total-${sectionId}`)
            });

            const totalEl = document.getElementById(`section-total-${sectionId}`);
            const value = parseFloat(input.value);
            if (!isNaN(value)) {
                totalEl.innerText = (
                    parseFloat(totalEl.innerText) + value
                ).toFixed(2);
            }
        });
    }
    function saveScore(questionId, score, note = '') {
        // Get max score from the input's data attribute
        const inputElement = document.querySelector(`.score-input[data-question-id="${questionId}"]`);
        const maxScore = inputElement ? parseFloat(inputElement.dataset.maxScore) : 10;

        // Frontend validation
        if (score !== '' && parseFloat(score) > maxScore) {
            toastr.error(`Score cannot exceed ${maxScore}`);
            inputElement.value = Math.min(parseFloat(score), maxScore);
            return;
        }

        // If score is empty, set to 0
        if (score === '') {
            score = 0;
        }

        const trainerId = document.getElementById('teacher_id').value;
        const sessionId = document.getElementById('session_id').value;
        const scheduleId = document.getElementById('schedule_id').value;
        const type = document.getElementById('type').value;

        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            document.querySelector('input[name="_token"]')?.value;

        console.log('CSRF Token:', token ? 'Exists' : 'MISSING!');

        if (!token) {
            toastr.error('Security token missing. Please refresh the page.');
            return;
        }

        const formData = new FormData();
        formData.append('_token', token);
        formData.append('teacher_id', trainerId);
        formData.append('session_id', sessionId);
        formData.append('schedule_id', scheduleId);
        formData.append('type', type);
        formData.append(`scores[${questionId}][score]`, score);
        formData.append(`scores[${questionId}][note]`, note);

        console.log('Sending FormData with token:', token);

        fetch("{{ route('scoreStore') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(response => {
                console.log('Response Status:', response.status);

                if (!response.ok) {
                    return response.text().then(text => {
                        console.log('Response Text:', text);
                        throw new Error(`HTTP ${response.status}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Success Response:', data);
                if (data.success) {
                    updateSectionTotals();
                    toastr.success('Score saved successfully');
                } else {
                    toastr.error(data.message || 'Error saving score');
                }
            })
            .catch(error => {
                console.error('Fetch Error:', error);
                toastr.error('Error saving score');
            })
            .finally(() => {
                console.log('=== END saveScore ===');
            });
    }
    document.addEventListener('DOMContentLoaded', () => {
        updateSectionTotals();
        document.querySelectorAll('.score-input').forEach(input => {
            input.addEventListener('change', function() {
                const questionId = this.dataset.questionId;
                const score = this.value;
                const noteInput = document.querySelector(`.note-input[data-question-id="${questionId}"]`);
                const note = noteInput ? noteInput.value : '';
                saveScore(questionId, score, note);
            });

            // Real-time validation while typing
            input.addEventListener('input', function() {
                const maxScore = parseFloat(this.dataset.maxScore);
                const currentValue = parseFloat(this.value);

                if (this.value !== '' && currentValue > maxScore) {
                    this.value = maxScore;
                    toastr.warning(`Maximum score is ${maxScore}`);
                }
            });
        });

        // Note input event listener (save on blur)
        document.querySelectorAll('.note-input').forEach(textarea => {
            textarea.addEventListener('blur', function() {
                const questionId = this.dataset.questionId;
                const scoreInput = document.querySelector(`.score-input[data-question-id="${questionId}"]`);
                const score = scoreInput ? scoreInput.value : 0;
                const note = this.value;

                saveScore(questionId, score, note);
            });
        });
    });
</script>
@endsection