@extends('b2bportal::storefront.layouts.app')

@section('title', 'Checkout — ' . ($business->name ?? 'B2B Portal'))

@section('content')
<h1 class="text-2xl font-bold text-ink-900 mb-6">Checkout</h1>

<div x-data="checkoutWizard()" x-init="init()" x-cloak>
    <template x-if="loading">
        <div class="text-ink-500 text-center py-8">Loading…</div>
    </template>

    <template x-if="!loading && cartEmpty">
        <div class="border border-dashed border-ink-200 rounded p-8 text-center">
            <p class="text-lg">Your cart is empty.</p>
            <a href="{{ url('/b2bportal/shop/'.$apiToken) }}" class="b2b-btn mt-4">← Browse products</a>
        </div>
    </template>

    <template x-if="!loading && !cartEmpty">
        <div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8">
            <div class="space-y-6">
                {{-- STEP 1: OTP LOGIN --}}
                <section class="border border-ink-100 rounded p-5">
                    <header class="flex items-center gap-2">
                        <span class="rounded-full w-6 h-6 flex items-center justify-center text-white text-xs"
                              :class="step >= 1 ? 'bg-brand-600' : 'bg-ink-300'">1</span>
                        <h2 class="font-semibold">Verify WhatsApp number</h2>
                        <template x-if="authenticated">
                            <span class="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5 ml-auto">✓ verified · <span x-text="customer.phone"></span></span>
                        </template>
                    </header>

                    <template x-if="!authenticated">
                        <div class="mt-4 space-y-3">
                            <template x-if="!otpSent">
                                <div class="flex gap-2 items-end">
                                    <label class="grow">
                                        <span class="block text-xs uppercase text-ink-500">WhatsApp phone</span>
                                        <input type="tel" x-model="phone" class="w-full rounded border-ink-200 mt-1"
                                            placeholder="10-digit number">
                                    </label>
                                    <button type="button" class="b2b-btn" x-on:click="sendOtp" :disabled="busy">
                                        <span x-text="busy ? 'Sending…' : 'Send OTP'"></span>
                                    </button>
                                </div>
                            </template>
                            <template x-if="otpSent && !authenticated">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <label>
                                        <span class="block text-xs uppercase text-ink-500">Enter 6-digit code</span>
                                        <input type="text" x-model="code" maxlength="6" class="w-full rounded border-ink-200 mt-1 tracking-widest text-center">
                                    </label>
                                    <label>
                                        <span class="block text-xs uppercase text-ink-500">Your name</span>
                                        <input type="text" x-model="name" class="w-full rounded border-ink-200 mt-1">
                                    </label>
                                    <label>
                                        <span class="block text-xs uppercase text-ink-500">Business name (optional)</span>
                                        <input type="text" x-model="businessName" class="w-full rounded border-ink-200 mt-1">
                                    </label>
                                    <label>
                                        <span class="block text-xs uppercase text-ink-500">GSTIN (optional)</span>
                                        <input type="text" x-model="gstin" class="w-full rounded border-ink-200 mt-1">
                                    </label>
                                    <div class="md:col-span-2 flex gap-2">
                                        <button type="button" class="b2b-btn" x-on:click="verifyOtp" :disabled="busy">
                                            <span x-text="busy ? 'Verifying…' : 'Verify &amp; continue'"></span>
                                        </button>
                                        <button type="button" class="b2b-btn-outline" x-on:click="otpSent = false; code = ''">Change number</button>
                                    </div>
                                </div>
                            </template>
                            <p class="text-xs text-ink-500">By continuing you agree to receive order updates on WhatsApp.</p>
                        </div>
                    </template>
                </section>

                {{-- STEP 2: ADDRESS --}}
                <section class="border border-ink-100 rounded p-5" :class="!authenticated ? 'opacity-50 pointer-events-none' : ''">
                    <header class="flex items-center gap-2">
                        <span class="rounded-full w-6 h-6 flex items-center justify-center text-white text-xs"
                              :class="step >= 2 ? 'bg-brand-600' : 'bg-ink-300'">2</span>
                        <h2 class="font-semibold">Shipping address</h2>
                    </header>
                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
                        <label>
                            <span class="block text-xs uppercase text-ink-500">Contact name</span>
                            <input type="text" x-model="address.name" class="w-full rounded border-ink-200 mt-1">
                        </label>
                        <label>
                            <span class="block text-xs uppercase text-ink-500">Phone</span>
                            <input type="tel" x-model="address.phone" class="w-full rounded border-ink-200 mt-1">
                        </label>
                        <label class="md:col-span-2">
                            <span class="block text-xs uppercase text-ink-500">Address line 1</span>
                            <input type="text" x-model="address.line1" class="w-full rounded border-ink-200 mt-1">
                        </label>
                        <label class="md:col-span-2">
                            <span class="block text-xs uppercase text-ink-500">Address line 2 (optional)</span>
                            <input type="text" x-model="address.line2" class="w-full rounded border-ink-200 mt-1">
                        </label>
                        <label>
                            <span class="block text-xs uppercase text-ink-500">City</span>
                            <input type="text" x-model="address.city" class="w-full rounded border-ink-200 mt-1">
                        </label>
                        <label>
                            <span class="block text-xs uppercase text-ink-500">State</span>
                            <input type="text" x-model="address.state" class="w-full rounded border-ink-200 mt-1"
                                x-on:blur="fetchQuote()">
                        </label>
                        <label>
                            <span class="block text-xs uppercase text-ink-500">Pincode</span>
                            <input type="text" x-model="address.pincode" maxlength="6"
                                x-on:blur="fetchQuote()"
                                class="w-full rounded border-ink-200 mt-1">
                        </label>
                    </div>
                </section>

                {{-- STEP 3: PAYMENT --}}
                <section class="border border-ink-100 rounded p-5" :class="!addressReady ? 'opacity-50 pointer-events-none' : ''">
                    <header class="flex items-center gap-2">
                        <span class="rounded-full w-6 h-6 flex items-center justify-center text-white text-xs"
                              :class="step >= 3 ? 'bg-brand-600' : 'bg-ink-300'">3</span>
                        <h2 class="font-semibold">Payment method</h2>
                    </header>
                    <div class="mt-4 space-y-3">
                        <template x-for="method in availablePaymentMethods" :key="method.id">
                            <label class="flex items-start gap-3 rounded border border-ink-200 p-3 cursor-pointer"
                                :class="paymentMethod === method.id ? 'border-brand-500 bg-brand-50' : ''">
                                <input type="radio" name="pay" :value="method.id" x-model="paymentMethod" class="mt-1">
                                <div class="grow">
                                    <div class="font-medium text-ink-800" x-text="method.label"></div>
                                    <div class="text-xs text-ink-500 mt-0.5" x-text="method.hint"></div>
                                </div>
                            </label>
                        </template>

                        {{-- UPI notice: full QR + intent buttons + screenshot upload live on the next page --}}
                        <template x-if="paymentMethod === 'upi'">
                            <div class="rounded border border-ink-200 p-4 bg-ink-50 text-sm text-ink-700">
                                On the next page you'll get a
                                <strong>UPI QR</strong>, one-tap
                                <strong>PhonePe / Google Pay / Paytm / BHIM</strong> buttons, and a form to
                                <strong>upload your payment screenshot</strong> so we can verify quickly.
                                <div class="mt-2 text-xs text-ink-500">Merchant UPI: <strong x-text="upiId || 'not set'"></strong></div>
                            </div>
                        </template>

                        <label class="block">
                            <span class="block text-xs uppercase text-ink-500">Order notes (optional)</span>
                            <textarea x-model="notes" rows="2" class="w-full rounded border-ink-200 mt-1"></textarea>
                        </label>
                    </div>
                </section>

                <button type="button" class="b2b-btn w-full justify-center text-base py-3"
                    x-on:click="placeOrder"
                    :disabled="busy || !canPlaceOrder">
                    <span x-text="busy ? 'Placing order…' : ('Place order · ' + B2B.currency + Number(quote.grand_total || 0).toFixed(2))"></span>
                </button>

                <template x-if="error">
                    <div class="rounded bg-red-50 border border-red-200 text-red-800 p-3 text-sm" x-text="error"></div>
                </template>
            </div>

            {{-- SUMMARY --}}
            <aside class="border border-ink-100 rounded p-5 h-fit sticky top-24">
                <h3 class="text-sm font-semibold text-ink-700 uppercase tracking-wide">Order summary</h3>
                <ul class="mt-3 max-h-64 overflow-auto text-sm space-y-1">
                    <template x-for="line in (quote.lines || [])" :key="line.variation_id">
                        <li class="flex justify-between gap-2">
                            <span class="text-ink-700 truncate" x-text="line.name + ' × ' + line.quantity"></span>
                            <span class="text-ink-500" x-text="B2B.currency + Number(line.subtotal).toFixed(0)"></span>
                        </li>
                    </template>
                </ul>
                <dl class="mt-4 space-y-1 text-sm border-t border-ink-100 pt-3">
                    <div class="flex justify-between"><dt>Subtotal</dt><dd x-text="B2B.currency + Number(quote.subtotal || 0).toFixed(2)"></dd></div>
                    <template x-if="quote.applied_tier"><div class="flex justify-between text-brand-700"><dt>Bulk discount</dt><dd>−<span x-text="B2B.currency + Number(quote.applied_tier.discount || 0).toFixed(2)"></span></dd></div></template>
                    <template x-if="quote.applied_promo"><div class="flex justify-between text-brand-700"><dt x-text="quote.applied_promo.label"></dt><dd>−<span x-text="B2B.currency + Number(quote.applied_promo.discount || 0).toFixed(2)"></span></dd></div></template>
                    <div class="flex justify-between"><dt>Tax</dt><dd x-text="B2B.currency + Number(quote.tax_total || 0).toFixed(2)"></dd></div>
                    <div class="flex justify-between"><dt>Shipping</dt><dd x-text="B2B.currency + Number(quote.shipping_total || 0).toFixed(2)"></dd></div>
                    <div class="flex justify-between border-t border-ink-100 pt-2 mt-2 text-base font-semibold">
                        <dt>Total</dt>
                        <dd x-text="B2B.currency + Number(quote.grand_total || 0).toFixed(2)"></dd>
                    </div>
                </dl>
                <template x-if="(quote.shipments || []).length > 1">
                    <p class="text-xs text-ink-500 mt-3">
                        Your order will ship from <strong x-text="quote.shipments.length"></strong> locations.
                    </p>
                </template>
            </aside>
        </div>
    </template>
