@extends('shop/layout')
@section('shop')
<script src="https://js.stripe.com/v3/"></script>

<script src="/js/stripe-index.js" data-rel-js></script>
<link rel="stylesheet" type="text/css" href="/css/stripe-base.css" data-rel-css="" />
<link rel="stylesheet" type="text/css" href="/css/stripe-custom.css" data-rel-css="" />
<div class="container">
<div class="row">
    <div class="col-md-6">
        <table class="container">
            <tr class="row">
                <th class="col-md-2">&nbsp;</th>
                <th class="col-md-5">Product</th>
                <th class="col-md-3">Options</th>
                <th class="col-md-1">Qty</th>
                <th class="col-md-1">Price</th>
            </tr>

            @foreach($order->lines as $line)

            <tr class="row">
                <td class="col-md-2">
                   <img src="{{$line->product->picture}}"/>
                </td>
                <td class="col-md-5">
                    {{$line->product->title}}
                </td>
                <td class="col-md-3">
                    {{implode('/', $line->options)}}
                </td>
                <td class="col-md-1">
                    {{$line->qty}}
                </td>
                <td class="col-md-1">{{$line->price}}€</td>

            </tr>
            @endforeach
            <tr class="row">
                <td class="col-md-12 text-right font-weight-bold">Total : {{$order->total}}€</td>
            </tr>
        </table>
    </div>
    <div class="col-md-6 text-center">
        @auth

            <form method="post" class="payform" style="display: none">
                @csrf
                <input class="token" name="pi" value=""/>
            </form>


        <div class="container">
            <div class="row" style="padding: 0 20px;">
                <div class="col-md-12">
                    <main>
                        <section class="container-lg">
                            <div class="cell example example2" id="example-2">
                                <img src="/img/powered-by-stripe.png" style="max-width: 200px;"/>
                                <form class="stripeForm" data-pk="{{$stripePK}}" data-intent="{{$intent->client_secret}}">
                                    <div data-locale-reversible>
                                        <div class="row">
                                            <div class="field">
                                                <input id="example2-address" data-tid="elements_examples.form.address_placeholder" class="input empty" type="text" placeholder="185 Berry St" required="" autocomplete="address-line1">
                                                <label for="example2-address" data-tid="elements_examples.form.address_label">Address</label>
                                                <div class="baseline"></div>
                                            </div>
                                        </div>
                                        <div class="row" data-locale-reversible>
                                            <div class="field half-width">
                                                <input id="example2-city" data-tid="elements_examples.form.city_placeholder" class="input empty" type="text" placeholder="Paris" required="" autocomplete="address-level2">
                                                <label for="example2-city" data-tid="elements_examples.form.city_label">City</label>
                                                <div class="baseline"></div>
                                            </div>
                                            <div class="field quarter-width">
                                                <input id="example2-state" data-tid="elements_examples.form.state_placeholder" class="input empty" type="text" placeholder="France" required="" autocomplete="address-level1">
                                                <label for="example2-state" data-tid="elements_examples.form.state_label">State</label>
                                                <div class="baseline"></div>
                                            </div>
                                            <div class="field quarter-width">
                                                <input id="example2-zip" data-tid="elements_examples.form.postal_code_placeholder" class="input empty" type="text" placeholder="94107" required="" autocomplete="postal-code">
                                                <label for="example2-zip" data-tid="elements_examples.form.postal_code_label">ZIP</label>
                                                <div class="baseline"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="field">
                                            <div id="example2-card-number" class="input empty"></div>
                                            <label for="example2-card-number" data-tid="elements_examples.form.card_number_label">Card number</label>
                                            <div class="baseline"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="field half-width">
                                            <div id="example2-card-expiry" class="input empty"></div>
                                            <label for="example2-card-expiry" data-tid="elements_examples.form.card_expiry_label">Expiration</label>
                                            <div class="baseline"></div>
                                        </div>
                                        <div class="field half-width">
                                            <div id="example2-card-cvc" class="input empty"></div>
                                            <label for="example2-card-cvc" data-tid="elements_examples.form.card_cvc_label">CVC</label>
                                            <div class="baseline"></div>
                                        </div>
                                    </div>
                                    <button type="submit" data-tid="elements_examples.form.pay_button">Pay {{$order->total}}€</button>
                                    <div class="error" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
                                            <path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
                                            <path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
                                        </svg>
                                        <span class="message"></span></div>
                                </form>

                            </div>

                        </section>

                    </main>
                </div>
            </div>
        </div>

            <script src="/js/example2.js" data-rel-js></script>

        @else
            Please login to your account or create one<br/>
            <a class="btn btn-outline-danger" href="{{route('login')}}">Login</a> - <a class="btn btn-primary" href="{{route('register')}}">Register</a>
        @endauth
    </div>
</div>
</div>
@stop