@extends('layouts.app')
@section('title', 'Become a Seller — Jumia Clone')

@section('content')
<div class="max-w-2xl mx-auto px-4 py-8"
     x-data="{
         step: 1,
         form: {
             store_name: '', business_type: 'individual', phone: '',
             address: '', city: '', state: '',
             bank_name: '', bank_account_number: '', bank_account_name: '',
         },
         loading: false,
         async submit() {
             if (!$store.app.isLoggedIn) { window.location.href = '/login?next=/seller/register'; return }
             this.loading = true
             try {
                 await api.post('/seller/onboard', this.form)
                 Alpine.store('app').toast('Application submitted! We will review within 24 hours.', 'success')
                 setTimeout(() => window.location.href = '/seller/dashboard', 2000)
             } catch (e) { Alpine.store('app').toast(e.message, 'error') }
             this.loading = false
         },
     }">

    {{-- Hero --}}
    <div class="text-center mb-8">
        <div class="text-5xl mb-3">🏪</div>
        <h1 class="text-2xl font-black text-gray-900">Start Selling on Jumia</h1>
        <p class="text-gray-500 mt-2 text-sm">Reach millions of customers across Nigeria</p>
    </div>

    {{-- Benefits --}}
    <div class="grid grid-cols-3 gap-3 mb-8">
        @foreach([
            ['icon'=>'📦','title'=>'Easy Listing','sub'=>'List in minutes'],
            ['icon'=>'🚚','title'=>'We Deliver','sub'=>'Nationwide coverage'],
            ['icon'=>'💰','title'=>'Fast Payouts','sub'=>'Weekly payments'],
        ] as $b)
        <div class="card-padded text-center">
            <div class="text-3xl mb-1">{{ $b['icon'] }}</div>
            <p class="text-xs font-bold text-gray-900">{{ $b['title'] }}</p>
            <p class="text-xs text-gray-500">{{ $b['sub'] }}</p>
        </div>
        @endforeach
    </div>

    <div class="card-padded space-y-4">
        <h2 class="text-base font-bold text-gray-900">Store Information</h2>
        <div>
            <label class="label">Store Name *</label>
            <input type="text" x-model="form.store_name" placeholder="e.g. Kemi's Fashion Hub" class="input">
        </div>
        <div>
            <label class="label">Business Type</label>
            <select x-model="form.business_type" class="input">
                <option value="individual">Individual / Sole Trader</option>
                <option value="registered_business">Registered Business (CAC)</option>
                <option value="enterprise">Enterprise</option>
            </select>
        </div>
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="label">Phone *</label>
                <input type="tel" x-model="form.phone" placeholder="+234..." class="input">
            </div>
            <div>
                <label class="label">State *</label>
                <select x-model="form.state" class="input">
                    @foreach(['Lagos','Abuja (FCT)','Kano','Rivers','Oyo','Enugu','Delta','Anambra','Kaduna','Abia','Others'] as $s)
                    <option>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div>
            <label class="label">Store Address</label>
            <input type="text" x-model="form.address" placeholder="Full address" class="input">
        </div>

        <div class="border-t border-gray-100 pt-4">
            <h2 class="text-base font-bold text-gray-900 mb-3">Bank Details (for payouts)</h2>
            <div>
                <label class="label">Bank</label>
                <select x-model="form.bank_name" class="input">
                    @foreach(['Access Bank','GTBank','First Bank','Zenith Bank','UBA','Stanbic IBTC','FCMB','Fidelity Bank','Union Bank','Sterling Bank','Polaris Bank','Wema Bank','Kuda Bank','OPay'] as $bank)
                    <option>{{ $bank }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mt-3">
                <label class="label">Account Number</label>
                <input type="text" x-model="form.bank_account_number" maxlength="10" placeholder="10-digit NUBAN" class="input">
            </div>
            <div class="mt-3">
                <label class="label">Account Name</label>
                <input type="text" x-model="form.bank_account_name" placeholder="As on your bank statement" class="input">
            </div>
        </div>

        <button @click="submit()" :disabled="loading || !form.store_name" class="btn-primary w-full py-3.5">
            <span x-show="!loading">Submit Application →</span>
            <span x-show="loading" class="flex items-center gap-2 justify-center">
                <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                Submitting...
            </span>
        </button>

        <p class="text-xs text-gray-500 text-center">
            By registering, you agree to the <a href="/seller/policy" class="text-orange-500 hover:underline">Seller Policy</a>.
            Your account will be reviewed within 24 hours.
        </p>
    </div>
</div>
@endsection