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

{% block title %}Doctor 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;
    }
    
    .benefits-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
    }
    
    .benefits-table th {
        background: #667eea;
        color: white;
        padding: 1rem;
        text-align: left;
    }
    
    .benefits-table td {
        padding: 1rem;
        border-bottom: 1px solid #ddd;
    }
    
    .benefits-table tr:hover {
        background: #f8f9fa;
    }
</style>
{% endblock %}

{% block content %}
<div class="welcome-header">
    <h1>👨‍⚕️ Welcome, Healthcare Provider</h1>
    <p>Streamline patient care and improve communication with your care team</p>
</div>

<h2 style="margin-bottom: 1.5rem;">Your Professional Tools</h2>

<div class="features-grid">
    {% for feature in features %}
    <div class="feature-box">
        <h3>✓ {{ feature }}</h3>
        <p>
            {% if "appointment" in feature.lower %}
                View your schedule, manage patient appointments, and send automated reminders.
            {% elif "medical" in feature.lower %}
                Access comprehensive patient medical records, tests, and treatment history.
            {% elif "Communicate" in feature %}
                Send secure messages to patients and their family members about care and recovery.
            {% elif "prescription" in feature.lower %}
                Send prescription updates and medication instructions directly to patients.
            {% elif "progress" in feature.lower %}
                Monitor patient recovery and treatment outcomes with integrated tracking tools.
            {% endif %}
        </p>
    </div>
    {% endfor %}
</div>

<div class="info-section">
    <h3>🔧 Practice Management Features:</h3>
    <table class="benefits-table">
        <tr>
            <th>Feature</th>
            <th>Benefit</th>
        </tr>
        <tr>
            <td><strong>Patient Portal</strong></td>
            <td>Reduce administrative burden by allowing patients to self-manage appointments and records</td>
        </tr>
        <tr>
            <td><strong>Family Coordination</strong></td>
            <td>Involve family members in care decisions while maintaining HIPAA compliance</td>
        </tr>
        <tr>
            <td><strong>Automated Reminders</strong></td>
            <td>Reduce no-shows with intelligent appointment and medication reminders</td>
        </tr>
        <tr>
            <td><strong>Secure Messaging</strong></td>
            <td>HIPAA-compliant communication that reduces phone calls and improves response times</td>
        </tr>
        <tr>
            <td><strong>Clinical Notes</strong></td>
            <td>Detailed visit notes and patient history accessible anytime, anywhere</td>
        </tr>
    </table>
</div>

<div class="info-section">
    <h3>🔧 Quick Access to Professional Tools</h3>
    {% if user.is_authenticated and user.profile.user_type == 'doctor' %}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
        <a href="{% url 'familytouch:provider_appointments' %}" 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;">
            📅 Manage Appointments
        </a>
        <a href="{% url 'familytouch:provider_patients' %}" 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;">
            👥 My Patients
        </a>
        <a href="{% url 'familytouch:direct_communication' %}" 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;">
            💬 Messages
        </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 Reviews
        </a>
    </div>
    {% else %}
    <p style="margin-top: 1rem; color: #666;">Sign up or log in to access your professional tools dashboard.</p>
    {% endif %}
</div>

<div class="cta-section">
    <h2>Enhance Your Practice with FamilyTouch</h2>
    <p>Join healthcare providers improving patient outcomes through better communication</p>
    <div class="cta-buttons">
        <a href="{% url 'familytouch:doctor_signup' %}" class="btn">Register as Provider</a>
        <a href="{% url 'familytouch:dashboard' %}" class="btn btn-secondary">Go to Dashboard</a>
    </div>
</div>

<div class="info-section">
    <h3>📋 Getting Started for Providers:</h3>
    <ol>
        <li><strong>Professional Verification</strong> - Register with your medical credentials</li>
        <li><strong>Practice Setup</strong> - Configure your practice information and hours</li>
        <li><strong>Patient Integration</strong> - Add existing patients or allow them to connect to you</li>
        <li><strong>Team Onboarding</strong> - Add clinic staff and nurses to your account</li>
        <li><strong>Start Caring</strong> - Begin using FamilyTouch for patient communication</li>
    </ol>
</div>

<div class="info-section">
    <h3>✅ Compliance & Security</h3>
    <ul>
        <li><strong>HIPAA Compliant</strong> - Full compliance with healthcare privacy regulations</li>
        <li><strong>Encrypted Communications</strong> - End-to-end encryption for all patient data</li>
        <li><strong>Audit Logs</strong> - Complete audit trails for regulatory compliance</li>
        <li><strong>Patient Consent</strong> - Granular permissions management for data access</li>
        <li><strong>Data Backup</strong> - Automatic daily backups with disaster recovery</li>
    </ul>
</div>
{% endblock %}