@extends('cost-calculator.app')
@section('subcontent')
	<div id="question_page" class="question-page-section">
    	<div class="container question-container cost-calculator-container text-center ">
    		<input type="hidden" id="question_number" value="{{ $question_number }}">
    		{{-- @include('cost-calculator.question-'.$file_question_number) --}}
    		
    		<div class="cost-calculator-header">
    		    <h1 class="cost-calculator-title">{!! $question['headline_display'] ?? $question['headline'] !!}</h1>
    		    <p class="cost-calculator-description">{!! $question['description_display'] ?? $question['description'] !!}</p>
    		</div>
    		<div class="cost-calculator-body">
    		    <form id="question_form" class="w-100" action="{{ route('cost-calculator-store-answer', ['question_number' => $question_number]) }}" method="POST" >
    		        @csrf
    		        <input type="hidden" name="question_no" value="{{ $question_number }}">
    		        <input type="hidden" name="headline" value="{{ $question['headline'] }}">
    		        <input type="hidden" name="description" value="{{ $question['description'] }}">
    		        {{-- @dd($question) --}}
		    		@if($question['input_text_only'])
		    			@include('cost-calculator.question-template.one-input-only')
		    		@elseif($question['all_input'])
		    			@include('cost-calculator.question-template.all-input')
		    		@elseif($question['multi_choice'])
		    			@include('cost-calculator.question-template.multiple-choice')
		    		@else
		    			@include('cost-calculator.question-template.single-choice')
		    		@endif
    		    </form>
    		</div>
			<div class="cost-calculator-footer">
			    <div class="navigation">
			        @if ($question_number == 1)
			            <a href="{{ route('cost-calculator-category') }}" class="back-button">Back</a>
			        @else
			            <a href="{{ route('cost-calculator-question', ['question_number' => $question_number - 1]) }}" class="back-button">Back</a>
			        @endif
			        <div class="progress-dots">
			            @for ($progress_dot = 1; $progress_dot <= $total_progress_dots; $progress_dot++)
			            	@php
			                    $has_question = session()->has('question_' . $progress_dot);
			                @endphp
			                <a href="{{ route('cost-calculator-question', ['question_number' => $progress_dot]) }}"
			                   class="dot {{ $progress_dot == $question_number ? 'active' : (!$has_question ? 'future' : '') }}">
			                </a>
			            @endfor
			        </div>
			    </div>
			</div>
		</div>
	</div>
@endsection