@extends('layouts.auth')

@section('title', 'Vendor Onboarding - Step 2')

@section('content')
<div class="min-h-screen flex items-center justify-center gradient-bg p-4">
    <div class="w-full max-w-2xl animate-fade-in">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="flex items-center justify-between text-sm text-white mb-2">
                <span>Step 2 of 4</span>
                <span>Contact & Location</span>
            </div>
            <div class="h-2 bg-white/20 rounded-full">
                <div class="h-2 bg-white rounded-full transition-all" style="width: 50%"></div>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-2xl p-8">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
                    <i class="fas fa-map-marker-alt text-2xl text-purple-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">Contact & Location</h2>
                <p class="text-gray-500 mt-2">Where can customers reach you?</p>
            </div>

            <form method="POST" action="{{ route('vendor.onboarding.step2.process') }}" class="space-y-6">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Business Email *</label>
                        <input type="email" name="business_email" value="{{ old('business_email', $vendor->business_email ?? $user->email) }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('business_email') border-red-500 @enderror">
                        @error('business_email')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Business Phone *</label>
                        <input type="tel" name="business_phone" value="{{ old('business_phone', $vendor->business_phone ?? $user->phone) }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('business_phone') border-red-500 @enderror"
                            placeholder="+1 (555) 123-4567">
                        @error('business_phone')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
                    <input type="text" name="address" value="{{ old('address', $vendor->address ?? '') }}" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('address') border-red-500 @enderror"
                        placeholder="123 Main Street, Suite 100">
                    @error('address')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">City *</label>
                        <input type="text" name="city" value="{{ old('city', $vendor->city ?? '') }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('city') border-red-500 @enderror">
                        @error('city')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">State *</label>
                        <input type="text" name="state" value="{{ old('state', $vendor->state ?? '') }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('state') border-red-500 @enderror">
                        @error('state')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Postal Code *</label>
                        <input type="text" name="postal_code" value="{{ old('postal_code', $vendor->postal_code ?? '') }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('postal_code') border-red-500 @enderror">
                        @error('postal_code')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Country *</label>
                    <select name="country" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('country') border-red-500 @enderror">
                        <option value="">Select Country</option>
                        <option value="US" {{ old('country', $vendor->country ?? '') == 'US' ? 'selected' : '' }}>United States</option>
                        <option value="CA" {{ old('country', $vendor->country ?? '') == 'CA' ? 'selected' : '' }}>Canada</option>
                        <option value="UK" {{ old('country', $vendor->country ?? '') == 'UK' ? 'selected' : '' }}>United Kingdom</option>
                        <option value="AU" {{ old('country', $vendor->country ?? '') == 'AU' ? 'selected' : '' }}>Australia</option>
                        <option value="DE" {{ old('country', $vendor->country ?? '') == 'DE' ? 'selected' : '' }}>Germany</option>
                        <option value="FR" {{ old('country', $vendor->country ?? '') == 'FR' ? 'selected' : '' }}>France</option>
                        <option value="OTHER" {{ old('country', $vendor->country ?? '') == 'OTHER' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('country')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex justify-between">
                    <a href="{{ route('vendor.onboarding.step1') }}" class="text-gray-600 hover:text-gray-800 px-4 py-3">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                    
                    <button type="submit" class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition">
                        Next Step
                        <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
