@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() }}">


@section('content')
    <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;
        }

        .btn-group {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
        }

        .btn-group .btn {
            margin-right: 5px;
            /* Optionnel : pour ajouter un peu d'espace entre les boutons */
        }
        .icon-small {
        font-size: 16px;
        width: 1px;
        /* height: auto; */
    }
    </style>
    <div class="page-wrapper">
        <div class="content">
            <table id="tableListeProjet" class="table datatable">
                <thead>
                    <h4>Liste des Modules</h4>
                    <tr class="uppercase-input">
                        <th>Libellé</th>
                        <th>Statut</th>
                        <th>État</th>
                        <th>Date de création</th>
                        <th>Date de fin</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 ($modules as $module)
                        <tr class="uppercase-input" id="module-{{ $module->id }}">
                            <td class="truncate">
                                <span class="ml-2 truncate" id="module-name-{{ $module->id }}">{{ $module->name }}</span>
                            </td>
                            <td class="truncate text-center">
                                @if ($module->is_completed)
                                    Terminé
                                @elseif($module->is_started)
                                    En cours
                                @else
                                    Débuté
                                @endif
                            </td>
                            <td class="truncate text-center">
                                @if ($module->is_completed)
                                    <i class="fas fa-check-circle text-success"
                                        style="font-size: 32px; margin-left: 21px"></i>
                                @else
                                    <button class="btn btn-warning complete-module-btn"
                                        title="Cliquez pour terminer le module" data-module-id="{{ $module->id }}"
                                        type="button"> <!-- change type to button -->
                                        Terminer
                                    </button>
                                @endif
                            </td>
                            <td style="text-align: center !important;">{{ $module->created_at }}</td>
                            <td class="text-center truncate">{{ $module->finished_at ? $module->finished_at : 'N/A' }}

                            <td class="truncate text-center">
                                <div class="btn-group" role="group"> <button class="btn btn-warning edit-module-btn"
                                        title="Modifier le Module" data-module-id="{{ $module->id }}"> <i
                                            class="fas fa-edit icon-small"></i> </button>
                                    <form id="delete-module-{{ $module->id }}"
                                        action="{{ route('module.destroy', ['id' => $module->id]) }}" method="POST"
                                        style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-danger delete-module-btn" title="Supprimer le module"
                                            type="button" data-module-id="{{ $module->id }}"> <i
                                                class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </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 uppercase-input">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 uppercase-input">
                        <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 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>
@endsection
<script>
    $(document).ready(function() {
        $('#tableListeModule').DataTable({
            "bFilter": true,
            "sDom": 'fBtlpi',
            'pagingType': 'numbers',
            "ordering": true,
            "language": {
                search: ' ',
                sLengthMenu: '_MENU_',
                searchPlaceholder: "Rechercher...",
                info: "_START_ - _END_ sur _TOTAL_ éléments",
            },
            initComplete: function() {
                $('.dataTables_filter').appendTo('#tableSearch');
            },
        });

        let moduleIdToComplete = null;

        $(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)'
                            );
                            const statutlog = statusCell.siblings(':nth-child(2)');
                            statutlog.html('Terminé');

                            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);

                            $('#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.');
                    }
                });
            }
        });

        $('#confirmCompletionModal .btn[data-bs-dismiss="modal"]').on('click', function() {
            moduleIdToComplete = null;
        });

        $(document).on('click', '.delete-module-btn', function(e) {
            e.preventDefault();
            const moduleId = $(this).data('module-id');
            if (!confirm('Êtes-vous sûr de vouloir supprimer ce module ?')) {
                return;
            }

            $.ajax({
                url: '/module/' + moduleId,
                method: 'DELETE',
                data: {
                    "_token": "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        $('button[data-module-id="' + moduleId + '"]').closest('tr')
                            .remove();
                    } 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', '.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);
                }
            });
        });

    });
</script>