@extends('layouts.app')
@section('content')
    @include('user.header')
    @include('user.create_modal')    
    @include('user.edit_modal')    
    <div class="px-4">
      <button id="button-create" class="btn btn-sm btn-kreddo float-right text-white" data-toggle="modal" data-target="#createModal">Create New</button>
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
          <div class="card-body">
          <form id="" class="row align-items-center mb-3 mb-md-0">
            @if(auth()->user()->hasRole(1))
            <div class="form-group col-12 col-md-3">
              <select name="role" id="role" class="form-control" style="border-radius: 10px">
                  <option value="">Role</option>
                  @foreach ($roles as $role)
                  <option value="{{ $role->id }}">{{ $role->role_name }}</option>
                  @endforeach
              </select>
            </div>
            <div class="form-group col-12 col-md-3">
              <select name="client_filter" id="client_filter" class="form-control" style="border-radius: 10px;">
                  <option value="">Client</option>
                  @foreach ($clients as $client)
                  <option value="{{ $client->id }}">{{ $client->name }}</option>
                  @endforeach
              </select>
            </div>
            @endif
            <div class="form-group col-12 col-md-3">
                <select name="status" id="status" class="form-control" style="border-radius: 10px">
                    <option value="">Status</option>
                    <option value="1">Active</option>
                    <option value="0">Disabled</option>
                </select>
            </div>
          </form>

          <div class="table-responsive">
              {{ $dataTable->table() }}
          </div>
        </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>
        var role = '';
        var status = '';
        var client_filter = '';
        $(function(){
            $('#role').on('change', function(){
                    let ajaxUrl = "{{ route('users.index') }}";
                    var role = $('select#role').val();
                    const payload = ajaxUrl + `?role=${role}&?status=${status}&?client_filter=${client_filter}` ;
                    window.LaravelDataTables['users-table'].ajax.url(payload).draw()
            })
        })
    
        $(function(){
            $('#status').on('change', function(){
                    let ajaxUrl = "{{ route('users.index') }}";
                    var status = $('select#status').val();
                    const payload = ajaxUrl + `?status=${status}&?role=${role}&?client_filter=${client_filter}`;
                    window.LaravelDataTables['users-table'].ajax.url(payload).draw()
            })
        })

        $(function(){
            $('#client_filter').on('change', function(){
                    let ajaxUrl = "{{ route('users.index') }}";
                    var client_filter = $('select#client_filter').val();
                    const payload = ajaxUrl + `?client_filter=${client_filter}&?status=${status}&?role=${role}`;
                    window.LaravelDataTables['users-table'].ajax.url(payload).draw()
            })
        })
    </script>  
     {{-- reload table --}}
     <script>
        function reload(){
          $('#users-table').DataTable().ajax.reload();
        }
      </script>
  
      {{-- close modal --}}
      <script>
        function closeModalCreate() {
          $('#createModal').modal('hide');
        }
        function closeModalEdit() {
          $('#editModal').modal('hide');
        }
      </script>

      {{-- check if role != superadmin, client select enable --}}
      <script>
        var roleSelect = document.getElementById('role_id');
        var clientSelect = document.getElementById('client_id');
    
        roleSelect.addEventListener('click', function() {
          if (roleSelect.value === '1' || roleSelect.value === '') {
              // Jika role yang dipilih adalah 1 atau tidak ada rolenya (nilai kosong), nonaktifkan select client dan setel nilainya dan teksnya ke "Choose Client" yang kosong
              clientSelect.disabled = true;
              clientSelect.value = '';
          } else {
              // Jika role yang dipilih bukan 1 atau tidak ada rolenya, aktifkan select client
              clientSelect.disabled = false;
              var nullOption = clientSelect.querySelector('option[value=""]');
              if (nullOption) {
                  // Hapus opsi "Choose Client" (nilai null) yang pertama
                  nullOption.remove();
              }
          }
        });

        var roleSelectEdit = document.getElementById('edit_role_id');
        var clientSelectEdit = document.getElementById('edit_client_id');
    
        roleSelectEdit.addEventListener('click', function() {
            if (roleSelectEdit.value === '1' || roleSelectEdit.value === '') {
                // Jika role yang dipilih adalah 1 atau tidak ada rolenya (nilai kosong), nonaktifkan select client dan setel nilainya dan teksnya ke "Choose Client" yang kosong
                clientSelectEdit.disabled = true;
                clientSelectEdit.value = '';
            } else {
                // Jika role yang dipilih bukan 1 atau tidak ada rolenya, aktifkan select client
                clientSelectEdit.disabled = false;
                var nullOption = clientSelectEdit.querySelector('option[value=""]');
                if (nullOption) {
                    // Hapus opsi "Choose Client" (nilai null) yang pertama
                    nullOption.remove();
                }
            }
        });
    </script>

     {{-- create function --}}
     <script>
      $('#create').on('submit', function (e) {
          e.preventDefault();

          var name = $('#name').val();
          var username = $('#username').val();
          var phone = $('#phone').val();
          var email = $('#email').val();
          var role_id = $('#role_id').val();
          var client_id = $('#client_id').val();
          var password = $('#password').val();
          var password_confirmation = $('#password-confirm').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              method: 'POST',
              url: '{{ route('users.store') }}',
              data: {
                  name: name,
                  username: username,
                  phone: phone,
                  email: email,
                  role_id: role_id,
                  client_id: client_id,
                  status: 1,
                  password: password,
                  password_confirmation: password_confirmation,

              },
              success: function (response) {
                console.log(response);
                Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: response.message,
                  showConfirmButton: false,
                  timer: 2000
                })
                closeModalCreate();
                reload();
                $('#name').val('');
                $('#username').val('');
                $('#password').val('');
                $('#password_confirmation').val('');
                $('#phone').val('');
                $('#email').val('');
                $('#role_id').val('');
                $('#client_id').val('');
                $('#password').val('');
                $('#password-confirm').val('');
              },
              error: function (xhr, status, error) {
                      var response = JSON.parse(xhr.responseText);
                      
                      var errorMessage = response.message;
                      var errors = response.errors;
                      
                      if (errors && errors.password) {
                          errorMessage = errors.password[0];
                      }
                      
                      Swal.fire({
                          position: 'center',
                          icon: 'error',
                          title: errorMessage,
                          showConfirmButton: false,
                          timer: 2500
                      });
              }
          });
      });
    </script>

    {{-- delete function --}}
    <script>
      function deleteUser(id)
      {
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            deleteFunction(id)
          }
        })
      }
      function deleteFunction(id) {
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
        $.ajax({
            method: 'DELETE',
            url: "{{ url('users') }}/"+id,
            success: function (response) {
              Swal.fire({
                position: 'center',
                icon: 'success',
                title: response.message,
                showConfirmButton: false,
                timer: 2000
              })
              reload();
            },
            error: function (xhr, status, error) {
                      var response = JSON.parse(xhr.responseText);
                      
                      var errorMessage = response.message;
                      var errors = response.errors;
                      
                      if (errors && errors.password) {
                          errorMessage = errors.password[0];
                      }
                      
                      Swal.fire({
                          position: 'center',
                          icon: 'error',
                          title: errorMessage,
                          showConfirmButton: false,
                          timer: 2500
                      });
              }
        });
      }
    </script>

     {{-- edit function --}}
     <script>
      function editUser(id){
        $.ajax({
          method: 'GET',
          url: "{{ url('users') }}/"+id+'/edit',
          success: function (response) {
              // handle the edit form with the data
              $('#edit_id').val(response.id);
              $('#edit_name').val(response.name);
              $('#edit_username').val(response.username);
              $('#edit_phone').val(response.phone);
              $('#edit_email').val(response.email);
              $('#edit_role_id').val(response.role_id);
              $('#edit_client_id').val(response.client_id);

              // show the modal
              $('#editModal').modal('show');
          },
          error: function (xhr, status, error) {
                      var response = JSON.parse(xhr.responseText);
                      
                      var errorMessage = response.message;
                      var errors = response.errors;
                      
                      if (errors && errors.password) {
                          errorMessage = errors.password[0];
                      }
                      
                      Swal.fire({
                          position: 'center',
                          icon: 'error',
                          title: errorMessage,
                          showConfirmButton: false,
                          timer: 2500
                      });
              }
        });
      }
    </script>

    {{-- update funtion --}}
    <script>
      $('#edit').on('submit', function (e) {
          e.preventDefault();
          var id = $('#edit_id').val();
          var name = $('#edit_name').val();
          var username = $('#edit_username').val();
          var phone = $('#edit_phone').val();
          var email = $('#edit_email').val();
          var role_id = $('#edit_role_id').val();
          var client_id = $('#edit_client_id').val();
          var password = $('#edit_password').val();
          var password_confirmation = $('#edit_password-confirm').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });

          $.ajax({
              method: 'PUT',
              url: "{{ url('users') }}/"+id,
              data: {
                  id: id,
                  name: name,
                  username: username,
                  phone: phone,
                  email: email,
                  role_id: role_id,
                  client_id: client_id,
                  // status: 1,
                  password: password,
                  password_confirmation: password_confirmation,
              },
              success: function (response) {
                  closeModalEdit();
                  reload();
                  Swal.fire({
                      position: 'center',
                      icon: 'success',
                      title: response.message,
                      showConfirmButton: false,
                      timer: 1500
                  });
              },
              error: function (xhr, status, error) {
                      var response = JSON.parse(xhr.responseText);
                      
                      var errorMessage = response.message;
                      var errors = response.errors;
                      
                      if (errors && errors.password) {
                          errorMessage = errors.password[0];
                      }
                      
                      Swal.fire({
                          position: 'center',
                          icon: 'error',
                          title: errorMessage,
                          showConfirmButton: false,
                          timer: 2500
                      });
              }
          });
        });
    </script>

       {{-- CHANGE STATUS function --}}
    <script>
      function changeStatusUser(id)
      {
        Swal.fire({
          title: 'Are you sure?',
          text: "To change user status?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes'
        }).then((result) => {
          if (result.isConfirmed) {
            changeStatusFunction(id)
          }
        })
      }
      function changeStatusFunction(id) {
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
        $.ajax({
            method: 'PUT',
            url: "{{ url('users') }}/"+id+'/changeStatus',
            success: function (response) {
              Swal.fire({
                position: 'center',
                icon: 'success',
                title: response.message,
                showConfirmButton: false,
                timer: 2000
              })
              reload();
            },
            error: function (xhr, status, error) {
                      var response = JSON.parse(xhr.responseText);
                      
                      var errorMessage = response.message;
                      var errors = response.errors;
                      
                      if (errors && errors.password) {
                          errorMessage = errors.password[0];
                      }
                      
                      Swal.fire({
                          position: 'center',
                          icon: 'error',
                          title: errorMessage,
                          showConfirmButton: false,
                          timer: 2500
                      });
              }
        });
      }
    </script>
@endpush