@extends('layouts.dashboard')

@section('content')


<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Users List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">User</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>


<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
        role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <!-- /.row -->
    <div class="row">
      <div class="col-12">
        <div class="card">
            <div id="loginTypeMessage" class=""></div>
        </div>
        <div class="card">
          <!-- /.card-header -->
          <div class="card-body p-2">
            <div class="table-responsive">
              <table class="table table-head-fixed table-striped table-bordered text-nowrap text-center mt-0">
                <thead>
                  <tr>
                    <th>Sr No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile Number</th>
                    <th>Status</th>
                    <th>Merchant API <br>Detail</th>
                    <th>Single/Multiple <br>Login</th>
                    <th>Sidebar <br> Access</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse ($users as $user )
                  <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>{{ $user->mobile_number }}</td>
                    <td>
                      <input class="chkToggle" type="checkbox" data-id="{{ $user->id}}" {{ ($user->status == 1)?'checked':''}} data-toggle="toggle" data-onstyle="success" data-offstyle="secondary" data-on="Active" data-off="Inactive" data-width="30">
                    </td>
                    <td>
                      <select class="form-control merchant-api-select" data-id="{{ $user->id }}">
                        <option>Select</option>
                        @foreach ($merchant_api_lists as $list)
                        <option value="{{ $list->id }}" {{ $user->merchant_api_list_id == $list->id ? 'selected' : '' }}>{{ $list->name }}</option>
                        @endforeach
                      </select>
                    </td>
                    <td>
                      <select class="form-control login-type-select" data-id="{{ $user->id }}">
                        <option value="{{ App\Models\User::SINGLE_LOGIN }}" {{ $user->login_type == App\Models\User::SINGLE_LOGIN ? 'selected' : '' }}>Single</option>
                        <option value="{{ App\Models\User::MULTIPLE_LOGIN }}" {{ $user->login_type == App\Models\User::MULTIPLE_LOGIN ? 'selected' : '' }}>Multiple</option>
                      </select>
                    </td>
                    <td><button type='button' title='View' class="btn">
                        <a href="{{ route('admin.view-sidebar-option', ['id' => $user->id]) }} " class='uniqbtn-btn'>
                          <i class='fa fa-eye text-white'></i>
                        </a>
                      </button></td>
                  </tr>

                  @empty
                  <tr>
                    <td colspan="8" class="text-center">No data available</td>
                  </tr>
                  @endforelse

                </tbody>
              </table>
            </div>
            <div class="link float-right">
              {{ $users->onEachSide(2)->links() }}
            </div>

          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
    <!-- /.row -->

  </div><!-- /.container-fluid -->
</section>

@endsection


@push('scripts')

<script>
  $(document).on('change', '.login-type-select', function() {
    const userId = $(this).data('id');
    const loginType = $(this).val();

    $.ajax({
      url: "{{ route('update-login-type') }}",
      method: 'POST',
      data: {
        "_token": "{{ csrf_token() }}",
        user_id: userId,
        login_type: loginType
      },
      success: function(response) {
        if (response.success) {
          $('#loginTypeMessage')
            .html('<div class="alert alert-success">Login type updated successfully</div>')
            .fadeIn().delay(2000).fadeOut();
        } else {
          $('#loginTypeMessage')
            .html('<div class="alert alert-danger">Failed to update login type</div>')
            .fadeIn().delay(2000).fadeOut();
        }
      },
      error: function() {
        $('#loginTypeMessage')
          .html('<div class="alert alert-danger">Something went wrong!</div>')
          .fadeIn().delay(2000).fadeOut();
      }
    });
  });


  $(document).on('change', '.merchant-api-select', function() {
    const userId = $(this).data('id');
    const merchant_api = $(this).val();

    $.ajax({
      url: '{{  route("update-merchant-api")  }}',
      method: 'POST',
      data: {
        "_token": "{{ csrf_token() }}",
        user_id: userId,
        merchant_api: merchant_api
      },
      success: function(response) {
        if (response.success) {
          $('#loginTypeMessage')
            .html('<div class="alert alert-success">Merchant detail updated successfully</div>')
            .fadeIn().delay(2000).fadeOut();
        } else {
          $('#loginTypeMessage')
            .html('<div class="alert alert-danger">Failed to update merchant detail</div>')
            .fadeIn().delay(2000).fadeOut();
        }
      },
      error: function() {
        $('#loginTypeMessage')
          .html('<div class="alert alert-danger">Something went wrong!</div>')
          .fadeIn().delay(2000).fadeOut();
      }
    });
  });



  $('.chkToggle').change(function() {
    var id = $(this).data('id');
    var checked = $(this).prop('checked');

    Swal.fire({
      title: "Are you sure to change the status?",
      showDenyButton: true,
      denyButtonText: "No",
      confirmButtonText: "Yes",
    }).then((result) => {
      if (result.isConfirmed) {

        $.ajax({
          type: "POST",
          url: "{{ route('admin.user.change-status') }}",
          data: {
            "_token": "{{ csrf_token() }}",
            'id': id
          },
          success: function(data) {
            if (data.status == "success") {
              Swal.fire("Status changed successfully!", "", "success")
            } else {
              Swal.fire("Not able to change status!", "", "info");
            } // End if-else
          },
          error: function(data) {
            console.log('error data = ', data)
            Swal.fire("Not able to change status!", "", "info");
          },

        });

      } else if (result.isDenied) {
        Swal.fire("Denied", "", "info");
        location.reload();
      }
    });
  });
</script>

@endpush