@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Redeem History
@endsection

@section('styles')
    <link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	
          @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
          @endif

          <div class="top-header">
            <h1>Redeem History</h1>            
          </div>

            <div class="row">
             <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-3">
                      <select id="select_company" class="form-control">
                        <option value="">Search By Company</option>
                                                 </select>
                    </div>
                    <div class="col-md-3">
                      <select id="select_location" class="form-control">
                        <option value="">Search By Location</option>
                        <!--  -->
                      </select>
                    </div>
                    <div class="col-md-3">
                      <select id="select_employee" class="form-control">
                        <option value="">Search By Employee Name</option>
                        <!--  -->
                      </select>
                    </div>
                    <div class="col-md-3">
                      <button class="btn btn-warning" id="redeem_search_button">Search</button>
                    </div>
                  </div>

                  <div class="row" id="ttl_rdm_pnt_dv" style="margin-top: 20px; margin-left: 7px;display:none">
                    <div class="col-md-5">
                      <p style="font-weight: bold;" id="com_loc_emp_name"></p>
                      <p>Total Redemption Points <span style="font-weight: bold;" id="total_redeem_points"></span> Pts.</p>
                    </div>
                  </div>

                  <div class="row" style="margin-top: 20px;">
                        <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <!-- COmpanies table -->
                                        <div class="table-responsive">
                                            <table id="redeemhistory-table" class="table card-table dataTable table-hover table-vcenter text-nowrap" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Employee Name(Email ID)</th>
                                                        <th>Company Name</th>
                                                        <th>Gift Card Name</th>
                                                        <th>Points</th>
                                                        <th>Amount($)</th>
                                                        <th>Status</th>
                                                        <th>Id</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                        </div>
                  </div>

              </div>
            </div>
         </div>
        <!--// MAIN BODY CONTENT -->
        </div>
	
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>

<script>
    var oTable = '';

    $(document).ready(function () {

        oTable = $('#redeemhistory-table').DataTable({
        "language": {
            "lengthMenu": "Show: _MENU_ records per page",
            "zeroRecords": "Oops No record Found",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        paging: true,
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        ajax: {
            "url": "{{ route('superAdmin.getRedeemHistory') }}",
            "type": "GET",
            "data": function(d) {
                     d.company_id =  $('#select_company').val();
                     d.company_location_id =  $('#select_location').val();
                     d.user_id =  $('#select_employee').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
            {
                data: 'employee_name',
                name: 'employee_name',
            },
            {
                data: 'company_name',
                name: 'company_name',
            },
            {
                data: 'giftcard_name',
                name: 'giftcard_name',
            },
            {
                data: 'redeem_point',
                name: 'redeem_point',
            },
            {
                data: 'redeem_amount',
                name: 'redeem_amount',
            },            
            {
                data: "is_settle",
                name: 'is_settle',
                
            },
            { data: 'id', name: 'id' },
        ],
        'columnDefs': [
            {
                'targets': [5], /* column index */
                'orderable': false, /* true or false */
            },
            {
                'targets': [5], /* column index */
                "searchable": false
            },
            {
                "targets": [6],
                "visible": false
            }
        ],
        'aaSorting': [6, 'DESC']
    });

    $("#select_company , #select_location , #select_employee").change(function() {
        oTable.draw();
        var company_id =  $('#select_company').val();
        if(company_id!=''){
           $('#ttl_rdm_pnt_dv').show();
        }else{
           $('#ttl_rdm_pnt_dv').hide();
        }
    });

    $("#redeem_search_button").click(function() {
        oTable.draw();
    });

    $("#select_company").change(function(){
        $('#select_employee').val('');
        var company_id =  $('#select_company').val();
        var company_name =  $("#select_company option:selected").text();
        $.ajax({
              data: { 'company_id' : company_id },
              type: 'POST',
              url: '{{ route('superAdmin.getRedeemCompanyLocation') }}',
              headers: {
                  'X-CSRF-TOKEN': '{{csrf_token()}}',
                  '_token' : '{{csrf_token()}}'
              },
              success : function(data){
                $('#select_location').html(data[0]);
                $('#total_redeem_points').html(data[1]);
                $('#select_employee').html(data[2]);
                $('#com_loc_emp_name').html(company_name);
              },
              error:function(){
              }
        });
    });

    $("#select_location").change(function(){
        var location_id =  $('#select_location').val();
        var company_id =  $('#select_company').val();
        var company_name =  $("#select_company option:selected").text();
        var location_name =  $("#select_location option:selected").text();
        $.ajax({
              data: { 'location_id' : location_id , 'company_id': company_id },
              type: 'POST',
              url: '{{ route('superAdmin.getRedeemCompanyLocationEmployee') }}',
              headers: {
                  'X-CSRF-TOKEN': '{{csrf_token()}}',
                  '_token' : '{{csrf_token()}}'
              },
              success : function(data){
                $('#select_employee').html(data[0]);
                $('#total_redeem_points').html(data[1]);
                if(location_id!=''){
                   $('#com_loc_emp_name').html(company_name+' - '+location_name);
                }else{
                    $('#com_loc_emp_name').html(company_name);
                }
              },
              error:function(){
              }
        });
    });

    $("#select_employee").change(function(){
        var location_id =  $('#select_location').val();
        var company_id =  $('#select_company').val();
        var employee_id =  $('#select_employee').val();
        var company_name =  $("#select_company option:selected").text();
        var location_name =  $("#select_location option:selected").text();
        var employee_name =  $("#select_employee option:selected").text();
        if(company_id!='' && location_id!='' && employee_id!=''){ 
          $('#com_loc_emp_name').html(company_name+' - '+location_name+' - '+employee_name);
        }else if(company_id!='' && location_id!=''){ 
          $('#com_loc_emp_name').html(company_name+' - '+location_name);
        }else if(company_id!='' && employee_id!=''){ 
          $('#com_loc_emp_name').html(company_name+' - '+employee_name);
        }else if(company_id!=''){ 
          $('#com_loc_emp_name').html(company_name);
        }
        $.ajax({
              data: { 'location_id' : location_id , 'company_id': company_id , 'employee_id' : employee_id },
              type: 'POST',
              url: '{{ route('superAdmin.getRedeemCompanyLocationEmployeePoints') }}',
              headers: {
                  'X-CSRF-TOKEN': '{{csrf_token()}}',
                  '_token' : '{{csrf_token()}}'
              },
              success : function(data){
                $('#total_redeem_points').html(data);
              },
              error:function(){
              }
        });
    });
 
    });

</script>
@endsection