@extends('parent')

@section('content')

<div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">Liste Des Abonnements</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('abonnements.index') }}">Abonnements</a>
                </li>

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

                <li class="nav-item">
                  Liste Des Abonnements
                </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 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"> Categorie </span>
                                  </h5>
                                  <button
                                    type="button"
                                    class="close"
                                    data-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="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-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 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="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>Email</th>
                                    <th>Tél</th>
                                    <th>Fonction</th>
                                    <th>Ville</th>
                                    <th>Catégories</th>  <!-- New column for categories -->
                                    <th style="width: 10%">Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($abonnements as $abonnement)
                                    <tr data-id="{{ $abonnement->id }}">
                                        <td>{{ $abonnement->id }}</td>
                                        <td class="category-name">{{ $abonnement->nom }}</td>
                                        <td class="category-name">{{ $abonnement->email }}</td>
                                        <td class="category-name">{{ $abonnement->tel }}</td>
                                        <td class="category-name">{{ $abonnement->fonction }}</td>
                                        <td class="category-name">{{ $abonnement->ville }}</td>
                                        <td class="category-name">
                                            @foreach ($abonnement->categories as $category)
                                                <span class="badge badge-info">{{ $category->nom }}</span>
                                            @endforeach
                                        </td>
                                        <td>
                                            <div class="form-button-action">
                                                <!-- <button type="button" class="btn btn-link btn-danger delete-category" data-id="{{ $abonnement->id }}">
                                                    <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,
          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('abonnements.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.abonnement.nom);
                        $('#editCategoryModal').modal('hide');

                    }
                }
            });
        });

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

                      $('#categoryTable tbody').append(`<tr class="odd" data-id='${response.abonnement.id}' role="row"><td class="sorting_1">${response.abonnement.id}</td><td class="category-name">${response.abonnement.nom}</td>
                      <td><div class='form-button-action'>
                          <button type='button' class='btn btn-link btn-primary btn-lg edit-category' data-id='${response.abonnement.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.abonnement.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');
          $.ajax({
              url: '{{ route('abonnements.destroy', ':id') }}'.replace(':id', categoryId),
              type: 'POST', // Laravel requires POST with _method for DELETE
              data: {_method: 'DELETE', _token: '{{ csrf_token() }}'},
              success: function (response) {
                  if (response.success) {
                      $('tr[data-id="' + categoryId + '"]').fadeOut(500, function () { $(this).remove(); });
                  }
              },
              error: function(response){
                  console.log(response)
                  //$('tr[data-id="' + categoryId + '"]').fadeOut(500, function () { $(this).remove(); });

              }
          });
      });


      });
    </script>

@stop