@extends('website.surveys.layouts.index')

@section('content')
<div class="main-title">
    <h3>{{ $survey->title }}</h3>
</div>
<form action="{{ route('surveys.reply',['survey' => $survey->id]) }}" class="form" method="POST">
    @csrf
    <input type="hidden" name="room" value="{{ request('room') }}">
    <input type="hidden" name="table" value="{{ request('table') }}">
    
    <div class="questions">
        @foreach ($survey->questions as $question)
        <div class="question">
            <div class="header">
                <h5 class="title">{{ $question->title }} </h5>
            </div>

            <div class="options">
                @foreach ($question->options as $option)
                <div class="option">
                    <div class="pretty p-svg  p-round  p-bigger">
                        <input @if ($loop->first && $question->required) required @endif
                        type="radio" name="questions[{{ $question->id }}][options][0][id]" value="{{ $option->id }}" />

                        <div class="state p-success">
                            <svg class="svg svg-icon" viewBox="0 0 20 20">
                                <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
                            </svg>

                            <label> {{ $option->title }} </label>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>

    <div class="actions">
        <button class="btn btn-success" type="submit">
            @lang('global.submit')
        </button>
    </div>
</form>

@if (session("survey_answered.$survey->id"))
<x-bootstrap.modal id="repliedModal" content-type='slot' width="xl" :with-header="false" :centered="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="replied">
        <img src="{{ mix('website/surveys/images/check.svg','assets') }}" class="check-image" />

        <h3 class="mt-3">
            @lang('messages.info.surveys.replied')
        </h3>
    </div>
</x-bootstrap.modal>
@endif


@endsection