@extends('layouts.master')

@section('content')
<style>
   i.fa.fa-times-circle {
    font-size: 22px;
    cursor: pointer;
    color: #f13636;
  }

  i.fa.fa-check-circle {
    font-size: 22px;
    cursor: pointer;
    color: #07a704;
  }
.pointer {
    
    cursor: pointer;
}
#status-error,
    #reason-error {
        color: red;
    }
.radio-label {
  position: absolute;
  margin: -2px 0px 0px 7px;
  cursor: pointer;
}

.error {
  color: red;
}
</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.Add Cash Limit') }}</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('Add Cash Limit') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <h3 class="card-title">{{ trans('layout.Filter') }}</h3>
                <div class="col-md-6 card-primary card-form-1">
                    <div class="card-body">
                        <div class="form-col-1">
                            {{ Form::label('USERNAME', trans('responsibleGaming.Username')) }}
                            {{ Form::text('USERNAME', '', ['id' => 'USERNAME', 'class' => 'form-control', 'placeholder' => trans('responsibleGaming.Username')]) }}
                        </div>
                        
                        <div class="form-col-1">
                            {{ Form::label('STATUS', trans('responsibleGaming.Status')) }}
                            {{ Form::select('STATUS', $status, '', ['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'STATUS']) }}
                        </div>

                        <div class="form-col-1">
                            {{ Form::label('DATE_RANGE',trans('layout.Select Date Range')) }}<br>
                            <button type="button" style="width: 100%;" class="btn btn-default" id="daterange-btn">
                                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
                            </button>
                            <input type="hidden" name="selected_date" id="selected_date">
                            <input type="hidden" name="selected_datatime" id="selected_datatime">
                        </div>
                        <br> <br>
                        <div class="button_sec">
                            <button class="btn btn-primary" id="getReport">{{ trans('layout.Submit') }}</button>
                            <button class="btn btn-default" id="reloadPage">{{ trans('layout.Clear') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <div class="card" id="report" style="display:none">
            <div class="card-header">
                <h3 class="card-title" id="report_title"></h3>
            </div>
            <div class="card-body">
                <div class="dt-buttons" onClick="post()"><button class="dt-button buttons-excel buttons-html5" tabindex="0" type="button" title="Excel"><span><i class="fa fa-file-excel-o"></i></span></button> </div>
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">{{ trans('responsibleGaming.Requested Date') }}</th>   
                            <th class="text-center">{{ trans('responsibleGaming.Username') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Ace Level') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Current Limit') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.New Limit') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Action') }}</th>
                            <th class="text-center">{{ trans('responsibleGaming.Comment') }}</th>

                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </section>

<!-- Status POPUP -->

<div class="modal fade" id="msg_detail" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Change Request Status</h4>
      </div>
      <div class="modal-body">  
            <div align='left'>
                <div><b><span> Are you sure you want to approve the upgrade request?</span></b></div><br>
            </div>  
          <form id="update-status-form">
            @csrf
            <input type="hidden" id="request-id" name="id">
            <input type="hidden" id="status" name="status">
            <!-- <div class="radio">
            <label><input type="radio" name="status" value="1" id="approve"><span class="radio-label">Approve</span></label>
            </div>
            <div class="radio">
            <label><input type="radio" name="status" value="2" id="reject"><span class="radio-label">Reject</span></label>
            </div>
            <span id="status-error"></span> -->
            <div class="form-col-1">
                  {{ Form::label('COMMENT', trans('helpdesk.Comment'), ['class' => 'required']) }}
                 {{ Form::textarea('COMMENT','', ['id' => 'COMMENT', 'class' => 'comment_area','cols'=>'25', 'rows'=>'5', 'maxlength'=>'200']) }}
             </div>
            <span id="COMMENT-error" class="error-help-block"></span>
                
            <br>
            <div id="popup-button">
            <button class="btn btn-primary" id="changeStatus">{{ trans('layout.Submit') }}</button>
            <button class="btn btn-default" data-dismiss="modal">{{ trans('layout.Close') }}</button>
            </div>
            <div id="form-loader" style="display:none"><img style="height:100px; width: 100px" src="{{ asset('img/lg.double-ring-spinner.gif') }}"></div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Status POPUP -->

</div>
@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">

    var reportTable;
    $("#getReport").click(function() {
        $("#selected_datatime").val($("#selected_date").val());

        $('#report_title').html("Add Cash Limit: " + $('.daterange_span').html());
        $('#report').show();

        reportTable = $('#table').DataTable({
            "responsive": true,
            "pagingType": "numbers",
            "processing": true,
            "bDestroy": true,
            "serverSide": true,
            "searching": false,
            "aaSorting": [],
            "lengthMenu": [
                [20, 50, 100, 200],
                [20, 50, 100, 200]
            ],
            "columnDefs": [{
                "orderable": false,
                "targets": [2, 3, 4, 5, 6]
            },
            {
                "className": 'text-center',
                "targets": [0, 1 ,2, 3, 4, 5, 6]
            }],
            "ajax": {
                "url": "{{ route('depositLimits.fetch') }}",
                "type": "GET",
                "data": function(d) {
                    d.filter_date = $("#selected_datatime").val();
                    d.filter_username = $("#USERNAME").val();
                    d.filter_status = $("#STATUS").val();
                },
                "error": function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            },
            "drawCallback": function(response, settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                if (rows.length > 0) {
                    $('.dt-buttons').show();
                } else {
                    $('.dt-buttons').hide();
                }
            }
        });
    });

    function post() {
        const form = document.createElement('form');
        form.method = 'get';
        form.action = "{{ route('depositLimits.download') }}";

        const hiddenField = document.createElement('input');
        hiddenField.type = 'hidden';
        hiddenField.name = 'filter_date';
        hiddenField.value = $("#selected_datatime").val();

        form.appendChild(hiddenField);

        const hiddenField2 = document.createElement('input');
        hiddenField2.type = 'hidden';
        hiddenField2.name = 'filter_username';
        hiddenField2.value = $("#USERNAME").val();

        form.appendChild(hiddenField2);

      

        const hiddenField4 = document.createElement('input');
        hiddenField4.type = 'hidden';
        hiddenField4.name = 'filter_status';
        hiddenField4.value = $("#STATUS").val();

        form.appendChild(hiddenField4);

        document.body.appendChild(form);
        form.submit();
    }
</script>

<script type="text/javascript">
 
     function showErrorMessage(message) {

        $('.error-help-block').html('');

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

  $(document).on('click', '.show-status', function() {

    
     $("#COMMENT-error").html("");

    // $("#approve").prop("checked", false);
    // $("#reject").prop("checked", false);
    $('#COMMENT').val("");
    var no = $(this).data('id');
    var status = $(this).data('ref');

    $("#request-id").val(no);
    $("#status").val(status);
    // $("#modal-error").html('');
    $("#msg_detail").modal({
         backdrop: 'static',
         keyboard: false
        });
   
  });

  $(document).on('click', '#changeStatus', function(e) {
    e.preventDefault();

    // var status = $("input[name='status']:checked").val();
   
    // if (!((status == 1) || (status == 2))) {
    //   $("#modal-error").html('Please select any one status');
    //   return;
    // }
     $("#COMMENT-error").html("");

    var data = new FormData($('#update-status-form')[0]);

    $.ajax({
      type: 'POST',
      url: "{{ route('depositLimits.updateStatus') }}",
      data: data,
      dataType: 'JSON',
      contentType: false,
      processData: false,
      beforeSend: function() {
        $("#popup-button").hide();
        $("#form-loader").show();
      },
      success: function(response) {
        var message = response.msg;
        var status = response.status;
        if (status == 422) {
           showErrorMessage(message);
           return;
          }
        if (status == 200) {
          $('select[name=table_length]').trigger('change');
          $("#msg_detail").modal('hide');
          swal(message, {
            icon: "success",
          });
        } else {
          $("#msg_detail").modal('hide');
          swal(message, {
            icon: "warning",
          });
        }
      },
      error: function() {
        $("#msg_detail").modal('hide');
        swal("{{ trans('layout.Something went wrong') }}", {
          icon: "warning",
        });
      },
      complete: function() {
        $("#form-loader").hide();
        $("#popup-button").show();
      }
    });
  });
</script>
@stop