<!-- resources/views/your-page.blade.php -->
@extends('layouts.theme1')

@section('title', 'Categories')

@section('content')
    <!-- Contenu de votre page -->
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

    <div class="col-md-12">
        <div class="card">
        <div class="border-bottom title-part-padding">
            <h4 class="card-title mb-0">Creation de plusieurs Categories</h4>
        </div>
        <div class="card-body">

            <form id="categoryForm" class="row" action="{{ route('admin.categories.store.multi') }}" enctype="multipart/form-data"  method="post">
                @csrf

                <!-- Ajoutez cette ligne pour la variable cachée -->
                <input type="hidden" name="project_id" value="{{ $project->id }}">

                <div class="row">
                    <div class="col-sm-3">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="libelle[]" placeholder="Libellé">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="sonStyle[]" placeholder="Son Style">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="mb-3">
                            <input type="file" class="form-control" name="icone[]" accept="image/*">
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="mb-3">
                            <button onclick="addCategory();" class="btn rounded-pill px-4 btn-light-success text-success font-weight-medium waves-effect waves-light" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle feather-sm fill-white">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div id="categoryFields" class="my-4"></div>

                <button type="submit" class="
                            btn btn-primary
                            font-weight-medium
                            rounded-pill
                            px-4
                          ">Enregistrer les catégories</button>

            </form>
        </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">Projects</h4>
            </div>
            <div class="card-body">
                <h6 class="card-subtitle mb-3">
                ici
                </h6>
                <div class="table-responsive">
                <table id="categories-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Libellé</th>
                            <th>Son Style</th>
                            <th>Icône</th>
                            <th>Parent ID</th>
                            <th>Project ID</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

    

    <!-- Modal Add products -->
    <!-- Modal pour ajouter/modifier un projet -->
    @include('admin.delete_modal')

    

    <!--This page JavaScript -->

    <script src="{{ asset('theme1/dist/libs/jquery.repeater/jquery.repeater.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/js/plugins/repeater-init.js') }}"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>


    <script>
        $(document).ready(function() {

            var projectId = '{{ $project->id }}'; // Supposons que vous ayez accès à l'ID du projet dans votre vue

            $('#categories-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('admin.projects.categories.byid', $project->id) }}', // Incluez l'ID du projet dans l'URL
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'libelle', name: 'libelle' },
                    { data: 'sonStyle', name: 'sonStyle' },
                    { data: 'icone', name: 'icone' },
                    { data: 'parent_id', name: 'parent_id' },
                    { data: 'project_id', name: 'project_id' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id); // Ajoutez un attribut data-id à la cellule d'action
                        }
                    },
                ]
            });

            $('#categories-table tbody').on('click', 'tr', function () {
                var projectId = $(this).find('td[data-id]').data('id');
                console.log('ID de l\'élément sélectionné :', projectId);
                // Vous pouvez maintenant utiliser projectId comme nécessaire
            });

            // Gestionnaire d'événement pour ouvrir le modal
            $('#openModalBtn').on('click', function () {
                $('#addProjectModal').modal('show');
            });

            // Gestionnaire d'événement pour fermer le modal
            $('#addProjectModal').on('hidden.bs.modal', function () {
                // Réinitialisez le formulaire lorsque le modal est fermé
                $('#addProjectForm')[0].reset();
            });

            // Gestionnaire d'événement pour le formulaire AJAX
            $('#btn-add-project').on('click', function () {
                // Récupérer les valeurs du formulaire
                var formData = {
                    libelle: $('#project-libelle').val(),
                    sonStyle: $('#project-sonStyle').val(),
                    isOffline: $('#project-isOffline').is(':checked') ? 1 : 0,
                    _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                };

                // Effectuer une requête AJAX
                $.ajax({
                    url: '{{ route('admin.projects.store') }}', // Assurez-vous d'ajuster la route
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        // Mettez à jour le DataTable
                        $('#categories-table').DataTable().ajax.reload();
                        // Fermez le modal
                        $('#addProjectModal').modal('hide');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton de suppression
            $('#categories-table tbody').on('click', '.deleteProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var projectId = $(this).data('id');
                
                // Ouvrir le modal de confirmation
                $('#deleteConfirmationModal').modal('show');

                // Gestionnaire d'événement pour le clic sur le bouton de confirmation de suppression
                $('#confirmDelete').on('click', function () {
                    // Fermer le modal de confirmation
                    $('#deleteConfirmationModal').modal('hide');

                    // Effectuer la suppression en utilisant AJAX
                    $.ajax({
                        url: '/admin/categories/' + projectId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#categories-table').DataTable().ajax.reload();
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton d'édition
            $('#categories-table tbody').on('click', '.editProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var projectId = $(this).data('id');

                // Effectuer une requête AJAX pour charger les données du projet
                $.ajax({
                    url: '/admin/projects/' + projectId + '/edit',
                    type: 'GET',
                    success: function (project) {
                        // Pré-remplir le formulaire d'édition avec les données du projet
                        $('#edit-libelle').val(project.libelle);
                        $('#edit-sonStyle').val(project.sonStyle);
                        $('#edit-isOffline').prop('checked', project.isOffline);

                        // Ouvrir le modal d'édition
                        $('#editProjectModal').modal('show');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });

                // Gestionnaire d'événement pour la soumission du formulaire d'édition
                $('#editProjectForm').on('submit', function (event) {
                    event.preventDefault();

                    var formData = {
                        libelle: $('#edit-libelle').val(),
                        sonStyle: $('#edit-sonStyle').val(),
                        isOffline: $('#edit-isOffline').is(':checked') ? 1 : 0,
                        _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                    };
                    // Effectuer une requête AJAX pour mettre à jour le projet
                    $.ajax({
                        url: '/admin/projects/' + projectId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#categories-table').DataTable().ajax.reload();

                            // Fermer le modal d'édition
                            $('#editProjectModal').modal('hide');
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            
            //Fin des fonctions


        });

        var categoryCounter = 1;

            function addCategory() {
                categoryCounter++;
                var categoryForm = document.getElementById("categoryFields");
                var divCategory = document.createElement("div");
                divCategory.setAttribute("class", "mb-3 removeCategory" + categoryCounter);
                var removeCategory = "removeCategory" + categoryCounter;
                divCategory.innerHTML =
                    '<div class="row">' +
                    '<div class="col-sm-3"><div class="mb-3"><input type="text" class="form-control" name="libelle[]" placeholder="Libellé"></div></div>' +
                    '<div class="col-sm-3"><div class="mb-3"><input type="text" class="form-control" name="sonStyle[]" placeholder="Son Style"></div></div>' +
                    '<div class="col-sm-3"><div class="mb-3"><input type="file" class="form-control" name="icone[]" accept="image/*"></div></div>' +
                    '<div class="col-sm-2"><div class="mb-3"><button class="btn btn-danger" type="button" onclick="removeCategory(' +
                    categoryCounter +
                    ');"><i class="fa fa-minus"></i></button></div></div>' +
                    '</div>';

                categoryForm.appendChild(divCategory);
            }

            function removeCategory(rid) {
                $(".removeCategory" + rid).remove();
            }

                
    </script>
@endsection
