@extends('layouts.app')
@section('title', __('Pay order'))

@section('content')
@php
    $canPay = ! empty($paymentMethods) || $walletBalance >= $order->total;
    $selectedMethod = old('payment_method', array_key_first($paymentMethods) ?? ($walletBalance >= $order->total ? 'wallet' : null));
@endphp
<div class="container py-5" style="max-width:680px">
    <div class="lf-checkout-head">
        <div>
            <h1 class="h3 fw-bold">{{ __('Complete your payment') }}</h1>
            <p class="lf-checkout-sub">{{ __('Order') }} <code>{{ $order->order_no }}</code></p>
        </div>
        <span class="lf-secure-tag"><i class="bi bi-shield-lock-fill"></i> {{ __('Secure checkout') }}</span>
    </div>

    <form method="POST" action="{{ route('checkout.order.pay', $order) }}" 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 $code => $method)
                            <label class="lf-pay-option {{ $selectedMethod === $code ? 'is-selected' : '' }}">
                                <input type="radio" name="payment_method" value="{{ $code }}" @checked($selectedMethod === $code) 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>
                @else
                    <div class="alert alert-warning mb-0">{{ __('No payment gateway is enabled. Please contact support.') }}</div>
                @endif

                <div class="lf-pay-group-title">{{ __('Other ways to pay') }}</div>
                <div class="lf-pay-grid">
                    <label class="lf-pay-option {{ $walletBalance >= $order->total ? '' : 'is-disabled' }} {{ $selectedMethod === 'wallet' ? 'is-selected' : '' }}">
                        <input type="radio" name="payment_method" value="wallet" @checked($selectedMethod === 'wallet') @disabled($walletBalance < $order->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 < $order->total) · {{ __('not enough for this order') }}@endif</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-summary-total">
                    <span class="fw-bold">{{ __('Amount due') }}</span>
                    <span class="lf-total-amt text-gradient">{{ money($order->total) }}</span>
                </div>

                <button class="btn btn-primary w-100 lf-pay-btn mt-4" @disabled(! $canPay)>
                    <i class="bi bi-lock-fill"></i> {{ __('Pay now') }} · {{ money($order->total) }}
                </button>
                <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>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
    <script>
        (function () {
            var form = document.getElementById('checkoutForm');
            if (!form) return;
            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)); });
                var manualPanel = document.getElementById('manualPanel');
                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