@extends('layout-page')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    @php
        $lang = $reservation->lang === 'Français' ? 'fr' : 'en';
    @endphp

    {{-- <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-list mr-2"></i> <span class="font-weight-semibold">{{ __('messages.quiz', [], $lang) }}</span></h4>
            </div>
        </div>
    </div> --}}

    <div class=" page-header-light" style="border-radius: 0px">

        <div class="d-flex justify-content-between align-items-center mx-3 my-1">

            <div class="d-flex flex-column tailwind-scope ">

                <h4 class="text-white text-2xl font-bold mt-2">{{ __('messages.quiz', [], $lang) }}</h4>
                {{-- <p class="text-white text-sm">Gestion des clients</p> --}}
            </div>
            {{-- @include('shared.navbar') --}}
        </div>

    </div>
    <div class="content">
        <div class="tailwind-scope">
            <form action="{{ route('quiz.store', $reservation->id) }}" method="POST" novalidate id="quiz-form">
                @csrf
                @foreach($questions as $key => $question)
                    <div class="shadow-md rounded-2xl border border-[#E9EEF3]  p-3 m-3">
                        <div class="flex items-center">

                            <i class="fa-solid fa-square-poll-vertical mr-2  text-2xl"></i>
                            <h4 class="text-dark text-lg font-bold">{{ __('messages.'.$question->question, [], $lang) }}   <span class="text-danger">*</span></h4>
                        </div>
                           
                          
                        {{-- <label class="font-weight-bold">
                            {{ __('messages.'.$question->question, [], $lang) }} 
                        </label> --}}
                        @if($question->type == 'single_choice')
                        <div class="d-flex items-center gap-4 p-3">

                       
                            @foreach($question->options as $option)
                                <div class="flex flex-col items-center gap-2 relative">
                                    <input
                                        class="form-check-input-styled-success"
                                        type="radio"
                                        name="responses[{{ $question->id }}][option_id]"
                                        value="{{ $option->id }}"
                                        id="switch-{{ $option->id }}"
                                        @if(isset($responses[$question->id]) && $responses[$question->id]->option_id == $option->id) checked
                                        @endif
                                        @if($is_submitted) disabled @endif
                                        required
                                    >
                                    <label class="form-check-label " for="switch-{{ $option->id }}">
                                        
                                        {{ __('messages.'.$option->option_text, [], $lang) }}
                                    </label>
                                    {{-- @if($key === 8)
                                        <button type="button" class="button button-primary px-4 py-1 absolute left-20 " id="avis-btn" style="display: none;">
                                            <span class="w-full ">

                                                {{ __('messages.add_avis', [], $lang) }}
                                            </span>
                                        </button>
                                    @endif --}}
                                </div>
                            @endforeach
                        </div>
                        @if($key === 8)
                        <button type="button" class="button button-primary px-3 py-2 ml-2 " id="avis-btn" style="display: none;">
                            {{ __('messages.add_avis', [], $lang) }}
                        </button>
                        @endif
                        @elseif($question->type == 'text')
                            <textarea
                                name="responses[{{ $question->id }}][text_response]"
                                class="form-control rounded-2xl border border-[#E9EEF3] p-3 mt-3 mx-1"
                                rows="3"
                                @if($is_submitted) disabled @endif
                                required
                            >{{ old("responses.{$question->id}.text_response", $responses[$question->id]->text_response ?? '') }}</textarea>
                        @endif
                    </div>
                @endforeach
                @if(!$is_submitted)
                    <div class="text-center">
                        <button type="submit" class="px-3 py-2 bg-[#31B08F] text-white rounded-md hover:bg-[#28a745] cursor-pointer transition duration-200" id="submit-btn" disabled>{{ __('messages.submit', [], $lang) }}</button>
                    </div> 
                @else
                    <div class="alert alert-success" role="alert">
                        {{ __('messages.responses_submitted', [], $lang) }}
                    </div>
                @endif
            </form>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var $form = $('#quiz-form');
            var $submitBtn = $('#submit-btn');
            var $addAvisBtn = $('#avis-btn');

            $form.on('input', function () {
                var allFilled = true;

                $form.find('input[type="radio"][required]').each(function () {
                    var name = $(this).attr('name');
                    if (!$('input[name="' + name + '"]:checked').length) {
                        allFilled = false;
                    }
                });

                $form.find('textarea[required]').each(function () {
                    if (!$(this).val().trim()) {
                        allFilled = false;
                    }
                });

                $submitBtn.prop('disabled', !allFilled);
            });

            $('#switch-30').on('change', function() {
                if ($(this).is(':checked')) {
                    $addAvisBtn.show();
                }
            });

            $('#avis-btn').on('click', function(){
                window.open('https://www.google.com/search?hl=fr-FR&gl=fr&q=The+LandLord,+11+Rue+du+Maroc,+Marsa+2070,+Tunisie&ludocid=12837878000934348149&lsig=AB86z5UW0FHIRM-r5WCAl9dua294&source=g.page.m.kd._&laa=lu-desktop-review-solicitation#laa=lu-desktop-review-solicitation&lrd=0x12fd35809a13ab8d:0xb2294e061b7e6575,3', '_blank');
            });

            $('#switch-31').on('change', function() {
                if ($(this).is(':checked')) {
                    $addAvisBtn.hide();
                }
            });
        });
    </script>
@endsection