@extends('template.master')

@section('page_styles')
    <style>
        .tox-tinymce-aux {display:none!important;}
    </style>
@stop

@section('content')
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-02">Subscription Plan</h2>

                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="row flex-row">
            <div class="col-xl-12">

                <div class="row">
                    <div class="col-xl-12">
                        <div class="widget has-shadow">
                            <!-- Begin Widget Header -->
                            <div class="widget-header bordered no-actions d-flex align-items-center">
                                <h2>Select Plan</h2>
                            </div>
                            <!-- End Widget Header -->
                            <!-- Begin Widget Body -->

                            <div class="widget-body">
                                <div class="row flex-row justify-content-center">
                                    <div class="col-xl-10">
                                        <div id="rootwizard">
                                            <div class="step-container">
                                                <div class="step-wizard">
                                                    <div class="progress">
                                                        <div class="progressbar"></div>
                                                    </div>
                                                    <ul>
                                                        <li>
                                                            <a href="#tab1" data-toggle="tab">
                                                                <span class="step">1</span>
                                                                <span class="title">Choose Plan</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#tab2" data-toggle="tab">
                                                                <span class="step">2</span>
                                                                <span class="title">Checkout</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="tab-content">
                                                <div class="tab-pane" id="tab1">
                                                    <div class="section-title mt-5 mb-5">
                                                        <h4>Subscription Plan</h4>
                                                    </div>
                                                    
                                                    <div class="form-group row mb-3">
                                                        @foreach($plans as $plan)
                                                            <div class="col-xl-3 mb-3 no-padding">
                                                                <div class="pricing-tables-02 @if($plan->id == 2 || $plan->id == 4) dark @elseif($plan->id == 3) purple @endif pricing-wrapper">
                                                                    <div class="inner-container">
                                                                        <div class="pricing-image">
                                                                            <img src="assets/img/icone-01.png" alt="...">
                                                                        </div>
                                                                        <div class="title">{!! str_replace(' ', '<br/>', $plan->name) !!}</div>
                                                                        <div class="main-number">{{ $plan->cost }}</div>
                                                                        <div class="pricing-list">{{ $plan->description }}</div>
                                                                    </div>
                                                                    @if(!$plan->is_subscribed)
                                                                        <a class="btn btn-lg btn-shadow" href="javascript: purchase({{ $plan->id }}, '{{ $plan->name }}')">Purchase</a>
                                                                    @else
                                                                        <a class="btn btn-lg btn-success" href="#">Subscribed</a>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                    <ul class="pager wizard text-right">
                                                        <li class="next d-inline-block">
                                                            <a href="javascript:;" class="btn btn-gradient-01">Next</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="tab-pane" id="tab2">
                                                    <form id="checkout-form" method="POST" action="{{ route('payment.store') }}">
                                                        @csrf
                                                        <input type="hidden" id="plan-hidden" name="plan">
                                                        <div class="section-title mt-5 mb-5">
                                                            <h4>Billing Information</h4>
                                                        </div>

                                                        <div class="form-group row mb-12">
                                                            <div class="col-sm-3 form-control-label d-flex align-items-center">Plan</div>
                                                            <div class="col-sm-8 form-control-plaintext" id="plan"></div>
                                                        </div>

                                                        <div class="form-group row mb-3">
                                                            <div class="col-xl-12 mb-3">
                                                                <label class="form-control-label">Payment Gateway</label>
                                                                <select name="gateway" class="custom-select form-control" onchange="billing('gateway', this)">
                                                                    @foreach($payment_gateways as $key => $payment_gateway)
                                                                        <option value="{{ $payment_gateway->name }}" @if($key == 0) selected="selected" @endif >{{ $payment_gateway->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>



                                                        <div class="stripe-div gateway-div form-group row mb-12">
                                                            <div class="col-xl-12 mb-12">
                                                                <div class="card-body">
                                                                    <div id="card-element">
                                                                    <!-- A Stripe Element will be inserted here. -->
                                                                    </div>
                                                                    <!-- Used to display form errors. -->
                                                                    <div id="card-errors" role="alert"></div>
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div class="other-div gateway-div form-group row mb-3" style="display: none">
                                                            <div class="col-xl-12 mb-3">
                                                                <label class="form-control-label">Card Number</label>
                                                                <input name="Number" type="number" min=1 max=9999999999999999 onfocus="billing('card_number', this)" class="form-control">
                                                            </div>
                                                        </div>

                                                        <div class="gateway-div form-group row mb-3" style="display: none">
                                                            <div class="col-xl-4 mb-3">
                                                                <label class="form-control-label">Exp Month<span class="text-danger ml-2">*</span></label>
                                                                <select name="ExpiryMonth" class="custom-select form-control" onchange="billing('card_month', this)">
                                                                    @for($i=1; $i<=12; $i++)
                                                                        <option value="{{ $i }}">{{ str_pad($i, 2, "0", STR_PAD_LEFT) }}</option>
                                                                    @endfor
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-4 mb-3">
                                                                <label class="form-control-label">Exp Year<span class="text-danger ml-2">*</span></label>
                                                                <select name="ExpiryYear" class="custom-select form-control" onchange="billing('card_year', this)">
                                                                    @for($i=2019; $i<=2050; $i++)
                                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                                    @endfor
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-4">
                                                                <label class="form-control-label">CVV<span class="text-danger ml-2">*</span></label>
                                                                <input name="CVN" type="number" min=1 max=9999 onfocus="billing('card_cvv', this)"class="form-control">
                                                            </div>
                                                        </div>

                                                        <div class="form-group row mb-5">
                                                            <div class="col-xl-12">
                                                                <div class="styled-checkbox">
                                                                    <input type="checkbox" name="checkbox" id="agree">
                                                                    <label for="agree">I Accept <a href="#">Terms and Conditions</a></label>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </form>
                                                    <ul class="pager wizard text-right">
                                                        <li class="previous d-inline-block">
                                                            <a href="javascript:void(0)" class="btn btn-secondary ripple">Previous</a>
                                                        </li>
                                                        <li class="next d-inline-block">
                                                            <a href="javascript:void(0)" onClick="javascript: submit()" class="finish btn btn-gradient-01" data-toggle="modal">Finish</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Widget Body -->
                        </div>
                    </div>
                </div>

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

    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="https://js.stripe.com/v3/"></script>

<script type="text/javascript">

    var stripe = Stripe('{{ env("STRIPE_KEY") }}');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '18px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    // Handle form submission.
    var form = document.getElementById('checkout-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();

      stripe.createToken(card).then(function(result) {
        if (result.error) {
          // Inform the user if there was an error.
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });

    // Submit the form with the token ID.
    function stripeTokenHandler(token) {
      // Insert the token ID into the form so it gets submitted to the server
      var form = document.getElementById('checkout-form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);

      // Submit the form
      form.submit();
    }

    $(document).ready(function() {
       


    });

    // Choose Plan
    function purchase(id, name)
    {
        $('#plan').text(name + ' Subscription');
        $('#plan-hidden').val(id);
    }

    // Show Billing Fields
    function billing(type, event)
    {
        $('#'+type).text(event.value);
        $('.gateway-div').removeAttr("style").hide();
        $('.'+event.value+'-div').show();
    }

    // Submit for Payment Processing
    function submit()
    {
        if($('#agree:checked').length > 0)
        {
            $('#checkout-form').submit();
        }
        else
        {
            alert('Terms and Conditions required');
        }
    }
  </script>
@stop