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

{% block title %}{{ title }} - PX 360{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-[#005696]">{{ title }}</h1>
                <p class="text-[#64748b] mt-1">{% trans "Manage on-call admin schedules and notifications" %}</p>
            </div>
            <div class="flex gap-3">
                <a href="{% url 'complaints:oncall_schedule_list' %}" 
                   class="px-4 py-2 bg-[#005696] text-white rounded-lg hover:bg-[#007bbd] transition-colors flex items-center gap-2">
                    <i data-lucide="calendar" class="w-4 h-4"></i>
                    {% trans "Manage Schedules" %}
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[#64748b]">{% trans "Total Schedules" %}</p>
                    <p class="text-3xl font-bold text-[#005696]">{{ total_schedules }}</p>
                </div>
                <div class="w-12 h-12 bg-[#eef6fb] rounded-lg flex items-center justify-center">
                    <i data-lucide="calendar-days" class="w-6 h-6 text-[#005696]"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[#64748b]">{% trans "Active On-Call Admins" %}</p>
                    <p class="text-3xl font-bold text-[#007bbd]">{{ total_active_oncall }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
                    <i data-lucide="users" class="w-6 h-6 text-[#007bbd]"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[#64748b]">{% trans "Current Time" %}</p>
                    <p class="text-xl font-bold text-[#64748b]">{{ current_time|date:"Y-m-d H:i" }}</p>
                    <p class="text-xs text-gray-400">Asia/Riyadh</p>
                </div>
                <div class="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center">
                    <i data-lucide="clock" class="w-6 h-6 text-[#64748b]"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Schedule Status Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-[#005696]">{% trans "Schedule Status Overview" %}</h2>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#64748b] uppercase tracking-wider">{% trans "Scope" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#64748b] uppercase tracking-wider">{% trans "Working Hours" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#64748b] uppercase tracking-wider">{% trans "Current Status" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#64748b] uppercase tracking-wider">{% trans "On-Call Admins" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#64748b] uppercase tracking-wider">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for status in schedule_statuses %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            {% if status.schedule.hospital %}
                                <span class="font-medium text-gray-900">{{ status.schedule.hospital.name }}</span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#eef6fb] text-[#005696]">
                                    {% trans "System-wide" %}
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900">
                                {{ status.schedule.work_start_time|time:"H:i" }} - {{ status.schedule.work_end_time|time:"H:i" }}
                            </div>
                            <div class="text-xs text-[#64748b]">
                                {% for day in status.schedule.get_working_days_list %}
                                    {% if day == 0 %}{% trans "Mon" %}{% elif day == 1 %}{% trans "Tue" %}{% elif day == 2 %}{% trans "Wed" %}{% elif day == 3 %}{% trans "Thu" %}{% elif day == 4 %}{% trans "Fri" %}{% elif day == 5 %}{% trans "Sat" %}{% elif day == 6 %}{% trans "Sun" %}{% endif %}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            {% if status.is_working_hours %}
                                <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 class="w-2 h-2 bg-green-500 rounded-full mr-1.5"></span>
                                    {% trans "Working Hours" %}
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
                                    <span class="w-2 h-2 bg-amber-500 rounded-full mr-1.5"></span>
                                    {% trans "After Hours" %}
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-medium text-gray-900">{{ status.on_call_count }}</span>
                            <span class="text-xs text-[#64748b] ml-1">{% trans "assigned" %}</span>
                        </td>
                        <td class="px-6 py-4">
                            <a href="{% url 'complaints:oncall_schedule_detail' status.schedule.id %}" 
                               class="text-[#005696] hover:text-[#007bbd] font-medium text-sm">
                                {% trans "View Details" %}
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="px-6 py-8 text-center text-[#64748b]">
                            <i data-lucide="calendar-x" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
                            <p>{% trans "No on-call schedules configured yet." %}</p>
                            <a href="{% url 'complaints:oncall_schedule_create' %}" 
                               class="text-[#005696] hover:text-[#007bbd] font-medium mt-2 inline-block">
                                {% trans "Create your first schedule" %}
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Notification Logic Info -->
    <div class="mt-8 bg-[#eef6fb] rounded-xl p-6">
        <h3 class="text-lg font-semibold text-[#005696] mb-4 flex items-center gap-2">
            <i data-lucide="info" class="w-5 h-5"></i>
            {% trans "How On-Call Notifications Work" %}
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex gap-3">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i data-lucide="sun" class="w-5 h-5 text-green-600"></i>
                </div>
                <div>
                    <h4 class="font-medium text-gray-900">{% trans "Working Hours" %}</h4>
                    <p class="text-sm text-[#64748b]">
                        {% trans "During configured working hours, ALL PX Admins are notified when a new complaint is created." %}
                    </p>
                </div>
            </div>
            <div class="flex gap-3">
                <div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i data-lucide="moon" class="w-5 h-5 text-amber-600"></i>
                </div>
                <div>
                    <h4 class="font-medium text-gray-900">{% trans "After Hours" %}</h4>
                    <p class="text-sm text-[#64748b]">
                        {% trans "Outside working hours, only ON-CALL admins are notified via BOTH email and SMS." %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>
{% endblock %}