kaauh_ats/templates/interviews/preview_schedule.html

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

{% block customCSS %}
<style>
    /* Custom Teal Theme Variables (Adapt these if defined globally) */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-light: #e0f2f4; /* Very light background accent */
        --kaauh-teal-dark: #004a53;
        --kaauh-border-color: #e3e8ed;
        --kaauh-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* Primary Theme Utilities */
    .text-primary-theme { color: var(--kaauh-teal) !important; }
    .bg-primary-theme-light { background-color: var(--kaauh-teal-light) !important; }
    .border-primary-theme { border-color: var(--kaauh-teal) !important; }

    /* Custom Button Style */
    .btn-teal-primary {
        background-color: var(--kaauh-teal);
        color: white;
        border-color: var(--kaauh-teal);
        transition: all 0.2s ease;
    }
    .btn-teal-primary:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        color: white;
    }

    /* Layout and Typography */
    .page-header {
        font-weight: 700;
        color: var(--kaauh-teal-dark);
        border-left: 5px solid var(--kaauh-teal);
        padding-left: 15px;
    }

    /* Card Styling */
    .schedule-card {
        border: 1px solid var(--kaauh-border-color);
        border-radius: 1rem;
        box-shadow: var(--kaauh-shadow);
        transition: box-shadow 0.3s ease;
        padding: 0; /* Control padding inside body */
    }
    .schedule-card:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    }
    .card-title-border {
        font-weight: 600;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--kaauh-teal);
        margin-bottom: 1.5rem;
        color: var(--kaauh-teal);
    }

    /* Break Times Display */
    .break-time-container {
        border-left: 3px solid var(--kaauh-teal);
        border-radius: 0.5rem;
        padding: 10px 15px;
        background-color: var(--kaauh-teal-light);
    }

    /* FullCalendar Customization */
    #calendar {
        font-size: 0.9em;
    }
    .fc-event-main-frame {
        color: var(--kaauh-teal-dark);
        font-weight: 500;
    }
    /* Event bar color (Candidates) */
    .fc-event-title-container {
        background-color: var(--kaauh-teal-light);
        border-left: 3px solid var(--kaauh-teal);
        padding: 2px 5px;
        border-radius: 3px;
    }
    /* Break background color is set in JS events */
</style>
{% endblock %}

