@extends('parent')

@section('content')

<div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">Liste Des Sous-Catégories</h3>
              <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                  <a href="{{ route('dashboard') }}">
                    <i class="icon-home"></i>
                  </a>
                </li>

                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>

                <li class="nav-item">
                  <a href="{{ route('categories.index') }}">Catégories</a>
                </li>

                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>

                <li class="nav-item">
                  Liste Des Sous-Catégories
                </li>
              </ul>
            </div>
            <div class="row">

              <div class="col-md-12">
                <div class="card">
                  <div class="card-header">
                    <div class="d-flex align-items-center">
                      <button
                        class="btn btn-success btn-round ms-auto"
                        data-bs-toggle="modal"
                        data-bs-target="#addCategoryModal"
                      >
                        <i class="fa fa-plus"></i>
                        Ajouter Sous-Categorie
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <!-- Add Modal -->
                    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header border-0">
                                  <h5 class="modal-title">
                                    <span class="fw-mediumbold"> Nouvelle</span>
                                    <span class="fw-light"> Sous-Categorie </span>
                                  </h5>
                                  <button
                                    type="button"
                                    class="close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  >
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">

                                    <form id="addCategoryForm">
                                      <div class="row">
                                        <div class="mb-3">
                                            <label for="parent" class="form-label">Catégorie</label>
                                            <select name="parent" id="parent">
                                                @if(!empty($parents))
                                                    @foreach ($parents as $item)
                                                        <option value="{{$item->id}}">{{$item->nom}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                      </div>
                                        <div class="mb-3">
                                              <label for="categoryName" class="form-label">Nom</label>
                                              <input type="text" id="categoryName" class="form-control" required>
                                        </div>
                                      </div>

                                      <div class="modal-footer border-0">
                                        <button type="submit" class="btn btn-primary">Ajouter</button>
                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                                      </div>

                                    </form>

                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- End Add Modal -->

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Modifier Sous-Categorie</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <form id="editCategoryForm">
                                        <input type="hidden" id="editCategoryId">
                                        <div class="mb-3">
                                            <label for="categoryName" class="form-label">Catégorie</label>
                                            <select name="parent" id="parent" class="form-control" required>
                                                @if(!empty($parents))
                                                    @foreach ($parents as $item)
                                                        <option value="{{$item->id}}">{{$item->nom}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                      </div>
                                        <div class="mb-3">
                                            <label for="editCategoryName" class="form-label">Nom</label>
                                            <input type="text" id="editCategoryName" class="form-control" required>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Mettre à jour</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Edit Modal -->

                    <div class="table-responsive">
                      <table
                        id="categoryTable"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                            <!-- <th>ID</th> -->
                            <th>Nom</th>
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>

                        <tbody>
                        @foreach ($categories as $categorie)
                          <tr data-id="{{ $categorie->id }}">
                            <!-- <td>{{ $categorie->id }}</td> -->
                            <td class="category-name">{{ $categorie->nom }}</td>
                            <td>
                              <div class="form-button-action">
                                  <button type="button" class="btn btn-link btn-primary btn-lg edit-category" data-id="{{ $categorie->id }}" data-bs-toggle="tooltip" title="Modifier">
                                    <i class="fa fa-edit" style="font-size: 25px; color: #9dbc69;"></i>
                                  </button>
                                  <button type="button" class="btn btn-link btn-danger delete-category" data-id="{{ $categorie->id }}" data-bs-toggle="tooltip" title="Supprimer">
                                    <i class="fas fa-trash" style="font-size: 25px; color: #e74c3c;"></i>
                                  </button>
                              </div>
                            </td>
                          </tr>
                        @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

@stop

@section('content-script')

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

        // Add Row
        $("#categoryTable").DataTable({
          pageLength: 5,
          order: [[1, "desc"]],
          language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            }
        });

        $('#categoryTable').on('click', '.edit-category', function () {
            let categoryId = $(this).data('id');
            let categoryName = $(this).closest('tr').find('.category-name').text();
             console.log($(this).closest('tr'))
            $('#editCategoryId').val(categoryId);
            $('#editCategoryName').val(categoryName);
            $('#editCategoryModal').modal('show');
        });

        // Add Submit form
        $('#editCategoryForm').submit(function (e) {
            e.preventDefault();
            let categoryId = $('#editCategoryId').val();
            let categoryName = $('#editCategoryName').val();
            $.ajax({
                url: '{{ route('categories.update', ':id') }}'.replace(':id', categoryId),
                type: 'PUT',
                data: {nom: categoryName, _token: '{{ csrf_token() }}'},
                success: function (response) {
                    if (response.success) {
                        $('tr[data-id="' + categoryId + '"] .category-name').text(response.categorie.nom);
                        $('#editCategoryModal').modal('hide');

                    }
                }
            });
        });

        // Edit submit form
        $('#addCategoryForm').submit(function (e) {
            e.preventDefault();
            let categoryName = $('#categoryName').val();
            console.log(categoryName)
            $.ajax({
                url: '{{ route('categories.store') }}',
                type: 'POST',
                data: {nom: categoryName,parent: parent, _token: '{{ csrf_token() }}'},
                success: function (response) {
                  if (response.success) {
                      // Remove 'No data available in table' message
                      $('.dataTables_empty').remove()

                      // affichage du modal
                      Swal.fire({
                            title: "Sous-Catégorie ajoutée !",
                            text: "La sous-catégorie a été ajoutée avec succès.",
                            icon: "success",
                            width: "400px", // Ajuste la largeur si nécessaire
                            customClass: {
                              icon: "custom-swal-icon",
                              popup: "custom-swal-size"
                            },
                            confirmButtonText: "OK",
                            confirmButtonColor: "#28a745" // Vert pour succès
                        });

                      $('#categoryTable tbody').prepend(`<tr class="odd" data-id='${response.categorie.id}' role="row"><td class="category-name">${response.categorie.nom}</td>
                      <td><div class='form-button-action'>
                          <button type='button' class='btn btn-link btn-primary btn-lg edit-category' data-id='${response.categorie.id}'>
                              <i class="fa fa-edit" style="font-size: 25px; color: #9dbc69;"></i>
                          </button>
                          <button type='button' class='btn btn-link btn-danger delete-category' data-id='${response.categorie.id}'>
                              <i class="fas fa-trash" style="font-size: 25px; color: #e74c3c;"></i>
                          </button>
                      </div></td></tr>`);
                      $('#addCategoryModal').modal('hide');
                      $('#categoryName').val('');
                  }
                }
            });
        });


        $(document).on('click', '.delete-category', function () {
          let categoryId = $(this).data('id');
          console.log(categoryId)
          $.ajax({
              url: '{{ route('categories.destroy', ':id') }}'.replace(':id', categoryId),
              type: 'POST', // Laravel requires POST with _method for DELETE
              data: {_method: 'DELETE', _token: '{{ csrf_token() }}'},
              success: function (response) {

                    Swal.fire({
                      title: "Suppression réussie !",
                      text: "La catégorie a été supprimée avec succès.",
                      icon: "success",
                      width: "400px", // Ajuste la largeur si nécessaire
                      customClass: {
                        icon: "custom-swal-icon",
                        popup: "custom-swal-size"
                      },
                      confirmButtonText: "OK",
                      confirmButtonColor: "#28a745" // Vert pour succès
                  });

                  if (response.success) {
                      $('tr[data-id="' + categoryId + '"]').fadeOut(500, function () { $(this).remove(); });
                  }
              },
              error: function(response){

                  Swal.fire({
                    title: "Suppression refusée !",
                    text: "Cette catégorie est liée à des textes juridiques !",
                    icon: "error",
                    width: "400px", // Augmente la largeur
                    customClass: {
                      icon: "custom-swal-icon",
                      popup: 'custom-swal-size' // Appliquer une classe CSS personnalisée
                    },
                    confirmButtonText: "OK",
                    confirmButtonColor: "#d33"
                  });

                  //console.log(response)

              }
          });
      });


      });
    </script>

@stop