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

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

@section('content')
<div class="max-w-md mx-auto">
    <h1 class="text-2xl font-bold text-ink-900 mb-2">Sign in to your account</h1>
    <p class="text-sm text-ink-500 mb-6">We'll send a 6-digit code to your WhatsApp number.</p>

    <div class="border border-ink-100 rounded p-6"
         x-data="loginForm()" x-init="init()" x-cloak>
        <template x-if="!otpSent">
            <div class="space-y-4">
                <label class="block">
                    <span class="text-xs uppercase text-ink-500">WhatsApp phone</span>
                    <input type="tel" x-model="phone" class="w-full mt-1 rounded border-ink-200" placeholder="10-digit number">
                </label>
                <button type="button" class="b2b-btn w-full justify-center" x-on:click="sendOtp" :disabled="busy">
                    <span x-text="busy ? 'Sending…' : 'Send OTP'"></span>
                </button>
            </div>
        </template>

        <template x-if="otpSent">
            <div class="space-y-4">
                <p class="text-sm text-ink-600">Code sent to <strong x-text="phone"></strong>.</p>
                <label class="block">
                    <span class="text-xs uppercase text-ink-500">Enter 6-digit code</span>
                    <input type="text" x-model="code" maxlength="6" class="w-full mt-1 rounded border-ink-200 tracking-widest text-center text-lg">
                </label>
                <label class="block">
                    <span class="text-xs uppercase text-ink-500">Your name</span>
                    <input type="text" x-model="name" class="w-full mt-1 rounded border-ink-200">
                </label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="block">
                        <span class="text-xs uppercase text-ink-500">Business name</span>
                        <input type="text" x-model="businessName" class="w-full mt-1 rounded border-ink-200">
                    </label>
                    <label class="block">
                        <span class="text-xs uppercase text-ink-500">GSTIN</span>
                        <input type="text" x-model="gstin" class="w-full mt-1 rounded border-ink-200 uppercase">
                    </label>
                </div>
                <button type="button" class="b2b-btn w-full justify-center" x-on:click="verifyOtp" :disabled="busy">
                    <span x-text="busy ? 'Verifying…' : 'Verify &amp; sign in'"></span>
                </button>
                <button type="button" class="text-xs text-ink-500 hover:underline" x-on:click="otpSent = false; code = ''">
                    ← Change number
                </button>
            </div>
        </template>

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

    <p class="text-xs text-ink-500 mt-4 text-center">
        By continuing you agree to receive order updates on WhatsApp.
    </p>
</div>
@endsection

@push('scripts')
<script>
    function loginForm() {
        return {
            phone: '', code: '', name: '', businessName: '', gstin: '',
            otpSent: false, busy: false, error: '',
            async init() {},
            _h() {
                return {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                };
            },
            async sendOtp() {
                if ((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');
                    // Success — hop to dashboard.
                    window.location = "{{ url('/b2bportal/shop/'.$apiToken.'/account') }}";
                } catch (e) { this.error = e.message; }
                finally { this.busy = false; }
            },
        };
    }
</script>
@endpush