@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-6 col-md-12">
        <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="28"
                height="28"
                viewBox="0 0 28 28"
              >
                <g transform="translate(-474 -1481.625)">
                  <rect
                    width="28"
                    height="28"
                    transform="translate(474 1481.625)"
                    fill="rgba(0,0,0,0)"
                  />
                  <path
                    d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                    transform="translate(-3528 -11502.375)"
                    fill=""
                  />
                </g>
              </svg>
              <span id="activeCoupons">{{$activeCoupons}}</span>
            </div>
            <svg
              id="small-card-bg-icon"
              class="red"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              viewBox="0 0 28 28"
            >
              <g transform="translate(-474 -1481.625)">
                <rect
                  width="28"
                  height="28"
                  transform="translate(474 1481.625)"
                  fill="rgba(0,0,0,0)"
                />
                <path
                  d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                  transform="translate(-3528 -11502.375)"
                  fill=""
                />
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-12">
        <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="28"
                height="28"
                viewBox="0 0 28 28"
              >
                <g transform="translate(-474 -1481.625)">
                  <rect
                    width="28"
                    height="28"
                    transform="translate(474 1481.625)"
                    fill="rgba(0,0,0,0)"
                  />
                  <path
                    d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                    transform="translate(-3528 -11502.375)"
                    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="28"
              height="28"
              viewBox="0 0 28 28"
            >
              <g transform="translate(-474 -1481.625)">
                <rect
                  width="28"
                  height="28"
                  transform="translate(474 1481.625)"
                  fill="rgba(0,0,0,0)"
                />
                <path
                  d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                  transform="translate(-3528 -11502.375)"
                  fill=""
                />
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-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="orange"
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
              >
                <g transform="translate(-474 -1481.625)">
                  <rect
                    width="28"
                    height="28"
                    transform="translate(474 1481.625)"
                    fill="rgba(0,0,0,0)"
                  />
                  <path
                    d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                    transform="translate(-3528 -11502.375)"
                    fill=""
                  />
                </g>
              </svg>
              <span id="usedCoupons">{{$usedCoupons}}</span>
            </div>
            <svg
              id="small-card-bg-icon"
              class="orange"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              viewBox="0 0 28 28"
            >
              <g transform="translate(-474 -1481.625)">
                <rect
                  width="28"
                  height="28"
                  transform="translate(474 1481.625)"
                  fill="rgba(0,0,0,0)"
                />
                <path
                  d="M4013.772,13010.707a.621.621,0,0,1-.444-.187l-8.9-8.9a.635.635,0,0,1,0-.892l10.263-10.259,1.336,1.335a.629.629,0,1,0,.888-.892l-1.335-1.335,3.154-3.154a.626.626,0,0,1,.445-.184.634.634,0,0,1,.447.184l2.668,2.671a.63.63,0,0,1,.186.449.619.619,0,0,1-.186.442,1.889,1.889,0,0,0,1.337,3.225,1.868,1.868,0,0,0,1.334-.554.634.634,0,0,1,.447-.184.626.626,0,0,1,.445.184l2.671,2.671a.635.635,0,0,1,0,.892l-3.115,3.115-1.335-1.336a.63.63,0,0,0-.891.892l1.335,1.335-10.3,10.3A.621.621,0,0,1,4013.772,13010.707Zm.894-14.614a.647.647,0,0,0-.352.106.612.612,0,0,0-.265.4l-1.786,8.9a.812.812,0,0,0-.01.124.629.629,0,0,0,.506.614.558.558,0,0,0,.131.013.626.626,0,0,0,.343-.1.614.614,0,0,0,.268-.4l1.78-8.9a.519.519,0,0,0,.013-.124.627.627,0,0,0-.627-.632Zm2.669,3.2a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4017.335,12999.289Zm-7.122,0a1.883,1.883,0,1,0,1.334.551A1.88,1.88,0,0,0,4010.214,12999.289Zm10.741-4.146a.629.629,0,0,0-.447,1.075l.891.888a.628.628,0,1,0,.888-.888l-.888-.892A.627.627,0,0,0,4020.955,12995.144Zm-2.671-2.671a.629.629,0,0,0-.447,1.075l.891.888a.621.621,0,0,0,.445.187.63.63,0,0,0,.447-1.074l-.891-.892A.627.627,0,0,0,4018.284,12992.473Zm-.949,9.334a.631.631,0,0,1-.631-.632.613.613,0,0,1,.186-.443.625.625,0,0,1,1.071.443.648.648,0,0,1-.18.448A.636.636,0,0,1,4017.335,13001.807Zm-7.123,0a.631.631,0,0,1-.446-1.075.619.619,0,0,1,.447-.184.631.631,0,0,1,.448.184.62.62,0,0,1,.183.443.626.626,0,0,1-.632.632Z"
                  transform="translate(-3528 -11502.375)"
                  fill=""
                />
              </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" 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>Quick Dates</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>Quick Dates</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="table card-table dataTable table-hover table-vcenter text-nowrap">
                <thead>
                  <tr>
                    <th>Coupon Name</th>
                    <th>Coupon Code</th>
                    <th>Discount Type</th>
                    <th>Started On</th>
                    <th>Ended On</th>
                    <th>Status</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')}}"></script>
@endsection
