@extends('layouts/default')

@section('commonbuttons')
@if(\Session::get('main_seller_id') != '')
<div style="padding-bottom: 30px; z-index: 999999; font-size: 16px; text-align:center;">
  <a href="{{route('walmartsummaryseller/accountdetail',array('seller_id'=>$seller_id))}}" data-tooltip="tooltip" data-original-title="Setting Detail" class="btn btn-primary ad-click-event commonButtons" style="margin-left:5px;">{{config('app.tabLables')['dashboard']}}</a>
  @if($AccountingSystemName == 'Sage')
  <a href="{{route('setting\sgauth',array('seller_id'=>$seller_id))}}" data-tooltip="tooltip" data-original-title="Setting Detail" class="btn btn-primary ad-click-event commonButtons" style="margin-left:5px;">{{config('app.tabLables')['settings']}}</a>
  @elseif($AccountingSystemName == 'Xero')
  <a href="{{route('setting\xoauth',array('seller_id'=>$seller_id))}}" data-tooltip="tooltip" data-original-title="Setting Detail" class="btn btn-primary ad-click-event commonButtons" style="margin-left:5px;">{{config('app.tabLables')['settings']}}</a>
  @endif

</div>
@endif
@stop

@section('title')
All Settlements
@stop
<style type="text/css">
  
table .collapse.in {
  display:table-row;
}

.badge-1 {
    display: inline-block;
    padding: 0.5em 0.85em;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.475rem;
  }
  .success-badge{
    color: #50cd89;
    background-color: #e8fff3;
  }
  .warning-badge{
    color: #ffc700;
    background-color: #fff8dd;
  }
  .danger-badge{
    color: #f1416c;
    background-color: #fff5f8;
  }

</style>
@section('content')
 @include('notifications')
<div class="setting_page default-sticky-footer">
  <div class="d-inline-block w-100"> 
    <div class="ui-layout">
      <div class="ui-layout__sections">
        <div class="ui-layout__section">
          <div class="ui-layout__item">
            <div class="next-card">
                
               <div class="table table-responsive orderTableDisplay">
                <div class="col-md-5" style="margin-top:10px;">
                  <form id="create-search-form" class="" method="post" 
                     action="{{ route('walmartsettlements') }}" autocomplete="off" role="form" enctype="multipart/form-data">
                     {{ csrf_field() }}
                  </form>
                </div>
                
                <!-- <table
                  name="users"
                  data-height="500"
                  data-toolbar="#toolbar"
                  class="table table-striped snipe-table"
                  id="orderDetail"
                  data-toggle="table"
                  data-url="{{ route('amazonsettlementlist',array('seller_id'=>$seller_id)) }}"
                  data-cookie="true"
                  data-click-to-select="true"
                  data-cookie-id-table="orderTableDisplay">
                  <thead>
                    <tr>        
                      <th data-sortable="true" data-searchable="true" data-field="date">Date</th>
                      <th data-sortable="true" data-searchable="true" data-field="total">Total</th>
                      <th data-sortable="true" data-searchable="true" data-field="currency">Currency</th>
                      <th data-sortable="true" data-searchable="true" data-field="status">Status</th>   
                      <th data-sortable="true" data-searchable="true" data-field="sync_number">Invoice Number</th>
                      <th data-sortable="true" data-searchable="true" data-field="error">Error</th>  
                      <th data-sortable="true" data-searchable="true" data-field="actions">Actions</th>    
                    </tr>
                  </thead>
                </table> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Total</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Total</th>
            <th>Currency</th>
        </tr>
    </tfoot>
</table>

@stop
@section('moar_scripts')
@include ('partials.bootstrap-table', ['exportFile' => 'users-export', 'search' => true,'filterColumn'=>$filterColumn])
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script src="{{ asset('assets/js/bootbox.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-table.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
      integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

<script type="text/javascript">
/* Formatting function for row details - modify as you need */
function format(d) {
  var subdata = d.sub_data;
  if(subdata !== 'undefined'){
    // `d` is the original data object for the row
    var tableContent = '<table width="100%" cellpadding="5" cellspacing="0" border="0" style="margin: 18px 0px !important;border: 1px solid black; background:#f6f6f6;" class="table table-striped">' +
        '<tr>' +
        '<td width="15%"><b>Date</b></td>' +
        '<td width="5%"><b>Total</b></td>' +
        '<td width="5%"><b>Currency</b></td>' +
        '<td width="10%"><b>Status</b></td>' +
        '<td width="15%"><b>Invoice Number</b></td>' +
        '<td width="25%"><b>Error</b></td>' +
        '<td width="30%"><b>Action</b></td>' +
        '</tr>';

        $.each( subdata, function( key, value ) {
          tableContent += '<tr>' +
          '<td width="15%">' +
          value.date +
          '</td>' +
          '<td width="5%">' +
          value.total +
          '</td>' +
          '<td width="5%">' +
          value.currency +
          '</td>' +
          '<td width="10%">' +
          value.status +
          '</td>' +
          '<td width="15%">' +
          value.sync_number +
          '</td>' +
          '<td width="25%">' +
          value.error +
          '</td>' +
          '<td width="30%">' +
          value.actions +
          '</td>' +
          '</tr>';
        });
       tableContent += '</table>';
       return tableContent;
  }
}
 
$(document).ready(function () {
  setTimeout(
  function() 
  {
    var table = $('#example').DataTable({
        ajax: "{{ route('walmartsettlementlist',array('seller_id'=>$seller_id)) }}"+"&order=desc",
        columns: [
            {
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { data: 'date' },
            { data: 'total' },
            { data: 'currency' }
        ],
        ordering: false,
        order: [[1, 'desc']],
        stripeClasses: ['shown']
    });

    table.on('draw', function(){
      table.rows().every( function () {
          var tr = $(this.node());
          var row = table.row(tr);
          row.child(format(row.data())).show();
          tr.addClass('shown-background');
          tr.addClass('dt-hasChild');
      });
    });
 
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            tr.removeClass('dt-hasChild');
        } else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
            tr.addClass('dt-hasChild');
        }
    });
    }, 2000);
});
</script>
@stop