@extends('layouts.master')
@section('content')
    <div class="page-container">

        <div class="modal fade" id="EditCategorieModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <form action="{{ route('module.update') }}" method="POST" id="editCategorieForm">
                    @csrf
                    <input type="hidden" name="id" id="edit_cat_id">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Modifier le module <span id="cat_name" style="color: red"></span></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <label for="edit_cat_name">Nom de la catégorie</label>
                            <input type="text" name="name" id="edit_cat_name" class="form-control" required>

                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-success">Mettre à jour</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>



        <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Supprimer ce module</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('module.delete') }}" method="POST">

                            @csrf
                            <input type="hidden" name="module_id" id="module_id">


                            <p class="m-0">Vous etes sur le point de supprimer ce module. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, supprimer</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->


        <div class="modal fade DesactivateModal" id="DesactivateModal" data-bs-backdrop="static" data-bs-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Ajouter un module</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('module.store') }}" method="POST" id="categorie_form">

                            @csrf

                            <label for="">Nom du module {!! Common::required() !!}</label>
                            <input type="text" required class="form-control" value="{{ old('name') }}" name="name"
                                id="name_cat">

                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success">Ajouter</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->

        <div class="d-flex justify-content-end">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 py-2">
                    <li class="breadcrumb-item"><a href="{{ route('dash.index') }}">Tableau de bord</a>
                    </li>
                    {{-- <li class="breadcrumb-item"><a href="#">Liste des administrateurs</a></li> --}}
                    <li class="breadcrumb-item active" aria-current="page">Liste des modules
                    </li>
                </ol>
            </nav>
        </div>

        

                    @if (Session::get('success'))
                        <div style="margin-bottom: 10px !important" class="alert alert-success alert-dismissible d-flex align-items-center border-2 border border-success mt-4"
                            role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                            <iconify-icon icon="solar:check-read-line-duotone" class="fs-20 me-1"></iconify-icon>
                            <div class="lh-1"><strong>Success - </strong>{{ Session::get('success') }} </div>
                        </div>
                    @endif

                    @if (Session::get('error'))
                        <div class="alert alert-danger alert-dismissible d-flex align-items-center border-2 border border-danger"
                            role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                            <iconify-icon icon="solar:danger-triangle-bold-duotone" class="fs-20 me-1"></iconify-icon>
                            <div class="lh-1"><strong>Error - </strong> {{ Session::get('error') }}</div>
                        </div>
                    @endif

        <div class="row">
            <div class="col-12">
                <div class="card mt-1">


                    <div class="card-body">

                        <h4 class="header-title">Liste des modules</h4>

                        <div class="text-end mb-3">

                            <button style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" data-bs-toggle="modal" data-bs-target="#DesactivateModal" href="javascript:void(0);"
                                class="btn btn-primary">Ajouter un module</button>
                        </div>





                        {{-- <button type="button" id="sweetalert-confirm-button" class="btn btn-secondary">Click Me</button> --}}
                        {{-- <button type="button" id="sweeptalert-info" class="btn btn-info">Info Alert</button> --}}

                        @if ($modules->isEmpty())
                            <div class="alert alert-warning text-center">Désolé, votre liste est vide !</div>
                        @else
                            <table id="" class="table dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        {{-- <th>Numéro</th> --}}
                                        <th>No</th>
                                        <th>Nom</th>
                                        <th>Liste des fonctionnalités</th>
                                        {{-- <th>Description</th> --}}



                                        <th>Actions</th>

                                    </tr>
                                </thead>


                                <tbody>
                                    @foreach ($modules as $module)
                                        <tr>
                                            <td>{{ $loop->index + 1 }}</td>

                                            <td>{{ $module->name }}</td>

                                            <td>

                                                @if (sizeof($module->fonctionnalites->where('status', 0)) > 0)
                                                    <ul class="mb-0" style="padding-left: 15px;">
                                                        @foreach ($module->fonctionnalites->where('status', 0) as $fonctionnalite)
                                                            <li>{{ $fonctionnalite->name }}</li>
                                                        @endforeach
                                                    </ul>
                                                @else
                                                    <span class="text-danger" style="font-weight: bold"> Aucune
                                                        fonctionnalité </span>
                                                @endif

                                            </td>

                                            <td class="text-muted">

                                                <a title="Modifier" href="javascript:void(0)"
                                                    class="btn btn-soft-success btn-icon btn-sm rounded-circle editCatBtn"
                                                    data-id="{{ $module->id }}" data-name="{{ $module->name }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="icon icon-tabler icons-tabler-outline icon-tabler-edit">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                        <path
                                                            d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
                                                        <path
                                                            d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
                                                        <path d="M16 5l3 3" />
                                                    </svg>
                                                </a>

                                                <a title="Supprimer" data-id="{{ $module->id }}"
                                                    href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal"
                                                    class="btn btn-soft-danger btn-icon btn-sm rounded-circle delete_module">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                        <path d="M4 7l16 0" />
                                                        <path d="M10 11l0 6" />
                                                        <path d="M14 11l0 6" />
                                                        <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                                        <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                                    </svg>
                                                </a>

                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        @endif




                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div> <!-- end row-->
    </div> <!-- end row-->


    <script>
        $(document).on('click', '.delete_module', function(e) {
            e.preventDefault();
            var module_id = $(this).data('id');
            $('#module_id').val(module_id);
        });

        $(document).on('click', '.desactivate_equipement', function(e) {
            e.preventDefault();
            var desactivate_equipement_id = $(this).data('id');

            // alert(desactivate_module_id)
            $('#desactivate_equipement_id').val(desactivate_equipement_id);
        });
        $(document).on('click', '.activate_equipement', function(e) {
            e.preventDefault();
            var activate_equipement_id = $(this).data('id');
            $('#activate_equipement_id').val(activate_equipement_id);
        });


        $('#deleteprofileForm').on('submit', function(e) {
            console.log("📤 Formulaire soumis !");
        });
    </script>


    @if ($errors->any())
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                let myModal = new bootstrap.Modal(document.querySelector('.DesactivateModal'));
                myModal.show();
            });
        </script>
    @endif

    {{-- <script>
        const form = document.getElementById('categorie_form');
        const cat = document.getElementById('name_cat');
        const errorSpan = document.getElementById('categorie-error');

        form.addEventListener('submit', function(e) {
            const catName = cat.value.trim();

            // Réinitialiser les erreurs précédentes
            cat.style.border = '';
            errorSpan.textContent = '';

            if (!catName) {
                e.preventDefault(); // Empêche l'envoi

                // Bordure rouge personnalisée
                cat.style.border = '1px solid red';

                // Message d'erreur
                errorSpan.innerHTML = 'Le libellé est requis.';
            }
        });
    </script> --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editButtons = document.querySelectorAll('.editCatBtn');
            const editModal = new bootstrap.Modal(document.getElementById('EditCategorieModal'));

            editButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();

                    // Récupération des données
                    const id = this.dataset.id;
                    const name = this.dataset.name;

                    // Pré-remplissage des champs
                    document.getElementById('edit_cat_id').value = id;
                    document.getElementById('edit_cat_name').value = name;
                    document.getElementById('cat_name').textContent = `(${name})`;


                    // Ouvrir le modal
                    editModal.show();
                });
            });
        });
    </script>

    <script src="{{ asset('assets/js/components/extended-sweetalerts.js') }}"></script>
@endsection