<!-- 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"/>

@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 des exercises</h4>
        </div>
        <div class="card-body">

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

                <!-- Ajoutez cette ligne pour la variable cachée -->
                <input type="hidden" name="chapter_id" id ="chapter_id" value="{{ $chapter->id }}">

                <div class="row">
                       
                       <div class="row" id="dynamicFields">
                           <!-- Zone pour les champs dynamiques -->
                       </div>

                                              
                       <div class="col-12">
                           <button type="button" onclick="addExerciseField()" class="btn btn-success">Ajouter un exercise</button>
                           <button type="submit" class="btn btn-info font-weight-medium rounded-pill px-4">
                               <div class="d-flex align-items-center">
                                   <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-send feather-sm fill-white me-2">
                                       <line x1="22" y1="2" x2="11" y2="13"></line>
                                       <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                                   </svg>
                                   Submit
                               </div>
                           </button>
                       </div>
                   </div>

            </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="exercises-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Libellé</th>
                            <th>enonceFileName</th>
                            <th>correctionFileName</th>
                            <th>etat</th>
                            <th>chapter_id</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- Modal Add products --> 
    @include('admin.delete_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() {

            var chapterId = $('#chapter_id').val();

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

            $('#exercises-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/admin/chapters/' + chapterId +'/exercises', // Générez l'URL avec la variable projectId
                    type: 'GET',
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'libelle', name: 'libelle' },
                    { data: 'enonceFileName', name: 'enonceFileName' },
                    { data: 'correctionFileName', name: 'correctionFileName' },
                    { data: 'etat', name: 'etat' },
                    { data: 'chapter_id', name: 'chapter_id' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id);
                        }
                    },
                ]
            });

            $('#exercises-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
            $('#exercises-table tbody').on('click', '.deleteProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var rowId = $(this).data('id');
                console.log(rowId);
                // 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/exercises/' + rowId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#exercises-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
            $('#exercises-table tbody').on('click', '.editProject', 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/projects/' + 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-sonStyle').val(project.sonStyle);
                        $('#edit-isOffline').prop('checked', project.isOffline);

                        // Ouvrir le modal d'édition
                        $('#editProjectModal').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
                $('#editProjectForm').on('submit', function (event) {
                    event.preventDefault();

                    var formData = {
                        libelle: $('#edit-libelle').val(),
                        sonStyle: $('#edit-sonStyle').val(),
                        isOffline: $('#edit-isOffline').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/projects/' + rowId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#exercises-table').DataTable().ajax.reload();

                            // Fermer le modal d'édition
                            $('#editProjectModal').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 addExerciseField() {
            var dynamicFields = document.getElementById('dynamicFields');

            var divChapter = document.createElement('div');
            divChapter.setAttribute('class', 'col-md-12 mb-3');

            divChapter.innerHTML =
                '<div class="form-floating mb-3">' +
                '    <input type="text" class="form-control" name="libelle[]" placeholder="Enter Name here">' +
                '    <label for="libelle">Name</label>' +
                '</div>' +
                '<div class="mb-3">' +
                '    <label for="enonceFileName">enonceFileName</label>' +
                '    <input type="file" class="form-form-control form-control-lg" name="enonceFileName[]">' +
                '</div>' +
                '<div class="mb-3">' +
                '    <label for="correctionFileName">correctionFileName</label>' +
                '    <input type="file" class="form-form-control form-control-lg" name="correctionFileName[]">' +
                '</div>' +
                '<div class="mb-3">' +
                '    <button type="button" class="btn btn-danger" onclick="removeExerciseField(this)">Supprimer</button>' +
                '</div>';

            dynamicFields.appendChild(divChapter);
        }

        function removeExerciseField(button) {
            var dynamicFields = document.getElementById('dynamicFields');
            var divChapter = button.closest('.col-md-12');
            dynamicFields.removeChild(divChapter);
        }

                
    </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