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

{% block title %}Patient Welcome - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .welcome-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .welcome-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .welcome-header p {
        font-size: 1.1rem;
        opacity: 0.95;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .feature-box {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        border-left: 4px solid #667eea;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .feature-box h3 {
        color: #667eea;
        margin-bottom: 0.5rem;
    }
    
    .feature-box p {
        color: #666;
        line-height: 1.5;
    }
    
    .cta-section {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        padding: 3rem;
        border-radius: 8px;
        text-align: center;
        margin-top: 3rem;
    }
    
    .cta-section h2 {
        margin-bottom: 1rem;
    }
    
    .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }
    
    .info-section {
        background: #f8f9fa;
        padding: 2rem;
        border-radius: 8px;
        margin-top: 2rem;
    }
    
    .info-section h3 {
        color: #333;
        margin-bottom: 1rem;
    }
    
    .info-section ul {
        list-style-position: inside;
        color: #666;
    }
    
    .info-section li {
        margin-bottom: 0.5rem;
    }

    .dietitian-section, .meal-selection {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        margin-top: 1.5rem;
    }

    .meal-selection .family-choices label {
        display: inline-block;
        margin-right: 1rem;
        color: #444;
    }

    .meal-selection .meal-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        align-items: center;
    }

    .meal-selection select {
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
</style>
{% endblock %}

{% block content %}
<div class="welcome-header">
    <h1>👩‍⚕️ Welcome, Patient</h1>
    <p>Your personalized healthcare hub - stay connected with your doctors and family</p>
</div>

<h2 style="margin-bottom: 1.5rem;">Your Key Features</h2>

<div class="features-grid">
    {% for feature in features %}
    <div class="feature-box">
        <h3>✓ {{ feature }}</h3>
        <p>
            {% if "appointment" in feature.lower %}
                Schedule and manage your doctor appointments directly through the app with automated reminders.
            {% elif "medical" in feature.lower %}
                Access your complete medical history, test results, and health records in one secure place.
            {% elif "medication" in feature.lower %}
                Get timely reminders for taking your medications and track your medication schedule.
            {% elif "share" in feature.lower %}
                Keep your family updated with health milestones and recovery progress.
            {% elif "communicate" in feature.lower %}
                Reach out to your healthcare providers with questions anytime.
            {% endif %}
        </p>
    </div>
    {% endfor %}
</div>


<div class="info-section">
    <h3>🎯 Your Health Management Tools</h3>
    {% if user.is_authenticated and user.profile.user_type == 'patient' %}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
        <a href="{% url 'familytouch:dashboard' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            📊 My Dashboard
        </a>
        <a href="{% url 'familytouch:dietitian_review' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            🍎 Dietitian Review
        </a>
        <a href="{% url 'familytouch:connected_care' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            🔗 Connect Care Team
        </a>
        <a href="{% url 'familytouch:health_tracking' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            📈 Track Vitals
        </a>
        <a href="{% url 'familytouch:real_time_updates' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            ⚡ Updates & Alerts
        </a>
        <a href="{% url 'familytouch:direct_communication' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            💬 Message Team
        </a>
    </div>
    {% else %}
    <p style="margin-top: 1rem; color: #666;">Sign up or log in to access your personalized health dashboard.</p>
    {% endif %}
</div>

<div class="info-section">
    <h3>📋 How to Get Started:</h3>
    <ol>
        <li><strong>Create Your Account</strong> - Sign up with your email or phone number</li>
        <li><strong>Complete Your Profile</strong> - Add your medical history and emergency contacts</li>
        <li><strong>Connect Your Providers</strong> - Add your doctors and healthcare providers</li>
        <li><strong>Invite Family Members</strong> - Grant family members access to your health information</li>
        <li><strong>Start Using FamilyTouch</strong> - Schedule appointments, view records, and communicate</li>
    </ol>
</div>

<div class="cta-section">
    <h2>Ready to Take Control of Your Health?</h2>
    <p>Join thousands of patients already using FamilyTouch to manage their healthcare</p>
    <div class="cta-buttons">
        <a href="{% url 'familytouch:patient_signup' %}" class="btn">Sign Up as Patient</a>
        <a href="#" class="btn btn-secondary">Learn More</a>
    </div>
</div>

<div class="info-section">
    <h3>🤔 Frequently Asked Questions</h3>
    <ul>
        <li><strong>Is my health information secure?</strong> - Yes, we use end-to-end encryption and comply with HIPAA regulations.</li>
        <li><strong>Can I share my records with family?</strong> - Yes, you control who sees what information with granular permissions.</li>
        <li><strong>What if I need emergency support?</strong> - Our system includes direct contacts for emergency services and your primary care physician.</li>
        <li><strong>Is there a mobile app?</strong> - Yes, FamilyTouch is available on iOS and Android with full feature parity.</li>
    </ul>
</div>
{% endblock %}

{% block extra_js %}
{% endblock %}