</div>
@endsection

@php
    $enabledMethods = is_array($settings->enabled_payment_methods)
        ? $settings->enabled_payment_methods
        : (json_decode((string) $settings->enabled_payment_methods, true) ?: []);
    if (empty($enabledMethods)) { $enabledMethods = ['upi', 'cod', 'credit']; }
    $checkoutBootstrap = [
        'enabled_payment_methods' => array_values($enabledMethods),
        'upi_id' => $settings->upi_id ?? '',
        'upi_payee' => $settings->upi_payee_name ?? '',
    ];
@endphp
@push('scripts')
<script>
    function checkoutWizard() {
        const S = @json($checkoutBootstrap);

        return {
            loading: true, busy: false, cartEmpty: false, error: '',
            step: 1,
            authenticated: false,
            customer: {}, phone: '', code: '', name: '', businessName: '', gstin: '',
            otpSent: false,
            address: { name: '', phone: '', line1: '', line2: '', city: '', state: '', pincode: '' },
            paymentMethod: '',
            upiUtr: '', notes: '',
            upiId: S.upi_id, upiPayee: S.upi_payee,
            quote: { lines: [], subtotal: 0, tax_total: 0, discount_total: 0, shipping_total: 0, grand_total: 0, shipments: [] },
            availablePaymentMethods: S.enabled_payment_methods.map(m => ({
                id: m,
                label: {upi:'UPI (manual, enter UTR)', cod:'Cash on Delivery', credit:'Credit / pay later', bank_transfer:'Bank transfer'}[m] || m,
                hint: {
                    upi:'Pay via UPI, then enter the UTR below. Order confirmed once we verify.',
                    cod:'Pay when delivered.',
                    credit:'Uses your customer credit line — invoice unpaid until settled.',
                    bank_transfer:'Transfer to bank; we\'ll follow up for the reference.',
                }[m] || '',
            })),

            get addressReady() {
                return this.address.line1 && this.address.city && this.address.state && this.address.pincode;
            },
            get canPlaceOrder() {
                if (!this.authenticated || !this.addressReady || !this.paymentMethod) return false;
                // UTR is captured after the order is placed, on the account order page.
                return (this.quote.lines || []).length > 0;
            },

            async init() {
                document.dispatchEvent(new CustomEvent('b2b:checkout-started'));
                await this._me();
                await this.fetchQuote();
                if (this.authenticated) this.step = this.addressReady ? 3 : 2;
                this.loading = false;
            },
            async _me() {
                try {
                    const r = await fetch(B2B.urls.apiAuthMe);
                    const b = await r.json();
                    if (b.authenticated) {
                        this.authenticated = true;
                        this.customer = b.customer;
                        this.phone = b.customer.phone;
                        if (b.customer.addresses) {
                            const addrs = typeof b.customer.addresses === 'string'
                                ? JSON.parse(b.customer.addresses) : b.customer.addresses;
                            const def = (addrs || []).find(a => a.is_default) || (addrs || [])[0];
                            if (def) this.address = { ...this.address, ...def };
                        }
                        if (!this.address.name) this.address.name = b.customer.name || '';
                        if (!this.address.phone) this.address.phone = b.customer.phone || '';
                    }
                } catch (e) {}
            },
            async sendOtp() {
                if (!this.phone || this.phone.replace(/\D/g,'').length < 10) { this.error = 'Enter a valid phone number.'; return; }
                this.busy = true; this.error = '';
                try {
                    const r = await fetch(B2B.urls.apiAuthSend, {
                        method: 'POST', headers: this._h(),
                        body: JSON.stringify({ phone: this.phone }),
                    });
                    const b = await r.json();
                    if (!r.ok || !b.success) throw new Error(b.message || 'Send failed');
                    this.otpSent = true;
                } catch (e) { this.error = e.message; }
                finally { this.busy = false; }
            },
            async verifyOtp() {
                if ((this.code || '').length !== 6) { this.error = 'Enter the 6-digit code.'; return; }
                this.busy = true; this.error = '';
                try {
                    const r = await fetch(B2B.urls.apiAuthVerify, {
                        method: 'POST', headers: this._h(),
                        body: JSON.stringify({
                            phone: this.phone, code: this.code,
                            name: this.name, business_name: this.businessName,
                            gstin: this.gstin,
                        }),
                    });
                    const b = await r.json();
                    if (!r.ok || !b.success) throw new Error(b.message || 'Verification failed');
                    this.authenticated = true; this.customer = b.customer;
                    if (!this.address.name) this.address.name = b.customer.name || '';
                    if (!this.address.phone) this.address.phone = b.customer.phone || '';
                    this.step = 2;
                } catch (e) { this.error = e.message; }
                finally { this.busy = false; }
            },

            async fetchQuote() {
                try {
                    const r = await fetch(B2B.urls.apiCheckoutQuote, {
                        method: 'POST', headers: this._h(),
                        body: JSON.stringify({ address: this.address }),
                    });
                    if (!r.ok) return;
                    this.quote = await r.json();
                    this.cartEmpty = (this.quote.lines || []).length === 0;
                } catch (e) {}
            },

            async placeOrder() {
                this.busy = true; this.error = '';
                try {
                    const r = await fetch(B2B.urls.apiCheckoutPlace, {
                        method: 'POST', headers: this._h(),
                        body: JSON.stringify({
                            address: this.address,
                            payment_method: this.paymentMethod,
                            upi_utr: this.upiUtr || null,
                            notes: this.notes || null,
                        }),
                    });
                    const b = await r.json();
                    if (!r.ok || !b.success) throw new Error(b.message || 'Order failed');
                    document.dispatchEvent(new CustomEvent('b2b:order-placed', { detail: {
                        order_number: b.order_number, total: b.totals?.grand,
                    }}));
                    window.location = b.redirect;
                } catch (e) { this.error = e.message; }
                finally { this.busy = false; }
            },

            _h() {
                return {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                };
            },
        };
    }
</script>
@endpush