@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('fonctionnalite.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 la fonctionnalité</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">

                            <div class="row mb-2">
                                <div class="col-lg-12">
                                    <label for="edit_cat_name">Module {!!Common::required() !!}</label>
                                    <select name="module_id" id="edit_module" class="form-control">
                                        <option value="">Choississez un module</option>

                                        @foreach ($modules as $module)
                                            <option value="{{ $module->id }}"
                                                {{ old('module_id') == $module->id ? 'selected' : '' }}>
                                                {{ $module->name }}
                                            </option>
                                        @endforeach
                                    </select>


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

                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-lg-12">
                                    <label for="edit_cat_name">Nom de la fonctionnalité {!!Common::required() !!}</label>
                                    <input type="text" name="name" value="{{old('name')}}" id="edit_cat_name" class="form-control" required>

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

                                </div>
                            </div>



                            <div class="row mb-2">
                                <div class="col-lg-12">
                                    <label for="edit_cat_name">Code fonctionnalité {!!Common::required() !!}</label>
                                    <input type="text" name="code" value="{{old('code')}}" id="edit_code_name" class="form-control" required>
                                    @error('code', 'editFonctionnalite')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                </div>
                            </div>

                        </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 cette fonctionnalité</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('fonctionnalite.delete') }}" method="POST">

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


                            <p class="m-0">Vous etes sur le point de supprimer cette fonctionnalité. 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 une fonctionnalité</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('fonctionnalite.store') }}" method="POST" id="categorie_form">

                            <div class="row mb-3">
                                <div class="col-lg-12">

                                    <label for="">Module</label>

                                    <select name="module_id" class="form-control">
                                        <option value="">Choississez un module</option>

                                        @foreach ($modules as $module)
                                            <option value="{{ $module->id }}"
                                                {{ old('module_id') == $module->id ? 'selected' : '' }}>
                                                {{ $module->name }}
                                            </option>
                                        @endforeach
                                    </select>



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

                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-12">

                                    <label for="">Nom de la fonctionnalité</label>
                                    <input type="text" required class="form-control" value="{{ old('name') }}"
                                        name="name" id="name_cat">

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


                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-lg-12">

                                    <label for="">Code fonctionnalité</label>
                                    <input type="text" required class="form-control" value="{{ old('code') }}"
                                        name="code" id="name_cat">

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

                                </div>
                            </div>


                            @csrf

                    </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 fonctionnalités
                    </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 fonctionnalités</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 une fonctionnalité</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 ($fonctionnalites->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>Module</th>

                                        <th>Code fonctionnalité</th>
                                        {{-- <th>Code</th> --}}




                                        <th>Actions</th>

                                    </tr>
                                </thead>


                                <tbody>

                                    @foreach ($fonctionnalites as $season)
                                        <tr>
                                            <td>{{ $loop->index + 1 }}</td>
                                            <td>{{ $season->name }}</td>
                                            <td>{{ $season->module->name }}</td>
                                            <td>{{ $season->code }}</td>







                                            <td class="text-muted">




                                                {{-- @if ($season->status == 0)
                                                    <a data-id="{{ $season->id }}" data-bs-toggle="modal"
                                                        data-bs-target="#DesactivateModal" href="javascript:void(0);"
                                                        class="btn btn-soft-primary btn-icon btn-sm rounded-circle desactivate_equipement">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                            height="24" 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-x">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                            <path d="M18 6l-12 12" />
                                                            <path d="M6 6l12 12" />
                                                        </svg>
                                                    </a>
                                                @elseif ($season->status == 1)
                                                
                                                    <a data-id="{{ $season->id }}" data-bs-toggle="modal"
                                                        data-bs-target="#ActivateModal" href="javascript:void(0);"
                                                        class="btn btn-soft-primary btn-icon btn-sm rounded-circle activate_equipement">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                            height="24" 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-check">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                            <path d="M5 12l5 5l10 -10" />
                                                        </svg>
                                                    </a>
                                                @endif  --}}



                                                <a title="Modifier" href="javascript:void(0)"
                                                    class="btn btn-soft-success btn-icon btn-sm rounded-circle editCatBtn"
                                                    data-id="{{ $season->id }}" data-module="{{ $season->module }}"
                                                    data-code="{{ $season->code }}" data-name="{{ $season->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="{{ $season->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_fonctionnalite">
                                                    <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_fonctionnalite', function(e) {
            e.preventDefault();
            var fonctionnalite_id = $(this).data('id');
            $('#fonctionnalite_id').val(fonctionnalite_id);
        });

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

            // alert(desactivate_season_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->createFonctionnalite->any())
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                let modal = new bootstrap.Modal(
                    document.getElementById('DesactivateModal')
                );
                modal.show();
            });
        </script>
    @endif

    @if ($errors->editFonctionnalite->any())
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                let modal = new bootstrap.Modal(
                    document.getElementById('EditCategorieModal')
                );
                modal.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;

                    const code = this.dataset.code;

                    const module = JSON.parse(this.dataset.module);


                    console.log(module.name);;

                    // Pré-remplissage des champseditz
                    document.getElementById('edit_cat_id').value = id;
                    document.getElementById('edit_cat_name').value = name;
                    document.getElementById('edit_code_name').value = code;

                    document.getElementById('edit_module').value = module.id;

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


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