@extends('layouts.admin.app')
@section('content')

<div class="container-fluid py-4">
	<div class="row">
		<div class="col-12">
			<div class="card my-4">
				<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
					<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
						<h6 class="text-white text-capitalize ps-3">Coupon List
                            <i class="material-icons ms-auto text-white cursor-pointer catModal" data-type="Add" style="float: right; margin: 0 25px;" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Add Coupon">add</i>
                        </h6>
					</div>
				</div>
                <input type="hidden" id="requestURL" value="{{ route('admin.coupon-list.index') }}">
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success') }}
                        <p>demo test</p>
                    </div>
                @endif
                @if(Session::has('error'))
                    <div class="alert alert-danger text-white mx-3">
                        {{ Session::get('error') }}
                    </div>
                @endif
				<div class="card-body px-0 pb-2">
					<div class="table-responsive p-0">
						<table class="table align-items-center mb-0" id="data_table">
							<thead>
								<tr>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Coupon Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Coupon Amount</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Course Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Start Date</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">End Date</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Status</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Action</th>
								</tr>
							</thead>
							<tbody>
                                @foreach($coupondata as $coupon)
                                @php $startdate = date('d-m-Y',strtotime($coupon->start_date));
                                     $enddate = date('d-m-Y',strtotime($coupon->end_date));
                                @endphp
								<tr>
                                    <td class="align-middle text-center text-sm">
                                        <div class="px-2 py-1">
                                            <!-- <div>
                                                <img src="" class="avatar avatar-sm me-3 border-radius-lg c-img" alt="user1">
                                            </div> -->
                                            <div class="d-flex flex-column justify-content-center">
                                                <label class="mb-0 text-sm c-name">{{ $coupon->coupon_name }}</label>
                                            </div>
                                        </div>
									</td>
                                    <td class="align-middle text-center text-sm">
                                        <div class="px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <label class="mb-0 text-sm c-amount">{{ $coupon->coupon_amount }}</label>
                                            </div>
                                        </div>
									</td>
                                    <td class="align-middle text-center text-sm">
                                        <div class="px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <label class="mb-0 text-sm crs-name">{{ $coupon->name }}</label>
                                            </div>
                                        </div>
									</td>
                                    <td class="align-middle text-center text-sm">
                                        <div class="px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <label class="mb-0 text-sm c-start-date">{{ $startdate }}</label>
                                            </div>
                                        </div>
									</td>
                                    <td class="align-middle text-center text-sm">
                                        <div class="px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <label class="mb-0 text-sm c-end-date">{{ $enddate }}</label>
                                            </div>
                                        </div>
									</td>
									<td class="align-middle text-center text-sm">
									    <span class="badge badge-sm c-status @if($coupon->status==1) bg-gradient-success">Active @else bg-gradient-danger">Inactive @endif</span>
									</td>
									<td class="align-middle text-center text-sm d-flex gap-2">
                                        <button class="btn btn-primary">
                                            <a href="javascript:;" class="text-secondary font-weight-bold text-white text-xs catModal" data-id="{{ $coupon->id }}" data-cid="{{ $coupon->cid }}" data-st="{{ $coupon->status }}" data-dt="{{$coupon->start_date}}" data-edt="{{$coupon->end_date}}" data-type="Edit" data-toggle="tooltip" data-original-title="Edit User">
                                                <i class="material-icons">edit</i>
                                            </a>
                                        </button>
                                        <form action="{{ route('admin.coupon-list.destroy',base64_encode($coupon->id)) }}" id="deleteform" method="post">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-primary" type="submit">
                                                <i class="material-icons">delete</i>
                                            </button>
                                        </form>
									</td>
								</tr>
                                @endforeach
							</tbody>
						</table>
                        <div class="pagination-container justify-content-center " style="padding: 10px;">
                            <ul class="pagination pagination-primary">
                            {{ $coupondata->links() }}
                            </ul>
                        </div>
					</div>
				</div>
			</div>
		</div>
	</div>

    @include('layouts.admin.footer')
</div>