{% block content %}
<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-5">
        <h1 class="h3 page-header">
            <i class="fas fa-calendar-alt me-2 text-primary-theme"></i> Interview Schedule Preview: **{{ job.title }}**
        </h1>
    </div>

    <div class="card schedule-card mb-5">
        <div class="card-body p-4 p-lg-5">
            <h4 class="card-title-border">{% trans "Schedule Parameters" %}</h4>
            <div class="row g-4">

                <div class="col-md-6">
                    <p class="mb-2"><strong><i class="fas fa-clock me-2 text-primary-theme"></i> Working Hours:</strong> {{ start_time|time:"g:i A" }} to {{ end_time|time:"g:i A" }}</p>
                    <p class="mb-2"><strong><i class="fas fa-hourglass-half me-2 text-primary-theme"></i> Interview Duration:</strong> {{ interview_duration }} minutes</p>
                    <p class="mb-2"><strong><i class="fas fa-shield-alt me-2 text-primary-theme"></i> Buffer Time:</strong> {{ buffer_time }} minutes</p>
                </div>

                <div class="col-md-6">
                    <p class="mb-2"><strong><i class="fas fa-calendar-day me-2 text-primary-theme"></i> Interview Period:</strong> {{ start_date|date:"F j, Y" }} &mdash; {{ end_date|date:"F j, Y" }}</p>
                    <p class="mb-2"><strong><i class="fas fa-list-check me-2 text-primary-theme"></i> Active Days:</strong>
                        {% 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>
                    <p class="mb-2"><strong><i class="fas fa-calendar-day me-2 text-primary-theme"></i> Interview Type:</strong> {{schedule_interview_type}}</p>
                </div>
            </div>

            <h5 class="mt-4 pt-3 border-top">{% trans "Daily Break Times" %}</h5>
            {% if breaks %}
            <div class="d-flex flex-wrap gap-3 mt-3">
                {% for break in breaks %}
                <span class="badge rounded-pill bg-primary-theme-light text-primary-theme p-2 px-3 fw-normal shadow-sm">
                    <i class="far fa-mug-hot me-1"></i>
                    {{ break.start_time|time:"g:i A" }} &mdash; {{ break.end_time|time:"g:i A" }}
                </span>
                {% endfor %}
            </div>
            {% else %}
            <p class="mt-3"><small class="text-muted"><i class="fas fa-exclamation-circle me-1"></i> No daily breaks scheduled.</small></p>
            {% endif %}
        </div>
    </div>

    <div class="card schedule-card">
        <div class="card-body p-4 p-lg-5">
            <h4 class="card-title-border">{% trans "Scheduled Interviews Overview" %}</h4>

            <div id="calendar-container" class="mb-5 p-3 border rounded bg-light">
                <div id="calendar"></div>
            </div>

            <h5 class="pb-2 border-bottom mb-3 text-primary-theme">{% trans "Detailed List" %}</h5>
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead class="bg-primary-theme-light">
                        <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Time</th>
                            <th scope="col">Candidate</th>
                            <th scope="col">Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in schedule %}
                        <tr>
                            <td>{{ item.date|date:"F j, Y" }}</td>
                            <td>{{ item.time|time:"g:i A" }}</td>
                            <td>{{ item.application.name }}</td>
                            <td>{{ item.application.email }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if schedule_interview_type == "Onsite" %}
                <button type="submit" name="confirm_schedule" class="btn btn-teal-primary px-4" data-bs-toggle="modal" data-bs-target="#interviewDetailsModal" data-placement="top">
                    <i class="fas fa-check me-2"></i> {% trans "Confirm Schedule" %}
                </button>
            {% else %}
                <form method="post" action="{% url 'confirm_schedule_interviews_view' slug=job.slug %}" class="mt-4 d-flex justify-content-end gap-3">
                    {% csrf_token %}
                    <a href="{% url 'schedule_interviews' slug=job.slug %}" class="btn btn-secondary px-4">
                        <i class="fas fa-arrow-left me-2"></i> {% trans "Back to Edit" %}
                    </a>
                    <button type="submit" name="confirm_schedule" class="btn btn-teal-primary px-4">
                        <i class="fas fa-check me-2"></i> {% trans "Confirm Schedule" %}
                    </button>
                </form>
            {% endif %}
        </div>
    </div>
</div>

<div class="modal fade" id="interviewDetailsModal" tabindex="-1" aria-labelledby="interviewDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="interviewDetailsModalLabel">{% trans "Interview Details" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"> <form method="post" action="{% url 'confirm_schedule_interviews_view' job.slug %}" enctype="multipart/form-data" id="onsite-form">
                    {% csrf_token %}
                    
                    {# Renders the single 'location' field using the crispy filter #}
                    {{ form|crispy }} 
                                        
                </form>
            </div>
            <div class="modal-footer">
                <div class="d-flex align-items-center justify-content-between mt-4 mb-0">                    
                        <a href="{% url 'list_meetings' %}" class="btn btn-secondary me-2">
                            <i class="fas fa-times me-1"></i> Close
                        </a>                                             
                        <button type="submit" class="btn btn-primary" form="onsite-form"> 
                            <i class="fas fa-save me-1"></i> Save Location
                        </button>
                    </div>
            </div>
        </div>
    </div>
</div>

<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: '#',
                // Use the theme color for candidate events
                color: 'var(--kaauh-teal-dark)',
                extendedProps: {
                    email: '{{ item.application.email }}',
                    time: '{{ item.time|time:"g:i A" }}'
                }
            },
            {% endfor %}
            {% for break in breaks %}
            {
                title: 'Break',
                // FullCalendar requires a specific date for breaks, using start_date as a placeholder for daily breaks.
                // Note: Breaks displayed on the monthly grid will only show on start_date, but weekly/daily view should reflect it daily if implemented correctly in the backend or using recurring events.
                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', // A nice soft orange/salmon color for breaks
                display: 'background'
            },
            {% endfor %}
        ],
        eventClick: function(info) {
            // Log details to console instead of using alert()
            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('-----------------------------------');
                // You would typically open a Bootstrap modal here instead of using console.log
            }
            info.jsEvent.preventDefault();
        },
        eventDidMount: function(info) {
             // Darken the text for background events (breaks) for better contrast
            if (info.event.display === 'background') {
                info.el.style.backgroundColor = '#ff9f89';
            }
        }
    });
    calendar.render();
});
</script>
{% endblock %}