@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 active" aria-current="page">
            Transaction Histroy
          </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 No. Of Coaching</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>{{$totalCoaching}}</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. Of Coaching Recieved Payment
              </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>{{$totalCoachingRecieved}}</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">
                Total Payout Till Now
              </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(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>{{$totalPayout}}</span>
              </div>
              <svg
                id="small-card-bg-icon"
                class="blue"
                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>

      <!-- Filter box -->
      <form method="post" action="{{route('admin.payout.transaction.histroy.export')}}" id="submit_export_form">
      @csrf
      <div class="card min-height-0">
        <div class="card-body">
          <p class="text-right mb-4">
            <a href="javascript:void(0)" class="clearall"><i class="fa fa-close"></i> Clear All</a>
          </p>
            <div class="form-row filter-row">
              <div class="form-group col-md-3 mb-2 mb-sm-0">
                <select  id="examtype_filter" name="examtype_filter" class="form-control input-sm search_filter">
                  <option value="" selected>Select Exam</option>
                  @if($examType)
                  @foreach($examType as $types)
                      <option value="{{$types->id}}">{{$types->exam_type}}</option>
                  @endforeach
                @endif
                </select>
              </div>
              <div class="form-group col-md-9 mb-2 mb-sm-0">
                <div class="input-group search-filter">                  
                  <input type="text"  class="form-control input-sm name_search_filter" placeholder="Search for..." id="name_filter" name="name_filter"/>
                  <span class="input-group-append">
                    <button class="btn main_filter" type="button">
                      <img src="{{asset('admin/images/filter.svg')}}" width="15" alt=""/>
                    </button>
                  </span>
                </div>
              </div>
            </div>
            <div class="custom-row-filter advance_filter" style="display: none;">
              <div class="form-row">
                <label for="staticEmail" class="form-label">Location :</label>
                <div class="">
                  <select id="state_filter" name="state_filter" class="form-control input-sm">
                    <option value="">State</option>
                    @if($state)
                    @foreach($state as $val)
                        <option value="{{$val->id}}" >{{$val->name}}</option>
                    @endforeach
                  @endif
                  </select>
                </div>
              </div>

              <div class="form-row">
                <div class="">
                  <select id="city_filter" name="city_filter" class="form-control input-sm">
                    <option value="">City</option>
                  </select>
                </div>
              </div>

              <div class="form-row">
                <label for="staticEmail" class="form-label">Rating :</label>

                <div class="btn-group rating-select">
                  <button type="button" class="btn btn-light btn-custom-toggle dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">Rating</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li class="rating_filter_li" data-id="">
                        <a href="">All</a>
                    </li>
                    <li class="rating_filter_li" data-id="1">
                        <a href=""><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star" style="color: #fc8f2d"></i><strong class="ml-2">1</strong></a>
                    </li>
                    <li class="rating_filter_li" data-id="2">
                        <a href=""><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><strong class="ml-2">2</strong></a>
                    </li>
                    <li class="rating_filter_li" data-id="3">
                        <a href=""><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><strong class="ml-2">3</strong></a>
                    </li>
                    <li class="rating_filter_li" data-id="4">
                        <a href=""><i class="fa fa-star-o"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><strong class="ml-2">4</strong></a>
                    </li>
                    <li class="rating_filter_li" data-id="5">
                        <a href=""><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><i class="fa fa-star"  style="color: #fc8f2d"></i><strong class="ml-2">5</strong></a>
                    </li>
                  </ul>
                  <input type="hidden" name="rating_filter" id="rating_filter" value="">
                </div>
              </div>

              <div class="form-row">
                <label for="staticEmail" class="form-label">Sort By :</label>
                <div class="">
                  <select name="" id="" class="form-control input-sm">
                    <option value="">Top 10 Coaching</option>
                  </select>
                </div>
              </div>
              <div class="form-row">
                      <label for="staticEmail" class="form-label">Type: </label>
                      <div class="">
                        <select name="internal_filter" id="internal_filter" class="form-control input-sm">
                          <option value="2">Normal</option>
                          <option value="1">Internal</option>
                        </select>
                      </div>
                    </div>

              <div class="form-row">
                <button type="button" class="btn btn-primary px-5 apply_filter">Apply</button>
              </div>
            </div>
          
        </div>
      </div>

      <!-- //Filter box -->
      <div class="card">
        <div class="card-header coaching-header center-header pt-5">
          <h2>Transaction Histroy</h2>
          <input type="hidden" name="check_ids" id="check_ids">
          <div class="filter-group payout-transaction"> 
              <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 class="form-row">
              <div class="input-group width-auto">
                <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 right-move" 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>
        </div>
        <div class="card-body pt-2">
          <!-- <p class="text-right font-bold mb-2 request">Total Search Request: 0</p> -->
          <div class="">
            <table id="all-transaction"
              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>Coaching Name <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Location <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Organization Type <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Account Holder/Business Name <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Total Product Sold <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Total Payout <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Last Payout <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                  <th>Coaching Status <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>
      </form>
      <!--// MAIN BODY CONTENT -->
    </div>
  </div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{asset('js/payoutmanagementtransaction.js?v='.time())}}"></script>
@endsection