@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 active" aria-current="page">
          <a href="javascript:void(0)">Coupon Management</a>
        </li>
      </ol>
    </div>
    <!-- MAIN BODY CONTENT -->
    <h1>Coupon 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 Coupons Active
            </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(-236 -198)"><rect width="24" height="24" transform="translate(236 198)" fill="rgba(0,0,0,0)"/><path d="M239,221V205a2,2,0,0,1,2-2h10a2,2,0,0,1,2,2v16l-7-3-7,3Zm18-4h0l-2-1V203a2,2,0,0,0-2-2H243a2,2,0,0,1,1.99-2H255a2,2,0,0,1,2,2v16Z" fill="#ff7249"/></g></svg>

              <span id="activeCoupons">{{$activeCoupons}}</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(-236 -198)"><rect width="24" height="24" transform="translate(236 198)" fill="rgba(0,0,0,0)"/><path d="M239,221V205a2,2,0,0,1,2-2h10a2,2,0,0,1,2,2v16l-7-3-7,3Zm18-4h0l-2-1V203a2,2,0,0,0-2-2H243a2,2,0,0,1,1.99-2H255a2,2,0,0,1,2,2v16Z" fill="#ff7249"/></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 Coupons In-Active
            </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(-236 -198)"><rect width="24" height="24" transform="translate(236 198)" fill="rgba(0,0,0,0)"/><path d="M239,221V205a2,2,0,0,1,2-2h10a2,2,0,0,1,2,2v16l-7-3-7,3Zm18-4h0l-2-1V203a2,2,0,0,0-2-2H243a2,2,0,0,1,1.99-2H255a2,2,0,0,1,2,2v16Z" fill=""/></g></svg>

              <span id="inactiveCoupons">{{$inactiveCoupons}}</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(-236 -198)"><rect width="24" height="24" transform="translate(236 198)" fill="rgba(0,0,0,0)"/><path d="M239,221V205a2,2,0,0,1,2-2h10a2,2,0,0,1,2,2v16l-7-3-7,3Zm18-4h0l-2-1V203a2,2,0,0,0-2-2H243a2,2,0,0,1,1.99-2H255a2,2,0,0,1,2,2v16Z" 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 No Of Coupons Used
            </h5>
            <div class="counter">
              <svg 
              id="small-card-icon"
              class="blue"
              xmlns="http://www.w3.org/2000/svg" width="20.273" height="20.732" viewBox="0 0 20.273 20.732"><g transform="translate(-5.411)"><g transform="translate(5.411)"><path d="M119.618,258.712a.47.47,0,0,0-.471-.47h-1.642a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.471h1.642a.47.47,0,0,0,.471-.471v-1.642Z" transform="translate(-112.294 -247.274)" fill="#278bed"/><path d="M216.253,258.712a.47.47,0,0,0-.47-.47H214.14a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.471h1.642a.47.47,0,0,0,.47-.471Z" transform="translate(-204.825 -247.274)" fill="#278bed"/><path d="M312.881,258.712a.47.47,0,0,0-.47-.47h-1.642a.47.47,0,0,0-.471.47v1.642a.47.47,0,0,0,.471.471h1.642a.47.47,0,0,0,.47-.471Z" transform="translate(-297.349 -247.274)" fill="#278bed"/><path d="M119.618,355.345a.47.47,0,0,0-.471-.47h-1.642a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.47h1.642a.47.47,0,0,0,.471-.47v-1.642Z" transform="translate(-112.294 -339.803)" fill="#278bed"/><path d="M216.253,355.345a.47.47,0,0,0-.47-.47H214.14a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.47h1.642a.47.47,0,0,0,.47-.47Z" transform="translate(-204.825 -339.803)" fill="#278bed"/><path d="M312.881,355.345a.47.47,0,0,0-.47-.47h-1.642a.47.47,0,0,0-.471.47v1.642a.47.47,0,0,0,.471.47h1.642a.47.47,0,0,0,.47-.47v-1.642Z" transform="translate(-297.349 -339.803)" fill="#278bed"/><path d="M23.879,54.151v2.508a2.048,2.048,0,0,1-2.053,2.047h-1.3a2.059,2.059,0,0,1-2.065-2.047V54.142H12.629v2.517a2.059,2.059,0,0,1-2.065,2.047h-1.3a2.048,2.048,0,0,1-2.053-2.047V54.151a1.867,1.867,0,0,0-1.8,1.857v14.7a1.868,1.868,0,0,0,1.858,1.869H23.825a1.87,1.87,0,0,0,1.858-1.869v-14.7A1.867,1.867,0,0,0,23.879,54.151Zm-.6,15.639a.8.8,0,0,1-.8.8H8.585a.8.8,0,0,1-.8-.8V62.2a.8.8,0,0,1,.8-.8H22.474a.8.8,0,0,1,.8.8V69.79Z" transform="translate(-5.411 -51.843)" fill="#278bed"/><path d="M80.254,5.519h1.281a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-.7-.7H80.254a.7.7,0,0,0-.7.7V4.815A.7.7,0,0,0,80.254,5.519Z" transform="translate(-76.401)" fill="#278bed"/><path d="M345.162,5.519h1.281a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-.7-.7h-1.281a.7.7,0,0,0-.7.7V4.815A.7.7,0,0,0,345.162,5.519Z" transform="translate(-330.058)" fill=""/></g></g></svg>

              <span id="usedCoupons">{{$usedCoupons}}</span>
            </div>
             <svg 
              id="small-card-bg-icon"
              class="blue"
              xmlns="http://www.w3.org/2000/svg" width="20.273" height="20.732" viewBox="0 0 20.273 20.732"><g transform="translate(-5.411)"><g transform="translate(5.411)"><path d="M119.618,258.712a.47.47,0,0,0-.471-.47h-1.642a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.471h1.642a.47.47,0,0,0,.471-.471v-1.642Z" transform="translate(-112.294 -247.274)" fill="#278bed"/><path d="M216.253,258.712a.47.47,0,0,0-.47-.47H214.14a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.471h1.642a.47.47,0,0,0,.47-.471Z" transform="translate(-204.825 -247.274)" fill="#278bed"/><path d="M312.881,258.712a.47.47,0,0,0-.47-.47h-1.642a.47.47,0,0,0-.471.47v1.642a.47.47,0,0,0,.471.471h1.642a.47.47,0,0,0,.47-.471Z" transform="translate(-297.349 -247.274)" fill="#278bed"/><path d="M119.618,355.345a.47.47,0,0,0-.471-.47h-1.642a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.47h1.642a.47.47,0,0,0,.471-.47v-1.642Z" transform="translate(-112.294 -339.803)" fill="#278bed"/><path d="M216.253,355.345a.47.47,0,0,0-.47-.47H214.14a.47.47,0,0,0-.47.47v1.642a.47.47,0,0,0,.47.47h1.642a.47.47,0,0,0,.47-.47Z" transform="translate(-204.825 -339.803)" fill="#278bed"/><path d="M312.881,355.345a.47.47,0,0,0-.47-.47h-1.642a.47.47,0,0,0-.471.47v1.642a.47.47,0,0,0,.471.47h1.642a.47.47,0,0,0,.47-.47v-1.642Z" transform="translate(-297.349 -339.803)" fill="#278bed"/><path d="M23.879,54.151v2.508a2.048,2.048,0,0,1-2.053,2.047h-1.3a2.059,2.059,0,0,1-2.065-2.047V54.142H12.629v2.517a2.059,2.059,0,0,1-2.065,2.047h-1.3a2.048,2.048,0,0,1-2.053-2.047V54.151a1.867,1.867,0,0,0-1.8,1.857v14.7a1.868,1.868,0,0,0,1.858,1.869H23.825a1.87,1.87,0,0,0,1.858-1.869v-14.7A1.867,1.867,0,0,0,23.879,54.151Zm-.6,15.639a.8.8,0,0,1-.8.8H8.585a.8.8,0,0,1-.8-.8V62.2a.8.8,0,0,1,.8-.8H22.474a.8.8,0,0,1,.8.8V69.79Z" transform="translate(-5.411 -51.843)" fill="#278bed"/><path d="M80.254,5.519h1.281a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-.7-.7H80.254a.7.7,0,0,0-.7.7V4.815A.7.7,0,0,0,80.254,5.519Z" transform="translate(-76.401)" fill="#278bed"/><path d="M345.162,5.519h1.281a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-.7-.7h-1.281a.7.7,0,0,0-.7.7V4.815A.7.7,0,0,0,345.162,5.519Z" transform="translate(-330.058)" fill=""/></g></g></svg>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header center-header pt-5">
            <h2>Coupons</h2>
            
            <div class="filter-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 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 start 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 start 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 class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date1">Cancel</button>
                      <button class="btn btn-primary add-btn-sm btn-streach-md apply1">Apply</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="card-body pt-0">
            <p class="text-right font-bold total_coupon">Total No of Coupons: {{$totalCoupons}}</p>
            <div class="table-responsive">
              <table id="coupon_list" class="stripe row-border order-column dataTable no-footer">
                <thead>
                  <tr>
                    <th>Coupon Name<span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                    <th>Coupon Code<span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                    <th>Discount Type<span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                    <th>Started On<span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                    <th>Ended On<span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                    <th>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>
      </div>
    </div>

    <!--// MAIN BODY CONTENT -->
  </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{asset('js/coaching/coupon.js?v='.time())}}"></script>
@endsection