@extends('layouts.master')

@section('content')
<style>
.right-img{
    position: relative;
}
.right-img #username-search{
    height: 30px;
    width: 30px;
    display: none;
    position: absolute;
    right: 10px;
    top: 32px;
}
span#userPoint {
    color: #198e04;
    font-size: 13px;
}
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ trans('breadcrumbs.Pay By Cash') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('Pay By Cash') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
  @if($form)
    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <div class="card-primary card-form-1">
                    <form id="payByCash-form">
                    <div class="card-body">
                        @csrf
                        <div class="form-col-1 right-img">
                            {{ Form::label('USERNAME', trans('player.Username'), ['class' => 'required']) }}
                            {{ Form::text('USERNAME', '', ['id' => 'USERNAME', 'class' => 'form-control', 'placeholder' => trans('player.Username'),  'onblur' => 'getUserPoints()']) }}                            
                            <img id="username-search" src="{{ asset('img/loader-img.gif') }}">
                            <span id="username-error" class="error-help-block"></span>
                            <span id="userPoint"></span>
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('AMOUNT', trans('player.Amount'), ['class' => 'required']) }}
                            {{ Form::number('AMOUNT','', ['id' => 'AMOUNT', 'class' => 'form-control', 'min' => '0']) }}
                            <span id="amount-error" class="error-help-block"></span>
                        </div>
                        <div class="button_sec" id="form-buttons">
                            <button class="btn btn-primary" id="payByCash-form-submit">{{ trans('player.Add') }}</button>
                            <button class="btn btn-default" id="payByCash-form-clear">{{ trans('layout.Clear') }}</button>
                        </div>
                        <div class="button_sec" id="form-loader" style="display:none">
                            <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                        </div>
                    </div>
                    </form>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
    </section>
  @else

  <section class="content">
      <div class="card" id="filterDiv">
          <div class="card-header">
              <div class="card-primary card-form-1">
                <div class="card-body">
                  <div class="form-col-1">
                    {{ Form::label('PASSWORD', trans('helpdesk.Transaction Password'), ['class' => 'required']) }} 
                    {{ Form::password('PASSWORD', ['id' => 'PASSWORD', 'class' => 'form-control']) }}
                    <span id="password-error" class="error-help-block"></span>
                  </div>
                  <div class="button_sec">
                    <div id="popup-button">
                      <button class="btn btn-primary" id="verifyPassword">{{ trans('layout.Submit') }}</button>
                    </div>
                    <div id="popup-loader" style="display:none">
                      <img style="height:50px; width: 50px" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <!-- /.card-body -->
      </div>
    </section>
  @endif
</div>
@endsection
@section('javascript')

@if(!$form)
<script type="text/javascript">

  $(document).on('click', '#verifyPassword', function() {
    var password = $("#PASSWORD").val();
    if (password.length < 2) {
      $("#password-error").html('Enter valid password');
      return;
    }

    $("#password-error").html('');

    var data = new FormData();
    data.append('password', password);
    data.append('_token', '{{ csrf_token() }}');

    $.ajax({
      type: 'POST',
      url: "{{ route('payByCash.checkPassword') }}",
      data: data,
      dataType: 'JSON',
      contentType: false,
      processData: false,
      beforeSend: function() {
        $("#popup-button").hide();
        $("#popup-loader").show();
      },
      success: function(response) {
        var message = response.msg;
        var status = response.status;
        if (status == 200) {
          window.location.replace("{{ route('payByCash') }}");
        } else {
          $("#password-error").html(message);
        }
      },
      error: function() {
        $("#password-error").html("{{ trans('layout.Something went wrong') }}");
      },
      complete: function() {
        $("#popup-loader").hide();
        $("#popup-button").show();
      }
    });
  });
</script>
@else

<script type="text/javascript">
var username, amount;
$("#AMOUNT").change(function(){
  var num = $('#AMOUNT').val();
  if(num < 1){
    $('#AMOUNT').val('');
  }
});

function getUserPoints(){
  $('#userPoint').html('');
  var username = $("#USERNAME").val();
  if (username.length < 2) {
    $("#username-error").html('Enter valid username');
    return;
  }else{
    $("#username-error").html('');
  }

  var data = new FormData();
  data.append('username', username);
  data.append('_token', '{{ csrf_token() }}');

  $.ajax({
    type: 'POST',
    url: "{{ route('payByCash.getPoints') }}",
    data: data,
    dataType: 'JSON',
    contentType: false,
    processData: false,
    beforeSend: function() {
      $("#username-search").show();
    },
    success: function(response) {
      var data = response.msg;
      var status = response.status;
      if (status == 200) {
        $('#userPoint').html('User current deposit balance: '+data.realDeposit);
      } else {
        $("#username-error").html(data);
      }
    },
    error: function() {
      swal("{{ trans('layout.Something went wrong') }}", {
        icon: "warning",
      });
    },
    complete: function() {
      $("#username-search").hide();
    }
  });
}

function showErrorMessage(message){
  $('.error-help-block').html('');
  $.each(message, function(k, v) {
    $("#"+k+"-error").html(v);
  });
  return;
}


$(document).on('change', '.form-control', function(){
    $(this).closest('div').find('.error-help-block').html('');
});

$(document).on('click', '#payByCash-form-submit', function(e) {
    e.preventDefault();

    username = $("#USERNAME").val();
    amount = $("#AMOUNT").val();

    var data = new FormData();
    data.append('username', username);
    data.append('amount', amount);
    data.append('_token', '{{ csrf_token() }}');

    $.ajax({
      type: 'POST',
      url: "{{ route('payByCash.updatePoints') }}",
      data: data,
      dataType: 'JSON',
      contentType: false,
      processData: false,
      beforeSend: function() {
        $("#form-buttons").hide();
        $("#form-loader").show();
      },
      success: function(response) {
        var message = response.msg;
        var status = response.status;
        if (status == 422) {
          showErrorMessage(message);
          return;
        }
        if (status == 200) {
          swal(message, {
            icon: "success",
          });
        } else {
          swal(message, {
            icon: "warning",
          });
        }
        $('.error-help-block').html('');
        $('#payByCash-form-clear').trigger('click');
      },
      error: function() {
        swal("{{ trans('layout.Something went wrong') }}", {
          icon: "warning",
        });
      },
      complete: function() {
        $("#form-loader").hide();
        $("#form-buttons").show();
      }
    });
  });

  $(document).on('click', '#payByCash-form-clear', function(e) {
    e.preventDefault();
    $('#userPoint, .error-help-block').html('');    
    $(this).closest('form').find("input[type=text], input[type=number], textarea, select").val('');
  });
</script>
@endif
@stop