@extends('layouts.new-app')

@section('content')
<style>
    .form-group .form-control {
        margin-bottom: 7px;
        background-color: white;
    }

    .form-group {
        margin-top: 0px;
    }
</style>

@php
$months = array(1 => 'Jan', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr', 5 => 'May', 6 => 'Jun', 7 => 'Jul', 8 => 'Aug', 9 =>
'Sep', 10 => 'Oct', 11 => 'Nov', 12 => 'Dec');
@endphp
<!-- Company Overview section START -->
<section class="container-fluid inner-Page">
    <div class="card-panel">
        <div class="media wow fadeInUp" data-wow-duration="1s">
            <div class="companyIcon">
            </div>
            <div class="media-body">

                <div class="container">
                    @if(session('success_msg'))
                    <div class="alert alert-success fade in alert-dismissible show">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="font-size:20px">×</span>
                        </button>
                        {{ session('success_msg') }}
                    </div>
                    @endif
                    @if(session('error_msg'))
                    <div class="alert alert-danger fade in alert-dismissible show">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true" style="font-size:20px">×</span>
                        </button>
                        {{ session('error_msg') }}
                    </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <h1>Payment</h1>
                        </div>
                    </div>
                    <form id="payment-card-info" method="post" action="{{ route('dopay.online') }}">
                        @csrf
                        {!! Form::hidden('invoice_id', $invoice->id) !!}
                    <div class="row">
                        <div class="col-xs-12 col-md-5"
                            style="background: white; border: 1px solid lightgreen; border-radius: 5px; padding: 10px;">
                            <div class="panel panel-primary">
                                <div class="creditCardForm">
                                    <div class="payment">
                                        <div class="row">
                                            <div class="form-group col-md-8">
                                                <label for="amount">Amount</label>
                                                <div style="display: flex"><span style="margin-top: 8px; padding-right: 5px;">$</span>  <input type="number" class="form-control" id="amount" name="amount" min="1" value="{{ $invoice->total }}" required></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group owner col-md-8">
                                                <label for="owner">Card Holder Name</label>
                                                <input type="text" class="form-control" id="owner" name="owner"
                                                    value="{{ old('owner') }}" required>
                                            </div>
                                            <div class="form-group col-md-8" id="card-number-field">
                                                <label for="cardNumber">Card Number</label>
                                                <input type="text" class="form-control" id="cardNumber"
                                                    name="cardNumber" value="{{ old('cardNumber') }}" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6" id="expiration-date">
                                                <label>Expiration Date</label><br />
                                                <select class="form-control" id="expiration-month"
                                                    name="expiration-month"
                                                    style="float: left; width: 100px; margin-right: 10px;">
                                                    @foreach($months as $k=>$v)
                                                    <option value="{{ $k }}"
                                                        {{ old('expiration-month') == $k ? 'selected' : '' }}>
                                                        {{ $v }}</option>
                                                    @endforeach
                                                </select>
                                                <select class="form-control" id="expiration-year"
                                                    name="expiration-year" style="float: left; width: 100px;">

                                                    @for($i = date('Y'); $i <= (date('Y') + 15); $i++) <option
                                                        value="{{ $i }}">{{ $i }}</option>
                                                        @endfor
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group CVV col-md-4">
                                                <label for="cvv">CVV</label>
                                                <input type="number" class="form-control" id="cvv" name="cvv" value="{{ old('cvv') }}" required>
                                            </div>
                                            <div class="form-group col-md-6" id="credit_cards" style="margin-top: 22px;">
                                                <img src="{{ asset('/theme/images/visa.jpg') }}" id="visa" width="20%">
                                                <img src="{{ asset('/theme/images/master.png') }}" id="mastercard" width="23%">
                                                <img src="{{ asset('/theme/images/amex.png') }}" id="amex" width="35%">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-5 ml-5" style="background: white; border: 1px solid lightgreen; border-radius: 5px;">
                            <div class="panel panel-primary">
                                <div class="creditCardForm">
                                    <div class="payment">
                                        <div class="coursepaymentcontainer">
                                            <h4>Courses</h4>
                                        </div>
                                        <div class="paymentrow">
                                            <div class="row div1">
                                                <div class="col-lg-6">
                                                    <h5>Class AB Operator</h5>
                                                </div>
                                            </div>
                                            <div class="row div1">
                                                <div class="col-lg-6">Begin Course</div>
                                                <div class="col-lg-6 text-right"></div>
                                            </div>
                                            <div class="row div1">
                                                <div class="col-lg-6">Final Evaluation</div>
                                                <div class="col-lg-6 text-right"></div>
                                            </div>

                                            <div class="row subtotal">
                                                <div class="col-lg-6"><span style="font-weight: bold">Sub Total</span></div>
                                                <div class="col-lg-6 text-right" id="show_sub_total">${{ $invoice->sub_total }}</div>
                                                <input type="hidden" name="sub_total" id="sub_total" class="filled-in chk-col-green" value="0" readonly>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div>
                                                        <div class="input-group" style="width: 100%">
                                                            <div class="form-group label-floating" style="width: 100%">
                                                                <label class="control-label">Coupon Code</label>
                                                                <input name="coupon" type="text" class="form-control" value="{{ $invoice->coupon }}" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row" style="margin-top: -10px;">
                                                <div class="col-lg-6">
                                                    <div class="checkbox">
                                                        Discount Amount
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 text-right" id="show_discount">- ${{ $invoice->discount }}</div>
                                                <input type="hidden" name="discount" id="discount" class="filled-in chk-col-green" value="0" readonly>
                                            </div>
                                            <div class="row subtotal">
                                                <div class="col-lg-6"><span style="font-weight: bold">Total</span></div>
                                                <div class="col-lg-6 text-right" id="show_grand_total">${{ $invoice->total }}</div>
                                                <input type="hidden" name="total" id="grand_total" class="filled-in chk-col-green" value="0" readonly>
                                            </div>
                                            <div class="row text-center" style="justify-content: center;">
                                                    <button type="submit" class="btn btn-success themeButton btn-block" id="confirm-purchase">Confirm Payment</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <div class="clearfix"></div>
</section>

<script>
    $(function() {
        $('#payment-card-info').validate({
            rules: {
                'radio': {
                    required: true
                },
                'number': {
                    required: true
                },
                'text': {
                    required: true
                },
            },
            highlight: function (input) {
                $(input).parents('.form-group').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-group').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.radio-group').append(error);
            }
        });
    });
</script>
@endsection