@extends('layouts.admin')

@section('title', 'Create User')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">Create New User</h1>
        <a href="{{ route('admin.users.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
            <i class="fas fa-arrow-left mr-2"></i>Back to Users
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
        <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Basic Information -->
                <div class="space-y-6">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">Basic Information</h3>
                    
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Full Name *</label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}" required
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                               placeholder="Enter full name">
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">Email Address *</label>
                        <input type="email" name="email" id="email" value="{{ old('email') }}" required
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                               placeholder="Enter email address">
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                               placeholder="Enter phone number">
                    </div>

                    <div>
                        <label for="role" class="block text-sm font-medium text-gray-700">User Role *</label>
                        <select name="role" id="role" required
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500">
                            <option value="">Select Role</option>
                            <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Administrator</option>
                            <option value="vendor" {{ old('role') == 'vendor' ? 'selected' : '' }}>Vendor</option>
                            <option value="buyer" {{ old('role') == 'buyer' ? 'selected' : '' }}>Buyer</option>
                        </select>
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="space-y-6">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">Additional Information</h3>
                    
                    <div id="vendor-fields" style="display: none;">
                        <div>
                            <label for="business_name" class="block text-sm font-medium text-gray-700">Business Name</label>
                            <input type="text" name="business_name" id="business_name" value="{{ old('business_name') }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                                   placeholder="Enter business name">
                        </div>

                        <div>
                            <label for="kra_pin" class="block text-sm font-medium text-gray-700">KRA PIN</label>
                            <input type="text" name="kra_pin" id="kra_pin" value="{{ old('kra_pin') }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                                   placeholder="Enter KRA PIN">
                        </div>

                        <div>
                            <label for="id_number" class="block text-sm font-medium text-gray-700">ID Number</label>
                            <input type="text" name="id_number" id="id_number" value="{{ old('id_number') }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                                   placeholder="Enter ID number">
                        </div>

                        <div>
                            <label for="business_certificate" class="block text-sm font-medium text-gray-700">Business Certificate</label>
                            <input type="file" name="business_certificate" id="business_certificate"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500">
                            <p class="text-sm text-gray-500 mt-1">Upload PDF, JPG, JPEG, or PNG files (Max: 2MB)</p>
                        </div>
                    </div>

                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
                        <textarea name="address" id="address" rows="3"
                                  class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                                  placeholder="Enter full address">{{ old('address') }}</textarea>
                    </div>

                    <!-- Password -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">Password *</label>
                        <input type="password" name="password" id="password" required
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                               placeholder="Enter password">
                    </div>

                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm Password *</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" required
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:border-red-500 focus:ring-red-500"
                               placeholder="Confirm password">
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="mt-8 flex justify-end space-x-4">
                <a href="{{ route('admin.users.index') }}" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition duration-300">
                    Cancel
                </a>
                <button type="submit" class="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition duration-300 flex items-center">
                    <i class="fas fa-user-plus mr-2"></i>Create User
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Show vendor fields only for vendors
    document.getElementById('role').addEventListener('change', function() {
        const vendorFields = document.getElementById('vendor-fields');
        if (this.value === 'vendor') {
            vendorFields.style.display = 'block';
        } else {
            vendorFields.style.display = 'none';
        }
    });

    // Trigger change event on page load
    document.getElementById('role').dispatchEvent(new Event('change'));
</script>
@endsection