@extends('layouts.app')

@section('title', ($mode === 'setup' ? 'Update card' : 'Start Job Sync').' | '.$org->display_name.' | healthcareers.app')
@section('robots', 'noindex, nofollow')

@section('content')
    <div class="pay-layout">
        <div class="pay-main">
            <div>
                <div class="eyebrow">{{ $org->display_name }}</div>
                @if ($mode === 'setup')
                    <h1>Update your card</h1>
                    <p class="lead">Job Sync is charged to this card from now on. If a bill is overdue, it's paid with it straight away.</p>
                @else
                    <h1>Start Job Sync</h1>
                    <p class="lead">Pay by card, Apple Pay or Google Pay. Billed monthly; cancel any time and the plan runs to the end of the month you paid for. The charge shows on your card statement as <strong class="nowrap">CLEARED* HEALTHCAREERS</strong>.</p>
                @endif
            </div>

            <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 }}">
                @if ($mode !== 'setup')
                    <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>
                @endif

                <p class="small muted" style="margin:0">Receipts go to <strong>{{ $email }}</strong>, and are listed in My account → Payments and receipts.</p>
                @if (config('services.stripe.automatic_tax') && $mode !== 'setup')
                    <div class="field"><span class="label-like">Billing address</span><div id="billing-address"></div></div>
                @endif

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

                <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>@if ($mode === 'setup')Save card @else Subscribe · <span data-total>{{ $offer ? \App\Support\Pricing::money($offer['pay_cents']) : '' }}</span> @endif</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('organization.sync', $org) }}">Cancel</a></p>
                </div>
            </form>
        </div>
        @if ($offer)
            <aside class="card order pay-side" aria-label="Plan">
                <h2 class="h3">{{ $offer['name'] }}</h2>
                <p class="small">{{ $offer['summary'] }}</p>
                <p><strong>{{ $offer['label'] }}</strong></p>
                @if ($offer['launch'])<p class="small muted">Launch price for Charter and Founding employers, locked for {{ $offer['months'] }} months from today.</p>@endif
                <p class="small muted">Charged today, then on the same day each month. Change plan or cancel on your Job Sync page.</p>
            </aside>
        @endif
    </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 || 'That 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; }

        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; }

        // The amount due today comes from the Checkout Session itself (launch discount and tax included).
        function render(session) {
          if (!session) return;
          var total = session.total && session.total.total && session.total.total.amount;
          if (total) document.querySelectorAll('[data-total]').forEach(function (el) { el.textContent = total; });
          canConfirm = !!session.canConfirm;
          btn.disabled = busy || !canConfirm;
        }
        checkout.on('change', render);

        var express = null;
        if (document.getElementById('express-checkout')) {
          express = checkout.createExpressCheckoutElement({ buttonHeight: 48, buttonType: { applePay: 'subscribe', googlePay: 'subscribe' } });
          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 (document.getElementById('billing-address')) checkout.createBillingAddressElement().mount('#billing-address');
        checkout.createPaymentElement({ layout: 'tabs' }).mount('#payment-element');

        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) {
            if (opts && opts.expressCheckoutConfirmEvent && opts.expressCheckoutConfirmEvent.paymentFailed) opts.expressCheckoutConfirmEvent.paymentFailed({ reason: 'fail' });
            return;
          }
          errBox.hidden = true;
          setBusy(true);
          actions.confirm(Object.assign({ redirect: 'if_required' }, opts || {})).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;
          if (express) express.on('confirm', function (event) { pay({ expressCheckoutConfirmEvent: event }); });
        }, function () { fail(); });

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