{% extends "base.html" %}

{% block title %}Add Team Member - Admin{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto p-6">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Add Team Member</h1>
        <p class="text-gray-600 mt-2">Create a new team member profile</p>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow-lg p-8">
        <form method="POST" novalidate enctype="multipart/form-data">
            {{ form.hidden_tag() }}

            <!-- Name -->
            <div class="mb-6">
                {{ form.name.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                {{ form.name(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500") }}
                {% if form.name.errors %}
                    <div class="text-red-600 text-sm mt-2">
                        {% for error in form.name.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Position -->
            <div class="mb-6">
                {{ form.position.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                {{ form.position(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500") }}
                {% if form.position.errors %}
                    <div class="text-red-600 text-sm mt-2">
                        {% for error in form.position.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Team Type -->
            <div class="mb-6">
                {{ form.team_type.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                {{ form.team_type(class="form-select w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500") }}
                {% if form.team_type.errors %}
                    <div class="text-red-600 text-sm mt-2">
                        {% for error in form.team_type.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Description -->
            <div class="mb-6">
                {{ form.description.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                {{ form.description(class="form-textarea w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", rows="4", placeholder="Enter a description of their expertise and role...") }}
                {% if form.description.errors %}
                    <div class="text-red-600 text-sm mt-2">
                        {% for error in form.description.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Profile Picture Upload -->
            <div class="mb-6">
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 bg-gray-50">
                    {{ form.profile_picture.label(class="block text-sm font-medium text-gray-700 mb-3") }}
                    <div class="flex flex-col items-center justify-center">
                        <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
                        <p class="text-gray-600 text-center mb-4">Drag and drop your image here or click to browse</p>
                        {{ form.profile_picture(class="block w-full", accept="image/*") }}
                    </div>
                    <p class="text-gray-500 text-xs mt-3">Supported formats: JPG, JPEG, PNG, GIF (max 10MB)</p>
                </div>
                {% if form.profile_picture.errors %}
                    <div class="text-red-600 text-sm mt-2">
                        {% for error in form.profile_picture.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Fallback Avatar Settings -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <h3 class="text-sm font-semibold text-blue-900 mb-4">
                    <i class="fas fa-info-circle mr-2"></i>Fallback Avatar (shown if no profile picture)
                </h3>
                
                <!-- Avatar Initials -->
                <div class="mb-4">
                    {{ form.avatar_initials.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                    {{ form.avatar_initials(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", placeholder="e.g., DK", maxlength="10") }}
                    {% if form.avatar_initials.errors %}
                        <div class="text-red-600 text-sm mt-2">
                            {% for error in form.avatar_initials.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Avatar Color -->
                <div>
                    {{ form.avatar_color.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                    <div class="grid grid-cols-3 gap-2">
                        {% for value, label in form.avatar_color.choices %}
                        <label class="relative">
                            {{ form.avatar_color(value=value, class="hidden avatar-radio") }}
                            <div class="bg-gradient-to-r {{ value }} rounded-lg p-3 cursor-pointer border-4 border-gray-200 hover:border-indigo-500 transition-colors text-center">
                                <span class="text-white font-bold text-xs block">{{ label }}</span>
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                    {% if form.avatar_color.errors %}
                        <div class="text-red-600 text-sm mt-2">
                            {% for error in form.avatar_color.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Display Order -->
            <div class="mb-8">
                {{ form.order.label(class="block text-sm font-medium text-gray-700 mb-2") }}
                {{ form.order(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500", type="number", min="0") }}
                <p class="text-gray-500 text-sm mt-1">Lower numbers appear first (optional, default: 0)</p>
            </div>

            <!-- Buttons -->
            <div class="flex gap-4 justify-end">
                <a href="{{ url_for('admin.manage_team') }}" class="btn btn-outline">Cancel</a>
                {{ form.submit(class="btn btn-primary") }}
            </div>
        </form>
    </div>
</div>

<style>
.avatar-radio:checked + div {
    @apply border-indigo-500 ring-2 ring-indigo-400;
}

/* File input styling */
input[type="file"] {
    display: block;
}

input[type="file"]::file-selector-button {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-indigo-700 transition-colors font-medium;
}
</style>

<script>
// Drag and drop for file input
const fileInput = document.querySelector('input[type="file"]');
const dropZone = document.querySelector('.border-dashed');

if (fileInput && dropZone) {
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.add('bg-indigo-50', 'border-indigo-400');
        });
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.remove('bg-indigo-50', 'border-indigo-400');
        });
    });

    dropZone.addEventListener('drop', (e) => {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        const event = new Event('change', { bubbles: true });
        fileInput.dispatchEvent(event);
    });
}
</script>
{% endblock %}