@extends('layouts.public')
@section('infosradio', 'Sondages')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('content')
    @php
        $surveyIds = array_column(json_decode($surveys, true), 'id');
    @endphp
    <main class="main-content h-100">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Sondages : ' . $radio->name) !!}</h2>
                </div>
            </div>
        </div>
        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">
                <div class="bg-white rounded row gy-4 h-100 p-0 p-md-4">
                    <div class="message_div"></div>
                    @if (count($surveys))
                        <div class="accordion" id="accordionExampleSurvey">
                                                        @foreach ($surveys as $survey)
                                <div class="accordion-item border border-black survey-content-div mb-3"
                                    id="survey-div-{{ $survey->id }}" hidden>
                                    <h2 class="accordion-header" id="headingSurvey-{{ $survey->id }}">
                                        <button class="accordion-button collapsed fs-15 fw-bold" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseSurvey-{{ $survey->id }}"
                                            aria-expanded="false" aria-controls="collapseSurvey-{{ $survey->id }}">
                                            {{ $survey->title }}
                                        </button>
                                    </h2>
                                    <div id="collapseSurvey-{{ $survey->id }}" class="accordion-collapse collapse"
                                        aria-labelledby="headingSurvey-{{ $survey->id }}"
                                        data-bs-parent="#accordionExampleSurvey">
                                        <div class="accordion-body">
                                            <form class="form-horizontal surveyForm" method="POST"
                                                action="{{ route('survey.store') }}"
                                                data-element="surveyForm-{{ $survey->id }}">
                                                @csrf
                                                <div class="survey-content" data-element="survey-{{ $survey->id }}">
                                                    <p><b>Catégorie:</b> {{ $survey->category->name }}</p>

                                                    <div class="d-flex row justify-content-center">
                                                        @foreach ($survey->questions as $quiz)
                                                            @if (count($quiz->proposals))
                                                                <div class="col-md-4 mb-3">
                                                                    <div class="border rounded-4 p-4 shadow-sm h-100"
                                                                        style="border-color: #7b2cbf;">
                                                                        <h5 class="fw-bold mb-4">{{ $quiz->content }}</h5>

                                                                        <div class="poll-area poll-area-{{ $survey->id }}"
                                                                            data-value="{{ $survey->total }}">

                                                                            @foreach ($quiz->proposals as $rep)
                                                                                <div class="form-check mb-3">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="poll{{ $quiz->id }}-{{ $survey->id }}"
                                                                                        value="{{ $rep->id }}"
                                                                                        id="opt-{{ $rep->id }}">
                                                                                    <label for="opt-{{ $rep->id }}"
                                                                                        class="form-check-label spec opt-{{ $rep->id }}"
                                                                                        compass="c-{{ $quiz->id }}"
                                                                                        onclick="checkInput(this)">
                                                                                        <div class="row">
                                                                                            <div class="column"
                                                                                                data-value='{{ $rep->total }}'>
                                                                                                <span class="circle"></span>
                                                                                                <span
                                                                                                    class="text">{{ $rep->content }}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="percent-part d-none"
                                                                                            data-percent="0%">
                                                                                        </div>
                                                                                        <div class="progress d-none"
                                                                                            style='--w:0;'>
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @php $i++; @endphp
                                                <div class="d-flex justify-content-center mt-4">
                                                    <button id="survey-submit-btn-{{ $survey->id }}" type="submit"
                                                        class="btn bg-linear-gradient text-white btn-lg">
                                                        Soumettre
                                                        <i class="feather-sm" data-feather="send"></i>
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="col-lg-12">
                            <div class="text-center mx-auto font-weight-bold">
                                <i class="fa fa-inbox fa-4x text-black"></i> <br>
                                <h3>Aucun sondage disponible !</h3>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    </main>
@endsection

