{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>🏥 Medical Center Dashboard</h1>
    <p>Welcome, <strong>{{ user.username }}</strong> ({{ user.role }})</p>
    
    <!-- Dashboard Cards -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px;">
        
        <!-- Patient Management Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #3498db;">📋</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Patient Management</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Register and manage patients</p>
            <div style="display: flex; flex-direction: column; gap: 15px;">
                <a href="/patients" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Patients</a>
                <a href="/patients/export" class="btn btn-success" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">📤 Export Patients</a>
            </div>
        </div>
        
        <!-- Doctor Management Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #9b59b6;">👨‍⚕️</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Doctor Management</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Manage doctors and their details</p>
            <a href="/doctors" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Doctors</a>
        </div>
        
        <!-- Appointment Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #e74c3c;">📅</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Appointments</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Schedule and manage appointments</p>
            <a href="/appointments" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Appointments</a>
        </div>
        
        <!-- Medicine Inventory Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #27ae60;">💊</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Medicine Inventory</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Manage medicine stock</p>
            <div style="display: flex; flex-direction: column; gap: 15px;">
                <a href="/medicines" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Medicines</a>
                <a href="/medicines/import" class="btn btn-success" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">📥 Import Medicines</a>
            </div>
        </div>
        
        <!-- Billing Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #f39c12;">💰</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Billing System</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Generate and manage bills</p>
            <a href="/billing" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Billing</a>
        </div>
        
        <!-- Prescription Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #1abc9c;">📝</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Prescriptions</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Create and manage prescriptions</p>
            <a href="/prescriptions" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Prescriptions</a>
        </div>
        
        <!-- Reports Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #34495e;">📊</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Reports & Analytics</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">View system reports</p>
            <a href="/reports" class="btn btn-primary" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">Go to Reports</a>
        </div>
        
        <!-- Settings & Admin Card -->
        <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s, box-shadow 0.3s;">
            <div style="font-size: 40px; margin-bottom: 20px; color: #8e44ad;">⚙️</div>
            <h3 style="margin: 0 0 15px 0; font-size: 20px; color: #2c3e50;">Settings & Admin</h3>
            <p style="color: #7f8c8d; margin-bottom: 25px; font-size: 15px;">Configure system settings</p>
            <div style="display: flex; flex-direction: column; gap: 15px;">
                <a href="/settings/hospital" class="btn btn-accent" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">🏥 Hospital Settings</a>
                <a href="/settings" class="btn btn-warning" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">🖼️ Prescription Settings</a>
                {% if user.role == 'Administrator' %}
                <a href="/admin/users" class="btn btn-info" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">👥 User Management</a>
                <a href="/admin/keys" class="btn btn-danger" style="text-decoration: none; padding: 14px 20px; font-size: 16px; border-radius: 8px;">🔑 Registration Keys</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
.btn {
    border: none;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-block;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-primary { background: #3498db; color: white; }
.btn-success { background: #27ae60; color: white; }
.btn-accent { background: #9b59b6; color: white; }
.btn-warning { background: #f39c12; color: white; }
.btn-info { background: #3498db; color: white; }
.btn-danger { background: #e74c3c; color: white; }

/* Card hover effect */
div[style*="box-shadow"] {
    transition: transform 0.3s, box-shadow 0.3s;
}

div[style*="box-shadow"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .btn {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}
</style>
{% endblock %}