<div class="modal" id="catModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <!-- Modal content-->
        <form id="couponForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span class="mdl_title"></span> Coupon</h4>
                    <button type="button" class="btn close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> Coupon Name </label>
                        <input type="text" style="padding:unset;width: 50%;" class="form-control coupon-name" name="coupon_name" required>
                        <input type="hidden" name="id" class="form-id">
                        <br><span class="text-danger w-100 text-center e-lable field-coupon_name" ></span>
                    </div>
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> Coupon Amount </label>
                        <input type="text" style="padding:unset;width: 50%;" class="form-control coupon-amount" name="coupon_amount" required>

                        <br><span class="text-danger w-100 text-center e-lable field-coupon_amount" ></span>
                    </div>
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> Course Name </label>
                        <select style="padding:unset;width: 50%;" class="form-control course-name" name="course_name" required>
                        <option value="">--Select Course--</option>
                        @foreach(getCourses() as $courses)
                        <option value="{{$courses->id}}">{{$courses->name}}</option>
                        @endforeach
                        </select>
                        <br><span class="text-danger w-100 text-center e-lable field-course_name" ></span>
                    </div>
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> Start Date </label>
                        <input type="date" style="padding:unset;width: 50%;" class="form-control start-date" name="start_date" required>
                        <br><span class="text-danger w-100 text-center e-lable field-start_date" ></span>
                    </div>
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> End Date </label>
                        <input type="date" style="padding:unset;width: 50%;" class="form-control end-date" name="end_date" required>
                        <br><span class="text-danger w-100 text-center e-lable field-end_date" ></span>
                    </div>
                    <div class="input-group input-group-outline" style="margin: 12px 0;">
                        <label class="" style="padding:8px 12px;margin: unset;"> Status </label>
                        <select class="form-control form-status" style="padding:unset;width: 50%;" name="status" >
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <br><span class="text-danger w-100 text-center e-lable field-status" ></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary couponSave">Save</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    <br><span class="text-danger w-100 text-center e-lable field-error" ></span>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
.flex.justify-between.flex-1.sm\:hidden
{
    display: none
}
</style>
<script>
    $(document).on('click','.catModal', function(){
        $('.mdl_title').html($(this).attr('data-type'));
        $('.e-lable').html('');
        if($(this).attr('data-type')=='Edit')
        {
            var cnm = $(this).closest('tr').find('.c-name').html();
            var cam = $(this).closest('tr').find('.c-amount').html();
            var csd = $(this).closest('tr').find('.c-start-date').html();
            var ced = $(this).closest('tr').find('.c-end-date').html();
            var st = $(this).attr('data-st');
            var cid= $(this).attr('data-cid');
            var sdt = $(this).attr('data-dt');
            var edt = $(this).attr('data-edt');
            $('.coupon-name').val(cnm);
            $('.coupon-amount').val(cam);
            $('.start-date').val(sdt);
            $('.end-date').val(edt);
            $('.form-status').val(st);
            $('.course-name').val(cid);
            $('.form-id').val($(this).attr('data-id'));

            $('.couponSave').html('Update');
        }
        else{

            $('.couponSave').html('Save');
            $('#couponForm')[0].reset();
        }

        $('#catModal').modal('show');
    });

    $(document).on('click','.couponSave', function(){
        var formData = new FormData($("#couponForm")[0]);
        var id = $('.form-id').val();
        if($(this).text()=='Update')
        {
            var url = "{{ route('admin.coupon-list.update',':id') }}";
            url = url.replace(':id', id);
            formData.append("_method", 'PUT');
        }
        else{
            var url = "{{ route('admin.coupon-list.store') }}";
        }

        $.ajax({
            url: url,
            type: "POST",
            data : formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('.e-lable').html('');
                layon();
            },
            success: function(data){
                if(data.success==false)
                {
                    $.each( data.message, function( key, value ) {
                        $('.field-'+key).html(value);
                    });
                }
                else{
                    $('#catModal').modal('hide');
                    toastr.success('Successfull.', '', {timeOut: 5000})
                }
                location.reload();
                // FetchData();
                layoff();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                layoff();
            }
        });
    });

    function FetchData(){
        var url = $('#requestURL').val();
        // alert(url);
        $.ajax({
            url: url,
            type: "GET",
            data : '',
            processData: false,
            contentType: false,
            beforeSend: function() {
                layon();
            },
            success: function(data){
                $('.table-responsive').html(data);
                layoff();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                layoff();
            }
        });
    }

    $(document).on("submit","#deleteform", function(e){
        e.preventDefault();
        var url = $(this).attr('action');
        var formData = new FormData($("#deleteform")[0]);
        $.ajax({
            url: url,
            type: "POST",
            data : formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                layon();
            },
            success: function(data){
                if(data.success==false)
                {
                    $.each( data.message, function( key, value ) {
                        // $('.field-'+key).html(value);
                        toastr.danger(value, '', {timeOut: 5000});
                    });
                }
                else{
                    toastr.success('Delete Successfull.', '', {timeOut: 5000});
                    location.reload();
                    // FetchData();
                }
                layoff();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                layoff();
            }
        });

    });

    $(document).on('click','a.relative.inline-flex',function(event) {
        event.preventDefault();
        $('#requestURL').val($(this).attr('href'));
        FetchData();
    });

</script>
@endsection