@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')
    <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">Jeu concours <b> {{ $concours->title }} </b></h2>
            </div>
        </div>
    </div>
    <main class="main-content h-100">
        @php
            $now = \Carbon\Carbon::now();
            $hasStarted = \Carbon\Carbon::parse($concours->start_at)->isPast();
            $hasNotEnded = \Carbon\Carbon::parse($concours->end_at)->isFuture();
            $isActive = $concours->status === 'ACTIVE' && $hasStarted && $hasNotEnded;
            $tooltipText = $isActive
                ? ''
                : ($hasStarted
                    ? 'Le jeu concours est clos'
                    : 'Le jeu concours n’a pas encore commencé');
        @endphp

        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="p-4 fw-normal container-xxl rounded-4 shadow-sm" style="background: #dae1e8b0;">
                <div class="row justify-content-evenly g-4">
                    <div class="col-lg-4 order-1 order-md-2">
                        <div class="bg-white p-4 rounded-4">
                            <div>
                                <div class="mb-2">
                                    <label class="fw-medium">Titre du concours</label><br>
                                    <label>{{ $concours->title }}</label>
                                </div>
                                <div class="mb-2">
                                    <label class="fw-medium">Radio</label><br>
                                    <label>{{ $concours->radio->name }}</label>
                                </div>
                                <div class="mb-2">
                                    <label class="fw-medium">Date de démarrage</label><br>
                                    <label>{{ \Carbon\Carbon::parse($concours->start_at)->locale('fr')->translatedFormat('l d F Y') }}</label>
                                </div>
                                <div>
                                    <label class="fw-medium">Date de cloture</label><br>
                                    <label>{{ \Carbon\Carbon::parse($concours->end_at)->locale('fr')->translatedFormat('l d F Y') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 bg-white order-2 order-md-1 rounded-4">
                        <div class="p-4">
                            <h5>Description</h5>
                            {{ $concours->description }}
                        </div>
                        <div class="bg-gray" id="msg_concours" style="display:block;">
                            <div class="mx-4">
                                <h5 class="mt-2 mb-2 ">Participer au jeu concours</h5>
                                <p>Cliquez sur le bouton ci-dessous pour répondre aux questions du jeu concours et tenter de
                                    rapporter les
                                    récompenses
                                    associées.</p>
                            </div>
                            <center>
                                <span class="d-inline-block"
                                    @if (!$isActive) data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    title="{{ $tooltipText }}" @endif
                                    tabindex="0">
                                    <button class="btn bg-linear-gradient text-white p-2 mt-3 mx-4 mb-4" id="startconcours"
                                        @if (!$isActive) disabled @endif>
                                        Participer à ce jeu concours
                                    </button>
                                </span>
                            </center>
                        </div>
                        <div id="quizzform" class="mx-4" style="display:none;">
                            <h4 class="mb-5">Répondez aux questions</h4>
                            <div class="row justify-content-center">
                                <div class="card mx-auto quizzcard mb-3 col-12 "
                                    style="padding-right : 0px ; padding-left : 0px">
                                    <div class="card-header bg-linear-gradient">
                                        <div class="row">
                                            <p class="ml-auto mr-4 text-white"> Total de questions : {{ sizeof($quizzes) }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="card-body mx-3">
                                        <form action="" method="post" id="concours-form">
                                                                                        @foreach ($quizzes as $quizz)
                                                                                                <div class="quizzelement mb-4" data-quiz="{{ $quizz->id }}">
                                                    <h5 class="card-title" style="color: #000; font-size : 16px">
                                                        <strong>{{ $i }} -
                                                            {{ $quizz->content }}</strong>
                                                    </h5>
                                                    <div class="form-group">

                                                        @foreach ($responses[$quizz->id] as $j => $resp)
                                                            <div class="form-check mx-4 mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    value="{{ $resp->id }}"
                                                                    id="quizz{{ $i . '-' . $j }}">
                                                                <label class="form-check-label"
                                                                    for="quizz{{ $i . '-' . $j }}">
                                                                    {{ $resp->content }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                </div>
                                            @endforeach

                                        </form>
                                        <center>
                                            <button class="btn bg-linear-gradient text-white" data-toggle="modal"
                                                data-target="#exampleModal">Soumettre</button>
                                        </center>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Plus qu'une dernière étape</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Veuillez entrer les informations ci-dessous pour être contacté(e) si vous faites partie des meilleures

                    <div class="form-group mt-3">
                        <input type="text" class="form-control" placeholder="Nom et prénoms" id="participant_name">
                    </div>
                    <div class="form-group mt-3">
                        <input type="text" class="form-control" placeholder="Numéro de téléphone" id="participant_phone">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn bg-linear-gradient text-white" id="soumettre">Terminé</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    <script src="https://malsup.github.io/jquery.blockUI.js"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
            }
        });

        document.getElementById('startconcours').addEventListener('click', function(ev) {
            document.getElementById('msg_concours').style.display = "none";
            document.getElementById('quizzform').style.display = "block";
        });

        document.getElementById('soumettre').addEventListener('click', function(ev) {
            // let name = null;
            // while (name == null || name == '' || name.length < 3) {
            //     // name = prompt("Merci d'entrer votre nom et prénom suivant cet ordre");
            // }

            $.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',
                    'z-index': '10'
                }
            });

            (this).disabled = true;

            const quizzes = document.querySelectorAll("[data-quiz]");

            let choices = {};
            for (const quiz of quizzes) {
                choices[quiz.dataset.quiz] = [];

                const checked = quiz.querySelectorAll(":checked");
                for (const r of checked) {
                    choices[quiz.dataset.quiz].push(r.value);
                }
            }

            const name = document.getElementById('participant_name').value.trim(),
                phone = document.getElementById('participant_phone').value.trim();

            $.ajax({
                url: "{{ route('submitConcoursResponses', $concours->id) }}",
                data: {
                    choices: choices,
                    name: name,
                    phone: phone
                },
                type: 'POST',
                success: function(resp) {
                    if (resp.success) {
                        toastr.success("Soumission enregistrée avec succès !");

                        setTimeout(() => {
                            window.location.href =
                                "{{ route('inforadio', $concours->radio_id) }}";
                        }, 1000);
                    }
                },
                error: function(error) {
                    document.getElementById('soumettre').disabled = false;
                    $.unblockUI();
                    if (error.status == 400) {
                        toastr.error("Veuillez bien remplir les champs svp !", "Oops...");
                    } else if (error.status == 409) {
                        toastr.error("Vous avez déjà participer à ce jeu concours !", "Oops...");
                    } else {
                        toastr.error("Petit souci lors de la soumission. Veuillez réessayer svp !",
                            "Oops...");
                    }

                }
            });

        });
    </script>
@endsection