{% extends "base.html" %}
{% load static i18n widget_tweaks %}

{% block title %}{% trans "Schedule Remote Meeting" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'list_meetings' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
                <i data-lucide="calendar" class="w-4 h-4"></i> {% trans "Meetings" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Create Remote Interview" %}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3 text-gray-900">
            <i data-lucide="globe" class="w-8 h-8" style="color: #9d2235;"></i>
            {% trans "Create Remote Interview" %}
        </h1>
        <a href="{% url 'list_meetings' %}"
           class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {% trans "Back to Meetings" %}
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
            <h2 class="text-lg font-bold text-gray-700 flex items-center gap-2">
                <i data-lucide="video" class="w-5 h-5"></i>
                {% trans "Remote Meeting Details" %}
            </h2>
        </div>

        <!-- Form -->
        <div class="p-6">
            {% if form.non_field_errors %}
                <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
                    <div class="flex items-start gap-3">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
                        <div>
                            <h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
                            {% for error in form.non_field_errors %}
                                <p class="text-red-700 mb-0">{{ error }}</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            <form method="post" class="space-y-6">
                {% csrf_token %}

                <!-- Core Meeting Details -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Application -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.application.id_for_label }}">
                            {{ form.application.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.application|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition bg-white" }}
                        {% if form.application.help_text %}
                            <p class="text-gray-500 text-sm mt-1">{{ form.application.help_text }}</p>
                        {% endif %}
                        {% if form.application.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.application.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Job -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.job.id_for_label }}">
                            {{ form.job.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.job|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition bg-white" }}
                        {% if form.job.help_text %}
                            <p class="text-gray-500 text-sm mt-1">{{ form.job.help_text }}</p>
                        {% endif %}
                        {% if form.job.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.job.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Topic -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.topic.id_for_label }}">
                        {{ form.topic.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.topic|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"|attr:"placeholder:form.topic.label" }}
                    {% if form.topic.help_text %}
                        <p class="text-gray-500 text-sm mt-1">{{ form.topic.help_text }}</p>
                    {% endif %}
                    {% if form.topic.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.topic.errors.0 }}</div>
                    {% endif %}
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Start Time -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.start_time.id_for_label }}">
                            {{ form.start_time.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.start_time|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                        {% if form.start_time.help_text %}
                            <p class="text-gray-500 text-sm mt-1">{{ form.start_time.help_text }}</p>
                        {% endif %}
                        {% if form.start_time.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.start_time.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <!-- Duration -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.duration.id_for_label }}">
                            {{ form.duration.label }} <span class="text-red-500">*</span>
                        </label>
                        {{ form.duration|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"|attr:"placeholder:30" }}
                        {% if form.duration.help_text %}
                            <p class="text-gray-500 text-sm mt-1">{{ form.duration.help_text }}</p>
                        {% endif %}
                        {% if form.duration.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.duration.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <hr class="border-gray-200 my-6">

                <!-- Remote Configuration -->
                <div>
                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: #9d2235;">
                        <i data-lucide="settings" class="w-5 h-5"></i>
                        {% trans "Remote Configuration" %}
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Host Email -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.host_email.id_for_label }}">
                                {{ form.host_email.label }} <span class="text-red-500">*</span>
                            </label>
                            {{ form.host_email|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                            {% if form.host_email.help_text %}
                                <p class="text-gray-500 text-sm mt-1">{{ form.host_email.help_text }}</p>
                            {% endif %}
                            {% if form.host_email.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ form.host_email.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <!-- Password -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.password.id_for_label }}">
                                {{ form.password.label }}
                            </label>
                            {{ form.password|add_class:"w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                            {% if form.password.help_text %}
                                <p class="text-gray-500 text-sm mt-1">{{ form.password.help_text }}</p>
                            {% endif %}
                            {% if form.password.errors %}
                                <div class="text-red-600 text-sm mt-1">{{ form.password.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Participant Video Toggle -->
                    <div class="mt-6">
                        <div class="flex items-center gap-3">
                            {{ form.participant_video|add_class:"w-5 h-5 border-gray-300 rounded focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                            <label class="text-sm font-semibold text-gray-700" for="{{ form.participant_video.id_for_label }}">
                                {{ form.participant_video.label }}
                            </label>
                        </div>
                        {% if form.participant_video.help_text %}
                            <p class="text-gray-500 text-sm mt-2 ml-8">{{ form.participant_video.help_text }}</p>
                        {% endif %}
                        {% if form.participant_video.errors %}
                            <div class="text-red-600 text-sm mt-2 ml-8">{{ form.participant_video.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Hidden status field -->
                {{ form.status|attr:"type:hidden" }}

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
                    <a href="{% url 'list_meetings' %}" 
                       class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
                            style="background-color: #9d2235;"
                            onmouseover="this.style.backgroundColor='#7a1a29'"
                            onmouseout="this.style.backgroundColor='#9d2235'">
                        <i data-lucide="video" class="w-4 h-4"></i>
                        {% trans "Create Remote Interview" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Form validation
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const application = document.getElementById('id_application').value;
            const job = document.getElementById('id_job').value;
            const topic = document.getElementById('id_topic').value.trim();
            const startTime = document.getElementById('id_start_time').value.trim();
            const duration = document.getElementById('id_duration').value.trim();
            const hostEmail = document.getElementById('id_host_email').value.trim();

            if (!application) {
                e.preventDefault();
                alert("{% trans 'Please select an application.' %}");
                document.getElementById('id_application').focus();
                return false;
            }

            if (!job) {
                e.preventDefault();
                alert("{% trans 'Please select a job.' %}");
                document.getElementById('id_job').focus();
                return false;
            }

            if (!topic) {
                e.preventDefault();
                alert("{% trans 'Please enter a topic.' %}");
                document.getElementById('id_topic').focus();
                return false;
            }

            if (!startTime) {
                e.preventDefault();
                alert("{% trans 'Please enter a start time.' %}");
                document.getElementById('id_start_time').focus();
                return false;
            }

            if (!duration) {
                e.preventDefault();
                alert("{% trans 'Please enter a duration.' %}");
                document.getElementById('id_duration').focus();
                return false;
            }

            if (!hostEmail) {
                e.preventDefault();
                alert("{% trans 'Please enter a host email.' %}");
                document.getElementById('id_host_email').focus();
                return false;
            }
        });
    }
});
</script>
{% endblock %}