@extends('layout.mainlayout')

<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" 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;
    }

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


    .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;
    }

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

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


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

    .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">
        <form id="create-projet-form" action="{{ route('createProjet') }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-lg-11">
                            <div class="form-group">
                                <label class="mb-2" style="font-size: 20px"><strong>Libellé</strong></label>
                                <input type="text" name="name" class="form-control uppercase-input" required
                                    placeholder="Entrez un Projet libellé">
                            </div>

                        </div>
                        <div class="col-lg-1">
                            <button type="submit" title="Enregistrer le Projet" class="btn btn-success w-100">
                                <i class="fa fa-save"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
        </form>

        <table id="tableListeProjet" class="table datatable">
            <h4>Liste des Projets</h4>
            <thead>
                <tr class="uppercase-input">
                    <th>Libellé</th>
                    <th>Statut</th>
                    <th>Date de création</th>
                    <th>Action</th>
                </tr>
            </thead>
            <div class="content">
                <div id="success-message" class="alert alert-success" style="display: none;"></div>
                <div id="error-message" class="alert alert-danger" style="display: none;"></div>
            </div>
            <tbody id="projetTableBody">
                @foreach ($projets as $projet)
                    <tr class="uppercase-input" id="projet-{{ $projet->id }}">
                        <td class="truncate">
                            <span class="ml-2 truncate" 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>
                        <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>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </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">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-primary">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">
                    <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="addModuleForm" class="d-flex col-lg-12 mb-4">
                        <input type="text" id="module_name" name="module_name" class="form-control uppercase-input"
                            required placeholder="Entrez un nouveau Module">
                        <button type="hidden" title="Enregistrer le Module" class="btn btn-success ms-2 save-module-btn"
                            data-projet-id="">
                            <i class="fa fa-save"></i>
                        </button>
                    </div>
                    <div class="content">
                        <div id="success-ok" class="alert alert-success" style="display: none;"></div>
                        <div id="error-ok" class="alert alert-danger" style="display: none;"></div>
                    </div>
                    <table id="tableListeModule" class="table datatable mt-4">
                        <thead>
                            <h4>Liste des Modules</h4>
                            <tr class="uppercase-input">
                                <th>Libellé</th>
                                <th>Statut</th>
                                <th>État</th>
                                <th>Date début</th>
                                <th>Date fin</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="uppercase-input" id="moduleTableBody">
                            <!-- Les modules seront ajoutés ici -->
                        </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">
                    <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">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-primary">Enregistrer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="confirmCompletionModal" tabindex="-1" role="dialog"
        aria-labelledby="confirmCompletionModalLabel">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmer la terminaison</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Êtes-vous sûr de vouloir marquer ce module comme terminé ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                        Annuler</button>
                    <button type="button" id="confirmCompleteModule" class="btn btn-success">Confirmer</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="completionModal" tabindex="-1" role="dialog" aria-labelledby="completionModalLabel">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation</h5>
                    <button type="button" class="btn" title="Cliquez pour fermer le modal" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Module terminé</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    $(document).ready(function() {
        // $('#tableListeProjet').DataTable({
        //     "bFilter": true,
        //     "sDom": 'fBtlpi',
        //     'pagingType': 'numbers',
        //     "ordering": true,
        //     "language": {
        //         search: ' ',
        //         sLengthMenu: '_MENU_',
        //         searchPlaceholder: "Search...",
        //         info: "_START_ - _END_ of _TOTAL_ items",
        //     },
        //     initComplete: (settings, json) => {
        //         $('.dataTables_filter').appendTo('#tableSearch');
        //         $('.dataTables_filter').appendTo('.search-input');
        //     },
        // });
        // $('#tableListeModule').DataTable({
        //     "bFilter": true,
        //     "sDom": 'fBtlpi',
        //     'pagingType': 'numbers',
        //     "ordering": true,
        //     "language": {
        //         search: ' ',
        //         sLengthMenu: '_MENU_',
        //         searchPlaceholder: "Search...",
        //         info: "_START_ - _END_ of _TOTAL_ items",
        //     },
        //     initComplete: (settings, json) => {
        //         $('.dataTables_filter').appendTo('#tableSearch');
        //         $('.dataTables_filter').appendTo('.search-input');
        //     },
        // });

        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-ok').text('Module ajouté avec succès').show();

                        const newModuleRow = `
                <tr id="module-${response.module.id}">
                    <td class="truncate" id="module-name-${response.module.id}">${response.module.name}</td>
                    <td class="text-center truncate">${response.module.statut}</td>
                    <td class="text-center truncate">
                        <button class="btn btn-warning complete-module-btn" title="Cliquez pour terminer le module" data-module-id="${response.module.id}">
                            TERMINER
                        </button>
                    </td>
                    <td class="text-center truncate">${response.module.created_at}</td>
                    <td class="text-center truncate">${response.module.finished_at ? response.module.finished_at : 'N/A'}</td>
                    <td class="text-center truncate">
                        <button class="btn btn-warning edit-module-btn" title="Modifier le Module" data-module-id="${response.module.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-danger delete-module-btn" data-module-id="${response.module.id}" title="Supprimez le Module">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
                        $('#moduleTableBody').append(newModuleRow);
                        $('#module_name').val('');

                        // Masquer le message de succès après 3 secondes
                        setTimeout(function() {
                            $('#success-ok').fadeOut('slow');
                        }, 3000);
                    } else {
                        $('#error-ok').text(response.error).show();
                        setTimeout(function() {
                            $('#error-ok').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. Veuillez réessayer.'
                    ).show();
                    setTimeout(function() {
                        $('#error-ok').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').addClass(
                            'show');

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

                        // Masquer le message d'erreur après 5 secondes
                        setTimeout(function() {
                            $('#error-ok').removeClass('show').hide();
                        }, 5000);
                    }
                },
                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();
                    }, 5000);
                }
            });
        });




        $(document).on('click', '.complete-module-btn', function() {
            moduleIdToComplete = $(this).data('module-id');
            $('#confirmCompletionModal').modal('show');
        });

        $('#confirmCompleteModule').on('click', function() {
            if (moduleIdToComplete) {
                $.ajax({
                    url: '/projet/' + moduleIdToComplete + '/complete',
                    method: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        if (data.success) {
                            const statusCell = $('button[data-module-id="' +
                                moduleIdToComplete + '"]').closest('td').siblings(
                                ':nth-child(3)'
                            );
                            statusCell.html(
                                '<i class="fas fa-check-circle text-success" style="font-size: 32px; margin-left: 21px"></i>'
                            );
                            const finishDateCell = statusCell.siblings(
                                ':nth-child(5)');
                            finishDateCell.html(data.finished_at);

                            const statutlog = statusCell.siblings(':nth-child(2)');
                            statutlog.html('Terminé');

                            // const statusCell = $('button[data-module-id="' +
                            //     moduleIdToComplete + '"]').closest('td').siblings(
                            //     ':nth-child(2)');
                            // statusCell.html('Terminé');

                            $('#confirmCompletionModal').modal('hide');
                            $('#completionModal').modal('show');
                        } else {
                            alert('Une erreur s\'est produite. Veuillez réessayer.');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur:', error);
                        alert('Une erreur s\'est produite. Veuillez réessayer.');
                    }
                });
            }
        });


        $(document).on('click', '.view-modules', function() {
            const projetId = $(this).data('projet-id');
            $.ajax({
                url: '/projet/' + projetId + '/modules',
                method: 'GET',
                success: function(data) {
                    $('#name').text(data.projet.name);
                    $('.save-module-btn').data('projet-id', projetId);
                    let moduleTableBody = '';
                    data.modules.forEach(function(module) {
                        let moduleStatut = module.statut;
                        let moduleState = module.is_completed ?
                            '<i class="fas fa-check-circle text-success" style="font-size: 32px; margin-left: 21px"></i>' :
                            `<button class="btn btn-warning complete-module-btn" title="Cliquez pour terminer le module" data-module-id="${module.id}">Terminer</button>`;
                        moduleTableBody +=
                            `<tr id="module-${module.id}"> 
                                <td class="truncate" id="module-name-${module.id}">${module.name}</td> 
                                <td class="text-center truncate"> ${moduleStatut}</td> 
                                <td class="text-center truncate"> ${moduleState}</td> 
                                <td class="text-center truncate">${module.created_at}</td> 
                                <td class="text-center truncate">${module.finished_at ? module.finished_at : 'N/A'}</td> 
                                <td class="text-center truncate"> 
                                    <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" data-module-id="${module.id}" title="Supprimez le Module"> 
                                        <i class="fas fa-trash"></i> 
                                    </button> 
                                </td> 
                            </tr>`;
                    });
                    $('#moduleTableBody').html(moduleTableBody);
                    $('#modulesModal').modal('show');
                }
            });
        });

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

        $(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-message').text('Projet supprimé avec succès').show();

                        setTimeout(function() {
                            $('#success-message').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.');
                }
            });
        });

        $(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="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>
                        <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>
                    </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. Veuillez réessayer.'
                        ).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-message').text('Projet modifié avec succès')
                                .show();

                            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 modification du projet. Veuillez réessayer.'
                        ).show();

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


        $(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) {
                        $('#module-' + moduleId).remove();
                        $('#success-ok').text('Module supprimé avec succès').show();

                        // Masquer le message de succès après 3 secondes
                        setTimeout(function() {
                            $('#success-ok').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 loadModules(projetId) {
            $.ajax({
                url: '/projet/' + projetId + '/modules',
                method: 'GET',
                success: function(data) {
                    let moduleTableBody = '';
                    data.modules.forEach(function(module) {
                        let moduleState = module.is_completed ?
                            '<i class="fas fa-check-circle text-success" style="font-size: 32px; margin-left: 21px"></i>' :
                            `<button class="btn btn-warning complete-module-btn" title="Cliquez pour terminer le module" data-module-id="${module.id}">Terminer</button>`;

                        moduleTableBody += `<tr id="module-${module.id}">
                <td>${module.name}</td>
                <td>${moduleState}</td>
                <td>${module.created_at}</td>
                <td>${module.finished_at ? module.finished_at : 'N/A'}</td>
                <td>
                    <button class="btn btn-danger delete-module-btn" data-module-id="${module.id}" title="Supprimez le Module">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>`;
                    });
                    $('#moduleTableBody').html(moduleTableBody);
                }
            });
        }


    })
</script>