@extends('layout.layout')

@section('content')
@include('components.alert')

<div class="container py-4">
    <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;
                $totalScore = 0;
                @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: 20%" class="text-center">Score</th>
                                            <th style="width: 50%">Question</th>
                                            <th style="width: 30%">Note</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($section->questions as $question)
                                        @php
                                        $scoreData = $existingAnswers[$question->id] ?? ['score' => 0, 'note' => null];
                                        $score = $scoreData['score'];
                                        $totalScore += $score;
                                        @endphp
                                        <tr>
                                            <td style="width: 20%" class="text-center">
                                                <span class="form-control text-center score-input">
                                                    {{ $score }}
                                                </span>
                                            </td>

                                            <td style="width: 50%">
                                                <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%">
                                                <span class="form-control">{{ $scoreData['note'] ?? '' }}</span>
                                            </td>

                                        </tr>
                                        @endforeach
                                        <tr class="bg-light fw-bold">
                                            <td>Sub-Parameter total</td>
                                            <td style="width: 20%" class="text-center"> {{ $totalScore }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection