@extends('layouts.app')

@section('styles')
<style>
.nav-tabs-sm .nav-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.nav-tabs-sm .badge-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
}
</style>
@endsection

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.index') }}"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Tests') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('tests.questions', $test->id) }}">{{ $test->trans('name') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('Edit Question') }}</li>
                    </ol>
                </nav>
                <h1 class="page-title">{{ __('Edit Question') }}</h1>
            </header>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="page-section">
                <div class="row">
                    <div class="col-md-6">
                        <section class="card card-fluid">
                            <header class="card-header">{{ __('Question Details') }}</header>
                            <div class="card-body">
                                <form method="POST" action="{{ route('tests.questions.update', [$test->id, $question->id]) }}">
                                    @csrf
                                    @method('PUT')

                                    <div class="form-group">
                                        <label>{{ __('Question') }} <span class="text-danger">*</span></label>
                                        @include('components.translatable-input', [
                                            'name' => 'question',
                                            'type' => 'textarea',
                                            'model' => $question,
                                            'modelType' => 'question',
                                            'modelId' => $question->id,
                                            'rows' => 3,
                                            'required' => true
                                        ])
                                        @error('question')
                                            <div class="text-danger small">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="type">{{ __('Question Type') }}</label>
                                                <select name="type" id="type" class="form-control" onchange="toggleMaxAnswers()">
                                                    <option value="0" {{ $question->type == 0 ? 'selected' : '' }}>{{ __('Single Answer') }}</option>
                                                    <option value="1" {{ $question->type == 1 ? 'selected' : '' }}>{{ __('Multiple Answers') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group" id="max_answers_group" style="display: {{ $question->type == 1 ? 'block' : 'none' }};">
                                                <label for="max_answers">{{ __('Maximum answers') }}</label>
                                                <input type="number" name="max_answers" id="max_answers" class="form-control" 
                                                    value="{{ $question->max_answers }}" min="1">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('Extra content') }}</label>
                                        @include('components.translatable-input', [
                                            'name' => 'extra_content',
                                            'type' => 'textarea',
                                            'model' => $question,
                                            'modelType' => 'question',
                                            'modelId' => $question->id,
                                            'rows' => 2
                                        ])
                                    </div>

                                    <button type="submit" class="btn btn-primary">{{ __('Save Question') }}</button>
                                </form>
                            </div>
                        </section>

                        @if($question->render_type === 'slider')
                        <section class="card card-fluid mt-3">
                            <header class="card-header">{{ __('Slider Category Scoring') }}</header>
                            <div class="card-body">
                                <p class="text-muted small">
                                    {{ __('Define how the slider position (0-100) contributes to each category. The score is linearly interpolated between left (0%) and right (100%) values.') }}
                                </p>

                                @if($questionCategories->count() > 0)
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Category') }}</th>
                                                <th>{{ __('Left (0%)') }}</th>
                                                <th>{{ __('Right (100%)') }}</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($questionCategories as $qc)
                                                <tr>
                                                    <form method="POST" action="{{ route('tests.question-categories.update', [$test->id, $question->id, $qc->category_id]) }}" class="d-flex align-items-center">
                                                        @csrf
                                                        @method('PUT')
                                                        <td>{{ $qc->category ? $qc->category->trans('name') : '-' }}</td>
                                                        <td><input type="number" name="left_value" class="form-control form-control-sm" value="{{ $qc->left_value }}" style="width: 80px;"></td>
                                                        <td><input type="number" name="right_value" class="form-control form-control-sm" value="{{ $qc->right_value }}" style="width: 80px;"></td>
                                                        <td>
                                                            <button type="submit" class="btn btn-sm btn-outline-primary mr-1"><i class="fa fa-save"></i></button>
                                                    </form>
                                                            <form method="POST" action="{{ route('tests.question-categories.destroy', [$test->id, $question->id, $qc->category_id]) }}" style="display:inline" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                                                            </form>
                                                        </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif

                                <hr>
                                <h6>{{ __('Add Category Score') }}</h6>
                                <form method="POST" action="{{ route('tests.question-categories.store', [$test->id, $question->id]) }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4">
                                            <select name="category_id" class="form-control form-control-sm" required>
                                                <option value="">{{ __('Select category') }}</option>
                                                @foreach($categories as $category)
                                                    @if(!$questionCategories->contains('category_id', $category->id))
                                                        <option value="{{ $category->id }}">{{ $category->trans('name') }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" name="left_value" class="form-control form-control-sm" placeholder="{{ __('Left (0%)') }}" value="0" required>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" name="right_value" class="form-control form-control-sm" placeholder="{{ __('Right (100%)') }}" value="100" required>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="submit" class="btn btn-primary btn-sm">{{ __('Add') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </section>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <section class="card card-fluid">
                            <header class="card-header">
                                {{ $question->render_type === 'slider' ? __('Slider Labels') : __('Answers') }}
                            </header>
                            <div class="card-body">
                                @if($question->render_type === 'slider')
                                    <p class="text-muted small">
                                        {{ __('For sliders, answers are used as labels. The first and last labels appear at the ends of the slider.') }}
                                    </p>
                                @endif

                                @if($answers->count() > 0)
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>{{ $question->render_type === 'slider' ? __('Label') : __('Answer') }}</th>
                                                @if($question->render_type !== 'slider')
                                                    <th>{{ __('Categories') }}</th>
                                                @endif
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($answers as $answer)
                                                <tr>
                                                    <td>{{ \Illuminate\Support\Str::limit($answer->trans('answer'), 40) }}</td>
                                                    @if($question->render_type !== 'slider')
                                                        <td>
                                                            @php
                                                                $answerCats = $answer->categoryScores()->with('category')->get();
                                                            @endphp
                                                            @if($answerCats->count() > 0)
                                                                @foreach($answerCats as $ac)
                                                                    <span class="badge badge-secondary">{{ $ac->category ? $ac->category->trans('name') : '-' }}: {{ $ac->value }}</span>
                                                                @endforeach
                                                            @elseif($answer->category_id)
                                                                <span class="badge badge-secondary">{{ $answer->pointCategory ? $answer->pointCategory->trans('name') : '-' }}: {{ $answer->value }}</span>
                                                            @else
                                                                <span class="text-muted">-</span>
                                                            @endif
                                                        </td>
                                                    @endif
                                                    <td>
                                                        <a href="{{ route('tests.questions.edit', [$test->id, $question->id, 'edit_answer' => $answer->id]) }}" 
                                                           class="btn btn-sm btn-outline-primary">
                                                            <i class="fa fa-edit"></i>
                                                        </a>
                                                        <form method="POST" action="{{ route('tests.answers.destroy', [$test->id, $question->id, $answer->id]) }}" 
                                                            style="display:inline" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <p class="text-muted">{{ $question->render_type === 'slider' ? __('No labels yet.') : __('No answers yet.') }}</p>
                                @endif

                                @if(isset($editingAnswer))
                                <hr>
                                <h6>{{ $question->render_type === 'slider' ? __('Edit Label') : __('Edit Answer') }}</h6>
                                <form method="POST" action="{{ route('tests.answers.update', [$test->id, $question->id, $editingAnswer->id]) }}">
                                    @csrf
                                    @method('PUT')
                                    <div class="form-group">
                                        <label>{{ $question->render_type === 'slider' ? __('Label text') : __('Answer text') }}</label>
                                        @include('components.translatable-input', [
                                            'name' => 'answer',
                                            'type' => 'text',
                                            'model' => $editingAnswer,
                                            'modelType' => 'answer',
                                            'modelId' => $editingAnswer->id,
                                            'required' => true
                                        ])
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">{{ __('Save') }}</button>
                                    <a href="{{ route('tests.questions.edit', [$test->id, $question->id]) }}" class="btn btn-secondary btn-sm">{{ __('Cancel') }}</a>
                                </form>

                                @if($question->render_type !== 'slider')
                                    <hr>
                                    <h6>{{ __('Category Scores for this Answer') }}</h6>
                                    @php
                                        $editingAnswerCats = $editingAnswer->categoryScores()->with('category')->get();
                                    @endphp
                                    @if($editingAnswerCats->count() > 0)
                                        <table class="table table-sm mb-2">
                                            <thead>
                                                <tr>
                                                    <th>{{ __('Category') }}</th>
                                                    <th>{{ __('Points') }}</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($editingAnswerCats as $eac)
                                                    <tr>
                                                        <td>{{ $eac->category ? $eac->category->trans('name') : '-' }}</td>
                                                        <td>{{ $eac->value }}</td>
                                                        <td>
                                                            <form method="POST" action="{{ route('tests.answer-categories.destroy', [$test->id, $editingAnswer->id, $eac->category_id]) }}" style="display:inline" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                    <form method="POST" action="{{ route('tests.answer-categories.store', [$test->id, $editingAnswer->id]) }}" class="d-flex align-items-end">
                                        @csrf
                                        <div class="mr-2">
                                            <select name="category_id" class="form-control form-control-sm" required>
                                                <option value="">{{ __('Select category') }}</option>
                                                @foreach($categories as $category)
                                                    @if(!$editingAnswerCats->contains('category_id', $category->id))
                                                        <option value="{{ $category->id }}">{{ $category->trans('name') }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mr-2">
                                            <input type="number" name="value" class="form-control form-control-sm" placeholder="{{ __('Points') }}" value="0" required style="width: 80px;">
                                        </div>
                                        <button type="submit" class="btn btn-primary btn-sm">{{ __('Add') }}</button>
                                    </form>
                                @endif
                                @else
                                <hr>
                                <h6>{{ $question->render_type === 'slider' ? __('Add Label') : __('Add Answer') }}</h6>
                                <form method="POST" action="{{ route('tests.answers.store', [$test->id, $question->id]) }}">
                                    @csrf
                                    <div class="form-group">
                                        <label>{{ $question->render_type === 'slider' ? __('Label text') : __('Answer text') }}</label>
                                        @include('components.translatable-input', [
                                            'name' => 'answer',
                                            'type' => 'text',
                                            'model' => null,
                                            'required' => true
                                        ])
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">{{ $question->render_type === 'slider' ? __('Add Label') : __('Add Answer') }}</button>
                                </form>
                                @endif
                            </div>
                        </section>
                    </div>
                </div>

                <div class="mt-3">
                    <a href="{{ route('tests.questions', $test->id) }}" class="btn btn-secondary">{{ __('Back to Questions') }}</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('js/translations.js') }}"></script>
<script>
function toggleMaxAnswers() {
    var type = document.getElementById('type').value;
    document.getElementById('max_answers_group').style.display = type == 1 ? 'block' : 'none';
}
</script>
@endpush