@extends('layouts.app')

@section('title', __('Checkout'))

@section('content')
    <div class="container pt-4">@include('partials.how-it-works', ['key' => 'student.checkout'])</div>

@php
    $selectedMethod = old('payment_method', array_key_first($paymentMethods) ?? ($walletBalance >= $total ? 'wallet' : 'invoice'));
    $invoiceOpen = $selectedMethod === 'invoice' || $errors->hasAny(['billing_company', 'po_number']);
    $refundDays = (int) setting('refund_window_days', 14);
    $itemCount = $cartItems->count();
@endphp

<div class="container py-4 lf-checkout">
    <div class="lf-checkout-head">
        <div>
            <h1 class="h3 fw-bold">{{ __('Checkout') }}</h1>
            <p class="lf-checkout-sub">{{ trans_choice('{1} :count item in your order|[2,*] :count items in your order', $itemCount, ['count' => $itemCount]) }}</p>
        </div>
        <div class="d-flex flex-wrap align-items-center gap-3">
            <ol class="lf-checkout-steps" aria-label="{{ __('Checkout progress') }}">
                <li class="done"><span><i class="bi bi-check-lg"></i></span><em class="fst-normal">{{ __('Cart') }}</em></li>
                <li class="active" aria-current="step"><span>2</span><em class="fst-normal">{{ __('Payment') }}</em></li>
                <li><span>3</span><em class="fst-normal">{{ __('Start learning') }}</em></li>
            </ol>
            <span class="lf-secure-tag"><i class="bi bi-shield-lock-fill"></i> {{ __('Secure checkout') }}</span>
        </div>
    </div>

    @if(!empty($bump))
        {{-- One relevant extra at a discount, offered before payment. Its own
             form, because it must not submit the checkout. --}}
        @php($bumpPrice = round(max(0, (float) $bump->currentPrice() * (1 - max(0, min(90, (float) setting('order_bump_discount', 40))) / 100)), 2))
        <form action="{{ route('checkout.bump', $bump) }}" method="POST" class="lf-bump">
            @csrf
            <img src="{{ $bump->thumbnailUrl() }}" alt="">
            <div class="flex-grow-1 min-w-0">
                <span class="lf-bump-tag"><i class="bi bi-stars"></i> {{ __('One-time offer') }}</span>
                <div class="lf-bump-title text-truncate">{{ $bump->title }}</div>
                <div class="lf-bump-price">
                    <s>{{ money($bump->currentPrice()) }}</s>
                    <strong>{{ money($bumpPrice) }}</strong>
                    {{ __('if you add it now') }}
                </div>
            </div>
            <div class="lf-bump-actions">
                <button class="btn btn-warning"><i class="bi bi-plus-lg me-1"></i>{{ __('Add to my order') }}</button>
                {{-- Declining posts to a sibling form (below) so it never adds the course. --}}
                <button class="btn btn-link btn-sm lf-bump-dismiss" type="submit" form="lfBumpDismiss">{{ __('No thanks') }}</button>
            </div>
        </form>
        <form id="lfBumpDismiss" action="{{ route('checkout.bump.dismiss') }}" method="POST" class="d-none">@csrf</form>
    @endif

    <div class="row g-4">
        <div class="col-lg-7 lf-checkout-stack">
            {{-- The checkout form wraps only the payment picker; the summary's pay
                 button submits it via form="checkoutForm" so the coupon form can
                 live in the other column without nesting forms. --}}
            <form action="{{ route('checkout.process') }}" method="POST" id="checkoutForm" enctype="multipart/form-data">
                @csrf
                <div class="lf-checkout-card">
                    <div class="lf-cc-head">
                        <h2><i class="bi bi-credit-card-2-front"></i> {{ __('Payment Method') }}</h2>
                        <span class="lf-cc-hint d-none d-sm-inline">{{ __('Choose how you want to pay') }}</span>
                    </div>
                    <div class="lf-cc-body">
                        @if(!empty($paymentMethods))
                            <div class="lf-pay-group-title">{{ __('Pay online') }}</div>
                            <div class="lf-pay-grid">
                                @foreach($paymentMethods as $key => $method)
                                    <label class="lf-pay-option {{ $selectedMethod === $key ? 'is-selected' : '' }}">
                                        <input type="radio" name="payment_method" value="{{ $key }}" @checked($selectedMethod === $key) required>
                                        <span class="lf-pay-ico"><i class="bi {{ $method['icon'] ?: 'bi-credit-card' }}"></i></span>
                                        <span class="lf-pay-text"><span class="lf-pay-label">{{ $method['label'] }}</span></span>
                                        <span class="lf-pay-check" aria-hidden="true"></span>
                                    </label>
                                @endforeach
                            </div>
                        @endif

                        <div class="lf-pay-group-title">{{ __('Other ways to pay') }}</div>
                        <div class="lf-pay-grid">
                            <label class="lf-pay-option {{ $walletBalance >= $total ? '' : 'is-disabled' }} {{ $selectedMethod === 'wallet' ? 'is-selected' : '' }}">
                                <input type="radio" name="payment_method" value="wallet" @checked($selectedMethod === 'wallet') @disabled($walletBalance < $total) required>
                                <span class="lf-pay-ico"><i class="bi bi-wallet2"></i></span>
                                <span class="lf-pay-text">
                                    <span class="lf-pay-label">{{ __('Learnify balance') }}</span>
                                    <span class="lf-pay-sub">{{ __('Available: :amount', ['amount' => money($walletBalance)]) }}@if($walletBalance < $total) · {{ __('not enough for this order') }}@endif</span>
                                </span>
                                <span class="lf-pay-check" aria-hidden="true"></span>
                            </label>
                            <label class="lf-pay-option {{ $selectedMethod === 'invoice' ? 'is-selected' : '' }}">
                                <input type="radio" name="payment_method" value="invoice" @checked($selectedMethod === 'invoice') required>
                                <span class="lf-pay-ico"><i class="bi bi-file-earmark-text"></i></span>
                                <span class="lf-pay-text">
                                    <span class="lf-pay-label">{{ __('Purchase order / invoice') }}</span>
                                    <span class="lf-pay-sub">{{ __('For companies — pay on invoice terms after approval') }}</span>
                                </span>
                                <span class="lf-pay-check" aria-hidden="true"></span>
                            </label>
                        </div>

                        @if(isset($paymentMethods['manual']))
                            @include('checkout._manual-panel')
                        @endif

                        <div class="lf-pay-panel {{ $invoiceOpen ? 'show' : '' }}" id="invoicePanel">
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label class="form-label" for="billing_company">{{ __('Billing company') }}</label>
                                    <input type="text" id="billing_company" name="billing_company" value="{{ old('billing_company') }}" class="form-control @error('billing_company') is-invalid @enderror" placeholder="{{ __('Acme Ltd') }}">
                                    @error('billing_company')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" for="po_number">{{ __('PO number') }}</label>
                                    <input type="text" id="po_number" name="po_number" value="{{ old('po_number') }}" class="form-control font-monospace @error('po_number') is-invalid @enderror" placeholder="PO-2026-001">
                                    @error('po_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i>{{ __("We'll email the invoice to your account address; access opens once it's approved.") }}</div>
                        </div>

                        <div class="lf-trust-row">
                            <span><i class="bi bi-lock-fill"></i> {{ __('256-bit SSL encrypted') }}</span>
                            <span><i class="bi bi-shield-check"></i> {{ __('Card details never touch our servers') }}</span>
                            @if($refundDays > 0)
                                <span><i class="bi bi-arrow-counterclockwise"></i> {{ __(':days-day refund window', ['days' => $refundDays]) }}</span>
                            @endif
                        </div>
                        @if(config('app.demo'))
                            <p class="text-muted small mb-0 mt-3"><i class="bi bi-info-circle me-1"></i> {{ __('This is a demo checkout. No real charge will be made.') }}</p>
                        @endif
                    </div>
                </div>
            </form>

            <div class="lf-checkout-card">
                <div class="lf-cc-head">
                    <h2><i class="bi bi-bag-check"></i> {{ __('Your order') }}</h2>
                    <a href="{{ route('cart.index') }}" class="lf-cc-hint"><i class="bi bi-pencil me-1"></i>{{ __('Edit cart') }}</a>
                </div>
                <div class="lf-cc-body">
                    @foreach($cartItems as $item)
                        <div class="lf-order-item">
                            @include('partials.cart-item', ['item' => $item, 'size' => 72])
                            <span class="lf-order-price">{{ money($item->price) }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="lf-summary lf-checkout-stack">
                <div class="lf-checkout-card">
                    <div class="lf-cc-head">
                        <h2><i class="bi bi-receipt"></i> {{ __('Order Summary') }}</h2>
                    </div>
                    <div class="lf-cc-body">
                        <div class="lf-summary-row">
                            <span class="lf-sr-label">{{ __('Subtotal') }}</span>
                            <span>{{ money($subtotal) }}</span>
                        </div>
                        @if($discount > 0)
                            <div class="lf-summary-row is-discount">
                                <span class="lf-sr-label text-reset">{{ __('Discount') }} @if($coupon)<span class="lf-coupon-tag"><i class="bi bi-tag-fill"></i>{{ $coupon->code }}</span>@endif</span>
                                <span>-{{ money($discount) }}</span>
                            </div>
                        @endif
                        @if(($tax ?? 0) > 0)
                            <div class="lf-summary-row">
                                <span class="lf-sr-label">{{ $taxRule?->name ?: __('Tax') }} ({{ rtrim(rtrim(number_format((float) $taxRule?->rate, 2), '0'), '.') }}%)</span>
                                <span>{{ money($tax) }}</span>
                            </div>
                        @endif
                        <div class="lf-summary-total">
                            <div>
                                <span class="fw-bold">{{ __('Total') }}</span>
                                <small>{{ __('Billed once, in :currency', ['currency' => $currency->code ?? setting('currency', 'USD')]) }}</small>
                            </div>
                            <span class="lf-total-amt text-gradient">{{ money($total) }}</span>
                        </div>

                        @if(!$coupon)
                            <button type="button" class="lf-coupon-toggle" data-bs-toggle="collapse" data-bs-target="#couponForm" aria-expanded="false" aria-controls="couponForm">
                                <i class="bi bi-chevron-down"></i> {{ __('Have a promo code?') }}
                            </button>
                            <div class="collapse" id="couponForm">
                                <form action="{{ route('cart.coupon') }}" method="POST" class="lf-coupon-form input-group">
                                    @csrf
                                    <input type="text" name="code" class="form-control" placeholder="{{ __('Enter code') }}" aria-label="{{ __('Promo code') }}" autocomplete="off">
                                    <button class="btn btn-outline-primary">{{ __('Apply') }}</button>
                                </form>
                            </div>
                        @endif

                        <div class="d-none d-lg-block mt-4">
                            <button type="submit" form="checkoutForm" class="btn btn-primary w-100 lf-pay-btn">
                                <i class="bi bi-lock-fill"></i> {{ __('Complete Payment') }} · {{ money($total) }}
                            </button>
                        </div>
                        <p class="lf-summary-foot mb-0">
                            {{ __('By completing this purchase you agree to our') }}
                            @if(Route::has('pages.terms'))<a href="{{ route('pages.terms') }}">{{ __('terms') }}</a>@else{{ __('terms') }}@endif.
                            <a href="{{ route('cart.index') }}" class="d-block mt-2"><i class="bi bi-arrow-left me-1"></i>{{ __('Back to cart') }}</a>
                        </p>
                    </div>
                </div>

                <div class="lf-checkout-card">
                    <div class="lf-cc-body">
                        <div class="lf-perks">
                            <div class="lf-perk">
                                <i class="bi bi-play-circle-fill lf-soft-primary text-primary"></i>
                                <div><strong>{{ __('Instant access') }}</strong><span>{{ __('Your courses unlock the moment payment is confirmed.') }}</span></div>
                            </div>
                            <div class="lf-perk">
                                <i class="bi bi-phone-fill lf-soft-info"></i>
                                <div><strong>{{ __('Learn on any device') }}</strong><span>{{ __('Web, tablet and the mobile app — your progress stays in sync.') }}</span></div>
                            </div>
                            <div class="lf-perk">
                                <i class="bi bi-patch-check-fill lf-soft-success"></i>
                                <div><strong>{{ __('Certificate of completion') }}</strong><span>{{ __('Earn a shareable certificate when you finish a course.') }}</span></div>
                            </div>
                            @if($refundDays > 0)
                                <div class="lf-perk">
                                    <i class="bi bi-arrow-counterclockwise lf-soft-warning"></i>
                                    <div><strong>{{ __(':days-day money-back guarantee', ['days' => $refundDays]) }}</strong><span>{{ __("Not the right fit? Request a refund from your order history.") }}</span></div>
                                </div>
                            @endif
                        </div>
                        <div class="lf-help-line">
                            <i class="bi bi-life-preserver"></i>
                            <span>{{ __('Questions before you pay?') }}
                                @if(Route::has('pages.faq'))<a href="{{ route('pages.faq') }}">{{ __('Read the FAQ') }}</a>@endif
                                @if(Route::has('support.index')) · <a href="{{ route('support.index') }}">{{ __('Contact support') }}</a>@endif
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Phones: the summary card scrolls away, so the total + pay button ride along the bottom. --}}
    <div class="lf-checkout-bar d-lg-none">
        <div class="lf-bar-total"><small>{{ __('Total') }}</small><strong>{{ money($total) }}</strong></div>
        <button type="submit" form="checkoutForm" class="btn btn-primary lf-pay-btn flex-grow-1"><i class="bi bi-lock-fill"></i> {{ __('Complete Payment') }}</button>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        (function () {
            var form = document.getElementById('checkoutForm');
            if (!form) return;
            var panel = document.getElementById('invoicePanel');
            var manualPanel = document.getElementById('manualPanel');
            var options = form.querySelectorAll('.lf-pay-option');

            function sync() {
                var chosen = form.querySelector('input[name="payment_method"]:checked');
                options.forEach(function (o) { o.classList.toggle('is-selected', !!chosen && o.contains(chosen)); });
                if (panel) panel.classList.toggle('show', !!chosen && chosen.value === 'invoice');
                if (manualPanel) manualPanel.classList.toggle('show', !!chosen && chosen.value === 'manual');
            }

            form.addEventListener('change', function (e) {
                if (e.target.name === 'payment_method') sync();
            });
            sync();
        })();
    </script>
@endpush

@push('analytics')
    <script>
        if (window.lfTrack) lfTrack('begin_checkout', {
            value: {{ (float) ($total ?? 0) }},
            currency: '{{ $currency->code ?? setting('currency', 'USD') }}',
            items: @json(($cartItems ?? collect())->map(fn ($i) => ['item_id' => (string) ($i->course_id ?: $i->bundle_id), 'price' => (float) $i->price])->values())
        });
    </script>
@endpush