@extends('AdminMaster.authMaster')

@section('content')

  <style>
    /* a {
    text-decoration: none;
    }

    .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);
    }

    .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="bk-btn">
    <a href="{{ route('dashboard') }}">Back to Dashboard</a>
  </div>
  <div class="row">
    <div class="col-lg-12 stretch-card">
    <div class="card card-custom">
      <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 custom-table">
        <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 active-stat">Active</span>
        @else
        <span class="badge inactive-stat">Inactive</span>
        @endif
        @else
        <a>
        <div class="inbox-check">
          <div class="form-check">
          <input type="checkbox" class="toggle-status form-check-input" data-type=""
          id="check_{{ $user->id }}" data-id="{{ $user->id }}" {{ $user->user_status == 1 ? 'checked' : '' }}>
          <label class="form-check-label" for="check_{{ $user->id }}"></label> </label>
          </div>
        </div>
        </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; color: #2f2c4d !important;"></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