@extends('backend.layouts.app')

@section('title', 'Operator List')
@section('page-title', 'Operator List')
@section('page-breadcrumb', 'Operator 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> Operator List</span>

        <input type="hidden" value="6" id="RequestedRoleId" autocomplete="off">
    </div>


    <!--Card content-->
    <div class="card-body">
                                <table id="bootstrap-data-table-export" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>User ID</th>
                                            <th>Service Name</th>
                                            <th>Operator Name</th>
                                            <th>Operator Code</th>
                                            <th>Operator Rate</th>
                                            <th>Service Active</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                      @foreach($operator_list as $row)
                                      <tr>
                                        <td>{{$row->id}}</td>
                                        <td>{{$row->service_name}}</td>
                                        <td>{{$row->operator_name}}</td>
                                        <td>{{$row->operator_code}}</td>
                                        <td>{{$row->rate}}</td>
                                        <td>@if($row->status=='1')
                                          Active
                                          @endif
                                          @if($row->status=='0')
                                          Down
                                          @endif
                                          <span class="sertcursure btn btn-danger btn-xs" data-toggle="modal" onclick="OpenModuleForm({{$row->id}},this)">
                                            <i class="fa fa-edit"></i>
                                          </span>


                                        </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">Serice Operator</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">

                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Service Name :</strong></label>
                                  <div class="col-sm-8 col-form-label" id="service_name">Sonu</div>
                              </div>
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Operator Name:</strong></label>
                                  <div class="col-sm-8 col-form-label" id="operator_name">NBBB000375</div>
                                  <div class="col-sm-8 col-form-label" id="CredentialIdSpan" style="display:none">375</div>
                              </div>

                          </div>
                          <div class="col-md-6">
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Service Status</strong></label>
                                  <div class="col-sm-8 col-form-label">
                                      <select class="form-control" id="CurrentStatus">
                                          <option value="0">Down</option>
                                          <option value="1">Active</option>

                                      </select>
                                  </div>
                              </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(Id, e) {
   	var cells_data = $(e).closest("tr")[0].cells;

   	if (Id != "") {
   		$("#CredentialIdSpan").html(Id);
   		$("#service_name").html(cells_data[1].innerText);
   		$("#operator_name").html(cells_data[2].innerText);

   		$("#ModuleForm").modal("show");
   	}
   }

   function UpdateModule() {
           var Id = $("#CredentialIdSpan").html();

           if (Id != "") {
               var Kyc = new Object();
               Kyc.CredentialId = Id;
               Kyc.Status = $("#CurrentStatus").val();
               Kyc._token=$('input:hidden[name="_token"]').val();

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

                           } else {
                               alert("Not Updated");
                               $("#ModuleForm").modal("hide");
                           }
                       },
                       failure: function (response) {
                           alert(response);
                       }
                   });
           }
       }


   </script>

@endsection