@extends('layout')

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

@section('content')
    <div class=" page-header-light ">

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

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

                <h4 class="text-white text-2xl font-bold mb-1">Clients & Engagement</h4>
                <p class="text-white text-base">Gestion des questionnaires</p>
            </div>
            @include('shared.navbar')
        </div>
        @include('quiz._search')
    </div>

    <div class="content">


        <div class="d-flex my-1">
            <button type="button" class="button button-success ml-auto" id="addQuestionnaireButton">
                Ajouter un questionnaire
            </button>
        </div>

        <div id="questionnaireForm" class="d-none">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Ajouter un questionnaire</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="reservation">Réservation</label>
                        <select class="form-control select-search" id="reservation" name="reservation_id">
                            <option value="" disabled selected>Select a reservation</option>
                            @foreach($reservations as $reservation)
                                <option value="{{ $reservation->id }}">
                                    {{ $reservation->reference_id }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <a href="#" id="generateButton" class="button button-primary">Génerer</a>
                    <button type="button" class="button cancel-button" id="cancelButton">Annuler</button>
                </div>
            </div>
        </div>

        @foreach($responses as $reservation_id => $responseGroup)
            @php
                $isFirst = $loop->first;
                $collapseId = 'collapse' . $reservation_id;
                $lang = $responseGroup->first()->lang === 'Français' ? 'fr' : 'en';
            @endphp
            <div class="card rounded-2xl mb-4">
                <div class="card-header">
                    <h5 class="mb-0 d-flex justify-content-between align-items-center">
                        <button class="btn btn-link d-flex align-items-center" type="button" data-toggle="collapse"
                            data-target="#{{ $collapseId }}" aria-expanded="{{ $isFirst ? 'true' : 'false' }}"
                            aria-controls="{{ $collapseId }}">
                            <h5>
                                <i class="fas fa-chevron-up  mr-2"></i>
                                Reservation #{{ $reservation_id }}
                                - {{ $responseGroup->first()->f_name }} {{ $responseGroup->first()->l_name }}
                            </h5>
                        </button>
                    </h5>
                </div>
                <div id="{{ $collapseId }}" class="collapse show">
                    <div class="card-body">
                        <p><strong class="font-weight-bold text-warning mr-2">Reference ID:</strong>
                            {{ $responseGroup->first()->reference_id }}
                        </p>
                        <p>
                            <strong class="font-weight-bold text-warning mr-2">Check-in:</strong>
                            {{ $carbon::create($responseGroup->first()->check_in)->format('d/m/Y') }}
                        </p>
                        <p>
                            <strong class="font-weight-bold text-warning mr-2">Check-out:</strong>
                            {{ $carbon::create($responseGroup->first()->check_out)->format('d/m/Y') }}
                        </p>
                        <p><strong class="font-weight-bold text-warning mr-2">Total
                                Price:</strong>
                            {{ number_format($responseGroup->first()->total_price_converted ? (float) $responseGroup->first()->total_price_converted : (float) $responseGroup->first()->total_price, 2, ',', ' ') }}
                            TND</p>

                        @if(!empty($responseGroup->first()->mail))
                            <p>
                                <strong class="font-weight-bold text-warning mr-2">Client:</strong>
                                {{ $responseGroup->first()->f_name }} {{ $responseGroup->first()->l_name }}
                            </p>
                            <p><strong class="font-weight-bold text-warning mr-2">Email:</strong>
                                {{ $responseGroup->first()->mail }}</p>
                        @endif

                        <p>
                            <strong class="font-weight-bold text-warning mr-2">Logement:</strong>
                            {{ $responseGroup->first()->name }}
                        </p>

                        <hr>
                        <ul class="list-group">
                            @php
                                $sumNotes = 0;
                                $selectedOptions = request()->get('options', []);
                                $selectedQuestion = request()->get('question', []);
                            @endphp
                            @foreach($responseGroup as $response)
                                        <li class="list-group-item d-flex">
                                            <span class="font-weight-bold text-primary mr-2">Question:</span>
                                            <div
                                                class="mr-2 col-4 @if($response->question->id == $selectedQuestion) text-white bg-success @endif">
                                                {{ __('messages.' . $response->question->question, [], $lang) }}
                                            </div>
                                            <div class="border-right mx-2"></div>
                                            <span class="font-weight-bold text-primary mr-2">Réponse:</span>
                                            @if($response->option)
                                                            <div class="mr-2 col-4 @if(
                                                                in_array($response->option->option_value_id, $selectedOptions)
                                                                && $response->question->id == $selectedQuestion
                                                            ) text-white bg-success @endif">
                                                                @php
                                                                    $sumNotes += $response->option->note;
                                                                @endphp
                                                                {{ __('messages.' . $response->option->option_text, [], $lang) }}
                                                            </div>
                                            @else
                                                {{ __($response->text_response, [], $lang) }}
                                            @endif
                                        </li>
                            @endforeach
                            <figure class="notation ml-auto text-center mr-2 mb-2">
                                <span role="img" style="width: {{ $sumNotes / $maxSumOption * 100 }}%;"></span>
                                <figcaption class="screen-readers mt-4">
                                    Noté {{ number_format($sumNotes / $maxSumOption / 2 * 10, 1, ',') }} sur 5
                                </figcaption>
                            </figure>
                        </ul>
                    </div>
                </div>
            </div>
        @endforeach

        <div class="d-flex justify-content-center mt-4">
            {{ $responses->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>

    </div>

    <link href="{{ asset('backAssets/assets/css/note.css') }}" rel="stylesheet" type="text/css">

    <script>
        $(document).ready(function () {
            $('#addQuestionnaireButton').on('click', function () {
                $('#questionnaireForm').removeClass('d-none');
            });

            $('#cancelButton').on('click', function () {
                $('#questionnaireForm').addClass('d-none');
            });

            $('#reservation').on('change', function () {
                let reservationId = $(this).val();
                let generateUrl = "{{ route('quiz.show', ':reservation_id') }}";
                generateUrl = generateUrl.replace(':reservation_id', reservationId);
                $('#generateButton').attr('href', generateUrl);
            });

            if ($('#question').val()) {
                // Assuming you have an array of selected option IDs from the request
                var selectedOptions = {!! json_encode(Request::get('options', [])) !!}; // Convert PHP array to JavaScript

                // Trigger AJAX  question when page is loaded
                var questionId = $('#question').val();
                // Make an AJAX request
                $.ajax({
                    url: '{{ route('quiz.get-options') }}', // URL to fetch the options
                    method: 'GET',
                    data: { question_id: questionId },
                    success: function (response) {
                        // Clear the current options
                        $('#options').empty();

                        // Append the new options
                        $.each(response.options, function (index, option) {
                            var selected = selectedOptions.includes(String(option.option_value_id)) ? 'selected' : ''; // Check if option is selected
                            $('#options').append('<option name="options" value="' + option.option_value_id + '" ' + selected + '>' + option.option_text + '</option>');
                        });
                    }
                });
            }
        });
    </script>
@endsection