<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reassign Client - HAVEN GRAZURI ADVANCE</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#1E3A8A',
                        accent: '#F59E0B',
                        success: '#10B981',
                        warning: '#F59E0B',
                        error: '#EF4444',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="bg-white bg-opacity-20 p-3 rounded-full">
                        <i class="fas fa-exchange-alt text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold">Reassign Client</h1>
                        <p class="text-blue-100 mt-1">Transfer client to a different portfolio manager</p>
                    </div>
                </div>
                <a href="{% url 'users:portfolio_dashboard' %}" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2">
                    <span>←</span>
                    <span>Back to Portfolio</span>
                </a>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <!-- Client Information Card -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <span>👤</span>
                    Client Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">{{ client.get_full_name }}</h3>
                        <div class="mt-2 space-y-2 text-sm text-gray-600">
                            <div class="flex items-center">
                                <span>✉️</span>
                                <span>{{ client.email|default:"No email provided" }}</span>
                            </div>
                            <div class="flex items-center">
                                <span>📞</span>
                                <span>{{ client.phone_number|default:"No phone provided" }}</span>
                            </div>
                            {% if client.business_name %}
                            <div class="flex items-center">
                                <span>🏢</span>
                                <span>{{ client.business_name }}</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2">Current Assignment</h4>
                        {% if client.portfolio_manager %}
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <span>👤</span>
                                </div>
                                <div class="ml-3">
                                    <p class="font-semibold text-gray-800">{{ client.portfolio_manager.get_full_name }}</p>
                                    <p class="text-sm text-gray-600">{{ client.portfolio_manager.get_role_display }}</p>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <div class="bg-yellow-50 p-4 rounded-lg">
                            <div class="flex items-center">
                                <span>⚠️</span>
                                <span class="text-yellow-700">No portfolio manager assigned</span>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Reassignment Form -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-exchange-alt mr-3 text-primary"></i>
                    Reassign Client
                </h2>
            </div>
            <div class="p-6">
                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    
                    <!-- New Portfolio Manager Selection -->
                    <div>
                        <label for="new_manager_id" class="block text-sm font-medium text-gray-700 mb-2">
                            <span>👔</span>
                            Select New Portfolio Manager
                        </label>
                        <select name="new_manager_id" id="new_manager_id" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                            <option value="">Choose a portfolio manager...</option>
                            {% for manager in portfolio_managers %}
                            <option value="{{ manager.id }}">
                                {{ manager.get_full_name }} - {{ manager.get_role_display }}
                                {% if manager.portfolio_clients.count %}
                                ({{ manager.portfolio_clients.count }} clients)
                                {% endif %}
                            </option>
                            {% endfor %}
                        </select>
                        {% if not portfolio_managers %}
                        <p class="mt-2 text-sm text-gray-500">
                            <span>ℹ️</span>
                            No available portfolio managers found.
                        </p>
                        {% endif %}
                    </div>

                    <!-- Reason for Reassignment -->
                    <div>
                        <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
                            <span>💬</span>
                            Reason for Reassignment
                        </label>
                        <textarea name="reason" id="reason" rows="4" 
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                  placeholder="Please provide a reason for this reassignment..."></textarea>
                        <p class="mt-1 text-sm text-gray-500">This will be recorded in the assignment history.</p>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                        <a href="{% url 'users:portfolio_dashboard' %}" 
                           class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                            <span>✕</span>
                            Cancel
                        </a>
                        <button type="submit" 
                                class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                {% if not portfolio_managers %}disabled{% endif %}>
                            <i class="fas fa-exchange-alt mr-2"></i>
                            Reassign Client
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Assignment History (if available) -->
        {% if client.portfolio_assignments.exists %}
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 mt-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-history mr-3 text-primary"></i>
                    Assignment History
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    {% for assignment in client.portfolio_assignments.all|slice:":5" %}
                    <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
                        <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                            <span>👤</span>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <h4 class="font-semibold text-gray-800">
                                    {{ assignment.portfolio_manager.get_full_name }}
                                </h4>
                                <span class="text-sm text-gray-500">
                                    {{ assignment.assigned_date|date:"M d, Y" }}
                                </span>
                            </div>
                            <p class="text-sm text-gray-600">{{ assignment.portfolio_manager.get_role_display }}</p>
                            {% if assignment.reason %}
                            <p class="text-sm text-gray-500 mt-1">{{ assignment.reason }}</p>
                            {% endif %}
                            <div class="flex items-center mt-2">
                                {% if assignment.is_active %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <span>✓</span>
                                    Active
                                </span>
                                {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    <i class="fas fa-history mr-1"></i>
                                    Ended {{ assignment.unassigned_date|date:"M d, Y" }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Confirmation Modal -->
    <div id="confirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl p-6 max-w-md mx-4">
            <div class="text-center">
                <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span>⚠️</span>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">Confirm Reassignment</h3>
                <p class="text-gray-600 mb-6">
                    Are you sure you want to reassign this client? This action will update their portfolio manager assignment.
                </p>
                <div class="flex space-x-4">
                    <button onclick="closeModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button onclick="confirmReassignment()" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let formToSubmit = null;

        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            formToSubmit = this;
            
            const newManagerSelect = document.getElementById('new_manager_id');
            if (!newManagerSelect.value) {
                alert('Please select a portfolio manager.');
                return;
            }
            
            document.getElementById('confirmModal').classList.remove('hidden');
            document.getElementById('confirmModal').classList.add('flex');
        });

        function closeModal() {
            document.getElementById('confirmModal').classList.add('hidden');
            document.getElementById('confirmModal').classList.remove('flex');
        }

        function confirmReassignment() {
            if (formToSubmit) {
                formToSubmit.submit();
            }
        }

        // Close modal when clicking outside
        document.getElementById('confirmModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });
    </script>
</body>
</html>