@extends('layouts.auth')

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

@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 1 of 4</span>
                <span>Business Info</span>
            </div>
            <div class="h-2 bg-white/20 rounded-full">
                <div class="h-2 bg-white rounded-full transition-all" style="width: 25%"></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-store text-2xl text-purple-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">Business Information</h2>
                <p class="text-gray-500 mt-2">Tell us about your auto parts business</p>
            </div>

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

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Store Name *</label>
                    <input type="text" name="store_name" value="{{ old('store_name', $vendor->store_name ?? '') }}" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('store_name') border-red-500 @enderror"
                        placeholder="e.g., Auto Parts Pro">
                    @error('store_name')
                        <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 Category *</label>
                    <select name="business_category" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('business_category') border-red-500 @enderror">
                        <option value="">Select a category</option>
                        <option value="auto_parts" {{ old('business_category', $vendor->business_category ?? '') == 'auto_parts' ? 'selected' : '' }}>Auto Parts Retailer</option>
                        <option value="dealership" {{ old('business_category', $vendor->business_category ?? '') == 'dealership' ? 'selected' : '' }}>Dealership</option>
                        <option value="wholesaler" {{ old('business_category', $vendor->business_category ?? '') == 'wholesaler' ? 'selected' : '' }}>Wholesaler/Distributor</option>
                        <option value="manufacturer" {{ old('business_category', $vendor->business_category ?? '') == 'manufacturer' ? 'selected' : '' }}>Manufacturer</option>
                        <option value="repair_shop" {{ old('business_category', $vendor->business_category ?? '') == 'repair_shop' ? 'selected' : '' }}>Repair Shop</option>
                        <option value="salvage_yard" {{ old('business_category', $vendor->business_category ?? '') == 'salvage_yard' ? 'selected' : '' }}>Salvage Yard</option>
                        <option value="other" {{ old('business_category', $vendor->business_category ?? '') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('business_category')
                        <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">Store Description *</label>
                    <textarea name="store_description" rows="4" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 @error('store_description') border-red-500 @enderror"
                        placeholder="Describe your business, the types of auto parts you sell, your expertise, and what makes you unique...">{{ old('store_description', $vendor->store_description ?? '') }}</textarea>
                    @error('store_description')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-500 text-xs mt-1">Minimum 50 characters</p>
                </div>

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

                <div class="flex justify-end">
                    <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
