@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables-net/dataTables.bootstrap4.css') }}" rel="stylesheet" />
@endpush

@section('content')
{{-- <nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Forms</a></li>
    <li class="breadcrumb-item active" aria-current="page">Basic Elements</li>
  </ol>
</nav> --}}

{{-- <div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <form  id="myFormID" action="{{ url('/transaction') }}">
@csrf
<div class="forms-sample">
  <div class="form-group row">
    <div class="col-sm-4">
      <div class="input-group date datepicker" id="datePickerExample">
        <input type="text" class="form-control" name="from" placeholder="From"><span class="input-group-addon"><i
            data-feather="calendar"></i></span>
      </div>
    </div>
    <div class="col-sm-1 text-center mt-2">To</div>
    <div class="col-sm-4">
      <div class="input-group date datepicker" id="datePickerExample1">
        <input type="text" class="form-control" name="to" placeholder="To"><span class="input-group-addon"><i
            data-feather="calendar"></i></span>
      </div>
    </div>
    <div class="col-sm-2">
      <input class="btn btn-primary form-control" type="submit" value="Submit">
    </div>
  </div>
</div>
</form>
</div>
</div>
</div>
</div> --}}

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title" style="text-transform: none !important;">Commission Payout Report</h6>
        <div class="table-responsive">
          <table id="dataTableExample1" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Sl.No</th>
                <th>Date</th>
                <th>Username</th>
                <th>User Type</th>
                <th>Name</th>
                @if(Session::get('role')=="superDistributer" || Session::get('role')=="Admin" ||
                Session::get('role')=="distributer")
                <th>Retailer</th>
                @endif
                <th>Retailer Amount</th>
              </tr>
            </thead>
            <tbody>
              @php $no =1; $totalS = 0; $totalD = 0; $totalR = 0; $toS=0; $toD=0; $toR=0; @endphp
              @foreach($data as $day => $value)
              @php
              if(Session::get('role')=="Admin"){
              $toS = $value['TotalSuperDistributerCommission'];
              $totalS += $toS;
              }
              if(Session::get('role')=="superDistributer" || Session::get('role')=="Admin"){
              $toD = $value['TotalDistributerCommission'];
              $totalD += $toD;
              }
              $toR = $value['TotalRetailerCommission'];
              $totalR += $toR;
              @endphp
              <tr>
                <td>{{$no++}}</td>
                <td>{{$day}}</td>
                <td>{{$value['userName']}}</td>
                <td>{{$value['role']}}</td>
                <td>{{$value['name']}}</td>
                @if(Session::get('role')=="superDistributer" || Session::get('role')=="Admin" ||
                Session::get('role')=="distributer")
                <td>{{$value['retailer']}}</td>
                @endif
                <td>{{number_format($toR,2)}}</td>
              </tr>
              @endforeach

              <tr>
                <td></td>
                <td colspan="2">Total Commission</td>
                @if(Session::get('role')=="superDistributer" || Session::get('role')=="Admin" ||
                Session::get('role')=="distributer")
                <td></td>
                @endif
                <td></td>
                <td></td>
                <td>{{number_format($totalR,2)}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>




@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs4/dataTables.bootstrap4.js') }}"></script>
@endpush


@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/datepicker.js') }}"></script>
<script type="text/javascript">
  ('#dataTableExample1').DataTable({
        "aLengthMenu": [
          [10, 30, 50, -1],
          [10, 30, 50, "All"]
        ],
        "iDisplayLength": 10,
        "language": {
          search: ""
        }
      });
      $('#dataTableExample1').each(function() {
        var datatable = $(this);
        // SEARCH - Add the placeholder for Search and Turn this into in-line form control
        var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
        search_input.attr('placeholder', 'Search');
        search_input.removeClass('form-control-sm');
        // LENGTH - Inline-Form control
        var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
        length_sel.removeClass('form-control-sm');
      });
    $(document).ready(function(){
      $("#myFormID").submit(function(e) {
        e.preventDefault(); // prevent actual form submit
        var form = $(this);
        var url = form.attr('action'); //get submit url [replace url here if desired]
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes form input
            success: function(data){
                console.log(data);
            }
        });
      });
    });
</script>
@endpush