@extends('layouts.usermaster')

@section('title')
Voice Sync: Add Minutes
@endsection

@section('content.header.title')
Buy Minutes
@endsection

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


@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-6 text-center">
                <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 selection</h5>
                                @foreach ($minutes as $minute)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="minutesGroup"
                                        id="{{ $minute->id }}" value="{{ $minute->rate }}"
                                        mins="{{ $minute->minutes }}"
                                        checked>
                                    <label class="form-check-label" for="{{ $minute->id }}">
                                        ${{ number_format($minute->rate, 2) }} for
                                        {{ number_format($minute->minutes, 0) }} minutes
                                    </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>
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->

    <!-- Modal -->
    <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/buymins_min.js') }}"></script>
@endsection