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

{% block title %}{% trans "Preview Interview Schedule" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-3">
            <div class="bg-temple-red/10 p-3 rounded-xl">
                <i data-lucide="calendar" class="w-6 h-6 text-temple-red"></i>
            </div>
            <span>{% trans "Interview Schedule Preview:" %}</span> <span class="text-temple-red">**{{ job.title }}**</span>
        </h1>
        <div class="flex gap-2">
            <a href="{% url 'schedule_interviews' job.slug %}" 
               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 Edit" %}
            </a>
        </div>
    </div>

    <!-- Schedule Parameters -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2 mb-6 pb-3 border-b-2 border-temple-red">
            <i data-lucide="settings" class="w-5 h-5 text-temple-red"></i> {% trans "Schedule Parameters" %}
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <i data-lucide="clock" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Working Hours:" %}</p>
                        <p class="text-gray-600">{{ start_time|time:"g:i A" }} to {{ end_time|time:"g:i A" }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <i data-lucide="timer" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Interview Duration:" %}</p>
                        <p class="text-gray-600">{{ interview_duration }} {% trans "minutes" %}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <i data-lucide="shield" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Buffer Time:" %}</p>
                        <p class="text-gray-600">{{ buffer_time }} {% trans "minutes" %}</p>
                    </div>
                </div>
            </div>

            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <i data-lucide="calendar-days" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Interview Period:" %}</p>
                        <p class="text-gray-600">{{ start_date|date:"F j, Y" }} &mdash; {{ end_date|date:"F j, Y" }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <i data-lucide="list-checks" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Active Days:" %}</p>
                        <p class="text-gray-600">
                            {% for day_id in working_days %}
                                {% if day_id == 0 %}Mon{% endif %}
                                {% if day_id == 1 %}Tue{% endif %}
                                {% if day_id == 2 %}Wed{% endif %}
                                {% if day_id == 3 %}Thu{% endif %}
                                {% if day_id == 4 %}Fri{% endif %}
                                {% if day_id == 5 %}Sat{% endif %}
                                {% if day_id == 6 %}Sun{% endif %}
                                {% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <i data-lucide="video" class="w-5 h-5 text-temple-red flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-gray-700">{% trans "Interview Type:" %}</p>
                        <p class="text-gray-600">{{ schedule_interview_type }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6 pt-6 border-t border-gray-200">
            <h3 class="text-base font-semibold text-gray-900 mb-4">{% trans "Daily Break Times" %}</h3>
            {% if breaks %}
                <div class="flex flex-wrap gap-3">
                    {% for break in breaks %}
                        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-temple-red/10 text-temple-red text-sm font-medium">
                            <i data-lucide="coffee" class="w-4 h-4"></i>
                            {{ break.start_time|time:"g:i A" }} &mdash; {{ break.end_time|time:"g:i A" }}
                        </span>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-sm text-gray-500"><i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i> {% trans "No daily breaks scheduled." %}</p>
            {% endif %}
        </div>
    </div>

    <!-- Scheduled Interviews Overview -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-lg font-bold text-gray-900 flex items-center gap-2 mb-6 pb-3 border-b-2 border-temple-red">
            <i data-lucide="list" class="w-5 h-5 text-temple-red"></i> {% trans "Scheduled Interviews Overview" %}
        </h2>

        <!-- Calendar -->
        <div class="mb-6 p-4 border border-gray-200 rounded-xl bg-gray-50">
            <div id="calendar"></div>
        </div>

        <!-- Detailed List -->
        <h3 class="text-base font-semibold text-temple-red mb-4 pb-2 border-b border-gray-200">{% trans "Detailed List" %}</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-temple-red/10">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">{% trans "Date" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">{% trans "Time" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">{% trans "Applicant" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">{% trans "Email" %}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    {% for item in schedule %}
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ item.date|date:"F j, Y" }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ item.time|time:"g:i A" }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="text-sm font-medium text-temple-red">{{ item.application.name }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ item.application.email }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Actions -->
        <form method="post" action="{% url 'confirm_schedule_interviews_view' job.slug %}" class="mt-6 flex justify-end gap-3">
            {% csrf_token %}
            <a href="{% url 'schedule_interviews' job.slug %}" 
               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 Edit" %}
            </a>
            <button type="submit" 
                    name="confirm_schedule"
                    class="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all duration-200 bg-temple-red hover:bg-[#7a1a29] shadow-sm hover:shadow-md">
                <i data-lucide="check" class="w-4 h-4"></i> {% trans "Confirm Schedule" %}
            </button>
        </form>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="interviewDetailsModal" tabindex="-1" aria-labelledby="interviewDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-white rounded-2xl shadow-xl border border-gray-100">
            <div class="modal-header border-b border-gray-100 p-4">
                <h5 class="modal-title text-lg font-bold text-gray-900" id="interviewDetailsModalLabel">
                    <i data-lucide="calendar" class="w-5 h-5 text-temple-red mr-2"></i> {% trans "Interview Details" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-footer border-t border-gray-100 p-4 flex justify-between">
                <a href="#" 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="x" class="w-4 h-4"></i> {% trans "Close" %}
                </a>
                <button type="submit" 
                        class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white transition-all duration-200 bg-temple-red hover:bg-[#7a1a29]">
                    <i data-lucide="save" class="w-4 h-4"></i> {% trans "Save Location" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- FullCalendar CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek'
        },
        events: [
            {% for item in schedule %}
            {
                title: '{{ item.application.name }}',
                start: '{{ item.date|date:"Y-m-d" }}T{{ item.time|time:"H:i:s" }}',
                url: '#',
                color: '#9d2235', // temple-red
                extendedProps: {
                    email: '{{ item.application.email }}',
                    time: '{{ item.time|time:"g:i A" }}'
                }
            },
            {% endfor %}
            {% for break in breaks %}
            {
                title: 'Break',
                start: '{{ start_date|date:"Y-m-d" }}T{{ break.start_time|time:"H:i:s" }}',
                end: '{{ start_date|date:"Y-m-d" }}T{{ break.end_time|time:"H:i:s" }}',
                color: '#ff9f89', // Soft orange/salmon for breaks
                display: 'background'
            },
            {% endfor %}
        ],
        eventClick: function(info) {
            if (info.event.title !== 'Break') {
                console.log('--- Candidate Interview Details ---');
                console.log('Candidate: ' + info.event.title);
                console.log('Date: ' + info.event.start.toLocaleDateString());
                console.log('Time: ' + info.event.extendedProps.time);
                console.log('Email: ' + info.event.extendedProps.email);
                console.log('-----------------------------------');
            }
            info.jsEvent.preventDefault();
        },
        eventDidMount: function(info) {
            if (info.event.display === 'background') {
                info.el.style.backgroundColor = '#ff9f89';
            }
        }
    });
    calendar.render();

    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
{% endblock %}