@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('secteurs.index') }}">Sous-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="#addSecteurModal"
                      >
                        <i class="fa fa-plus"></i>
                        Ajouter sous-catégorie
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <!-- Add Modal -->
                    <div class="modal fade" id="addSecteurModal" 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-Catégorie </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="addSecteurForm">
                                      <div class="row">
                                        <div class="mb-3">
                                              <label for="secteurName" class="form-label">Nom</label>
                                              <input type="text" id="secteurName" 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="editSecteurModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Modifier Sous-Catégorie</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <form id="editSecteurForm">
                                        <input type="hidden" id="editsecteurId">
                                        <div class="mb-3">
                                            <label for="editSecteurName" class="form-label">Nom</label>
                                            <input type="text" id="editSecteurName" 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="secteurTable"
                        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 ($secteurs as $secteur)
                          <tr data-id="{{ $secteur->id }}">
                            <td>{{ $secteur->id }}</td>
                            <td class="secteur-name">{{ $secteur->nom }}</td>
                            <td>
                              <div class="form-button-action">
                                  <button type="button" class="btn btn-link btn-primary btn-lg edit-secteur" data-id="{{ $secteur->id }}">
                                    <i class="fa fa-edit" style="font-size: 25px; color: #9dbc69;"></i>
                                </button>
                                <button type="button" class="btn btn-link btn-danger delete-secteur" data-id="{{ $secteur->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
        $("#secteurTable").DataTable({
          pageLength: 5,
          language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            }
        });

        $('#secteurTable').on('click', '.edit-secteur', function () {
            let secteurId = $(this).data('id');
            let secteurName = $(this).closest('tr').find('.secteur-name').text();
            $('#editsecteurId').val(secteurId);
            $('#editSecteurName').val(secteurName);
            $('#editSecteurModal').modal('show');
        });

        // Add Submit form
        $('#editSecteurForm').submit(function (e) {
            e.preventDefault();
            let secteurId = $('#editsecteurId').val();
            let secteurName = $('#editSecteurName').val();
            $.ajax({
                url: '{{ route('secteurs.update', ':id') }}'.replace(':id', secteurId),
                type: 'PUT',
                data: {nom: secteurName, _token: '{{ csrf_token() }}'},
                success: function (response) {
                    if (response.success) {
                        $('tr[data-id="' + secteurId + '"] .secteur-name').text(response.secteur.nom);
                        $('#editSecteurModal').modal('hide');

                    }
                }
            });
        });

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

                      $('#secteurTable tbody').append(`<tr class="odd" data-id='${response.secteur.id}' role="row"><td class="sorting_1">${response.secteur.id}</td><td class="secteur-name">${response.secteur.nom}</td>
                      <td><div class='form-button-action'>
                          <button type='button' class='btn btn-link btn-primary btn-lg edit-secteur' data-id='${response.secteur.id}'>
                              <i class='fa fa-edit'></i>
                          </button>
                          <button type='button' class='btn btn-link btn-danger delete-secteur' data-id='${response.secteur.id}'>
                              <i class='fa fa-times'></i>
                          </button>
                      </div></td></tr>`);
                      $('#addSecteurModal').modal('hide');
                      $('#secteurName').val('');
                  }
                }
            });
        });


        $(document).on('click', '.delete-secteur', function () {
          let secteurId = $(this).data('id');
          $.ajax({
              url: '{{ route('secteurs.destroy', ':id') }}'.replace(':id', secteurId),
              type: 'POST', // Laravel requires POST with _method for DELETE
              data: {_method: 'DELETE', _token: '{{ csrf_token() }}'},
              success: function (response) {
                  if (response.success) {
                      $('tr[data-id="' + secteurId + '"]').fadeOut(500, function () { $(this).remove(); });
                  }
              },
              error: function(response){
                  console.log(response)
                  //$('tr[data-id="' + secteurId + '"]').fadeOut(500, function () { $(this).remove(); });

              }
          });
      });


      });
    </script>

@stop