@section('scripts')
    <script src="{{ asset('dist/extra-libs/RTCMultiConnection/dist/RTCMultiConnection.min.js') }}"></script>
    <script src="{{ config('app.socketServer') . 'socket.io/socket.io.js' }}"></script>
    <script src="https://malsup.github.io/jquery.blockUI.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        let surveysIds = [];
        let surveys_divs = document.querySelectorAll(".survey-content-div");

        surveys_divs.forEach(survey_div => {
            surveysIds.push(survey_div.getAttribute('id').split('-')[2]);
        });

        let listSubmittedSurveys = JSON.parse(localStorage.getItem('listSurveys'));
        let listNotSubmittedSurveys = surveysIds.filter(checkSurvey);

        surveys_divs.forEach(survey_div => {
            if (listNotSubmittedSurveys.includes(survey_div.getAttribute('id').split('-')[2])) {
                survey_div.hidden = false;
            }
        });

        function checkSurvey(survey_id) {
            return !listSubmittedSurveys.includes(survey_id);
        }
    </script>

    <script>
        let surveyIds = @json($surveyIds, JSON_PRETTY_PRINT);
        let difference = [];

        let $btns = $('.list-group-item-action').click(function() {
            if (this.id == 'all-card-list') {
                let $el = $('.' + this.id).fadeIn();
                $('#all-card-container > div').not($el).hide();
            } else if (this.id == 'current-card-delete') {
                let $el = $('.' + this.id).fadeIn();
                $('#all-card-container > div').not($el).hide();
            } else {
                let $el = $('.' + this.id).fadeIn();
                $('#all-card-container > div').not($el).hide();
            }
            $btns.removeClass('active');
            $(this).addClass('active');
        });

        $(".show-left-part").on("click", function() {
            $(".left-part").toggleClass("show-panel"),
                $(".show-left-part").toggleClass("fa-bars")
            /*
                if ($(window).width() < 992) {
                    if ( $(".left-part").hasClass("show-panel") ) {
                        $('#all-card-container').css('opacity', 0);
                    } else {
                        $('#all-card-container').css('opacity', 1);
                    }
                }
            */
        });

        if (localStorage.getItem('listSurveys') == null) {
            localStorage.setItem('listSurveys', JSON.stringify([]));
        }

        let listSurvey = JSON.parse(localStorage.getItem('listSurveys'));

        if (localStorage.getItem('makeSurvey') == null) {
            localStorage.setItem('makeSurvey', 'NO');
        } else {
            if (localStorage.getItem('makeSurvey') == 'YES') {

                let div = `
                    <div class="col-lg-12">
                        <div class="text-center mx-auto font-weight-bold">
                            <i class="fa fa-inbox fa-4x text-black"></i> <br>
                            <h3>Aucun sondage disponible !</h3>
                        </div>
                    </div>
                `;

                jQuery.grep(surveyIds, function(el) {
                    if (jQuery.inArray(el.toString(), listSurvey) == -1) difference.push(el.toString());
                });

                if (difference.length > 0) {
                    listSurvey.forEach(function(el) {
                        $('div[data-element="survey-' + el + '"]').remove();
                    });
                }

                if (($('.survey-content').length == 0) || (difference.length == 0)) {

                    $(div).insertAfter('.message_div');

                    $('.surveyForm').remove();

                    // $('#nextSurvey').hide();
                    // $('#prevSurvey').hide();
                } else if (difference.length == 1) {
                    // $('#nextSurvey').hide();
                    // $('#prevSurvey').hide();
                }
            }
        }


        // Le formulaire recherche si le bouton "Soumettre" a été cliqué
        // $('#survey-form').find('button').on('click', function(event) {

        surveyIds.forEach(el => {

            // $('#survey-submit-btn').on('click', function(event) {
            $('#survey-submit-btn-' + el).on('click', function(event) {
                event.preventDefault();

                let validateArr = [];

                // Nombre de questions
                // let nb_quiz = $('.poll-area').length;
                let nb_quiz = $('.poll-area-' + el).length;

                // Nombre de réponses cochées
                let checked = $('input:radio:checked').length;

                // Si le nombre de réponses cochées est différent du nombre de questions
                if (nb_quiz != checked) {

                    // Demander à l'auditeur de répondre à toutes les questions
                    submitMSG(false, "Veuillez répondre à toutes les questions du sondage!!", "surveyInfo");

                    // Sinon
                } else {

                    // Initiate Variables With Form Content
                    // let form = $(this).parents('#survey-form');
                    let form = $(this).parents('form[data-element="surveyForm-' + el + '"]');
                    let fdata = {};

                    // $('#survey-submit-btn').disabled = true;

                    $.blockUI({
                        message: '<h1>Svp, veuillez patientez...</h1>',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    });

                    // Enregistrer les valeurs (IDs des propositions de réponses)
                    // des checkboxes cochées pour chaque question
                    form.find('input:radio:checked').get().forEach(function(el) {
                        fdata[el.name] = el.value;
                    });

                    console.log(fdata);

                    // Enregistrer les Ids de tous les sondages
                    // $('.survey-content').each((index, item) => {
                    //     listSurvey.push(($(item).attr('data-element').split('-')[1]).toString());
                    // });
                    listSurvey.push(el.toString());

                    // Envoi de la requête POST de soumission des sondages
                    $.ajax({
                        url: form.attr('action'),
                        type: 'POST',
                        data: fdata,
                        success: function(resp) {
                            // En cas de succès

                            if (resp.success == true) {

                                // Sauvegarde de la liste des sondages
                                localStorage.setItem('listSurveys', JSON.stringify(listSurvey));
                                // var listSurvey_json = JSON.stringify(listSurvey);
                                // createCookie('listSurveys', listSurvey_json, 30);

                                // Masquage des questions de sondage
                                // $('.poll-area').addClass('disabled');
                                $('.poll-area-' + el).addClass('disabled');

                                // Masquage du bouton "Soumettre"
                                // $('#survey-form').find('button').remove();
                                // $('#survey-submit-btn').remove();
                                $('#survey-submit-btn-' + el).remove();

                                submitMSG(true, resp.message, "surveyInfo");

                                localStorage.setItem('makeSurvey', 'YES');
                                // createCookie('makeSurvey', 'YES', 30);

                                window.location.reload();
                            } else {
                                $("#request-form").removeClass().addClass('shake animated').one(
                                    'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                                    function() {
                                        $(this).removeClass();
                                    });

                                submitMSG(false, resp.message, "surveyInfo");
                            }
                        },
                        error: function(err) {
                            $.unblockUI();
                            console.error(err);
                        },
                    });
                }
            });

        });


        function createCookie(name, value, days) {
            var expires;
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            } else {
                expires = "";
            }
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=");
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1;
                    c_end = document.cookie.indexOf(";", c_start);
                    if (c_end == -1) {
                        c_end = document.cookie.length;
                    }
                    return unescape(document.cookie.substring(c_start, c_end));
                }
            }
            return "";
        }
    </script>

    <script>
        function checkInput(element) {
            let compassVal = element.getAttribute("compass");
            const compassBros = document.querySelectorAll("[compass=" + compassVal + "]");

            for (let j = 0; j < compassBros.length; j++) {
                if (compassBros[j].classList.contains("selected")) {
                    compassBros[j].classList.remove("selected");
                    let forVal2 = compassBros[j].getAttribute("for");
                    let selectInput2 = document.querySelector("#" + forVal2);
                    selectInput2.setAttribute("type", "checkbox");
                }
            }

            element.classList.add("selected");
            for (let k = 0; k < compassBros.length; k++) {
                compassBros[k].classList.add("selectall");
            }

            let forVal = element.getAttribute("for");
            let selectInput = document.querySelector("#" + forVal);
            let getAtt = selectInput.getAttribute("type");
            if (getAtt == "checkbox") {
                selectInput.setAttribute("type", "radio");
                $("#" + forVal).prop('checked', true);
            } else if (selectInput.checked == true) {
                element.classList.remove("selected");
                $("#" + forVal).prop('checked', false);
                selectInput.setAttribute("type", "checkbox");
            }

            // let array = [];
            // for (let l = 0; l < compassBros.length; l++) {
            //     if(compassBros[l].classList.contains("selected")){
            //         array.push(l);
            //     }
            // }
            // if(array.length == 0){
            //     for (let m = 0; m < compassBros.length; m++) {
            //         compassBros[m].removeAttribute("class");
            //     }
            // }
        }

        function submitMSG(valid = true, msg, target = "msgSubmit") {
            let msgClasses = "";
            let type = valid ? 'success' : 'danger';

            if (valid) {
                msgClasses = "tada animated text-" + type;
            } else {
                msgClasses = "text-" + type;
            }

            $("#" + target).removeClass('tada animated text-danger text-success').addClass(msgClasses).text(msg);
            $("#" + target).parents('.alert').removeClass('alert-danger alert-success d-none').addClass('alert-' + type);
            $("#" + target).parents('.alert').find('i.fa').removeClass('fa-check-circle fa-times-circle').addClass(valid ?
                'fa-check-circle' : 'fa-times-circle');

            //$("#" + target)[0].scrollIntoView();
        }
    </script>
@endsection