@extends('layouts.app')

@section('title', 'Register')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 flex items-center justify-center py-12 px-4">
    <div class="max-w-lg w-full">
        <!-- Logo -->
        <div class="text-center mb-8">
            <a href="{{ route('home') }}" class="inline-block">
                <h1 class="text-3xl font-bold text-white">ProcureHub</h1>
                <p class="text-blue-200">B2B Procurement Platform</p>
            </a>
        </div>

        <!-- Registration Card -->
        <div class="bg-white rounded-2xl shadow-xl p-8">
            <!-- Type Tabs -->
            <div class="flex mb-6 bg-gray-100 rounded-xl p-1">
                <a href="{{ route('register', ['type' => 'company']) }}" 
                    class="flex-1 py-2 px-4 rounded-lg text-center font-medium transition {{ $type === 'company' ? 'bg-white shadow text-blue-600' : 'text-gray-600 hover:text-gray-900' }}">
                    Company
                </a>
                <a href="{{ route('register', ['type' => 'supplier']) }}" 
                    class="flex-1 py-2 px-4 rounded-lg text-center font-medium transition {{ $type === 'supplier' ? 'bg-white shadow text-green-600' : 'text-gray-600 hover:text-gray-900' }}">
                    Supplier
                </a>
            </div>

            <h2 class="text-2xl font-bold text-gray-900 text-center mb-2">
                {{ $type === 'supplier' ? 'Become a Supplier' : 'Create Company Account' }}
            </h2>
            <p class="text-gray-600 text-center mb-6">
                {{ $type === 'supplier' ? 'Start selling your products to businesses' : 'Start procuring products for your business' }}
            </p>

            @if($errors->any())
                <div class="bg-red-50 text-red-600 px-4 py-3 rounded-lg mb-6">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ $type === 'supplier' ? route('register.supplier') : route('register.company') }}" method="POST">
                @csrf

                <div class="grid md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                            placeholder="John Doe">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ $type === 'supplier' ? 'Business Name' : 'Company Name' }}</label>
                        <input type="text" name="company_name" value="{{ old('company_name') }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                            placeholder="{{ $type === 'supplier' ? 'Your Business Name' : 'Your Company Name' }}">
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                        placeholder="you@company.com">
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                    <input type="tel" name="contact_phone" value="{{ old('contact_phone') }}"
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                        placeholder="+27 12 345 6789">
                </div>

                <div class="grid md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <input type="password" name="password" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                            placeholder="Min 8 characters">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                        <input type="password" name="password_confirmation" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                            placeholder="Confirm password">
                    </div>
                </div>

                @if($type === 'supplier')
                    <div class="mb-6 p-4 bg-green-50 rounded-xl">
                        <h4 class="font-medium text-green-800 mb-2">Supplier Benefits</h4>
                        <ul class="text-sm text-green-700 space-y-1">
                            <li>• Access to thousands of business customers</li>
                            <li>• Easy product listing and management</li>
                            <li>• Flexible delivery options</li>
                            <li>• Only 5% commission per sale</li>
                        </ul>
                        <p class="text-xs text-green-600 mt-2">One-time registration fee: R500</p>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Delivery Options</label>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="delivery_self" value="1" checked class="w-4 h-4 text-green-600 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">I can deliver to customers</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="delivery_collection" value="1" checked class="w-4 h-4 text-green-600 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Customers can collect from me</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="delivery_platform" value="1" class="w-4 h-4 text-green-600 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-700">Use ProcureHub delivery service</span>
                            </label>
                        </div>
                    </div>
                @endif

                <div class="mb-6">
                    <label class="flex items-start">
                        <input type="checkbox" required class="w-4 h-4 mt-1 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-600">
                            I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and 
                            <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a>
                        </span>
                    </label>
                </div>

                <button type="submit" class="w-full {{ $type === 'supplier' ? 'bg-green-600 hover:bg-green-700' : 'bg-blue-600 hover:bg-blue-700' }} text-white py-3 px-6 rounded-xl font-semibold transition">
                    {{ $type === 'supplier' ? 'Register as Supplier' : 'Create Account' }}
                </button>
            </form>

            <p class="text-center text-gray-600 mt-6">
                Already have an account? 
                <a href="{{ route('login') }}" class="text-blue-600 hover:underline font-medium">Sign In</a>
            </p>
        </div>
    </div>
</div>
@endsection