@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
<style>
  .page-item.active .page-link {
    background-color: lightgrey !important;
    border: 1px solid black;
  }

  .page-link {
    color: black !important;
  }

  .dataTables_wrapper .dataTables_length {
    float: left;
    display: none;
  }

  div#datatable_info {
    display: none;
  }
</style>
<div class="row page-wrap">
  <div class="col-md-12">
    <div class="" style="">
      <div class=" ">
        <div class="panel panel-default" style="background-color:#708090;">
          <div class="panel-heading" style="padding-bottom:0px">
            <div class="panel-title">
              <h2>CUSTOMER ASSIGN LIST</h2>
            </div>
            <div class="panel-options">
              <a href="{{url('pos/addIncentiveCustomerAssign/')}}" class="btn btn-info pull-right addViewBtn">
                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Customer Config
              </a>
            </div>
          </div>

          <div class="panel-body panelBodyView">
            @php
            if($data['branchName']->id ==1)
            {
            $searchElements = [
            ['element' => 'report_level'],
            ['element' => 'branchId','showHeadoffice' => 'no','showAll' => 'no'],
            ['element' => 'allEmployeeIdForPos','alloption' => 'yes'],

            ];
            }
            else{
            $searchElements = [
            ['element' => 'report_level'],
            ['element' => 'branchId'],
            ['element' => 'allEmployeeIdForPos','alloption' => 'no'],
            ];
            }


            @endphp
            @include('partials.searchPanel.main', ['searchElements' => $searchElements])

            <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable" style="width:100%">
              <thead>
                <tr>
                  <th width="30" rowspan="2">SL#</th>
                  <th colspan="2">BRANCH NAME & CODE</th>
                  <th colspan="2">EMPLOYEE NAME & ID</th>
                  <th rowspan="2">DESIGNATION</th>
                  <th rowspan="2" class="col-sm-1">NUMBER OF CUSTOMER</th>
                  <th rowspan="2">Action</th>
                </tr>
                <tr>
                  <th>BRANCH NAME</th>
                  <th>CODE</th>
                  <th>EMPLOYEE NAME</th>
                  <th>EMPLOYEE ID</th>
                </tr>
              </thead>
              <tbody id="tableBodySection">

              </tbody>

            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {

    var dataTable = $('#datatable').DataTable({
      "paging": false,
      "sDom": "ltipr", // For removeing default Search bar //
      "processing": true,
      "serverSide": true,
      "ordering": false,
      "language": {
        "emptyTable": "No data to show, please search"
      },
      "ajax": {
        "url": "{{ Request::url() }}",
        "type": "POST",
        "beforeSend": function() {
          $('#loadingModal').show();

        },
        "data": function(d) {
          var inputs = {};
          $.each($('form').serializeArray(), function() {
            inputs[this.name] = this.value;
          });
          d.filter = inputs;
        }
      },
      "drawCallback": function(settings) {
        $('#loadingModal').hide();
      },

      "columns": [{
          "data": "sl"
        },
        {
          "data": "branch_name",
          className: "text-center"
        },
        {
          "data": "branch_code",
          className: "text-center"
        },
        {
          "data": "employee_name"
        },
        {
          "data": "employee_id",
          className: "text-center"
        },
        {
          "data": "employee_designation"
        },
        {
          "data": "total_customer",
          className: "text-center"
        },
        {
          "data": "pid",
          className: "text-center"
        }
      ],

      "columnDefs": [{
        "targets": -1,
        "data": "pid",
        "render": function(data, type, row, meta) {
          var activedate = "{{ $data['branch_active_date'] }}";
          var html = '<a href="{{ url("") }}/pos/viewDetailsIncentiveCustomerAssign/' + data +
            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
          // if ((row.activeDate == row.view_active_date) || (row.view_role == "Head Office")) {
          //   html += '<a href="javascript:;" data-id=' + data +
          //     '  data-date=' + row.view_date +
          //     ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
          // }

          return html;
        }
      }]


    });

    $("#searchForm").submit(function(e) {
      e.preventDefault();

      var branch = $('#fillBranchId').val();
      var reportLevel = $('#fillReportLevel').val();
      if (reportLevel == '' || reportLevel == "Branch") {

        if (branch == '') {
          $('#loadingModal').hide();
          toastr.warning("Please select a branch!","Warning");
          return false;
        }

      }
      dataTable.draw();
    });



    //delete function
    $(document).on('click', '.delete-action', function() {

      Swal.fire({
        title: 'Are you sure?',
        text: "Once delete you won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#7e7979',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {

          $.ajax({
            type: 'post',
            url: '{{ url("pos/deleteIncentiveCustomerAssignItem") }}',
            data: {
              '_token': $('input[name=_token]').val(),
              'id': $(this).data('id')
            },
            success: function(_response) {
              if (_response.responseTitle == 'success') {
                toastr.success("This data has been deleted.","Deleted!");

                setTimeout(function() {
                  dataTable.ajax.reload();
                }, 1000);


              } else {
                toastr.warning("Warning","This data has not been deleted.");
              }
            }
          });



        }
      })


    });

  });
</script>
@endsection