@extends('layouts.app')

@section('title', 'Become a Vendor')

@section('content')
<div class="max-w-2xl mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Become a Vendor</h1>
        <p class="text-gray-500 mt-2">Start selling auto parts to thousands of customers</p>
    </div>

    <div class="bg-white rounded-2xl shadow-sm p-8">
        <form action="{{ route('vendor.register.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Shop Name *</label>
                    <input type="text" name="shop_name" value="{{ old('shop_name') }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    @error('shop_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Shop Description</label>
                    <textarea name="description" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2">{{ old('description') }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Website</label>
                    <input type="url" name="website" value="{{ old('website') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                    <input type="text" name="city" value="{{ old('city') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                    <input type="text" name="country" value="{{ old('country', 'United States') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Shop Logo</label>
                    <input type="file" name="logo" accept="image/*" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
            </div>

            <div class="mt-6 p-4 bg-blue-50 rounded-lg text-sm text-blue-700">
                <strong>Note:</strong> Your application will be reviewed by our team. You'll be notified once approved.
            </div>

            <button type="submit" class="w-full mt-6 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 font-semibold text-lg">Submit Application</button>
        </form>
    </div>
</div>
@endsection