<!-- resources/views/your-page.blade.php -->
@extends('layouts.theme1')

@section('title', 'Dashboard')


@section('style')

<link rel="stylesheet" href="{{ asset('theme1/dist/libs/select2/dist/css/select2.min.css') }}">
    <!-- Custom CSS -->
<link href="{{ asset('theme1/dist/css/style.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

<style>
    th, td {
        max-width: 113px !important;
        word-wrap: break-word;
    }
</style>
@endsection

@section('content')
    <!-- Contenu de votre page -->
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="col-md-12">
        <div class="card">
        <div class="border-bottom title-part-padding">
            <h4 class="card-title mb-0">Creation de plusieurs reponses</h4>
        </div>
        <div class="card-body">

            <form id="answerForm" class="row" action="{{ route('admin.answers.store') }}" enctype="multipart/form-data"  method="post">
                @csrf

                <!-- Ajoutez cette ligne pour la variable cachée -->
                <input type="hidden" name="question_id" id ="question_id" value="0">

                <div class="form-group mb-4">
                    <label class="mr-sm-2" for="questionSelect">Select a Question</label>
                    <select 
                    class="select2 form-control custom-select"
                    style="width: 100%; height: 36px"
                    id="questionSelect" 
                    name="questionSelect"
                    >
                        <option value="" selected disabled>Choose...</option>
                        <option value="0"> (Ajouter une question +)</option>


                        {{-- Afficher les questions --}}
                        <optgroup label="Questions">
                            @foreach ($questions as $question)
                                <option value="{{ $question->id }}">
                                    {{ $question->libelle }} 
                                    
                                    (
                                        @if(!empty($question->chapter->libelle))
                                            {{ $question->chapter->libelle }}  {{ $question->chapter->id }} 
                                        @elseif(!empty($question->project->libelle))
                                            {{ $question->project->libelle }}  {{ $question->project->id }}            
                                        @endif
                                    )

                                </option>
                            @endforeach
                        </optgroup>
                    </select>
                    
                </div>

                

                <div class="form-group mb-4">
                    <textarea class="form-control" id="question" name="question" placeholder="Saisir votre nouvelle Question"></textarea>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="libelle[]" placeholder="Libellé">
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="mb-2">
                        <textarea class="form-control" name="description[]" placeholder="Description"></textarea>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="mb-2">
                            <input type="file" class="form-control" name="imageName[]" accept="image/*">
                        </div>
                    </div>
                    <div class="col-sm-3">
                    <div class="mb-3">
                        <label for="isRightAnswer" class="form-label">Is Right Answer</label>
                        <input type="checkbox" class="form-check-input" id="isRightAnswer" name="isRightAnswer[]" value=0 onchange="updateCheckboxValue(this)">
                    </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="mb-2">
                            <button onclick="addAnswer();" class="btn rounded-pill px-4 btn-light-success text-success font-weight-medium waves-effect waves-light" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle feather-sm fill-white">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div id="answerFields" class="my-4"></div>

                <button 
                    id="submit" 
                    style="display: none;"   
                    type="submit" class="
                            btn btn-primary
                            font-weight-medium
                            rounded-pill
                            px-4
                          ">Submit reponses</button>

                <button 
                    onclick="onCustomSubmitButtonClick()"
                    id="customsubmit"    
                    type="button" class="
                            btn btn-primary
                            font-weight-medium
                            rounded-pill
                            px-4
                          ">Enregistrer les reponses</button>

            </form>
        </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">Answers</h4>
            </div>
            <div class="card-body">
                <h6 class="card-subtitle mb-3">
                    mettre la description
                </h6>

                <div class="table-responsive">
                <table id="answers-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Libellé</th>
                            <th>imageName</th>
                            <th>description</th>
                            <th>isRightAnswer</th>
                            <th>question_id</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- Modal Add products -->
 
    @include('admin.delete_modal')
    @include('admin.answers.edit_modal')


    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/js/pages/forms/select2/select2.init.js') }}"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

    <script>
        $(document).ready(function() {

            $("#question").hide();

            $('#answers-table').DataTable({
                processing: true,
                serverSide: true,
                lengthMenu: [ [10, 20, 50, 100, 200, -1], [10, 20, 50, 100, 200, "All"] ],
                pageLength: 50,  // Définir la valeur par défaut à afficher
                ajax: '{{ route('admin.answers.index') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'libelle', name: 'libelle' },
                    { data: 'imageName', name: 'imageName' },
                    { data: 'description', name: 'description' },
                    { data: 'isRightAnswerFormatted', name: 'isRightAnswerFormatted', title: 'Is Right Answer' },
                    { data: 'question_id', name: 'question_id' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id);
                        }
                    },
                ]
            });

            $('#answers-table tbody').on('click', 'tr', function () {
                var rowId = $(this).find('td[data-id]').data('id');
                console.log('ID de l\'élément sélectionné :', rowId);
                // Vous pouvez maintenant utiliser rowId comme nécessaire
            });

            // Gestionnaire d'événement pour ouvrir le modal
            $('#openModalBtn').on('click', function () {
                $('#addProjectModal').modal('show');
            });

            // Gestionnaire d'événement pour fermer le modal
            $('#addProjectModal').on('hidden.bs.modal', function () {
                // Réinitialisez le formulaire lorsque le modal est fermé
                $('#addProjectForm')[0].reset();
            });


            // Gestionnaire d'événement pour le clic sur le bouton de suppression
            $('#answers-table tbody').on('click', '.deleteProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var rowId = $(this).data('id');
                
                // Ouvrir le modal de confirmation
                $('#deleteConfirmationModal').modal('show');

                // Gestionnaire d'événement pour le clic sur le bouton de confirmation de suppression
                $('#confirmDelete').on('click', function () {
                    // Fermer le modal de confirmation
                    $('#deleteConfirmationModal').modal('hide');

                    // Effectuer la suppression en utilisant AJAX
                    $.ajax({
                        url: '/admin/answers/' + rowId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#answers-table').DataTable().ajax.reload();
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton d'édition
            $('#answers-table tbody').on('click', '.editAnswer', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var rowId = $(this).data('id');

                // Effectuer une requête AJAX pour charger les données du projet
                $.ajax({
                    url: '/admin/answers/' + rowId + '/edit',
                    type: 'GET',
                    success: function (project) {
                        // Pré-remplir le formulaire d'édition avec les données du projet
                        $('#edit-libelle').val(project.libelle);
                        $('#edit-description').val(project.description);
                        $('#edit-isRightAnswer').prop('checked', project.isRightAnswer);

                        // Ouvrir le modal d'édition
                        $('#editAnswerModal').modal('show');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });

                // Gestionnaire d'événement pour la soumission du formulaire d'édition
                $('#editAnswerForm').on('submit', function (event) {
                    event.preventDefault();

                    var formData = {
                        libelle: $('#edit-libelle').val(),
                        description: $('#edit-description').val(),
                        isRightAnswer: $('#edit-isRightAnswer').is(':checked') ? 1 : 0,
                        _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                    };
                    // Effectuer une requête AJAX pour mettre à jour le projet
                    $.ajax({
                        url: '/admin/answers/' + rowId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#answers-table').DataTable().ajax.reload();

                            // Fermer le modal d'édition
                            $('#editAnswerModal').modal('hide');
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Ajouter un gestionnaire d'événements au changement de la sélection
            $("#questionSelect").change(function() {
                // Récupérer la valeur sélectionnée
                var selectedValue = $(this).val();

                // Si la valeur est "0", afficher le champ de texte, sinon le cacher
                if (selectedValue === "0") {
                    $("#question").show();
                } else {
                    $("#question").hide();
                }
                console.log("Option sélectionnée :", selectedValue);
            });

            //Fin des fonctions
        });

        var answerCounter = 1;

        function addAnswer() {
            answerCounter++;
            var answerForm = document.getElementById("answerFields");
            var divAnswer = document.createElement("div");
            divAnswer.setAttribute("class", "mb-3 removeAnswer" + answerCounter);
            var removeAnswer = "removeAnswer" + answerCounter;
            divAnswer.innerHTML =
                '<div class="row">' +
                '<div class="col-sm-3"><div class="mb-3"><input type="text" class="form-control" name="libelle[]" placeholder="Libellé"></div></div>' +
                '<div class="col-sm-3"><div class="mb-3"><textarea class="form-control" name="description[]" placeholder="Description"></textarea></div></div>' +
                '<div class="col-sm-3"><div class="mb-3"><input type="file" class="form-control" name="imageName[]" accept="image/*" ></div></div>' +
                '<div class="col-sm-2"><div class="mb-3"><input type="checkbox" class="form-check-input" value=0 name="isRightAnswer[]" id="isRightAnswer' + answerCounter + '" onchange="updateCheckboxValue(this)"><label for="isRightAnswer' + answerCounter + '" class="form-check-label">Is Right Answer</label></div></div>' +
                '<div class="col-sm-1"><div class="mb-3"><button class="btn btn-danger" type="button" onclick="removeAnswer(' +
                answerCounter +
                ');"><i class="fa fa-minus"></i></button></div></div>' +
                '</div>';

            answerForm.appendChild(divAnswer);
        }

        function removeAnswer(rid) {
            $(".removeAnswer" + rid).remove();
        }

        function updateCheckboxValue(checkbox) {
            // Mettre à jour la valeur en fonction de l'état de la case à cocher
            checkbox.value = checkbox.checked ? 1 : 0;

            // Afficher la nouvelle valeur dans la console (facultatif)
            console.log('Nouvelle valeur de la case à cocher :', checkbox.value);
        }

        function checkAllCheckboxes() {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = true;
            });
        }

        function onCustomSubmitButtonClick() {
            // Effectuez vos opérations JavaScript ici
            checkAllCheckboxes();
            
            // Après avoir effectué vos opérations, lancez le bouton de soumission du formulaire
            document.getElementById('submit').click();
        }
                
    </script>
@endsection


@section('script')

    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/js/pages/forms/select2/select2.init.js') }}"></script>

@endsection