{% extends 'familytouch/base.html' %}

{% block title %}Your Patients - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .patients-container {
        max-width: 1400px;
        margin: 2rem auto;
        padding: 0 2rem;
    }
    
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
    }
    
    .page-header h1 {
        margin: 0;
        font-size: 2.5rem;
        font-weight: 700;
    }
    
    .page-header p {
        margin: 0.5rem 0 0 0;
        opacity: 0.95;
        font-size: 1.1rem;
    }
    
    .stats-overview {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .stats-overview .stat-number {
        font-size: 3rem;
        font-weight: 700;
        color: #667eea;
    }
    
    .stats-overview .stat-label {
        color: #666;
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }
    
    .patient-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 1.5rem;
    }
    
    .patient-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .patient-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    
    .patient-header {
        background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
        padding: 1.5rem;
        border-bottom: 3px solid #667eea;
    }
    
    .patient-name {
        font-size: 1.3rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 0.5rem;
    }
    
    .patient-username {
        color: #666;
        font-size: 0.9rem;
    }
    
    .patient-body {
        padding: 1.5rem;
    }
    
    .patient-section {
        margin-bottom: 1.5rem;
    }
    
    .patient-section h4 {
        font-size: 0.95rem;
        color: #667eea;
        margin-bottom: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .vital-info {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        padding: 0.75rem;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    
    .appointment-mini {
        background: #f8f9fa;
        padding: 0.75rem;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
        border-left: 3px solid #667eea;
    }
    
    .update-mini {
        background: #f8f9fa;
        padding: 0.75rem;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }
    
    .booking-form {
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
    }
    
    .booking-form input,
    .booking-form textarea {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
    }
    
    .booking-form input:focus,
    .booking-form textarea:focus {
        outline: none;
        border-color: #667eea;
    }
    
    .btn-book {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    .btn-book:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }
    
    .btn-toggle {
        background: #667eea;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.85rem;
        cursor: pointer;
        margin-top: 0.5rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .empty-state-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .messages {
        margin-bottom: 1.5rem;
    }
    
    .message {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    
    .message.success {
        background: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }
    
    .message.error {
        background: #f8d7da;
        color: #721c24;
        border-left: 4px solid #dc3545;
    }
    
    @media (max-width: 768px) {
        .patient-grid {
            grid-template-columns: 1fr;
        }
        
        .page-header h1 {
            font-size: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="patients-container">
    <div class="page-header">
        <h1>👥 Your Patients</h1>
        <p>Manage your connected patients and book appointments</p>
    </div>

    {% if messages %}
    <div class="messages">
        {% for m in messages %}
            <div class="message {% if m.tags %}{{ m.tags }}{% else %}success{% endif %}">{{ m }}</div>
        {% endfor %}
    </div>
    {% endif %}

    {% if total_patients > 0 %}
        <div class="stats-overview">
            <div class="stat-number">{{ total_patients }}</div>
            <div class="stat-label">Connected Patients</div>
        </div>

        <div class="patient-grid">
            {% for data in patients_data %}
                <div class="patient-card">
                    <div class="patient-header">
                        <div class="patient-name">
                            👤 {{ data.patient.get_full_name|default:data.patient.username }}
                        </div>
                        <div class="patient-username">
                            @{{ data.patient.username }}
                            {% if data.patient.email %}
                            <br>📧 {{ data.patient.email }}
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="patient-body">
                        <!-- Latest Vital -->
                        {% if data.latest_vital %}
                        <div class="patient-section">
                            <h4>💓 Latest Health Record</h4>
                            <div class="vital-info">
                                <strong>{{ data.latest_vital.get_vital_type_display }}:</strong> 
                                {{ data.latest_vital.value }} {{ data.latest_vital.units }}
                                <br>
                                <span style="font-size: 0.8rem; color: #666;">
                                    {{ data.latest_vital.created_at|date:"M d, Y g:i A" }}
                                </span>
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Upcoming Appointments -->
                        {% if data.upcoming_appointments %}
                        <div class="patient-section">
                            <h4>📅 Upcoming Appointments</h4>
                            {% for appt in data.upcoming_appointments %}
                                <div class="appointment-mini">
                                    🕐 {{ appt.start|date:"M d, g:i A" }}
                                    {% if appt.reason %}
                                    <br>📋 {{ appt.reason }}
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        
                        <!-- Recent Updates -->
                        {% if data.recent_updates %}
                        <div class="patient-section">
                            <h4>📋 Recent Updates</h4>
                            {% for update in data.recent_updates %}
                                <div class="update-mini">
                                    {{ update.content|truncatewords:15 }}
                                    <br>
                                    <span style="font-size: 0.75rem; color: #999;">
                                        {{ update.created_at|date:"M d, g:i A" }}
                                    </span>
                                </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        
                        <!-- Quick Booking Form -->
                        <button class="btn-toggle" onclick="toggleBooking{{ data.patient.id }}()">
                            📅 Book Appointment
                        </button>
                        
                        <div id="booking-form-{{ data.patient.id }}" style="display: none;">
                            <form method="post" class="booking-form">
                                {% csrf_token %}
                                <input type="hidden" name="book_appointment" value="true">
                                <input type="hidden" name="patient_id" value="{{ data.patient.id }}">
                                
                                <input 
                                    type="datetime-local" 
                                    name="start" 
                                    required
                                    placeholder="Select date and time"
                                >
                                
                                <textarea 
                                    name="reason" 
                                    rows="2" 
                                    placeholder="Reason for appointment (e.g., Follow-up, Check-up)"
                                ></textarea>
                                
                                <button type="submit" class="btn-book">
                                    ✅ Schedule Appointment
                                </button>
                            </form>
                        </div>
                        
                        <script>
                            function toggleBooking{{ data.patient.id }}() {
                                var form = document.getElementById('booking-form-{{ data.patient.id }}');
                                if (form.style.display === 'none') {
                                    form.style.display = 'block';
                                } else {
                                    form.style.display = 'none';
                                }
                            }
                        </script>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">👥</div>
            <h3>No Connected Patients</h3>
            <p style="color: #666; margin: 1rem 0;">
                Patients will appear here when they connect with you through invitations.
            </p>
            <a href="{% url 'familytouch:connected_care' %}" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
                🔗 View Connections
            </a>
        </div>
    {% endif %}
    
    <div style="text-align: center; margin-top: 2rem;">
        <a href="{% url 'familytouch:dashboard' %}" style="color: #667eea; text-decoration: none; font-weight: 600;">← Back to Dashboard</a>
    </div>
</div>
{% endblock %}