@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: 50%">Question</th>
                                                        <th style="width: 20%" class="text-center">Score</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($section->questions as $question)
                                                        @php
                                                            $score = $existingAnswers[$question->id] ?? 0;
                                                            $totalScore += $score;
                                                        @endphp
                                                        <tr>
                                                            <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: 20%" class="text-center">
                                                                <span class="form-control text-center score-input">
                                                                    {{ $score }}
                                                                </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