@extends('layouts.app')

@section('title', 'Payment | healthcareers.app')
@section('robots', 'noindex, nofollow')

@php $sponsor = $order->kind === 'sponsor'; @endphp

@section('content')
    <div class="pay-layout">
        <div class="pay-main">
            <div>
                <h1>Payment</h1>
                <p class="lead">Pay by card, Apple Pay or Google Pay. {{ $sponsor ? 'The hold, and the charge once approved, show' : 'The charge shows' }} on your card statement as <strong class="nowrap">CLEARED* HEALTHCAREERS</strong>.</p>
            </div>

            <details class="sumbar">
                <summary><span>Order #{{ $order->id }}</span><span class="t"><span data-total>{{ $order->dollars($order->amount_cents - (int) $order->credit_cents) }}</span> ▾</span></summary>
                <div class="card order">@include('checkout._summary')</div>
            </details>

            <p class="muted" id="pay-loading">Loading the payment form…</p>
            <noscript><div class="notice bad">The payment form needs JavaScript switched on.</div></noscript>

            <form class="payform" id="payform" hidden novalidate
                  data-key="{{ $publishableKey }}" data-secret="{{ $clientSecret }}" data-done="{{ $doneUrl }}"
                  data-details="{{ route('checkout.details', $order) }}" data-csrf="{{ csrf_token() }}" data-billing="{{ $billingAddress ? '1' : '0' }}"
                  data-pay-label="{{ $sponsor ? 'Place a hold of' : 'Pay' }}">
                <section id="express-wrap" hidden aria-label="Express checkout">
                    <div class="eyebrow">Express checkout</div>
                    <div id="express-checkout"></div>
                </section>
                <div class="or" id="or-line" hidden>or pay by card</div>

                <p class="small muted" style="margin:0">Receipt goes to <strong>{{ $order->email }}</strong></p>

                @if ($billingAddress)
                    <div class="field"><span class="label-like">Billing address</span><div id="billing-address"></div></div>
                @endif

                <div id="payment-element"></div>

                <details class="extra" id="billing-extra" @if ($order->bill_company || $order->bill_po || $order->bill_address) open @endif>
                    <summary>Company name and PO number for the receipt <span class="muted">(optional)</span></summary>
                    <div class="in">
                        <div class="field"><label for="bill-company">Company name</label><input id="bill-company" maxlength="120" autocomplete="organization" value="{{ $order->bill_company }}"></div>
                        @unless ($billingAddress)
                            <div class="field"><label for="bill-address">Billing address</label><input id="bill-address" maxlength="255" autocomplete="street-address" placeholder="Street, city, state and ZIP" value="{{ $order->bill_address }}"></div>
                        @endunless
                        <div class="field"><label for="bill-po">PO number or reference</label><input id="bill-po" maxlength="60" value="{{ $order->bill_po }}"></div>
                        <p class="small muted" style="margin:0">Shown on the receipt. You can change them later in My account.</p>
                    </div>
                </details>

                <div class="notice bad" id="pay-error" role="alert" hidden></div>

                <div class="payrow">
                    <button class="btn accent paybtn" id="pay-btn" type="submit" disabled>
                        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M4 7V5a4 4 0 1 1 8 0v2h.5A1.5 1.5 0 0 1 14 8.5v6A1.5 1.5 0 0 1 12.5 16h-9A1.5 1.5 0 0 1 2 14.5v-6A1.5 1.5 0 0 1 3.5 7H4Zm2 0h4V5a2 2 0 1 0-4 0v2Z"/></svg>
                        <span id="pay-label">{{ $sponsor ? 'Place a hold of' : 'Pay' }} <span data-total>{{ $order->dollars($order->amount_cents - (int) $order->credit_cents) }}</span></span>
                    </button>
                    <p class="secure small muted">
                        <svg viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 0 1.5 2.5v5c0 4 2.8 7.4 6.5 8.5 3.7-1.1 6.5-4.5 6.5-8.5v-5L8 0Zm-1 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4Z"/></svg>
                        <span>Payments are processed securely by Stripe for Cleared Systems, LLC, which operates healthcareers.app. Card details go straight to Stripe and are never stored on healthcareers.app.</span>
                    </p>
                    <p class="small" style="margin:0"><a href="{{ route('checkout.cancelled', $order) }}">Cancel payment</a></p>
                </div>
            </form>
        </div>
        <aside class="card order pay-side" aria-label="Order summary">@include('checkout._summary')</aside>
    </div>
@endsection

