@extends('user.layouts.index')
@section('page_content')

<link rel="stylesheet" href="{{asset ('css/loginpage.css')}}">
<link rel="stylesheet" href="{{ asset('css/home.css') }}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link href="{{ asset('css/newmake.css') }}" rel="stylesheet">
<link href="{{ asset('css/proceedpayment.css') }}" rel="stylesheet">
<link href="{{ asset('css/mainstudentdash.css') }}" rel="stylesheet">






    <!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
    {{-- <div class="w3-main mainContent" style="margin-left:250px"> --}}





 <!--LOGIN PAGE BORDER-->
 <section class="login-page-border">
    <div class="row paymentarea">
        <div class="col-sm-12">
            <div class="paymentareadata">
                <h3>MAKE PAYMENT</h3>
            </div>
        </div>
    </div>
</section>

<!-- LOGIN SECTION -->
<section class="login-section">
    <div class="container-fluid login-container">
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>

    @elseif( $message = Session::get('error'))
        <div class="alert alert-danger text-center">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            <p>{{ $message }}</p>
        </div>
    @endif
        {{-- <form method="post" action="{{ url('/user/login') }}"> --}}
            {{-- {{ csrf_field() }} --}}





            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
                    <label for="my-input text-secondary"><b class="text-secondary"></b></label>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                    <div class="form-group">
                        <label for="my-input text-secondary"><b class="text-secondary">Enter Amount to buy coins for</b></label>
                    </div>
                    <div class="form-group">
                        <input type="number" onkeyup="input_dollar()" class="form-control" id="dollartext" name="dollar" placeholder="Amount"
                        min="1"
                        step="1">
                        <label id="show_points" class="form-control"  name="show_points"  >Coins : 0</label>
                    </div>
                </div>
                <div class="col"></div>
            </div>

        <div class="col-2 padding-top-bottom-btn-col">
            {{-- <a href="{{url('user/points/payment')}}" onclick="openpaymentdiv()"
             class="btn btn-sm btn-primary check-out-btn mypayment" type="button" > Payment</a> --}}

             <button  onclick="openpaymentdiv()"   class="btn btn-sm btn-primary check-out-btn mypayment">Payment</button>

                {{-- <button  type="submit"  class="btn btn-sm btn-primary check-out-btn my">


                </button> --}}

            </div>
            <div class="col-12 text-center">
                <p class="text-break text-secondary"></p>
            </div>

        </div>

    </div>
    <div class="paymentclosediv" id="myDIV"  style="display:none">
        <form role="form" action="{{ url('order_product/stripe') }}" method="post"
        class="require-validation" data-cc-on-file="false"
        data-stripe-publishable-key="{{$stripe_key}}"
        id="payment-form">
        @csrf


        <div class="container py-5">
            <!-- For demo purpose -->
            <div class="row mb-4">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-6">Payment</h1>
                </div>
            </div> <!-- End -->

            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="card ">
                        <div class="card-header">
                            <div class="bg-white shadow-sm pt-4 pl-2 pr-2 pb-2">
                                <!-- Credit card form tabs -->
                                <ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3">
                                    <li class="nav-item"> <a data-toggle="pill" href="#credit-card" class="nav-link active "> <i class="fas fa-credit-card mr-2"></i> Credit Card </a> </li>

                                </ul>
                            </div> <!-- End -->
                            <!-- Credit card form content -->
                            <div class="tab-content">
                                <!-- credit card info-->
                                <div id="credit-card" class="tab-pane fade show active pt-3">

                                        <div class="form-group"> <label for="username">
                                                <h6>Card Owner</h6>
                                            </label> <input type="text" name="username" placeholder="Card Owner Name" required class="form-control mycard"> </div>
                                        <div class="form-group"> <label for="cardNumber">
                                                <h6>Card number</h6>
                                            </label>
                                            <div class="input-group">
                                                <input autocomplete='off'
                                                class='form-control card-number' name="mycard" size='20' type='text' required>
                                                <div class="input-group-append">
                                                     <span class="input-group-text text-muted"> <i class="fab fa-cc-visa mx-1"></i>
                                                        <i class="fab fa-cc-mastercard mx-1"></i> <i class="fab fa-cc-amex mx-1"></i>
                                                    </span>
                                                 </div>
                                            </div>
                                        </div>
                                        <input class='form-control mycard' id="amount" name="amount" required size='4' type='hidden'>
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="form-group"> <label><span class="hidden-xs">
                                                            <h6>Expiration Date</h6>
                                                        </span></label>
                                                    <div class="input-group"> <input type="number" placeholder="MM" name="" class="form-control card-expiry-month" required>
                                                        <input type="number" placeholder="YY" name="" class="form-control card-expiry-year" required> </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group mb-4"> <label data-toggle="tooltip" title="Three digit CV code on the back of your card">
                                                        <h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>
                                                    </label> <input type="text" required class="form-control card-cvc"> </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="card-footer">
                                                 <button type="submit"  class="subscribe btn btn-primary btn-block shadow-sm" onclick="return setAmount();">
                                                      Confirm Payment
                                                      </button>

                                                {{--  <button   type="submit" class="btn btn-primary btn-lg pformpress" onclick="return setAmount();">Place
                                                Order</button> --}}

                                </div>
                                </div>
                            </div>
                        </div>
                            </div> <!-- End -->


                            <!-- End -->
                        </div>
                    </div>


    </div>

