@extends('AdminMaster.authMaster')

@section('content')

<style>
  a {
    text-decoration: none;
    /* Ensure there's no underline or unwanted styles */
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked+.slider {
    background-color: #2196F3;
  }

  input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked+.slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 30px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
</style>

<!-- <div class="page-header">
  <h3 class="page-title"> Users </h3>
 
</div> -->
<div class="row">
  <div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">All Users</h4>
        <!-- <p class="card-description"> Add class <code>.table</code> -->
        </p>
        <div class="table-responsive">
          <table class="table table-bordered" >
            <thead>
              <tr>
                <th>Sl no.</th>
                <th>Name.</th>
                <th>Email</th>
                <th>User_Type</th>
                <th>Status</th>
                <th>Action</th>

              </tr>
            </thead>
            <tbody>
              @foreach($users as $user)
              <tr>
                <td>{{$user->id}}</td>
                <td>{{$user->name}}</td>
                <td>{{$user->email}}</td>
                <td>
                  <label>
                    @foreach($userTypes as $userType)
                    @if($userType->id == $user->user_type )
                    @if($userType->id == 1)
                    <span >{{$userType->name}}</span>
                    @elseif($userType->id == 2)
                    <span >{{$userType->name}}</span>
                    @else
                    <span >{{$userType->name}}</span>
                    @endif
                    @endif
                    @endforeach
                  </label>
                </td>
                <td>
                  @if($user->user_type == 1)
                  @if($user->user_status == 1)
                  <span class="badge bg-success">Active</span>
                  @else
                  <span class="badge bg-danger">Inactive</span>
                  @endif
                  @else
                  <a>
                    <label class="switch">
                      <input type="checkbox" class="toggle-status" data-type="" data-id="{{ $user->id }}" {{ $user->user_status == 1 ? 'checked' : '' }}>
                      <span class="slider round"></span>
                    </label>
                  </a>
                  @endif
                </td>
                
                <td>
                @if($user->user_type != 1)
              
                  <div class="">
                    <a href=" {{ route('userEdit.view' , $user->id ) }}">
                      <i class="mdi mdi-pencil" style="font-size: 20px;"></i>
                    </a>
                    &nbsp;

                    <a href="javascript:void(0);" class="delete-btn" data-id="{{ $user->id }}">
                      <i class="mdi mdi-trash-can" style="font-size: 20px;"></i>
                    </a>
                  </div>
                @else
                  &nbsp;
                @endif 
                </td>

              </tr>
              @endforeach

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

<script>
  $(document).ready(function() {
    $('.toggle-status').change(function() {
      var userId = $(this).data('id');
      var newStatus = $(this).prop('checked') ? 1 : 0;
      var toggleSwitch = $(this);
      console.log(userId);

      Swal.fire({
        title: "Are you sure you want to change the status?",
        showDenyButton: true,
        showCancelButton: false,
        confirmButtonText: "Yes, change it",
        denyButtonText: "No, cancel"
      }).then((result) => {
        if (result.isConfirmed) {
          // AJAX call to update the user status
          $.ajax({
            url: "{{ route('userStatus.update') }}",
            type: "POST",
            data: {
              _token: "{{ csrf_token() }}",
              id: userId,
              status: newStatus
            },
            success: function(response) {
              Swal.fire("User status updated successfully!", "", "success");
            },
            error: function() {
              Swal.fire("Something went wrong.", "", "error");
              toggleSwitch.prop("checked", !newStatus); // Revert if error occurs
            }
          });
        } else if (result.isDenied) {
          toggleSwitch.prop("checked", !newStatus); // Revert if canceled
          Swal.fire("Changes are not saved", "", "info");
        }
      });
    });
    $('.delete-btn').click(function() {
      var userId = $(this).data('id'); // Get user ID from data-id attribute

      // Show SweetAlert2 confirmation dialog
      Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "{{ route('user.delete') }}",
            type: 'POST',
            data: {
              _token: "{{ csrf_token() }}",
              id: userId
            },
            success: function(response) {
              if (response.status === 'success') {
                Swal.fire('Deleted!', response.message, 'success');
                location.reload();
              } else {
                Swal.fire('Error!', response.message, 'error');
              }
            },
            error: function(xhr, status, error) {
              Swal.fire('Something went wrong!', 'Please try again.', 'error');
            }
          });
        } else {
          Swal.fire('Cancelled', 'The user was not deleted', 'info');
        }
      });
    });


  });
</script>






@endsection