@extends("client.layouts.app")
@section("title", __("client.checkout.title"))
@section("content")

<a href="{{ route("client.cart.index") }}" class="pn-back">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
    {{ __('client.cart.back_to_cart') }}
</a>

<div class="pn-page-header">
    <div>
        <h1 class="pn-page-title">{{ __('common.actions.checkout') }}</h1>
        <p class="pn-page-subtitle">{{ __('client.checkout.subtitle') }}</p>
    </div>
</div>

@if(session("error"))<div class="pn-alert pn-alert-error mb-16">{{ session("error") }}</div>@endif

<form method="POST" action="{{ route("client.cart.process") }}">
    @csrf
    <div class="pn-checkout-grid">
        <div>
            @auth
            <div class="pn-card mb-16">
                <div class="pn-card-header"><span class="pn-card-title">{{ __('client.checkout.contact_details') }}</span></div>
                <div class="pn-card-body">
                    <div class="form-grid-2">
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.first_name') }}<span class="req">*</span></label>
                            <input type="text" class="form-control" value="{{ auth()->user()?->first_name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.last_name') }}<span class="req">*</span></label>
                            <input type="text" class="form-control" value="{{ auth()->user()?->last_name }}" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ __('common.form.email_address') }}<span class="req">*</span></label>
                        <input type="email" class="form-control" value="{{ auth()->user()?->email }}" readonly>
                    </div>
                </div>
            </div>
            @else
            {{-- The visitor opens their account right here, mid-payment - not
                 on a register page three screens back with the cart lost on
                 the way. Same fields the register page asks for. --}}
            <div class="pn-card mb-16">
                <div class="pn-card-header" style="display:flex;align-items:center;justify-content:space-between;">
                    <span class="pn-card-title">{{ __('client.auth.create_your_account') }}</span>
                    <span style="font-size:12.5px;color:var(--muted)">
                        {{ __('client.auth.already_have_account') }}
                        <a class="link" href="{{ route('client.login') }}">{{ __('client.auth.sign_in') }}</a>
                    </span>
                </div>
                <div class="pn-card-body">
                    <div class="form-grid-2">
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.first_name') }}<span class="req">*</span></label>
                            <input type="text" name="first_name" class="form-control" value="{{ old('first_name') }}" required>
                            @error('first_name')<div class="text-danger text-sm">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.last_name') }}<span class="req">*</span></label>
                            <input type="text" name="last_name" class="form-control" value="{{ old('last_name') }}" required>
                            @error('last_name')<div class="text-danger text-sm">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ __('common.form.email_address') }}<span class="req">*</span></label>
                        <input type="email" name="email" class="form-control" value="{{ old('email') }}" required autocomplete="email">
                        @error('email')<div class="text-danger text-sm">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-grid-2">
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.password') }}<span class="req">*</span></label>
                            <input type="password" name="password" class="form-control" required autocomplete="new-password">
                            @error('password')<div class="text-danger text-sm">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ __('common.form.password_confirm') }}<span class="req">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control" required autocomplete="new-password">
                        </div>
                    </div>
                    @if(isset($orderFields) && $orderFields->isNotEmpty())
                    @include('client.partials.custom-fields', ['fields' => $orderFields, 'clientId' => null])
                    @endif
                    @include('client.partials.recaptcha', ['form' => 'signup'])
                    @error(\App\Services\RecaptchaService::FIELD)<div class="text-danger text-sm">{{ $message }}</div>@enderror
                </div>
            </div>
            @endauth

            {{-- Asked here when it is missing, and only then: an existing
                 customer who already has an address should not have to retype
                 it to buy a second service. A guest always sees it, because
                 the account is being opened on this page. --}}
            @if($needsBillingAddress)
            <div class="pn-card mb-16">
                <div class="pn-card-header">
                    <span class="pn-card-title">{{ __('common.form.billing_address') }}</span>
                </div>
                <div class="pn-card-body">
                    <p style="font-size:12.5px;color:var(--muted);margin:0 0 12px;">{{ __('common.form.billing_address_hint') }}</p>
                    @include('client.partials.billing-address-fields')
                </div>
            </div>
            @endif

            <div class="pn-card mb-16">
                <div class="pn-card-header"><span class="pn-card-title">{{ __('client.checkout.payment_method') }}</span></div>
                <div class="pn-card-body">
                    @foreach($paymentMethods as $value => $label)
                    <label class="pn-pay-option {{ $loop->first ? "selected" : "" }}" onclick="selectPay(this)">
                        <input type="radio" name="payment_method" value="{{ $value }}" {{ $loop->first ? "checked" : "" }} style="margin:0;accent-color:var(--primary)">
                        <div>
                            <div style="font-size:13.5px;font-weight:600">{{ $label }}</div>
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>

            <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm)">
                <input type="checkbox" name="terms" id="terms" value="1" required style="margin-top:2px;flex-shrink:0;accent-color:var(--primary)">
                <span style="font-size:13px;color:var(--muted)">
                    {{ __('client.auth.i_agree_to') }} <a href="#" class="link">{{ __('client.auth.terms_of_service') }}</a> {{ __('client.auth.and') }} <a href="#" class="link">{{ __('client.auth.privacy_policy') }}</a>.
                </span>
            </label>
            @guest
            <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:8px;font-size:13px;">
                    <input type="checkbox" name="marketing_emails" value="1" @checked(old('marketing_emails')) style="margin-top:2px;flex-shrink:0;">
                    <span>{{ __('client.marketing.signup_box') }}</span>
                </label>
            @endguest
        </div>

        <div>
            <div class="pn-card" style="position:sticky;top:80px">
                <div class="pn-card-header"><span class="pn-card-title">{{ __('client.cart.order_summary') }}</span></div>
                <div class="pn-card-body">
                    @foreach($totals["items"] as $item)
                    <div class="pn-order-row">
                        <span class="key" style="font-size:13px">{{ $item["product_name"] ?? __('client.cart.product_fallback') }}</span>
                        <span style="font-weight:600">{{ display_money_fmt($item["price"] ?? 0) }}</span>
                    </div>
                    @endforeach
                    @if(($totals["discount"] ?? 0) > 0)
                    <div class="pn-order-row" style="color:var(--success)">
                        <span>{{ __('client.cart.discount') }}</span><span>-{{ display_money_fmt($totals["discount"]) }}</span>
                    </div>
                    @endif
                    @if(($totals["tax"] ?? 0) > 0)
                    <div class="pn-order-row">
                        <span class="key">{{ __('client.cart.tax') }}</span><span>{{ display_money_fmt($totals["tax"]) }}</span>
                    </div>
                    @endif
                    <div class="pn-order-row">
                        <span>{{ __('client.cart.total') }}</span>
                        <span style="color:var(--primary);font-size:18px">{{ display_money_fmt($totals["total"]) }}</span>
                    </div>
                    <button type="submit" class="btn btn-accent" style="width:100%;justify-content:center;margin-top:20px;font-size:15px;padding:12px">
                        {{ __('client.checkout.place_order') }} &rarr;
                    </button>
                    <p class="text-muted text-sm" style="text-align:center;margin-top:10px">
                        {{ __('client.checkout.secure_checkout') }} &mdash; {{ display_money_fmt($totals["total"]) }}
                    </p>
                    @include('client.cart.partials.currency-note')
                </div>
            </div>
        </div>
    </div>
</form>

@section("scripts")
<script>
function selectPay(el) {
    document.querySelectorAll(".pn-pay-option").forEach(o => o.classList.remove("selected"));
    el.classList.add("selected");
}
</script>
@endsection

@endsection