@extends('layouts.app')

@section('content')

    <div class="col-lg-8 col-lg-offset-2">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">{{translate('Voucher Information Adding')}}</h3>
            </div>

            <form class="form-horizontal" action="{{ route('voucher.store') }}" method="POST" enctype="multipart/form-data">
            	@csrf
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3" for="email">{{translate('Name')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="{{translate('Enter Name...')}}" name="name" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3" for="email">{{translate('Email ID')}}*</label>
                        <div class="col-sm-9">
                            <input type="email" placeholder="{{translate('Enter Email...')}}" name="email" class="form-control" required>
                            <p style="font-size: 12px; color: #09f">Required email format is xxx@abc.com</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3" for="amount">{{translate('Contact')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="{{translate('Enter Contact no....')}}" name="contact" class="form-control" pattern="\d*" maxlength="10" minlength="10" required>
                            <p style="font-size: 12px; color: #09f">Please enter 10 digit Numeric figures only</p>
                        </div>
                    </div>  

                    <div class="form-group">
                        <label class="col-sm-3" for="amount">{{translate('Amount')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="{{translate('Enter Amount...')}}" name="amount" class="form-control" pattern="\d*" maxlength="5" required>
                            <p style="font-size: 12px; color: #09f">Please enter amount in Numeric figures only</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3" for="email">{{translate('Expiry Date')}}*</label>
                        <div class="col-sm-9">
                            <input type="date" placeholder="{{translate('Choose Date...')}}" name="expiry_date" class="form-control checkexpiry" required>
                            <p style="font-size: 12px; color: #09f">Please select expiry date which is equal or greater than current date</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3" for="email">{{translate('Remarks')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="{{translate('Enter Remarks...')}}" name="remark" class="form-control" required>
                        </div>
                    </div>


                <div class="panel-footer text-right">
                    <button class="btn btn-purple" type="submit">{{translate('Save')}}</button>
                </div>
            </form>

        </div>
    </div>

@endsection
@section('script')

<script type="text/javascript">

    function coupon_form(){
        var coupon_type = $('#coupon_type').val();
		$.post('{{ route('coupon.get_coupon_form') }}',{_token:'{{ csrf_token() }}', coupon_type:coupon_type}, function(data){
            $('#coupon_form').html(data);

            $('#demo-dp-range .input-daterange').datepicker({
                startDate: '-0d',
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true
        	});
		});
    }

    $(document).ready(function(){
      $(".checkexpiry").blur(function(){
        var expiry = $('.checkexpiry').val();         
        // 2022-11-16
        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var current = d.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(expiry >= current){

        }else{
            alert('Select expiry date which is equal or greater than current date.');
            $('.checkexpiry').val('');
        }    

      });
    });

</script>

@endsection