@extends($activeTemplate.'layouts.dash')

@push('style')
<style>
.typeitem {float: left;width: 50%;height: auto;overflow: hidden;margin-left: 0px;}
.over {border-bottom: 1px solid #000;}.successful{color:#28c76f !important;font-weight:800;}
</style>
@endpush

@section('content')
<div style="background: none; height: auto; overflow: hidden; ">
	<div class="top" style="background: none;">
		<div data-href="{{ route('user.home') }}" class="linkBTN" style="float:left; line-height:46px;width:50%; height:46px;cursor:pointer;" id="btnClose">
			<img src="/assets/images/arrow-back-up.png" style="margin-left:12px;width:28px;" />
		</div>
	</div>
	<div style="padding-top:30px;">
		<div style="float: left; width: 100%; text-align: center; color: #fff;">
			<div style="height: 100px; line-height: 100px; margin:25px auto; width:100px; border-radius: 100px; background:#fff;">
				<img src="{{ getImage(imagePath()['logoIcon']['path'] .'/favicon.png') }}{{ $catch}}" style="height: 90px; border-radius:100px;">
			</div>
			<div style="padding:5px; padding-top:10px;color:#000; font-weight:bold; font-size:20px; margin-top:10px;" id="uid">System coupon</div>
			<div style="padding:5px; padding-top:5px;color:#000; font-size:12px;">Have a coupon code, use it to claim discounts</div>
		</div>
	</div>
</div>

	<div style=" width: 100%; margin: 0 auto; margin-top: 4px; text-align: center; background: #fff; color: #000; position: relative; height: auto; overflow: hidden;">
		<div class="typeitem over" value="1">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height:30px; overflow: hidden;">Active </div>
		</div>
		<div class="typeitem" value="2">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height: 30px; overflow: hidden; ">Expired</div>
		</div>
	</div>


	<div style="width: 100%; margin: 0 auto; background:#fff; position: relative; margin-top: 10px;height: auto; overflow: hidden; padding-top:10px;" id="itemlist">
        @foreach($pub_coupons as $coupon)

        @php
			$expiredDate = \Carbon\Carbon::parse($coupon['expired_date'])->format('d/m/y h:iA');
			$nextTime = \Carbon\Carbon::parse($coupon['start_date']);
        @endphp

        @if($coupon['started'] != 1)
        <script>
            createCountDown('counter<?php echo $coupon['id']; ?>', {{ $nextTime->diffInSeconds() }});
        </script>
        @endif

        @include($activeTemplate.'user.coupon.list')

        @endforeach

        <!-- MY Coupon -->
        @foreach($coupons as $coupon)

        @php
			$expiredDate = \Carbon\Carbon::parse($coupon['expired_date'])->format('d/m/y h:iA');
			$nextTime = \Carbon\Carbon::parse($coupon['start_date']);
        @endphp

        @if($coupon['started'] != 1)
        <script>
            createCountDown('counter<?php echo $coupon['id']; ?>', {{ $nextTime->diffInSeconds() }});
        </script>
        @endif

        @include($activeTemplate.'user.coupon.list')

        @endforeach
    </div>

	<div class="layui-form layui-tab-content" style="padding:5px 10px; margin:20px 0 80px 0;">
		<div class="layui-form layui-tab-content" style="padding: 10px 0;">
			<div class="layui-form">
				<div class="layui-form layui-form-pane">
					<div class="layui-form-item layui-form-text">
						<div class="layui-input-block" style="">
							<form action="" method="post" style="margin: 10px; line-height:20px; color:#808080;margin-top:0px;">
								@csrf  <br/>
								<div class="layui-form layui-form-pane">
									<div class="layui-form-item" style="height:48px;">
										<div class="inputdiv">
											<img class="" src="/assets/images/coupon-fill.png" style="margin-right:1px;color:#000; height:21px; margin-top:8px;">
											<input type="text" name="code" id="code" maxlength="20" placeholder="Enter coupon code" class="layui-input" autocomplete="off">
										</div>
									</div>
									
									<div class="layui-form-item" style="height:48px;margin-top:30px;">
										<input class="layui-btn" id="confirm" value="GET DISCOUNTS" style="width: 100%; border: 0px; color: #fff; background: #000; height:45px; line-height:45px; border-radius: 25px; " type="button" />
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection
@push('script')
<script>
    function copyText(textToCopy,msg = 'Copied!') {
		var $temp = $("<input>");
		$("body").append($temp);
		$temp.val(textToCopy).select();
		document.execCommand("copy");
		$temp.remove();
		modalMessage(msg);
    }
</script>

<script>
    $('#confirm').on('click', function() {
        
        // Data
        var code = $('#code').val();
        var token = document.querySelector('input[name="_token"]').value;

		if (!code) {
			modalMessage("Coupon code is required 需要優惠券");
			return false;
			is_status = false;
		}

        $.ajax({
            url: "{{ route('user.coupon.use') }}",
            type: 'POST',
            data: {
                'code': code,
                'package': 15,
                'amount': 20000,
                _token: token
            },
             beforeSend: function() {
			loading.showLoading({type: 2,tip: "Wait.. 等待"});
            },
            success: function(data) {
                
                if(data.link) {
                    modalMessage(data.message, 200, data.link);
                    return true;
                }
                loading.hideLoading();
                modalMessage(data.message);
            },
            error: function(xhr, status, error) {
                var data = JSON.parse(xhr.responseText);
                var responseMessage = data.message

                // Validator message
                if (data.errors) {
                    var errorMessages = [];
                    for (var key in data.errors) {
                        if (data.errors.hasOwnProperty(key)) {
                            errorMessages.push(data.errors[key][0]);
                        }
                    }

                    responseMessage = errorMessages.join(", ")
                }

                // Redirect
                if(data.link) {
                    modalMessage(data.message, 400, data.link);
                    return true;
                }

                loading.hideLoading();
                modalMessage(responseMessage);
            }
        });
    })
</script>
@endpush