@extends('coaching.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="{{route('coaching.payout.list')}}">Payout Management</a>
                </li>
              </ol>
            </div>
            <!-- MAIN BODY CONTENT -->
            <h1>Payout</h1>
            @if(Session::has('error'))
              <div class="alert alert-danger" style="background: none; border: none;">
                <p style="color: #f00">{{ Session::get('error') }}</p>
              </div>
            @endif

            <!-- <form class="search_filter_frm" method="post">
            {{csrf_field()}} -->
              <div class="row ">
                <div class="ccol-xl-4 col-lg-4 col-md-4 col-sm-6">
                  <div class="card">
                    <div class="card-body small-card">
                      <h5 class="font-medium">Last Month Earning</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 id="all_count_test_package">
                        @if($lastMonthAmount)
                          {{$lastMonthAmount['sold_amount']}}
                        @else
                          0
                        @endif</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="ccol-xl-4 col-lg-4 col-md-4 col-sm-6">
                  <div class="card">
                    <div class="card-body small-card">
                      <h5 class="font-medium">
                        Non-Withdrawal Amount
                      </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 id="seven_days_count">
                          @if($nonWithdrawalAmount > 0)
                            {{$nonWithdrawalAmount}}
                          @else
                            0
                          @endif</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">
                        Withdrawal Amount
                      </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 id="thirty_days_count">{{$withdrawalAmount}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        @if($nonWithdrawalAmount < $payoutRequest)
                          <button type="button" class="btn btn-primary btn-pill add-btn-sm" disabled>Request Payout</button>
                        @else
                          <a href="{{route('coaching.payout.add')}}"><button type="button" class="btn btn-outline-primary btn-pill add-btn-sm">Request Payout</button></a>
                        @endif
                      </div>
                      
                    </div>
                  </div>
                </div>
              </div>

              <!-- Table -->
              <div class="card">
                <div class="card-header pt-5">
                  <h2>Revenue Details</h2>
                  <div class="filter-group">
                    @if($nonWithdrawalAmount >= $fiftyPercent)
                      <!-- <button type="button" class="btn btn-primary btn-pill add-btn-sm" disabled>Bank Details</button> -->
                      <a href="{{route('coaching.payout.bank.list')}}"><button type="button" class="btn btn-outline-primary btn-pill add-btn-sm">Bank Details
                    </button></a>
                    @endif
                    @if($nonWithdrawalAmount >= $payoutRequest)
                      <!-- <button type="button" class="btn btn-primary btn-pill add-btn-sm" disabled>Upload Documents</button> -->
                      <a href="{{route('coaching.payout.document.add')}}"><button type="button" class="btn btn-primary btn-pill add-btn-sm">Upload Documents
                    </button></a>
                    @endif
                    <!-- <a href="{{route('coaching.payout.bank.list')}}"><button type="button" class="btn btn-outline-primary btn-pill add-btn-sm">Bank Details
                    </button></a>
                    <a href="{{route('coaching.payout.document.add')}}"><button type="button" class="btn btn-primary btn-pill add-btn-sm">Upload Documents
                    </button></a> -->
                   <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 payout date</h6>
                          <ul>
                            <li data-id="1" style="cursor: pointer;" class="date_selector">Today</li>
                            <li data-id="2" style="cursor: pointer;" class="date_selector">Last 7 Days</li>
                            <li data-id="3" style="cursor: pointer;" class="date_selector">This Month</li>
                            <li data-id="4" style="cursor: pointer;" class="date_selector">This Year: {{date('Y')}}</li>
                            <li data-id="5" style="cursor: pointer;" class="date_selector">Last Year: {{date('Y')-1}}</li>
                            <li data-id="6" style="cursor: pointer;" class="date_selector">All Time</li>
                          </ul>
                          <h6>Filter by payout 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" placeholder="MM/DD/YYYY" type="text" id="dp1588836251073">
                            </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" placeholder="MM/DD/YYYY" type="text" id="dp1588836251074">
                            </div>
                          </div>
                          <div class="btn-content">
                            <button class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date">Cancel</button>
                            <button class="btn btn-primary add-btn-sm btn-streach-md apply">Apply</button>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body pt-0">
                  <div class="details-box vertical-text-box">
                    <h4 class="text-verticle eng-stdnt">Total Rvenue</h4>
                    <div id="canvas-container">
                      <canvas id="canvas" style="height:40vh; width:80vw"></canvas>
                    </div>
                    <h4 class="text-center chart-footer">Last Six Month</h4>
                  </div>
                </div>
                <form action="{{route('coaching.payout.excel_export')}}" method="post" id="submit_excel_export_form">
                  {{csrf_field()}}
                  <input type="hidden" name="tr_type" id="tr_type">
                  <div class="card-header pt-5">
                    <h2 id="title_type">Transaction Histroy</h2>
                    <div class="filter-group">
                       
                      <select name="tr" id="tr" class="form-control input-sm">
                        <option value="1">Transaction Histroy</option>
                        <option value="2">Payout Request</option>
                      </select>

                      <div class="" id="filters" style="display: none;">
                         <select name="payout_status" id="payout_status" class="form-control input-sm">
                            <option value="0">All</option>
                             <option value="1">Under Process</option>
                            <option value="2">Pending</option>
                            <option value="3">Rejected</option>
                          </select>
                      </div>

                      <div class="form-row">
                        <button type="button" class="btn btn-outline-primary btn-pill all_data_excel_exports">Export In Excel</button>
                      </div>
                    </div>
                  </div>
                </form>
                <div class="card-body pt-0">
                  <p class="text-right font-bold total_no_search" id="total_no_search">Total No of search: 0</p>
                  <p class="text-right font-bold total_no_search1" id="total_no_search1" style="display: none;">Total No of search: 0</p>
                  <div class="table-responsive" id="tpm">
                    <table id="test-package-manager" class="table card-table dataTable table-vcenter text-nowrap">
                      <thead>
                        <tr>
                          <th>Date & Time</th>
                          <th>Transaction Type</th>
                          <th>Transaction Id</th>
                          <th>Account Details</th>
                          <th>Sold Quantity</th>
                          <th>Amount</th>
                          <th>Action</th> 
                        </tr>
                      </thead>
                      
                    </table>
                  </div>
                  <div class="table-responsive" style="display: none;" id="pm">
                    <table id="payout-manager" class="table card-table dataTable table-vcenter text-nowrap">
                      <thead>
                        <tr>
                          <th>Requested<br>Date &amp; Time</th>
                          <th>Business Name</th>
                          <th>Bank Details</th>
                          <th>Sold Quantity</th>
                          <th>Sold Date</th>
                          <th>Amount</th>
                          <th>Payment Status</th>
                          <th>Action</th> 
                        </tr>
                      </thead>
                      
                    </table>
                  </div>
                </div>
              </div>
            <!-- </form> -->
            <!-- //Table -->
            <!--// MAIN BODY CONTENT -->
          </div>
        </div>
@endsection
@section('scripts')
<script src="{{asset('admin/plugins/bar-chart/chart.js')}}"></script>
<script type="text/javascript">
  var MONTHS = [];
  var labels = [];
  var data_amount = [];