@extends('layouts.usermaster')

@section('title')
Voice Sync: Upgrade Account
@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('css/mysqpaymentform.css') }}">
@endsection

@section('content.header.title')
Upgrade Account
@endsection

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-6 text-center">
                @if (count($accounts) > 0)
                <div class="alert alert-danger" role="alert">
                    Please note that unused minutes you did not purchase will not transfer once you
                    upgrade. Your purchased minutes will be transfered.
                </div>
                <div class="accordion" id="minutesPanel">
                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h2 class="mb-0">
                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapseOne" aria-expanded="true"
                                    aria-controls="collapseOne">
                                    1) Choose Plan
                                </button>
                            </h2>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                            data-parent="#minutesPanel">
                            <div class="card-body">
                                <h5>Please make your upgrade selection
                                    <strong></strong></h5>
                                @foreach ($accounts as $account)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="minutesGroup"
                                        id="{{ $account->id }}" value="{{ $account->upgrade_rate }}"
                                        label="{{ $account->description }}" checked>
                                    <label class="form-check-label" for="{{ $account->id }}">
                                        {{ $account->description }} :
                                        ${{ number_format($account->upgrade_rate, 2) }}
                                    </label>
                                </div>
                                @endforeach
                            </div>
                            <div class="card-footer">
                                <a href="#" class="btn btn-primary"
                                    id="continue-button">Continue</a>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <h6 class="mb-0">
                                2) Select Payment
                            </h6>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                            data-parent="#minutesPanel">
                            <div class="card-body">
                                <div class="alert alert-info" role="alert">
                                    <h5 class="card-title" id="pymt_amt"></h5>
                                </div>
                                <div id="form-group">
                                    <div id="sq-card-number"></div>
                                    <div class="third" id="sq-expiration-date"></div>
                                    <div class="third" id="sq-cvv"></div>
                                    <div class="third" id="sq-postal-code"></div>
                                    <button id="sq-creditcard" class="btn btn-primary btn-lg"
                                        type="button"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @else
                <div class="card">
                    <div class="card-body">
                        <h1 class="display-4">Thank you!</h1>
                        <p class="lead">You currently have the highest level of membership
                            ({{ $user->account_type }}).
                            You do not need to upgrade</p>
                        <p></p>
                    </div>
                </div>
                @endif
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
    <div class="modal fade" id="modalProcessing" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Processing payment . . .
                    </h5>
                </div>
                <div class="modal-body">
                    Please wait while we process your payment. DO NOT press the back button on your
                    browser.
                </div>
            </div>
        </div>
    </div>
</section>
@endsection('content')

@section('head_script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
@endsection


@section('page_script')
<script src="{{ asset('js/upgrade_min.js') }}"></script>
@endsection