@extends('layout.mainlayout')
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<meta name="csrf-token" content="{{ csrf_token() }}">



<style>
    .alert {
        display: none;
    }

    .alert.show {
        display: block;
    }


    .btn-close {
        color: #000;
        opacity: 1;
    }

    .btn-icon {
        background-color: white;
        color: black;
        border: 1px solid #ddd;
        padding: 5px 10px;
        border-radius: 50%;
        transition: all 0.3s ease;
        position: relative;
    }

    .btn-icon:hover {
        background-color: #f0f0f0;
        color: black;
        cursor: pointer;
    }

    .center-text {
        text-align: center !important;
    }


    .flex-container {
        display: flex;
        align-items: center;
    }

    .flex-container h3,
    .flex-container h4 {
        margin: 0 5px;
    }



    .text-center {
        text-align: center !important;
    }


    /* .truncate {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } */

    .uppercase-input {
        text-transform: uppercase;
    }
</style>


@section('content')
    <div class="page-wrapper">
        <div class="content">

            <h5 class="modal-title " id="editProjetModalLabel" style="font-weight: bold;"> Créer un Projet </h5>

            <form id="create-projet-form" action="{{ route('createProjet') }}" method="POST" class="mt-3 mb-5"
                style="margin-left: 10px">
                <div id="success-message" class="alert alert-success" style="display: none;"></div>
                <div id="error-message" class="alert alert-danger" style="display: none;"></div>
                @csrf

                <div class="row align-items-center">
                    <div class="col-lg-11">
                        <div class="form-group">
                            <input type="text" name="name" class="form-control uppercase-input" required
                                placeholder="Entrez le libellé du Projet"></input>
                        </div>

                    </div>
                    <div class="col-lg-1" style="margin-bottom: 26px">
                        <button type="submit" title="Enregistrer le Projet" class="btn btn-success"
                            style="height: 39px; margin-right: 500px">
                            <i class="fa fa-save"></i>
                        </button>
                    </div>
                </div>

            </form>



            <h5 class="modal-title " id="editProjetModalLabel" style="font-weight: bold; margin-bottom: 15px"> Liste des
                projets </h5>

            <div class="card mt-3" style="margin-left: 10px">
                <div class="card-body">
                    <div id="success-mes" class="alert alert-success" style="display: none;"></div>
                    <div id="error-mes" class="alert alert-danger" style="display: none;"></div>
                    <div class="row align-items-center">
                        <div class="table-responsive">
                            <table id="tableListeProjet" class="table table-striped">
                                <thead>
                                    <tr class="uppercase-input">
                                        <th>Action</th>
                                        <th>Libellé</th>
                                        <th>Statut</th>
                                        <th>Date de création</th>
                                    </tr>
                                </thead>

                                <tbody id="projetTableBody">
                                    @foreach ($projets as $projet)
                                        <tr class="uppercase-input" id="projet-{{ $projet->id }}">
                                            <td style="text-align: center !important;">
                                                <button type="button" id="eye-icon" title="Voir les modules rattachés"
                                                    class="btn btn-info view-modules"
                                                    style="background-color: #ddd; border-color:#ddd" data-toggle="modal"
                                                    data-target="#modal" data-projet-id="{{ $projet->id }}"> <i
                                                        class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-warning edit-projet-btn" title="Modifier le Projet"
                                                    data-projet-id="{{ $projet->id }}"> <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-danger delete-projet-btn" title="Supprimer le Projet"
                                                    data-projet-id="{{ $projet->id }}"> <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                            <td class=""> <span class="ml-2 "
                                                    id="projet-name-{{ $projet->id }}">{{ $projet->name }}</span> </td>
                                            <td style="text-align: center !important;">{{ $projet->statut }}</td>
                                            <td style="text-align: center !important;">{{ $projet->created_at }}</td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>


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

    <div class="modal fade" id="editProjetModal" tabindex="-1" role="dialog" aria-labelledby="editProjetModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title uppercase-input" id="editProjetModalLabel" style="font-weight: bold;">Modifier le
                        Libellé du Projet</h5>

                    <button type="button" class="btn" title="Cliquez pour fermer la modale" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="edit-projet-form">
                        @csrf
                        <input type="hidden" id="edit-projet-id">
                        <div class="form-group">
                            <label for="edit-projet-name" class="uppercase-input">Entrez nouveau Libellé du
                                projet</label>
                            <input type="text" class="form-control uppercase-input" id="edit-projet-name" required>
                        </div>
                        <button type="submit" class="btn btn-retour">Enregistrer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modulesModal" tabindex="-1" role="dialog" aria-labelledby="modulesModalLabel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#f89c23;">
                    <div class="flex-container uppercase-input">
                        <h3>Gestion des Modules:</h3>
                        <h3 id="name"></h3>
                    </div>
                    <button type="button" class="btn" title="Cliquez pour fermer la modale" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="success-ok" class="alert alert-success" style="display: none;"></div>
                    <div id="error-ok" class="alert alert-danger" style="display: none;"></div>
                    <h5 class=" " style="font-weight: bold;">Créer un Module</h5>

                    <div id="addModuleForm" class="d-flex col-lg-12 mb-4 mt-3" style="display: flex;">


                        <input type="text" id="module_name" name="module_name" class="form-control uppercase-input"
                            required placeholder="Entrez le libellé du Module">
                        <button type="hidden" title="Enregistrer le Module" class="btn btn-success ms-2 save-module-btn"
                            data-projet-id="{{ $projet->id }}">
                            <i class="fa fa-save"></i>
                        </button>
                    </div>

                    <table id="tableListeModule" class="table mt-4">
                        <thead>
                            <div id="success-oklm" class="alert alert-success" style="display: none;"></div>
                            <div id="success-life" class="alert alert-success" style="display: none;"></div>
                            <div id="success-ok" class="alert alert-success" style="display: none;"></div>

                            <h6 class="" style="font-weight: bold;">Liste des Modules</h6>
                            <tr class="uppercase-input">
                                <th data-class="text-center">Action</th>
                                <th>Libellé</th>
                                <th data-class="text-center">Statut</th>
                                <th data-class="text-center">Date début</th>
                                <th data-class="text-center">Date fin</th>
                            </tr>
                        </thead>
                        <tbody class="uppercase-input" id="moduleTableBody">
                        </tbody>
                    </table>


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

    <div class="modal fade" id="editModuleModal" tabindex="-1" role="dialog" aria-labelledby="editModuleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#f89c23;">
                    <h5 class="modal-title uppercase-input" id="editModuleModalLabel">Modifier le Libellé du Module</h5>
                    <button type="button" class="btn" title="Cliquez pour fermer la modale" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="edit-module-form">
                        @csrf
                        <input type="hidden" id="edit-module-id">
                        <div class="form-group">
                            <label for="edit-module-name" class="uppercase-input" style="font-weight: bold;">Entrez un
                                nouveau Libellé du
                                Module</label>
                            <input type="text" class="form-control uppercase-input" id="edit-module-name" required>
                        </div>
                        <button type="submit" class="btn btn-retour">Enregistrer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmation de suppression</h5>
                    {{-- <button type="button" class="btn" title="Fermez la modale"
                                data-bs-dismiss="modal" aria-label="Close">
                                <i class="fas fa-times"></i>
                            </button> --}}
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close"
                        style="cursor: pointer; font-size: 24px; background-color: rgba(32, 32, 32, 0.5); border-radius: 50%; color: white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir supprimer cet utilisateur ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Annuler</button>
                    <form id="deleteUserForm" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-submit">Supprimer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#tableListeProjet').DataTable({
                // "bFilter": true,
                // "sDom": 'fBtlpi',
                // 'pagingType': 'numbers',
                "ordering": true,
                "language": {
                    search: ' ',
                    sLengthMenu: '_MENU_',
                    searchPlaceholder: "Rechercher...",
                    info: "_START_ - _END_ de _TOTAL_ élément(s)",
                },
                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                initComplete: (settings, json) => {
                    $('.dataTables_filter').appendTo('#tableSearch');
                    $('.dataTables_filter input').css('margin-top', '13px');
                },
            });
            var tableListeModule = $('#tableListeModule').DataTable({
                "ordering": true,
                "language": {
                    search: ' ',
                    sLengthMenu: '_MENU_',
                    searchPlaceholder: "Rechercher...",
                    info: "_START_ - _END_ de _TOTAL_ élément(s)",
                },
                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                // columnDefs: [{
                //     // className: 'text-center align-middle',
                //     targets: '_all'
                // }],
                initComplete: function() {
                    $('.dataTables_filter').appendTo('#tableSearch');
                    $('.dataTables_filter input').css('margin-top', '13px');
                }
            });

            // Empêcher la fermeture de la modale parent
            $('#editModuleModal').on('show.bs.modal', function() {
                $('#modulesModal').modal('hide'); // Cache visuellement la modale parent
            });

            // Restaurer la modale parent après la fermeture de la modale fille
            $('#editModuleModal').on('hidden.bs.modal', function() {
                $('#modulesModal').modal('show'); // Restaure visuellement la modale parent
            });

            $('#editModuleModal').modal({
                backdrop: 'static',
                keyboard: false
            });
            $('#modulesModal').modal({
                backdrop: 'static',
                keyboard: false
            });
            $('#editProjetModal').modal({
                backdrop: 'static',
                keyboard: false
            });


            let moduleIdToComplete = null;

            $(document).on('click', '.save-module-btn', function(e) {
                e.preventDefault();
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const projetId = $(this).data('projet-id');
                const moduleName = $('#module_name').val();

                if (!moduleName) {
                    alert("Veuillez entrer un nom pour le module.");
                    return;
                }

                $.ajax({
                    url: '/projet/' + projetId + '/module',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: {
                        "name": moduleName
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#success-oklm').text(response.message).show();

                            updateModuleTable(response.modules, true);

                            // Réinitialiser le champ de saisie
                            $('#module_name').val('');

                            // Faire disparaître le message de succès après 3 secondes
                            setTimeout(function() {
                                $('#success-oklm').fadeOut('slow');
                            }, 3000);
                        } else {
                            $('#error-oklm').text(response.error).show();
                            setTimeout(function() {
                                $('#error-oklm').fadeOut('slow');
                            }, 3000);
                        }
                    },

                    error: function(xhr, status, error) {
                        console.error('Erreur:', error);
                        console.error('Réponse:', xhr.responseJSON);
                        $('#error-ok').text(
                            'Une erreur s\'est produite lors de la création du module. Vérifier si le Module n\'existe pas déjà.'
                        ).show();
                        setTimeout(function() {
                            $('#error-ok').fadeOut('slow');
                        }, 3000);
                    }
                });
            });
            $(document).ready(function() {
                $('#modulesModal').on('hidden.bs.modal', function() {
                    $('#module_name').val(''); // Vide le champ d'entrée
                    $('#error-ok').hide(); // Masque le message d'erreur s'il est affiché
                    $('#success-ok').hide(); // Masque le message de succès s'il est affiché
                });
            });



            $(document).on('click', '.view-modules', function() {
                const projetId = $(this).data('projet-id');

                // Vérifiez si le projet ID est valide
                if (!projetId) {
                    alert("ID du projet invalide.");
                    return;
                }

                $.ajax({
                    url: '/projet/' + projetId + '/modules',
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {

                        updateModuleTable(data.modules, false, projetId, data.projet.name);


                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la récupération des modules :", error);
                        alert("Impossible de charger les modules du projet.");
                    }
                });
            });


            function updateModuleTable(modules, inModal = false, projetId = null, projetName = '') {
                const tableListeModule = $('#tableListeModule').DataTable();
                tableListeModule.clear();

                if (Array.isArray(modules)) {
                    modules.sort((a, b) => a.name.localeCompare(b.name));

                    const moduleData = modules.map(module => {


                        return [
                            `<div class="text-center">
                                <button class="btn btn-warning edit-module-btn" title="Modifier le Module" data-module-id="${module.id}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-danger delete-module-btn" title="Supprimez le Module" data-module-id="${module.id}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>`,
                            `<span id="module-name-${module.id}">${module.name}</span>`, // Ajoutez un ID unique
                            module.statut,
                            module.created_at,
                            module.finished_at || 'N/A'
                        ];
                    });

                    tableListeModule.rows.add(moduleData).draw();
                }

                if (!inModal) {
                    $('#name').text(projetName);
                    $('.save-module-btn').data('projet-id', projetId);
                    $('#modulesModal').modal('show');
                }
            }

            $('.close').on('click', function() {
                $('#modulesModal').modal('hide');
            });



            $(document).ready(function() {
                // Soumission du formulaire de création de projet
                $('#create-projet-form').on('submit', function(e) {
                    e.preventDefault();
                    const formData = $(this).serialize();
                    $.ajax({
                        url: $(this).attr('action'),
                        method: $(this).attr('method'),
                        data: formData,
                        success: function(response) {
                            if (response.id) {
                                $('#success-message').text('Projet ajouté avec succès')
                                    .show();
                                const newRow = `
                        <tr id="projet-${response.id}">
                            <td class="center-text">
                                <button class="btn btn-icon view-modules" title="Voir les modules rattachés" data-projet-id="${response.id}">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="btn btn-warning edit-projet-btn" title="Modifier le Projet" data-projet-id="${response.id}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-danger delete-projet-btn" title="Supprimer le Projet" data-projet-id="${response.id}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                            <td class="uppercase-input"><span class="ml-2" id="projet-name-${response.id}">${response.name}</span></td>
                            <td class="center-text">${response.statut}</td>
                            <td class="center-text">${response.created_at}</td>
                        </tr>`;
                                $('#projetTableBody').append(newRow);
                                $('#create-projet-form')[0].reset();

                                setTimeout(function() {
                                    $('#success-message').fadeOut('slow');
                                }, 3000);
                            } else {
                                $('#error-message').text(response.error).show();
                                setTimeout(function() {
                                    $('#error-message').fadeOut('slow');
                                }, 3000);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Erreur:', error);
                            $('#error-message').text(
                                'Une erreur s\'est produite lors de la création du projet. Vérifier si le Projet n\'existe pas.'
                            ).show();
                            setTimeout(function() {
                                $('#error-message').fadeOut('slow');
                            }, 3000);
                        }
                    });
                });

                $(document).on('click', '.edit-projet-btn', function() {
                    const projetId = $(this).data('projet-id');
                    const projetName = $(`#projet-name-${projetId}`).text();

                    $('#edit-projet-id').val(projetId);
                    $('#edit-projet-name').val(projetName);
                    $('#editProjetModal').modal('show');
                });

                // Gérer la soumission du formulaire de modification
                $('#edit-projet-form').on('submit', function(e) {
                    e.preventDefault();
                    const projetId = $('#edit-projet-id').val();
                    const projetName = $('#edit-projet-name').val();
                    const csrfToken = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: `/projet/${projetId}`,
                        method: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: {
                            name: projetName
                        },
                        success: function(response) {
                            if (response.success) {
                                $(`#projet-name-${projetId}`).text(projetName);
                                $('#editProjetModal').modal('hide');
                                $('#success-mes').text('Projet modifié avec succès')
                                    .show();

                                setTimeout(function() {
                                    $('#success-mes').fadeOut('slow');
                                }, 3000);
                            } else {
                                $('#error-mes').text(response.error).show();

                                setTimeout(function() {
                                    $('#error-mes').fadeOut('slow');
                                }, 3000);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Erreur:', error);
                            $('#error-mes').text(
                                'Une erreur s\'est produite lors de la modification du projet. Veuillez réessayer.'
                            ).show();

                            setTimeout(function() {
                                $('#error-mes').fadeOut('slow');
                            }, 3000);
                        }
                    });
                });
            });

            $(document).on('click', '.edit-module-btn', function() {
                const moduleId = $(this).data('module-id');
                const moduleName = $(`#module-name-${moduleId}`).text();

                $('#edit-module-id').val(moduleId);
                $('#edit-module-name').val(moduleName);
                $('#editModuleModal').modal('show');
            });

            $('#edit-module-form').on('submit', function(e) {
                e.preventDefault();
                const moduleId = $('#edit-module-id').val();
                const moduleName = $('#edit-module-name').val();
                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    url: `/module/${moduleId}`,
                    method: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: {
                        name: moduleName
                    },
                    success: function(response) {
                        if (response.success) {
                            $(`#module-name-${moduleId}`).text(moduleName);
                            $('#editModuleModal').modal('hide');
                            $('#success-ok').text('Module modifié avec succès').show();


                            // Masquer le message de succès après 5 secondes
                            setTimeout(function() {
                                $('#success-ok').removeClass('show').hide();
                            }, 3000);
                        } else {
                            $('#error-ok').text(response.error).addClass('show');

                            // Masquer le message d'erreur après 5 secondes
                            setTimeout(function() {
                                $('#error-ok').removeClass('show').hide();
                            }, 3000);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur:', error);
                        $('#error-ok').text(
                            'Une erreur s\'est produite lors de la modification du module. Veuillez réessayer.'
                        ).addClass('show');

                        // Masquer le message d'erreur après 5 secondes
                        setTimeout(function() {
                            $('#error-ok').removeClass('show').hide();
                        }, 3000);
                    }
                });
            });
            // $(document).on('click', '.delete-users-btn', function() {
            //         const userId = $(this).data('projet-id');
            //         $('#deleteUserForm').attr('action', '/users/' + userId);
            //         $('#confirmDeleteModal').modal('show');
            //     });

            $(document).on('click', '.delete-projet-btn', function() {
                const projetId = $(this).data('projet-id');

                if (!confirm('Êtes-vous sûr de vouloir supprimer ce Projet?')) {
                    return;
                }

                $.ajax({
                    url: '/projet/' + projetId,
                    method: 'DELETE',
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#projet-' + projetId).remove();
                            $('#success-mes').text('Projet supprimé avec succès').show();

                            setTimeout(function() {
                                $('#success-mes').fadeOut('slow');
                            }, 3000);
                        } else {
                            alert(
                                'Une erreur s\'est produite lors de la suppression. Veuillez réessayer.'
                            );
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur:', error);
                        alert('Une erreur s\'est produite lors de la suppression.');
                    }
                });
            });

            function getData(projetId, refresh = false) {
                $.ajax({
                    url: '/projet/' + projetId + '/modules',
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        updateModuleTable(data.modules, refresh, projetId, data.projet.name);
                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la récupération des modules :", error);
                        alert("Impossible de charger les modules du projet.");
                    }
                });
            }



            $(document).on('click', '.delete-module-btn', function() {
                const moduleId = $(this).data('module-id');

                if (!confirm('Êtes-vous sûr de vouloir supprimer ce module ?')) {
                    return;
                }

                $.ajax({
                    url: '/module/' + moduleId,
                    type: 'DELETE',
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            getData($('.save-module-btn').data('projet-id'), true)

                            $('#success-life').text('Module supprimé avec succès').show();

                            // Masquer le message de succès après 3 secondes
                            setTimeout(function() {
                                $('#success-life').fadeOut('slow');
                            }, 3000);
                        } else {
                            alert(
                                'Une erreur s\'est produite lors de la suppression. Veuillez réessayer.'
                            );
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur:', error);
                        alert('Une erreur s\'est produite lors de la suppression.');
                    }

                });
            });

        })
    </script>
@endsection