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

@section('title', 'Dashboard')

@section('content')
    <!-- Contenu de votre page -->
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

    <div class="row">
        <div class="col-12">
            <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">Projects</h4>
            </div>
            <div class="card-body">
                <h6 class="card-subtitle mb-3">
                Il faut retenir ici que chaque classe a plusieurs projects, les meme libelles signifie que il y'a fichier 
                à telecharger. Une classe de terminal aura comme nom unique <code> terminal d</code>. Dans ce cas, chaque fichier a telecharger doit avoir exactement
                le meme nome et la chose qui change c'est le offline, si elle est oui alors elle est telecharger lors de l'installation. Ceux qui sont offline doivent 
                etre exporter au moment de la creation de l'applicatiob0.
                </h6>

                <a class="btn btn-success" href="javascript:void(0)" id="openModalBtn"> Create New Project</a>

                <div class="table-responsive">
                <table id="projects-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Application</th>
                            <th>Libellé</th>
                            <th>Son Style</th>
                            <th>Offline</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- Modal Add products -->
    <!-- Modal pour ajouter/modifier un projet -->
    <div class="modal fade" id="addProjectModal" tabindex="-1" role="dialog" aria-labelledby="addProjectModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title text-white">Ajouter un Projet</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="notes-box">
                        <div class="notes-content">
                            <form action="javascript:void(0);" id="addProjectForm">
                                <div class="row">
                                     <div class="col-md-12 mb-3">
                                        <label class="mr-sm-2" for="application_id">Selectionner le nom de l'application</label>
                                        <select 
                                        class="form-control form-select" 
                                        id="application_id" 
                                        name="application_id"
                                        style="width: 100%; height: 36px"
                                        >
                                            <option  selected value="">Application..</option>
                                            @foreach ($applications as $application)
                                                <option value="{{ $application->id }}">{{ $application->libelle }}</option>
                                            @endforeach
                                        </select>
                                        
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label>Libellé</label>
                                            <input type="text" id="project-libelle" class="form-control" required placeholder="Libellé du projet">
                                        </div>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label>Son Style</label>
                                            <input type="text" id="project-sonStyle" class="form-control" placeholder="Son Style">
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="note-description">
                                            <label>Is Offline</label>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="project-isOffline">
                                                <label class="form-check-label" for="project-isOffline">Cochez si le projet est hors ligne</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
                    <button id="btn-add-project" class="btn btn-info">Ajouter</button>
                </div>
            </div>
        </div>
    </div>


    @include('admin.delete_modal')

    @include('admin.projects.edit_modal')



    <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() {
            $('#projects-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('admin.projects.index') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'application.libelle', name: 'application' },
                    { data: 'libelle', name: 'libelle' },
                    { data: 'sonStyle', name: 'sonStyle' },
                    { data: 'isOffline', name: 'isOffline' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id); // Ajoutez un attribut data-id à la cellule d'action
                        }
                    },
                ]
            });

            $('#projects-table tbody').on('click', 'tr', function () {
                var projectId = $(this).find('td[data-id]').data('id');
                console.log('ID de l\'élément sélectionné :', projectId);
                // Vous pouvez maintenant utiliser projectId 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 formulaire AJAX
            $('#btn-add-project').on('click', function () {
                // Récupérer les valeurs du formulaire
                var formData = {
                    application_id: $('#application_id').val(),
                    libelle: $('#project-libelle').val(),
                    sonStyle: $('#project-sonStyle').val(),
                    isOffline: $('#project-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
                $.ajax({
                    url: '{{ route('admin.projects.store') }}', // Assurez-vous d'ajuster la route
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        // Mettez à jour le DataTable
                        $('#projects-table').DataTable().ajax.reload();
                        // Fermez le modal
                        $('#addProjectModal').modal('hide');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton de suppression
            $('#projects-table tbody').on('click', '.deleteProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var projectId = $(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/projects/' + projectId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#projects-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
            $('#projects-table tbody').on('click', '.editProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var projectId = $(this).data('id');

                // Effectuer une requête AJAX pour charger les données du projet
                $.ajax({
                    url: '/admin/projects/' + projectId + '/edit',
                    type: 'GET',
                    success: function (project) {
                        // Pré-remplir le formulaire d'édition avec les données du projet
                        $('#edit-application_id').val(project.application_id);
                        $('#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 = {
                        application_id: $('#edit-application_id').val(),
                        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/' + projectId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#projects-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
                        }
                    });
                });
            });



            //Fin des fonctions
        });

        $(document).on('click', '#createNewProject', function() {
            $('#ajaxModel').modal('show');
        });

                
    </script>
@endsection
