@extends('layouts.admin')

@section('title', 'Edit User - ' . $user->name)

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">Edit User - {{ $user->name }}</h1>
        <div class="flex space-x-3">
            <a href="{{ route('admin.users.show', $user->id) }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
                <i class="fas fa-eye mr-2"></i>View
            </a>
            <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>

    <div class="bg-white rounded-lg shadow-md p-6">
        <form action="{{ route('admin.users.update', $user->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <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', $user->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">
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </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', $user->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">
                        @error('email')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </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', $user->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">
                        @error('phone')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </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="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Administrator</option>
                            <option value="vendor" {{ old('role', $user->role) == 'vendor' ? 'selected' : '' }}>Vendor</option>
                            <option value="buyer" {{ old('role', $user->role) == 'buyer' ? 'selected' : '' }}>Buyer</option>
                        </select>
                        @error('role')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </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="{{ $user->role === 'vendor' ? 'display: block;' : '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', $user->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">
                            @error('business_name')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </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', $user->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">
                            @error('kra_pin')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </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', $user->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">
                            @error('id_number')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Current Business Certificate -->
                        @if($user->business_certificate)
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Current Business Certificate</label>
                            <div class="mt-1 flex items-center space-x-4">
                                <a href="{{ route('admin.users.download-business-certificate', $user->id) }}" 
                                   class="text-red-600 hover:text-red-700 flex items-center text-sm">
                                    <i class="fas fa-download mr-2"></i>Download Current Certificate
                                </a>
                                <label class="flex items-center">
                                    <input type="checkbox" name="remove_business_certificate" value="1" 
                                           class="rounded border-gray-300 text-red-600 shadow-sm focus:border-red-500 focus:ring-red-500">
                                    <span class="ml-2 text-sm text-gray-700">Remove certificate</span>
                                </label>
                            </div>
                        </div>
                        @endif

                        <!-- New Business Certificate -->
                        <div>
                            <label for="business_certificate" class="block text-sm font-medium text-gray-700">
                                {{ $user->business_certificate ? 'Replace Business Certificate' : 'Upload 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>
                            @error('business_certificate')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </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', $user->address) }}</textarea>
                        @error('address')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Account Status -->
                    <div class="border-t border-gray-200 pt-4">
                        <h4 class="text-md font-medium text-gray-900 mb-3">Account Status</h4>
                        <div class="flex items-center space-x-6">
                            <div class="flex items-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                    {{ $user->email_verified_at ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ $user->email_verified_at ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                            <div class="text-sm text-gray-500">
                                Last updated: {{ $user->updated_at->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="mt-8 flex justify-end space-x-4">
                <a href="{{ route('admin.users.show', $user->id) }}" 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-save mr-2"></i>Update 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';
        }
    });

    // File input preview for business certificate
    document.getElementById('business_certificate').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const fileSize = file.size / 1024 / 1024; // MB
            if (fileSize > 2) {
                alert('File size must be less than 2MB');
                e.target.value = '';
            }
            
            // Show file name
            const fileName = file.name;
            const label = e.target.previousElementSibling;
            if (label && label.tagName === 'LABEL') {
                const originalText = label.textContent;
                label.innerHTML = `${originalText} <span class="text-green-600 text-sm">(Selected: ${fileName})</span>`;
            }
        }
    });

    // Remove certificate confirmation
    const removeCheckbox = document.querySelector('input[name="remove_business_certificate"]');
    if (removeCheckbox) {
        removeCheckbox.addEventListener('change', function(e) {
            if (e.target.checked) {
                if (!confirm('Are you sure you want to remove the business certificate? This action cannot be undone.')) {
                    e.target.checked = false;
                }
            }
        });
    }
</script>
@endsection