@extends('parent')

@section('content')

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

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

                <li class="nav-item">
                  Liste Des Types
                </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="#addTypeModal"
                      >
                        <i class="fa fa-plus"></i>
                        Ajouter Type
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <!-- Add Modal -->
                    <div class="modal fade" id="addTypeModal" 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"> Type </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="addTypeForm">
                                      <div class="row">
                                        <div class="mb-3">
                                              <label for="typeName" class="form-label">Nom</label>
                                              <input type="text" id="typeName" class="form-control" required>
                                        </div>                                        
                                      </div>

                                      <div class="row">
                                          <div class="mb-3">
                                                <label for="description" class="form-label">Description</label>
                                                <textarea type="text" id="description" class="form-control" required></textarea>
                                          </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="editTypeModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Modifier Type</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <form id="editTypeForm">
                                        <input type="hidden" id="edittypeId">
                                        
                                        <div class="row">
                                            <div class="mb-3">
                                                <label for="editTypeName" class="form-label">Nom</label>
                                                <input type="text" id="editTypeName" class="form-control" required>
                                            </div>
                                        </div>

                                        <div class="row">
                                          <div class="mb-3">
                                                <label for="editDescription" class="form-label">Description</label>
                                                <textarea type="text" id="editDescription" class="form-control" required></textarea>
                                          </div>
                                      </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="typeTable"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                            <th>Nom</th>
                            <th>Description</th>
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>

                        <tbody>
                        @foreach ($types as $type)
                          <tr data-id="{{ $type->id }}">
                            <td class="type-name">{{ $type->nom }}</td>
                            <td class="type-description">{{ $type->description }}</td>
                            <td>
                              <div class="form-button-action">
                                  <button type="button" class="btn btn-link btn-primary btn-lg edit-type" data-id="{{ $type->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-type" data-id="{{ $type->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
        $("#typeTable").DataTable({
          pageLength: 5,
          order: [[2, "desc"]],
          language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            }
        });

        $('#typeTable').on('click', '.edit-type', function () {
            let typeId = $(this).data('id');
            let typeName = $(this).closest('tr').find('.type-name').text();
            let descriptionName = $(this).closest('tr').find('.type-description').text();
            $('#edittypeId').val(typeId);
            $('#editTypeName').val(typeName);
            $('#editDescription').val(descriptionName);
            $('#editTypeModal').modal('show');
        });


        // Add Submit form
        $('#addTypeForm').submit(function (e) {
            e.preventDefault();
            let typeName = $('#typeName').val();
            let descriptionName = $('#description').val();

            $.ajax({
                url: '{{ route('types.store') }}',
                type: 'POST',
                data: {nom: typeName, description: descriptionName, _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: "Type ajoutée !",
                            text: "Le type 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
                        });

                        $('#typeTable tbody').prepend(`<tr class="odd" data-id='${response.type.id}' role="row"><td class="type-name">${response.type.nom}</td>
                        <td class="type-description">${response.type.description}</td>
                        <td><div class='form-button-action'>
                            <button type='button' class='btn btn-link btn-primary btn-lg edit-type' data-id='${response.type.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-type' data-id='${response.type.id}' data-bs-toggle="tooltip" title="Supprimer">
                                <i class="fas fa-trash" style="font-size: 25px; color: #e74c3c;"></i>
                            </button>
                        </div></td></tr>`);
                        $('#addTypeModal').modal('hide');
                        $('#typeName').val('');
                        $('#description').val('');
                  }
                }
            });
        });


        // Edit submit form
        $('#editTypeForm').submit(function (e) {
            e.preventDefault();
            let typeId = $('#edittypeId').val();
            let typeName = $('#editTypeName').val();
            let descriptionName = $('#editDescription').val();

            $.ajax({
                url: '{{ route('types.update', ':id') }}'.replace(':id', typeId),
                type: 'PUT',
                data: {nom: typeName, description: descriptionName, _token: '{{ csrf_token() }}'},
                success: function (response) {
                    if (response.success) {
                        $('tr[data-id="' + typeId + '"] .type-name').text(response.type.nom);
                        $('tr[data-id="' + typeId + '"] .type-description').text(response.type.description);
                        $('#editTypeModal').modal('hide');

                    }
                }
            });
        });



        $(document).on('click', '.delete-type', function () {
          let typeId = $(this).data('id');
          $.ajax({
              url: '{{ route('types.destroy', ':id') }}'.replace(':id', typeId),
              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: "Le type a été supprimé 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="' + typeId + '"]').fadeOut(500, function () { $(this).remove(); });
                  }
              },
              error: function(response){

                Swal.fire({
                    title: "Suppression refusée !",
                    text: "Ce type est lié à des institutions financières",
                    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)
                  //$('tr[data-id="' + typeId + '"]').fadeOut(500, function () { $(this).remove(); });

              }
          });
      });


      });
    </script>

@stop