@extends('admin.layout.master')

@section('content')
<div class="app-content my-3 my-md-5">
    <div class="side-app">
      <div class="page-header">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Payout Management</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{{route('admin.payout.transaction.histroy.list')}}">Transaction Histroy</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">
            Payout Request List
          </li>
        </ol>
      </div>
      <!-- MAIN BODY CONTENT -->
      <h1>Payout Management</h1>

      <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
          <div class="card">
            <div class="card-body small-card">
              <h5 class="font-medium">Total Payout Request</h5>
              <div class="counter">
                <svg
                  id="small-card-icon"
                  class="red"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                >
                  <g transform="translate(21090 -1397)">
                    <rect
                      width="24"
                      height="24"
                      transform="translate(-21090 1397)"
                      fill="none"
                    />
                    <path
                      d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                      transform="translate(-21086 1400)"
                      fill=""
                    />
                  </g>
                </svg>
                <span class="totalRequestRecord">0</span>
              </div>
              <svg
                id="small-card-bg-icon"
                class="red"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <g transform="translate(21090 -1397)">
                  <rect
                    width="24"
                    height="24"
                    transform="translate(-21090 1397)"
                    fill="none"
                  />
                  <path
                    d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                    transform="translate(-21086 1400)"
                    fill=""
                  />
                </g>
              </svg>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
          <div class="card">
            <div class="card-body small-card">
              <h5 class="font-medium">
                Total No. Payout Request Resolved
              </h5>
              <div class="counter">
                <svg
                  id="small-card-icon"
                  class="orange"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                >
                  <g transform="translate(21090 -1397)">
                    <rect
                      width="24"
                      height="24"
                      transform="translate(-21090 1397)"
                      fill="none"
                    />
                    <path
                      d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                      transform="translate(-21086 1400)"
                      fill=""
                    />
                  </g>
                </svg>
                <span class="totalResolvedRecord">0</span>
              </div>
              <svg
                id="small-card-bg-icon"
                class="orange"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <g transform="translate(21090 -1397)">
                  <rect
                    width="24"
                    height="24"
                    transform="translate(-21090 1397)"
                    fill="none"
                  />
                  <path
                    d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                    transform="translate(-21086 1400)"
                    fill=""
                  />
                </g>
              </svg>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
          <div class="card">
            <div class="card-body small-card">
              <h5 class="font-medium">Pending Request</h5>
              <div class="counter">
                <svg id="small-card-icon" class="blue" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                  viewBox="0 0 24 24">
                  <g transform="translate(-168 -2458)">
                    <rect width="24" height="24" transform="translate(168 2458)" fill="rgba(0,0,0,0)" />
                    <path
                      d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                      fill="" />
                  </g>
                </svg>
                <span class="totalPendingRecord">0</span>
              </div>
              <svg id="small-card-bg-icon" class="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g transform="translate(-168 -2458)">
                  <rect width="24" height="24" transform="translate(168 2458)" fill="rgba(0,0,0,0)" />
                  <path
                    d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                    fill="" />
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- Filter box -->
      <div class="card min-height-0">
        <div class="card-body">
          <div class="custom-row-filter">
            
            <div class="form-row">
             <div class="input-group search-filter">                
                <input type="text" class="form-control input-sm" placeholder="Transaction Id Search" name="search_input" id="search_input">
                <span class="input-group-append">
                  <button class="btn" type="button" id="search">
                   <i class="fa fa-search search-icon text-warning fs-13"></i>
                  </button>
                </span>
              </div>
            </div>

            <div class="form-row">
              <div class="input-group">
                <input type="hidden" name="date_type" id="date_type">
                <div class="dropdown custom-date">
                  <button class="btn btn-custom-toggle dropdown-toggle btn-block" type="button" id="dropdownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Custom Date
                  </button>
                  <div class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton"
                    x-placement="bottom-start"
                    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
                    <div class="custom-date-content">
                      <h6>Filter by transaction date</h6>
                      <ul>
                        <li data-id="1" style="cursor: pointer;" class="date_selector1">Today</li>
                        <li data-id="2" style="cursor: pointer;" class="date_selector1">Last 7 Days</li>
                        <li data-id="3" style="cursor: pointer;" class="date_selector1">This Month</li>
                        <li data-id="4" style="cursor: pointer;" class="date_selector1">This Year: {{date('Y')}}</li>
                        <li data-id="5" style="cursor: pointer;" class="date_selector1">Last Year: {{date('Y')-1}}</li>
                        <li data-id="6" style="cursor: pointer;" class="date_selector1">All Time</li>
                      </ul>
                      <h6>Filter by transaction date range</h6>
                      <div class="date-group">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text">
                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                            </div>
                          </div>
                          <input class="form-control input-sm all_from_date" name="all_from_date1" placeholder="MM/DD/YYYY" type="text" id="dp1588836251070">
                        </div>
                        <span>To</span>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text">
                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                            </div>
                          </div>
                          <input class="form-control input-sm all_to_date" name="all_to_date1" placeholder="MM/DD/YYYY" type="text" id="dp1588836251072">
                        </div>
                      </div>
                      <div class="btn-content">
                        <button type="button" class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date1">Cancel</button>
                        <button type="button" class="btn btn-primary add-btn-sm btn-streach-md apply1">Apply</button>
                      </div>
                    </div>

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

            <div class="form-row">
              <button type="button" class="btn btn-primary add-btn add-btn-sm" id="reset">
                Reset</button>
              <!-- <button >Reset</button> -->
            </div>
            
          </div>
        </div>
      </div>

      <!-- Filter box -->
      <div class="card">
        <div class="card-header coaching-header center-header pt-5">
          <h2>{{$master['coaching_name']}} ({{$master['city']}})</h2>
          <form method="post" action="{{route('admin.payout.transaction.all.export')}}" id="submit_all_export_form">
            @csrf
            <div class="filter-group">
              <div class="input-group width-auto">
                  <input type="hidden" name="check_ids" id="check_ids">
                  <input type="hidden" name="ids" id="ids" value="{{$id}}">
                  
                  <div class="form-row">
                      <div class="">
                          <select name="export" id="export" class="form-control input-sm">
                            <option value="">Select Type</option>
                            <option value="1">Export In Excel</option>
                            <option value="2">Export In CSV</option>
                          </select>
                      </div>
                  </div>
              </div>
            </div>
          </form>
        </div>
        <div class="card-body pt-2">
          <div class="">
            <table id="all" class="stripe row-border order-column dataTable no-footer">
              <thead>
                <tr>
                  <th>
                    <label class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input all_chk all_chk1" name="example-checkbox1" value="1"/>
                      <span class="custom-control-label"></span>
                    </label>
                  </th>
                  <th>Transaction Date &amp; Time <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Transaction Id <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Transaction Type <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Bank Name/ Account <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Sold Quantity <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Sold Period <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Amount <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Transaction Made By <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!--// MAIN BODY CONTENT -->
    </div>
  </div>
@endsection
@section('scripts')
<script type="text/javascript">
  var transaction_all_list = "{{route('admin.payout.transaction.all.list', $id)}}";
</script>
<script type="text/javascript" src="{{asset('js/payouttransactionlist.js?v='.time())}}"></script>
@endsection