{% extends "base.html" %}

{% block title %}Appointments - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">Appointments</h1>
    <p class="text-gray-600">Medical assessment appointments and scheduling</p>
</div>

<!-- Search and Filter -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" action="{{ url_for('appointments_list') }}" class="space-y-4">
        <div class="flex gap-4">
            <div class="flex-1">
                <input type="text" 
                       name="search" 
                       value="{{ search }}" 
                       placeholder="Search by case, claimant, client, doctor, location..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Search
            </button>
        </div>
        <div class="flex gap-4">
            <div class="flex-1">
                <select name="date_filter" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Dates</option>
                    <option value="today" {% if date_filter == 'today' %}selected{% endif %}>Today</option>
                    <option value="this_week" {% if date_filter == 'this_week' %}selected{% endif %}>This Week</option>
                    <option value="upcoming" {% if date_filter == 'upcoming' %}selected{% endif %}>Upcoming</option>
                    <option value="past" {% if date_filter == 'past' %}selected{% endif %}>Past</option>
                </select>
            </div>
            <div class="flex-1">
                <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Statuses</option>
                    <option value="scheduled" {% if status_filter == 'scheduled' %}selected{% endif %}>Scheduled</option>
                    <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
                    <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    <option value="no-show" {% if status_filter == 'no-show' %}selected{% endif %}>No-Show</option>
                </select>
            </div>
            {% if search or status_filter or date_filter %}
            <a href="{{ url_for('appointments_list') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-times mr-2"></i>Clear
            </a>
            {% endif %}
        </div>
    </form>
</div>

<!-- Appointments List -->
{% if appointments %}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date & Time
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Case & Claimant
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Doctor & Location
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Service Code
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Letters
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for appt in appointments %}
                <tr class="hover:bg-gray-50 transition {% if appt['appointment_date'] and appt['appointment_date'] == date.today()|string %}bg-blue-50{% endif %}">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            {{ appt['appointment_date']|format_date }}
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ appt['appointment_time'] or 'No time set' }}
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">
                            Case #{{ appt['file_case_id'] or 'N/A' }}
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ appt['claimant_first_name'] }} {{ appt['claimant_last_name'] }}
                        </div>
                        {% if appt['client_company_name'] %}
                        <div class="text-xs text-gray-400">
                            {{ appt['client_company_name'] }}
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">
                            {{ appt['doctor_name'] or 'Not assigned' }}
                        </div>
                        {% if appt['specialist_number'] %}
                        <div class="text-xs text-gray-500">
                            #{{ appt['specialist_number'] }}
                        </div>
                        {% endif %}
                        {% if appt['location'] %}
                        <div class="text-xs text-gray-400">
                            <i class="fas fa-map-marker-alt mr-1"></i>{{ appt['location'] }}
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-mono bg-gray-100 text-gray-800 rounded">
                            {{ appt['service_code'] or 'N/A' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if appt['status'] == 'scheduled' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-clock mr-1"></i>Scheduled
                        </span>
                        {% elif appt['status'] == 'completed' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-check-circle mr-1"></i>Completed
                        </span>
                        {% elif appt['status'] == 'cancelled' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                            <i class="fas fa-times-circle mr-1"></i>Cancelled
                        </span>
                        {% elif appt['status'] == 'no-show' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                            <i class="fas fa-user-slash mr-1"></i>No-Show
                        </span>
                        {% endif %}
                        {% if appt['invoiced'] == 1 %}
                        <div class="mt-1">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                <i class="fas fa-dollar-sign mr-1"></i>Invoiced
                            </span>
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-center">
                        {% if appt['letter_count'] and appt['letter_count'] > 0 %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-paperclip mr-1"></i>{{ appt['letter_count'] }}
                        </span>
                        {% else %}
                        <span class="text-xs text-gray-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
                        <a href="{{ url_for('appointment_view', appointment_id=appt['id']) }}" 
                           class="text-blue-600 hover:text-blue-900" title="View">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ url_for('appointment_print', appointment_id=appt['id']) }}" 
                           target="_blank"
                           class="text-purple-600 hover:text-purple-900" title="Print">
                            <i class="fas fa-print"></i>
                        </a>
                        <a href="{{ url_for('appointment_edit', appointment_id=appt['id']) }}" 
                           class="text-yellow-600 hover:text-yellow-900" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form method="POST" 
                              action="{{ url_for('appointment_delete', appointment_id=appt['id']) }}" 
                              onsubmit="return confirm('Are you sure you want to delete this appointment?');"
                              style="display: inline;">
                            <button type="submit" class="text-red-600 hover:text-red-900" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
    <h2 class="text-2xl font-bold text-gray-600 mb-2">No Appointments Found</h2>
    <p class="text-gray-500 mb-6">
        {% if search or status_filter or date_filter %}
        No appointments match your search criteria. Try adjusting your filters.
        {% else %}
        Get started by scheduling your first appointment.
        {% endif %}
    </p>
    <a href="{{ url_for('appointment_new') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
        <i class="fas fa-calendar-plus mr-2"></i>Schedule First Appointment
    </a>
</div>
{% endif %}
{% endblock %}