@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/stylesheets/nouislider.css') }}">
<style>
.slider-container {
    padding: 20px 10px 30px 10px;
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.875rem;
    color: #6c757d;
}
.slider-labels span {
    text-align: center;
    flex: 1;
}
.slider-labels span:first-child {
    text-align: left;
    flex: 0 0 auto;
}
.slider-labels span:last-child {
    text-align: right;
    flex: 0 0 auto;
}
.nouislider-wrapper {
    height: 18px;
}
.nouislider-wrapper .noUi-target {
    height: 18px;
    border-radius: 9px;
}
.nouislider-wrapper .noUi-handle {
    width: 28px;
    height: 28px;
    top: -6px;
    border-radius: 50%;
    cursor: pointer;
}
.nouislider-wrapper .noUi-handle:before,
.nouislider-wrapper .noUi-handle:after {
    display: none;
}
</style>
@endsection

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="page-title">{{ $test->trans('name') }}</h1>
                    @if($timerSeconds !== null)
                        <div class="timer-display" id="timer">
                            <i class="fa fa-clock"></i> <span id="timer-value">{{ gmdate('i:s', $timerSeconds) }}</span>
                        </div>
                    @endif
                </div>
                <div class="progress mt-2" style="height: 8px;">
                    <div class="progress-bar" role="progressbar" 
                        style="width: {{ ($page / $totalPages) * 100 }}%;" 
                        aria-valuenow="{{ $page }}" 
                        aria-valuemin="0" 
                        aria-valuemax="{{ $totalPages }}">
                    </div>
                </div>
                <small class="text-muted">{{ __('Page :current of :total', ['current' => $page, 'total' => $totalPages]) }}</small>
            </header>

            <div class="page-section">
                <form method="POST" action="{{ route('tests.user.page.submit', ['test' => $test->id, 'page' => $page]) }}" id="test-form">
                    @csrf

                    @php
                        $hasSliders = $pageQuestions->where('render_type', 'slider')->count() > 0;
                        $pageHeaderTitle = $pageHeader && $pageHeader->title ? $pageHeader->title : null;
                    @endphp

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

                    <div class="alert alert-danger d-none" id="slider-error" role="alert">
                        {{ __('You need to move some sliders in order to get to an accurate profile') }}
                    </div>

                    @if($pageHeaderTitle)
                        <div class="alert alert-info mb-4">
                            <h5 class="mb-0">{!! $pageHeaderTitle !!}</h5>
                        </div>
                    @endif

                    @foreach($pageQuestions as $question)
                        <section class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title">{{ $question->question }}</h5>
                                
                                @if($question->extra_content)
                                    <p class="text-muted">{!! $question->extra_content !!}</p>
                                @endif

                                <div class="mt-3">
                                    @if($question->render_type == 'slider')
                                        {{-- Slider input --}}
                                        @php
                                            $sliderAnswers = $question->answersOrdered;
                                            $hasCustomLabels = $sliderAnswers->count() >= 2;
                                        @endphp
                                        <div class="slider-container">
                                            <div class="nouislider-wrapper" id="slider_{{ $question->id }}" data-question-id="{{ $question->id }}"></div>
                                            <input type="hidden" name="answers[{{ $question->id }}]" id="slider_value_{{ $question->id }}" 
                                                value="{{ $savedAnswers[(string)$question->id] ?? 50 }}">
                                            <div class="slider-labels" style="justify-content: space-between;">
                                                @if($hasCustomLabels)
                                                    @foreach($sliderAnswers as $sliderAnswer)
                                                        <span>{{ $sliderAnswer->trans('answer') }}</span>
                                                    @endforeach
                                                @else
                                                    <span>{{ __('Disagree') }}</span>
                                                    <span>{{ __('Agree') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    @elseif($question->render_type == 'textarea' || $question->render_type == 'textarea_small')
                                        {{-- Text area input --}}
                                        <textarea name="answers[{{ $question->id }}]" 
                                            class="form-control" 
                                            rows="{{ $question->render_type == 'textarea_small' ? 2 : 4 }}"
                                            placeholder="{{ __('Enter your answer...') }}">{{ $savedAnswers[(string)$question->id] ?? '' }}</textarea>
                                    @elseif($question->render_type == 'number')
                                        {{-- Number input --}}
                                        <input type="number" name="answers[{{ $question->id }}]" 
                                            class="form-control" style="max-width: 200px;"
                                            value="{{ $savedAnswers[(string)$question->id] ?? '' }}"
                                            placeholder="{{ __('Enter a number') }}">
                                    @elseif($question->type == 1 || $question->render_type == 'checkbox')
                                        {{-- Multiple answers / Checkboxes --}}
                                        @php $qAnswers = $savedAnswers[(string)$question->id] ?? []; @endphp
                                        @foreach($question->answersOrdered as $answer)
                                            <div class="custom-control custom-checkbox mb-2">
                                                <input type="checkbox" 
                                                    id="answer_{{ $answer->id }}" 
                                                    name="answers[{{ $question->id }}][]" 
                                                    value="{{ $answer->id }}" 
                                                    class="custom-control-input"
                                                    {{ is_array($qAnswers) && in_array($answer->id, $qAnswers) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="answer_{{ $answer->id }}">
                                                    {{ $answer->answer }}
                                                </label>
                                            </div>
                                        @endforeach
                                        @if($question->max_answers)
                                            <small class="text-muted">{{ __('Select up to :max answers', ['max' => $question->max_answers]) }}</small>
                                        @endif
                                    @else
                                        {{-- Default: Single answer / Radio buttons --}}
                                        @foreach($question->answersOrdered as $answer)
                                            <div class="custom-control custom-radio mb-2">
                                                <input type="radio" 
                                                    id="answer_{{ $answer->id }}" 
                                                    name="answers[{{ $question->id }}]" 
                                                    value="{{ $answer->id }}" 
                                                    class="custom-control-input"
                                                    {{ ($savedAnswers[(string)$question->id] ?? '') == $answer->id ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="answer_{{ $answer->id }}">
                                                    {{ $answer->answer }}
                                                </label>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </section>
                    @endforeach

                    <div class="d-flex justify-content-between">
                        @if($page > 1)
                            <button type="submit" name="previous" value="1" class="btn btn-secondary">
                                <i class="fa fa-arrow-left mr-1"></i> {{ __('Previous') }}
                            </button>
                        @else
                            <div></div>
                        @endif

                        @if($page < $totalPages)
                            <button type="submit" name="next" value="1" class="btn btn-primary">
                                {{ __('Next') }} <i class="fa fa-arrow-right ml-1"></i>
                            </button>
                        @else
                            <button type="submit" name="submit" value="1" class="btn btn-success">
                                {{ __('Finish Test') }} <i class="fa fa-check ml-1"></i>
                            </button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('assets/javascript/nouislider.min.js') }}"></script>
<script>
(function() {
    // Track initial slider values and whether they've moved
    var sliderInitialValues = {};
    var sliderCurrentValues = {};
    var hasSliders = false;
    var pageAlreadyAnswered = false;

    // Initialize sliders
    var sliders = document.querySelectorAll('.nouislider-wrapper');
    sliders.forEach(function(sliderEl) {
        hasSliders = true;
        var questionId = sliderEl.getAttribute('data-question-id');
        var inputEl = document.getElementById('slider_value_' + questionId);
        var startValue = parseInt(inputEl.value) || 50;
        
        // Store initial value
        sliderInitialValues[questionId] = startValue;
        sliderCurrentValues[questionId] = startValue;
        
        // If any slider starts with a non-default value, this page was already answered
        if (startValue !== 50) {
            pageAlreadyAnswered = true;
        }
        
        noUiSlider.create(sliderEl, {
            start: [startValue],
            range: { min: 0, max: 100 },
            connect: [true, true],
            step: 1
        });
        
        sliderEl.noUiSlider.on('change', function(values) {
            var newValue = Math.round(values[0]);
            inputEl.value = newValue;
            sliderCurrentValues[questionId] = newValue;
        });
    });

    // Form validation - check if at least one slider has moved (only for first-time visits)
    var formEl = document.getElementById('test-form');
    formEl.addEventListener('submit', function(e) {
        // Only validate when going forward (next or submit), not when going back
        var submitter = e.submitter;
        if (submitter && submitter.name === 'previous') {
            return true; // Allow going back without validation
        }

        if (!hasSliders) {
            return true; // No sliders on this page, allow submission
        }

        // If page was already answered before, allow submission
        if (pageAlreadyAnswered) {
            return true;
        }

        // Check if at least one slider has a non-default value (moved from 50)
        var anyMoved = Object.keys(sliderCurrentValues).some(function(key) {
            return sliderCurrentValues[key] !== 50;
        });

        if (!anyMoved) {
            e.preventDefault();
            var errorEl = document.getElementById('slider-error');
            errorEl.classList.remove('d-none');
            window.scrollTo({ top: 0, behavior: 'smooth' });
            return false;
        }

        return true;
    });

    @if($timerSeconds !== null)
    // Timer functionality
    var seconds = {{ $timerSeconds }};
    var timerEl = document.getElementById('timer-value');
    
    function updateTimer() {
        if (seconds <= 0) {
            formEl.submit();
            return;
        }
        
        var mins = Math.floor(seconds / 60);
        var secs = seconds % 60;
        timerEl.textContent = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
        
        if (seconds <= 60) {
            document.getElementById('timer').classList.add('text-danger');
        }
        
        seconds--;
    }
    
    setInterval(updateTimer, 1000);
    @endif
})();
</script>
@endpush

@push('styles')
<style>
.timer-display {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}
</style>
@endpush