@extends('backend.layouts.app')

@section('title', 'Coupon Request List')
@section('page-title', 'Coupon Request List')
@section('page-breadcrumb', 'Coupon Request List')


@section('content')

<div class="content mt-3">

<div class="animated fadeIn">


                <div class="row">
                    <div class="col-lg-12">



<div class="card">
    <div class="card-header card-header-color">
        <span class="h4"><i class="fa fa-list-alt"></i> Coupon Request List</span>
        @if(Auth::user()->user_type=="0")
        <a href="#" class="btn-sm btn-success btn-rounded float-right" onclick="OpenModuleForm()"><i class="fa fa-user-plus fa-lg"></i> Add Coupon</a>
        <input type="hidden" value="6" id="RequestedRoleId" autocomplete="off">
        @endif
    </div>


    <!--Card content-->
    <div class="card-body">
                                <table id="bootstrap-data-table-export" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>UserId</th>
                                            <th>Requested Date</th>
                                            <th>Coupon Name</th>
                                            <th>Coupon Amount</th>
                                            <th>Total Coupon</th>
                                            <th>Total Amount</th>
                                            <th>Payment Mode</th>
                                            <th>Status</th>
                                            <th>Message</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                      @foreach($coupon_list as $coupon)
                                      <tr>
                                        <td>{{$coupon->userID}}</td>
                                        <td>{{$coupon->created_at}}</td>
                                        <td>{{$coupon->coupon_id}}</td>
                                        <td>{{$coupon->coupon_amount}}</td>
                                        <td>{{$coupon->no_of_coupons}}</td>
                                        <td>{{$coupon->amount}}</td>
                                        <td>{{$coupon->payment_mode}}</td>
                                        <td>{{$coupon->status}}
                                          @if(Auth::user()->user_type>3 && Auth::user()->s_access=="1")
                                          @if($coupon->status=='pending')
                                          <span class="sertcursure btn btn-danger btn-xs" id="{{$coupon->id}}" onclick="accept_coupon(this.id)" >
                                            <i class="fa fa-edit">Accept</i>
                                          </span>
                                          @endif
                                          @endif
                                        </td>
                                        <td>{{$coupon->remarks}}</td>
                                      </tr>
                                      @endforeach



                                    </tbody>
                                </table>
                            </div>
</div>
<!-- Form -->





    <!-- ============================================================== -->

</div>



</div>
</div>



<div class="modal fade" id="ModuleForm" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <form action="" method="post" id="UserKycListSearch" class="form-horizontal ng-pristine ng-valid">
                      @csrf
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">Coupon Request</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                              <div class="card-body">

                                <h6 class="form-section mt-4"><b>Create New Pan Coupon Request</b></h6>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="mdb-main-label col-md-4">Coupon</label>
                                            <select class="form-control col-md-7" name="coupon_name" id="coupon_name">
                                                <option value="Pan107" selected="">Pan 107</option>
                                            </select>

                                        </div>
                                        <div class="form-group row">
                                            <label class="mdb-main-label col-md-4 active">No. of Coupon</label>
                                            <input type="text" class="form-control col-md-7 ng-pristine ng-untouched ng-valid ng-not-empty" id="no_of_coupons" name="no_of_coupons" placeholder="Enter No. of Coupon" onblur="CalculateTotalAmount(this.value)">
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-4" for="wallet">Payment Method</label>
                                            <div class="col-md-4 ">
                                                <div class="customRadio">
                                                    <input type="radio" class="form-check-input ng-pristine ng-untouched ng-valid ng-not-empty" id="payment_mode" name="payment_mode" value="wallet" checked="checked">
                                                    <label class="form-check-label" for="">Wallet</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label class="mdb-main-label col-md-4">Coupon Amount</label>
                                            <label class="font-weight-bold col-md-4"><i class="fas fa-rupee-sign ng-binding"> 107</i></label>
                                        </div>
                                        <div class="form-group row">
                                            <label class="mdb-main-label col-md-4">Total Amount</label>
                                            <p class="font-weight-bold col-md-4"><i class="fas fa-rupee-sign"><span class="ng-binding" id="total_amount">100</span></i></p>
                                        </div>
                                        <div class="form-group row">
                                            <label class="mdb-main-label col-md-4 active">Remark</label>
                                            <textarea class="form-control col-md-7 ng-pristine ng-untouched ng-valid ng-empty" id="remarks" name="remarks" rows="3" placeholder="Write something here..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary" onclick="UpdateModule()">Confirm</button>
                            </div>
                        </div>
                    </div>
                  </form>
                </div>

</div>

@endsection

@section('self_script')
<script src="{{ asset('assets/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>

   <script src="{{ asset('assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
   <script src="{{ asset('assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
   <script src="{{ asset('assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>



   <script src="{{ asset('assets/js/init-scripts/data-table/datatables-init.js') }}"></script>

   <script>
      function OpenModuleForm() {
   		$("#ModuleForm").modal("show");
   }

   function CalculateTotalAmount(value)
   {
     document.getElementById('total_amount').innerHTML=value*107;
   }

function accept_coupon(id)
{
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
        location.reload();
    }
}
xmlhttp.open("GET", "AcceptCoupon?id="+id, true);
xmlhttp.send();

}


   function UpdateModule() {

               var Kyc = new Object();

               Kyc.coupon_name = $("#coupon_name").val();
               Kyc.no_of_coupons = $("#no_of_coupons").val();
               Kyc.payment_mode = $("#payment_mode").val();
               Kyc.remarks = $("#remarks").val();
               Kyc._token=$('input:hidden[name="_token"]').val();

               $.ajax({
                       type: "POST",
                       url: "save_CouponRequest",
                       data: JSON.stringify(Kyc),
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       success: function (response) {
                           if (response == "1") {
                               alert("Coupon Requested Successfully");
                               $("#ModuleForm").modal("hide");
                               location.reload();

                           } else {
                               alert("Insufficent Balence in wallet");
                               //$("#ModuleForm").modal("hide");
                           }
                       },
                       failure: function (response) {
                           alert("Insufficent Balence in wallet1");
                       }
                   });

       }


   </script>

@endsection