</form>
    </div>


            {{-- <div class='form-row row'>
                <div class='col-md-12 error form-group hide'>
                    <div class='alert-danger alert'>Please correct the errors and try
                        again.</div>
                </div>
            </div> --}}

            {{-- <div class="row">
                <div class="pformclick">
                    <button class="btn btn-primary btn-lg pformpress" type="submit">Place
                        Order</button>

                </div>
            </div> --}}






        {{-- <div class="row">
            <div class="col-12 text-center text-secondary">
               <b>Forgot Your Password ?</b>
            </div>
            <div class="col-12 text-center login-btn-div">
                <button class="btn btn-lg btn-primary login-button">Login</button>
                <hr class="separater">
            </div>--}}


</section>







    </div>



@endsection

@section('app_jquery')
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script>


$(function(){
    var $form = $(".require-validation");

    $('form.require-validation').bind('submit', function(e) {
        var $form = $(".require-validation"),
            inputSelector = ['input[type=email]', 'input[type=password]',
                'input[type=text]', 'input[type=file]',
                'textarea'
            ].join(', '),
            $inputs = $form.find('.required').find(inputSelector),
            $errorMessage = $form.find('div.error'),
            valid = true;
        $errorMessage.addClass('hide');

        $('.has-error').removeClass('has-error');
        $inputs.each(function(i, el) {
            var $input = $(el);
            if ($input.val() === '') {
                $input.parent().addClass('has-error');
                $errorMessage.removeClass('hide');
                e.preventDefault();
            }
        });

        if (!$form.data('cc-on-file')) {
            e.preventDefault();
            Stripe.setPublishableKey($form.data('stripe-publishable-key'));
            Stripe.createToken({
                number: $('.card-number').val(),
                cvc: $('.card-cvc').val(),
                exp_month: $('.card-expiry-month').val(),
                exp_year: $('.card-expiry-year').val()
            }, stripeResponseHandler);
        }

    });

    function stripeResponseHandler(status, response) {
        if (response.error) {
            $('.error')
                .removeClass('hide')
                .find('.alert')
                .text(response.error.message);
        } else {
            /* token contains id, last4, and card type */
            var token = response['id'];

            $form.find('input[type=text]').empty();
            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            $form.get(0).submit();
        }
    }
})

function setAmount(){
    $('#amount').val($('#dollartext').val());
    // $('#points').val($('#points').val());
    return true;
}


function input_dollar(){

    var dollartext  =  $('#dollartext').val();
        var check_number = /^\d*$/.test(dollartext);

        console.log('==========pay=======',dollartext);



    if(!check_number || dollartext == ''){
        console.log('true');
        $('#dollartext').val("");
        $('#show_points').html("0 Coins");
        return;
    }
    console.log('false');
    dollartext = parseInt(dollartext);
    // var points = dollartext * 0.002;
    // var points = dollartext * (1/0.02);
  var points = dollartext * (1/ parseFloat('{!! $settings->value !!}') );
    console.log('points',points);
    $('#show_points').html(points + "Coins");



}
function openpaymentdiv() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
















    </script>


@endsection
{{--
     <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2">
                <label for="my-input text-secondary"><b class="text-secondary"></b></label>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                <div class="form-group">
                    <label for="my-input text-secondary"><b class="text-secondary">Points Show</b></label>
                </div>
                <div class="form-group">
                    <input id="show_points" class="form-control"  name="show_points"  >
                </div>
            </div>
            <div class="col"></div>
        </div> --}}