<x-guest-layout>
    <div x-data="{ 
        step: 1, 
        businessName: '{{ old('business_name') }}', 
        province: '{{ old('province') }}', 
        showErrors: false 
    }" class="w-full">
        <!-- Progress Steps -->
        <div class="flex items-center justify-between mb-8 px-4">
            <div class="flex flex-col items-center">
                <span :class="step === 1 ? 'bg-indigo-600 text-white' : 'bg-indigo-100 text-indigo-700'" class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition">1</span>
                <span class="text-[10px] font-semibold text-gray-500 mt-1 uppercase tracking-wider">Business Details</span>
            </div>
            <div class="flex-1 h-0.5 bg-gray-200 mx-4 -mt-4"></div>
            <div class="flex flex-col items-center">
                <span :class="step === 2 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-400'" class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition">2</span>
                <span class="text-[10px] font-semibold text-gray-400 mt-1 uppercase tracking-wider">Owner Account</span>
            </div>
        </div>

        <form method="POST" action="{{ route('register') }}" class="space-y-5">
            @csrf

            <!-- STEP 1: Business Details -->
            <div x-show="step === 1" x-transition:enter="transition ease-out duration-300" class="space-y-4">
                <div class="mb-4 text-center">
                    <h1 class="text-xl font-bold text-gray-900">Register Your Business</h1>
                    <p class="text-xs text-gray-400 mt-1">Enter your business information to set up your profile</p>
                </div>

                <div>
                    <x-input-label for="business_name" :value="__('Business Name')" />
                    <x-text-input id="business_name" x-model="businessName" class="block mt-1 w-full" type="text" name="business_name" placeholder="Enter Business Name" required />
                    <p x-show="showErrors && !businessName" class="text-red-500 text-[10px] mt-1" x-cloak>Please enter your business name.</p>
                    <x-input-error :messages="$errors->get('business_name')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="ntn_cnic" :value="__('NTN / CNIC')" />
                    <x-text-input id="ntn_cnic" class="block mt-1 w-full" type="text" name="ntn_cnic" :value="old('ntn_cnic')" placeholder="1234567-8" />
                    <x-input-error :messages="$errors->get('ntn_cnic')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="province" :value="__('Province')" />
                    <select id="province" name="province" x-model="province" required class="block mt-1 w-full rounded-xl border-gray-200 text-xs focus:border-indigo-400 focus:ring-indigo-400">
                        <option value="">Select Province</option>
                        <option>Punjab</option>
                        <option>Sindh</option>
                        <option>Khyber Pakhtunkhwa</option>
                        <option>Balochistan</option>
                        <option>Islamabad Capital Territory</option>
                        <option>Gilgit-Baltistan</option>
                        <option>Azad Jammu & Kashmir</option>
                    </select>
                    <p x-show="showErrors && !province" class="text-red-500 text-[10px] mt-1" x-cloak>Please select your business province.</p>
                    <x-input-error :messages="$errors->get('province')" class="mt-1" />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <x-input-label for="business_email" :value="__('Business Email')" />
                        <x-text-input id="business_email" class="block mt-1 w-full" type="email" name="business_email" :value="old('business_email')" placeholder="info@business.com" />
                        <x-input-error :messages="$errors->get('business_email')" class="mt-1" />
                    </div>
                    <div>
                        <x-input-label for="business_phone" :value="__('Business Phone')" />
                        <x-text-input id="business_phone" class="block mt-1 w-full" type="text" name="business_phone" :value="old('business_phone')" placeholder="+92 300 1234567" />
                        <x-input-error :messages="$errors->get('business_phone')" class="mt-1" />
                    </div>
                </div>

                <div>
                    <x-input-label for="address" :value="__('Address')" />
                    <textarea id="address" name="address" rows="2" placeholder="Street, city, postal code" class="block mt-1 w-full rounded-xl border-gray-200 text-xs focus:border-indigo-400 focus:ring-indigo-400">{{ old('address') }}</textarea>
                    <x-input-error :messages="$errors->get('address')" class="mt-1" />
                </div>

                <div class="flex justify-end pt-4">
                    <button type="button" @click="if (businessName && province) { step = 2; showErrors = false; } else { showErrors = true; }" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-semibold shadow-sm transition">
                        Next Step
                    </button>
                </div>
            </div>

            <!-- STEP 2: Owner Details -->
            <div x-show="step === 2" x-transition:enter="transition ease-out duration-300" class="space-y-4" x-cloak>
                <div class="mb-4 text-center">
                    <h1 class="text-xl font-bold text-gray-900">Create Owner Account</h1>
                    <p class="text-xs text-gray-400 mt-1">Enter details of the primary administrator for this business</p>
                </div>

                <div>
                    <x-input-label for="name" :value="__('Full Name')" />
                    <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" placeholder="e.g. Syed Areeb" required />
                    <x-input-error :messages="$errors->get('name')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="email" :value="__('Email Address')" />
                    <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" placeholder="you@example.com" required />
                    <x-input-error :messages="$errors->get('email')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="password" :value="__('Password')" />
                    <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" placeholder="••••••••" required />
                    <x-input-error :messages="$errors->get('password')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
                    <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" placeholder="••••••••" required />
                </div>

                <div class="flex items-center justify-between pt-4">
                    <button type="button" @click="step = 1" class="px-5 py-2.5 border border-gray-200 rounded-xl text-xs font-semibold text-gray-600 hover:bg-gray-50 transition">
                        Back
                    </button>
                    <x-primary-button>
                        {{ __('Register your business') }}
                    </x-primary-button>
                </div>
            </div>
        </form>
    </div>
</x-guest-layout>
