@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" aria-current="page">Coupon Management</li>
						</ol>
					</div>
					<!-- MAIN BODY CONTENT -->
		            <h1>Coupon Manager</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 Active Coupon</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="maintotalSet">{{$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(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-6 col-md-12">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium">
		                      Total No. Of Coupon Generated In Last 30 Days
		                    </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="maintotalSet">{{$generatedCoupons30}}</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-6 col-md-12">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium">
		                      Total No. Of Coupon Generated 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 class="maintotalSet">{{$generatedCouponsTillNow}}</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 -->
		            <div class="card card-filter">
		              <div class="card-body">
		                <div class="row">
		                  <div class="col-lg-6">
		                    <div class="form-row">
		                      <div class="form-group col-lg-3">
		                        <select name="" id="coupon_type" class="form-control input-sm">
		                          <option value="">Select Coupon Type</option>
		                          <option value="1">Company</option>
		                          <option value="2">Coaching</option>
		                        </select>
		                      </div>
		                      <div class="form-group col-lg-3">
		                        <select name="" id="discount_type" class="form-control input-sm">
		                          <option value="">Select Discount Type</option>
		                          <option value="">All</option>
		                          <option value="2">Amount</option>
		                          <option value="1">Percent</option>
		                        </select>
		                      </div>
		                    </div>
		                  </div>
		                  <div class="col-lg-6">
		                    <div class="input-group custom">
		                      <div class="input-group-prepend">
		                        <button type="button" class="btn btn-outline-secondary">
		                          <i class="fa fa-search text-warning"></i>
		                        </button>
		                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"    aria-haspopup="true" aria-expanded="false">
		                          <span class="sr-only">Toggle Dropdown</span>
		                        </button>
		                        <div class="dropdown-menu">
		                          <a class="dropdown-item list" href="javascript:void(0)" data-id="1">Search By Coupon Code</a>
		                          <a class="dropdown-item list" href="javascript:void(0)" data-id="2">Search By Coupon Name</a>
		                          <a class="dropdown-item list" href="javascript:void(0)" data-id="3">Search By Coaching Name</a>
		                        </div>
		                      </div>
		                      <input type="text" id="search_text" class="form-control input-sm" aria-label="Text input with segmented dropdown button"/>
		                    </div>
		                  </div>
		                </div>
		              </div>
		            </div>
		            <!-- Filter End-->
		            <!-- Table -->
		            <div class="card">
		              <div class="card-header pt-5">
		                <h2>Coupon</h2>
		                <div class="filter-group">
		                	<a href="{{route('admin.coupon.add')}}" ><button type="button" class="btn btn-primary add-btn add-btn-sm"><i class="fa fa-plus-circle"></i>Add Coupon</button></a>
			              <input type="hidden" name="date_type" id="date_type">
			              <input type="hidden" name="search_type" id="search_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 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="all_from_date1">
			                      </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="all_to_date1">
			                      </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 mb-2 total_coupon">Total No of Coupon: 0</p>
		                <div class="table-responsive">
		                  <table id="coupon-manager" class="table card-table dataTable table-hover table-vcenter text-nowrap">
		                    <thead>
		                      <tr>
		                        <th>Valid for</th>
		                        <th>Coupon Name</th>
		                        <th>Coupon Code</th>
		                        <th>Discount Type</th>
		                        <th>Total Used</th>
		                        <th>Started On</th>
		                        <th>End On</th>
		                        <th>Status</th>
		                        <th>Action</th>
		                      </tr>
		                    </thead>
		                    
		                  </table>
		                </div>
		              </div>
		            </div>
		            <!-- //Table -->
		            <!--// MAIN BODY CONTENT -->
				</div>
			</div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{asset('js/coupon.js?v='.time())}}"></script>
@endsection