@extends('admin.layout') 
@section('content')
<style type="text/css">
    .modal-body {
        padding: 5rem 4rem;
        text-align: center;
    }
    
    span.custolebel {
        font-size: 12px;
    }
    
    .modal-footer .btn-primary:hover {
        background: transparent;
        border-color: transparent;
    }
    
    .dropdown-toggle::after {
        display: none;
    }
    
    .modal-body {
        font-size: 16px;
    }
    
    .modal-content {
        min-height: auto;
    }
    
    .modal-title {
        padding-left: 0;
    }
    
    .modal-body p {
        margin-bottom: 0;
        font-size: 24px;
        font-weight: 600;
    }
    
    .ecom-btn-border1 {
        min-width: 125px;
        padding: 3px 9px;
    }
    
    .bg-beauty-green {
        background: #4CAF50 !important;
    }
    
    .container-custom01 {
        max-width: 1900px;
        width: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    /*Member new work*/
    
    .customMemberList table tr th a {
        font-size: 12px;
        color: #2b2a2a;
    }
    
    .custommserch .ordersearch {
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }
    
    .custommserch .ordersearch i.fas.fa-search {
        color: #7460ee;
    }
    
    .pagination {
        margin-top: 20px;
    }
    
    table.jambo_table thead tr th a {
        color: #fff !important;
    }
    
    table.jambo_table thead tr {
        background-color: #7460ee;
    }
    
    .content-wrapper.close-wrapper {
        margin-left: 300px!important;
    }
    
    .content-wrapper {
        margin-left: 0px!important;
    }
    
    .sidenav {
        width: 0px;
    }
    
    div#emailCustomerModal .modal-body {
        padding: 0px;
    }
    
    .checkIcons i {
        font-size: 20px;
        color: #7cf392;
    }
    
    .exclamIcons i {
        font-size: 20px;
        color: #ff7e75;
    }
    
    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 683px;
            margin: 1.75rem auto;
        }
    }
    /*End*/
</style>
<div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
        <!-- Info boxes -->
        <!-- /.row -->
        <div class="container-custom01">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-12 head-btn-right">
                        <a class="btn-blue" id="AddCoupanBtn" href="javascript:void();" data-toggle="modal" data-target="#coupanModal"><i class="fa fa-plus"></i> Add Coupon</a>
                    </div <div class="row">
                    <div class="col-xs-12">
                        @if (count($errors) > 0) @if($errors->any())
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{$errors->first()}}
                        </div>
                        @endif @endif @if( session('success'))
                        <div class="alert alert-success pt10 pb10 mt10 mb10" style="display:block">
                            {{ session('success') }}
                        </div>
                        @endif
                    </div>
                </div>
			</div>
			<div class="row">
				<div class="col-md-12">
				   </br>
					<div class="customMemberList table-responsive">
						<table class="table table-striped responsive-utilities jambo_table">
							<thead>
								<tr>
									<th id="member-grid_c1">Sr/No</th>
									<th id="member-grid_c1">Coupon Code</th>
									<th id="member-grid_c2">Name</th>
									<th id="member-grid_c3">Amount</th>
									<th id="member-grid_c3">Date</th>
									<th id="member-grid_c4">Action</th>
								</tr>
							</thead>
							<tbody>
																							</tbody>
						</table>
					</div>
				</div>
				<div class="">{{$coupons->links()}}</div>
			</div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
	</section>
</div>

<div id="coupanModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content custom-popup">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title headingCoupan">Add coupans</h4>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="AddCoupanForm">
					{{ csrf_field() }}
                    <div class="form-group">
                        <label>Code</label>
                        <input class="form-control field-validate" id="coupon_code" name="code" type="text" value="">
                        <input class="form-control field-validate"id="coupon_id" name="coupon_id" type="hidden" value="">
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input class="form-control field-validate" id="coupon_name" name="name" type="text" value="">
                    </div>
                    <div class="form-group">
                        <label>Amount</label>
                        <input class="form-control field-validate" id="coupon_amount" name="amount" type="text" value="">
                    </div>
                    <center>
                        <button class="model-btn">Submit</button>
                    </center>
                </form>
            </div>
        </div>
    </div>
</div>

<link href="{!! asset('resources/nassets/dist/css/custom-inv.css') !!}" rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.js"></script>
<script>
$(document).ready(function() {
	
	$("body").on("click","#AddCoupanBtn",function(){
		 $("#AddCoupanForm")[0].reset();
		 $(".headingCoupan").html('Add coupon');
		 $(".type_area").html('');
	});
	
	$("body").on("click",".EditCouponForm",function(){
		//alert();
		$("#coupanModal").modal('show');
		var r = $(this).data('result');
		
		$(".headingCoupan").html('Edit coupon');  
		$("#AddCoupanForm")[0].reset();
		$("#coupon_id").val(r.data.id);
		$("#coupon_code").val(r.data.code);
		$("#coupon_name").val(r.data.name);
		$("#coupon_amount").val(r.data.amount);
	 });
 });
$("#AddCoupanForm").submit(function(e) {
        e.preventDefault();
    }).validate({
        //rules: {},
        submitHandler: function(form) { 
            $.ajax({
              beforeSend:function(){
                // $("#AddCoupanForm").find('button').attr('disabled',true);
                $("#AddCoupanForm").find('button>i').show();
              },
              url:"{{ url('admin/coupons' ) }}",
			  type: 'POST',
              data: $("#AddCoupanForm").serialize(),
              success:function(response){
                    // response = JSON.parse(response);
                  if (response.success) {
                     $("#AddCoupanForm")[0].reset();
                     jQuery(".productListArea").html('');	
                     $("#AddCoupanForm").find('button').attr('disabled',false);
                     $("#AddCoupanForm").find('button>i').hide();
                     $("#coupanModal").modal('hide');
        			jQuery.toast({
                        heading: 'Success',
                        text: response.message,
                        showHideTransition: 'fade',
                        icon: 'success',
                        position: 'top-right',
                    }) ;
                    location.href = response.redirect_url;
                  }
              },
              complete:function(){
    
              },
        		error:function(status, error){
        			jQuery.toast({
                        heading: 'Error',
                        text: status.responseJSON.message,
                        showHideTransition: 'fade',
                        icon: 'error',
                        position: 'top-right',
                    }) ;
                    $("#AddCoupanForm").find('button').attr('disabled',false);
                    $("#AddCoupanForm").find('button>i').hide();   
        		}
          });
            return false;  //This doesn't prevent the form from submitting.
        }
	});
</script>
@endsection