@push('scripts')
    {{-- Stripe.js must load from Stripe's own site (card security rules). It runs only on this page. --}}
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
    <script>
      (function () {
        var form = document.getElementById('payform'), loading = document.getElementById('pay-loading');
        var errBox = document.getElementById('pay-error'), btn = document.getElementById('pay-btn');
        var busy = false, ready = false, actions = null, canConfirm = false;
        function fail(msg) { loading.textContent = msg || 'The payment form could not load. Please refresh the page.'; loading.classList.add('notice', 'bad'); }
        function showError(msg) { errBox.textContent = msg || 'The payment didn\'t go through. Nothing was charged. Please try again.'; errBox.hidden = false; errBox.scrollIntoView({ block: 'center', behavior: 'smooth' }); }
        function setBusy(on) { busy = on; btn.disabled = on || !canConfirm; btn.classList.toggle('is-busy', on); }
        if (!window.Stripe) { fail(); return; }

        // Stripe's fields take the site's own colors, type and corners (light or dark).
        var css = getComputedStyle(document.documentElement);
        function token(name, fallback) { return (css.getPropertyValue(name) || '').trim() || fallback; }
        var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        var appearance = {
          theme: dark ? 'night' : 'stripe',
          variables: {
            colorPrimary: token('--brand', '#2e2a7b'), colorBackground: token('--surface', '#ffffff'), colorText: token('--ink', '#16142e'),
            colorTextSecondary: token('--ink-3', '#63607c'), colorDanger: token('--bad', '#b3261e'),
            fontFamily: '"Public Sans", "Segoe UI", system-ui, sans-serif', fontSizeBase: '16px', borderRadius: '6px', spacingUnit: '4px'
          },
          rules: {
            '.Input': { borderColor: token('--line-strong', '#c5c3d6'), boxShadow: 'none', padding: '11px 12px' },
            '.Input:focus': { borderColor: token('--brand', '#2e2a7b'), boxShadow: '0 0 0 2px ' + token('--brand-soft', '#e7e6f5') },
            '.Label': { fontWeight: '600', fontSize: '14px', color: token('--ink', '#16142e') },
            '.Tab': { borderColor: token('--line-strong', '#c5c3d6'), boxShadow: 'none' }
          }
        };
        var stripe = Stripe(form.getAttribute('data-key'));
        var checkout;
        try {
          checkout = stripe.initCheckoutElementsSdk({
            clientSecret: form.getAttribute('data-secret'),
            elementsOptions: { appearance: appearance, loader: 'auto', fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap' }] }
          });
        } catch (e) { fail(); return; }

        // Totals come from the Checkout Session itself (tax included, when it applies).
        function render(session) {
          if (!session || !session.total) return;
          var total = session.total.total && session.total.total.amount;
          if (total) document.querySelectorAll('[data-total]').forEach(function (el) { el.textContent = total; });
          var tax = session.total.taxExclusive;
          if (tax && tax.amount) document.querySelectorAll('[data-tax]').forEach(function (el) { el.textContent = tax.amount; });
          canConfirm = !!session.canConfirm;
          btn.disabled = busy || !canConfirm;
        }
        checkout.on('change', render);

        var express = checkout.createExpressCheckoutElement({ buttonHeight: 48, buttonType: { applePay: 'plain', googlePay: 'plain' } });
        express.mount('#express-checkout');
        express.on('availablepaymentmethodschange', function (e) {
          var pm = e && e.paymentMethods, any = !!pm && Object.keys(pm).some(function (k) { return pm[k]; });
          document.getElementById('express-wrap').hidden = !any;
          document.getElementById('or-line').hidden = !any;
        });
        if (form.getAttribute('data-billing') === '1') checkout.createBillingAddressElement().mount('#billing-address');
        checkout.createPaymentElement({ layout: 'tabs' }).mount('#payment-element');

        // The optional receipt details are saved on our side first (never card data).
        function saveDetails() {
          var val = function (id) { var el = document.getElementById(id); return el ? el.value : ''; };
          return fetch(form.getAttribute('data-details'), {
            method: 'POST', credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': form.getAttribute('data-csrf') },
            body: JSON.stringify({ company: val('bill-company'), address: val('bill-address'), po: val('bill-po') })
          }).catch(function () { /* optional; the payment goes ahead */ });
        }
        function finish(result) {
          if (result && result.type === 'error') { setBusy(false); showError(result.error && result.error.message); return; }
          window.location.href = form.getAttribute('data-done');
        }
        function pay(opts) {
          if (!actions || busy) {
            // A wallet sheet waiting on us while a card payment runs: close it rather than leave it spinning.
            if (opts && opts.expressCheckoutConfirmEvent && opts.expressCheckoutConfirmEvent.paymentFailed) opts.expressCheckoutConfirmEvent.paymentFailed({ reason: 'fail' });
            return;
          }
          errBox.hidden = true;
          setBusy(true);
          var doConfirm = function () { return actions.confirm(Object.assign({ redirect: 'if_required' }, opts || {})); };
          // Apple Pay and Google Pay are waiting on their sheet: confirm at once, save the receipt details alongside.
          var run = opts && opts.expressCheckoutConfirmEvent ? (saveDetails(), doConfirm()) : saveDetails().then(doConfirm);
          run.then(finish, function () { setBusy(false); showError(); });
        }

        checkout.loadActions().then(function (r) {
          if (!r || r.type !== 'success') { fail(r && r.error && r.error.message); return; }
          actions = r.actions;
          render(actions.getSession());
          loading.hidden = true;
          form.hidden = false;
          ready = true;
          express.on('confirm', function (event) { pay({ expressCheckoutConfirmEvent: event }); });
        }, function () { fail(); });

        form.addEventListener('submit', function (e) { e.preventDefault(); if (ready) pay(); });
      })();
    </script>
@endpush

@push('analytics')
{!! \App\Support\Analytics::script([['begin_checkout', \Illuminate\Support\Arr::except($order->analytics(), ['transaction_id', 'tax'])]]) !!}
@endpush