{% extends "base.html" %}
{% load static %}

{% block extra_head %}
{{ block.super }}
<style>
    /* ========== PROFESSIONAL CLINICAL UI ========== */
    :root {
        --clinical-primary: #0f5c3e;
        --clinical-primary-dark: #0a4a32;
        --clinical-secondary: #124e5f;
        --clinical-accent: #2c9b77;
        --clinical-gray-50: #f8fafc;
        --clinical-gray-100: #f1f5f9;
        --clinical-gray-200: #e2e8f0;
        --clinical-gray-600: #475569;
        --clinical-gray-700: #334155;
        --clinical-gray-800: #1e293b;
        --clinical-success: #166534;
        --clinical-warning: #b45309;
        --clinical-danger: #991b1b;
    }

    /* Hero Section - Clinical Dashboard */
    .clinical-hero {
        background: linear-gradient(135deg, #ffffff 0%, var(--clinical-gray-50) 100%);
        border-radius: 1rem;
        padding: 2rem 2rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--clinical-gray-200);
        position: relative;
        overflow: hidden;
    }

    .clinical-hero::before {
        content: "🏥";
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-size: 6rem;
        opacity: 0.03;
        pointer-events: none;
    }

    .clinical-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(44, 155, 119, 0.08);
        border-radius: 100px;
        padding: 0.25rem 1rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--clinical-primary);
        margin-bottom: 1rem;
        text-transform: uppercase;
    }

    .clinical-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--clinical-gray-800);
        margin-bottom: 0.5rem;
        letter-spacing: -0.02em;
    }

    .clinical-subtitle {
        font-size: 0.85rem;
        color: var(--clinical-gray-600);
        max-width: 500px;
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

    /* Stats Grid - KPI Cards */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .kpi-card {
        background: white;
        border-radius: 0.75rem;
        padding: 1rem;
        border: 1px solid var(--clinical-gray-200);
        transition: all 0.2s;
    }

    .kpi-card:hover {
        border-color: var(--clinical-accent);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .kpi-icon {
        font-size: 1.5rem;
        color: var(--clinical-accent);
        margin-bottom: 0.5rem;
    }

    .kpi-value {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--clinical-gray-800);
    }

    .kpi-label {
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--clinical-gray-600);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-top: 0.25rem;
    }

    /* Form Section - Clinical Assessment */
    .clinical-form-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid var(--clinical-gray-200);
        margin-bottom: 1.5rem;
    }

    .clinical-form-header {
        background: linear-gradient(135deg, var(--clinical-secondary) 0%, #0a3a4a 100%);
        padding: 0.9rem 1.25rem;
        color: white;
    }

    .clinical-form-header h2 {
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        letter-spacing: -0.2px;
    }

    .clinical-form-header p {
        font-size: 0.7rem;
        opacity: 0.75;
        margin: 0.2rem 0 0 0;
    }

    .clinical-form-body {
        padding: 1.25rem;
    }

    /* Form Field Styling */
    .form-group-clinical {
        margin-bottom: 1rem;
    }

    .form-group-clinical label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--clinical-gray-700);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 0.35rem;
    }

    .form-group-clinical label i {
        color: var(--clinical-accent);
        font-size: 0.7rem;
        width: 16px;
    }

    .form-group-clinical input,
    .form-group-clinical select {
        width: 100%;
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
        border: 1.5px solid var(--clinical-gray-200);
        border-radius: 0.5rem;
        background: white;
        transition: all 0.2s;
        font-family: 'Inter', monospace;
    }

    .form-group-clinical input:focus,
    .form-group-clinical select:focus {
        border-color: var(--clinical-accent);
        box-shadow: 0 0 0 3px rgba(44, 155, 119, 0.1);
        outline: none;
    }

    .form-group-clinical select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232c7a5e' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
        background-repeat: no-repeat;
        background-position: right 0.85rem center;
    }

    .radio-group-clinical {
        display: flex;
        gap: 1.5rem;
        padding-top: 0.25rem;
    }

    .radio-option {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: var(--clinical-gray-700);
        cursor: pointer;
    }

    .radio-option input {
        width: auto;
        margin: 0;
        accent-color: var(--clinical-accent);
    }

    .form-helptext {
        font-size: 0.6rem;
        color: var(--clinical-gray-500);
        margin-top: 0.25rem;
        display: block;
    }

    .row-2cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }

    /* Submit Button */
    .btn-submit {
        background: linear-gradient(105deg, var(--clinical-primary) 0%, var(--clinical-accent) 100%);
        border: none;
        color: white;
        font-weight: 600;
        font-size: 0.85rem;
        padding: 0.7rem;
        border-radius: 2rem;
        width: 100%;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 92, 62, 0.3);
    }

    .info-note {
        font-size: 0.6rem;
        color: var(--clinical-gray-500);
        text-align: center;
        margin-top: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Features Grid */
    .features-grid-clinical {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .feature-item {
        background: white;
        border-radius: 0.75rem;
        padding: 0.9rem;
        text-align: center;
        border: 1px solid var(--clinical-gray-200);
        transition: all 0.2s;
    }

    .feature-item:hover {
        border-color: var(--clinical-accent);
        transform: translateY(-2px);
    }

    .feature-icon-clinical {
        width: 40px;
        height: 40px;
        background: var(--clinical-gray-100);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem auto;
        font-size: 1rem;
        color: var(--clinical-accent);
    }

    .feature-item h3 {
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
        color: var(--clinical-gray-800);
    }

    .feature-item p {
        font-size: 0.65rem;
        color: var(--clinical-gray-600);
        line-height: 1.3;
    }

    /* Error Styling */
    .errorlist {
        color: var(--clinical-danger);
        font-size: 0.65rem;
        list-style: none;
        margin-top: 0.25rem;
        padding-left: 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .kpi-grid {
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }
        .row-2cols {
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }
        .features-grid-clinical {
            grid-template-columns: repeat(2, 1fr);
        }
        .clinical-title {
            font-size: 1.4rem;
        }
        .clinical-hero {
            padding: 1.25rem;
        }
        .clinical-form-body {
            padding: 1rem;
        }
    }

    /* Print Styles */
    @media print {
        .navbar, .features-grid-clinical, .info-note {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Clinical Header -->
<div class="clinical-hero">
    <div class="clinical-badge">
        <i class="fas fa-microscope"></i> CLINICAL DECISION SUPPORT SYSTEM
    </div>
    <h1 class="clinical-title">
        Diabetes Risk Assessment
    </h1>
    <p class="clinical-subtitle">
        Evidence-based risk stratification following ADA clinical guidelines
    </p>
</div>

<!-- Assessment Form -->
<div class="clinical-form-card" id="screening-form">
    <div class="clinical-form-header">
        <h2>
            <i class="fas fa-clipboard-list"></i>
            Patient Risk Assessment
        </h2>
        <p>Complete all fields for accurate clinical risk calculation</p>
    </div>
    <div class="clinical-form-body">
        <form method="POST" id="screeningForm">
            {% csrf_token %}
            
            <!-- Age Field -->
            <div class="form-group-clinical">
                <label><i class="fas fa-calendar-alt"></i> Age (years)</label>
                <input type="number" name="age" id="ageInput" placeholder="Enter patient age" min="18" max="120" required>
                <span class="form-helptext">Reference range: 18-120 years | Risk increases after age 40</span>
            </div>

            <!-- Gender Field with Select/Option -->
            <div class="form-group-clinical">
                <label><i class="fas fa-venus-mars"></i> Gender</label>
                <select name="gender" id="genderSelect" required>
                    <option value="" disabled selected>— Select patient gender —</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                <span class="form-helptext">Biological sex influences metabolic risk factors</span>
            </div>

            <div class="row-2cols">
                <div class="form-group-clinical">
                    <label><i class="fas fa-weight-scale"></i> BMI (kg/m²)</label>
                    <input type="number" name="bmi" id="bmiInput" placeholder="e.g., 27.5" step="0.1" min="10" max="60" required>
                    <span class="form-helptext">Normal: 18.5-24.9 | Overweight: 25-29.9 | Obese: ≥30</span>
                </div>
                <div class="form-group-clinical">
                    <label><i class="fas fa-tachometer-alt"></i> Blood Pressure (mmHg)</label>
                    <input type="number" name="blood_pressure" id="bpInput" placeholder="Systolic pressure" min="80" max="250" required>
                    <span class="form-helptext">Systolic blood pressure | Normal: &lt;120 | Elevated: 120-129 | Hypertension: ≥130</span>
                </div>
            </div>

            <div class="form-group-clinical">
                <label><i class="fas fa-tint"></i> Fasting Glucose (mg/dL)</label>
                <input type="number" name="glucose_level" id="glucoseInput" placeholder="e.g., 105" step="1" min="50" max="500" required>
                <span class="form-helptext">Normal: 70-99 | Prediabetes: 100-125 | Diabetes: ≥126 (fasting)</span>
            </div>

            <div class="form-group-clinical">
                <label><i class="fas fa-dna"></i> Family History (First-degree relative)</label>
                <div class="radio-group-clinical">
                    <label class="radio-option">
                        <input type="radio" name="family_history" value="True" required> Positive
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="family_history" value="False"> Negative
                    </label>
                </div>
                <span class="form-helptext">Parent or sibling with type 2 diabetes mellitus</span>
            </div>

            <div class="info-note">
                <i class="fas fa-info-circle"></i> All fields required for clinical risk stratification
            </div>
            <button type="submit" class="btn-submit" id="predictBtn">
                <i class="fas fa-chart-line"></i> Calculate Risk Profile
                <i class="fas fa-arrow-right"></i>
            </button>
        </form>
    </div>
</div>

<!-- Clinical Features -->
<div class="features-grid-clinical">
    <div class="feature-item">
        <div class="feature-icon-clinical"><i class="fas fa-check-double"></i></div>
        <h3>ADA Validated</h3>
        <p>Standards of Care compliant</p>
    </div>
    <div class="feature-item">
        <div class="feature-icon-clinical"><i class="fas fa-shield-alt"></i></div>
        <h3>HIPAA Ready</h3>
        <p>Secure patient data</p>
    </div>
    <div class="feature-item">
        <div class="feature-icon-clinical"><i class="fas fa-chart-line"></i></div>
        <h3>Longitudinal Tracking</h3>
        <p>Monitor risk progression</p>
    </div>
    <div class="feature-item">
        <div class="feature-icon-clinical"><i class="fas fa-print"></i></div>
        <h3>Clinical Reports</h3>
        <p>Printable summaries</p>
    </div>
</div>

<script>
    (function() {
        const form = document.getElementById('screeningForm');
        const btn = document.getElementById('predictBtn');
        
        if (form && btn) {
            form.addEventListener('submit', function(e) {
                // Validate gender select
                const genderSelect = document.getElementById('genderSelect');
                if (genderSelect && (!genderSelect.value || genderSelect.value === "")) {
                    e.preventDefault();
                    alert("Please select patient gender.");
                    genderSelect.focus();
                    return false;
                }
                
                // Validate age
                const ageInput = document.getElementById('ageInput');
                const age = parseInt(ageInput.value);
                if (isNaN(age) || age < 18 || age > 120) {
                    e.preventDefault();
                    alert("Please enter a valid age between 18 and 120 years.");
                    ageInput.focus();
                    return false;
                }
                
                // Validate BMI
                const bmiInput = document.getElementById('bmiInput');
                const bmi = parseFloat(bmiInput.value);
                if (isNaN(bmi) || bmi < 10 || bmi > 60) {
                    e.preventDefault();
                    alert("Please enter a valid BMI between 10 and 60 kg/m².");
                    bmiInput.focus();
                    return false;
                }
                
                // Validate blood pressure
                const bpInput = document.getElementById('bpInput');
                const bp = parseInt(bpInput.value);
                if (isNaN(bp) || bp < 80 || bp > 250) {
                    e.preventDefault();
                    alert("Please enter a valid systolic blood pressure between 80 and 250 mmHg.");
                    bpInput.focus();
                    return false;
                }
                
                // Validate glucose
                const glucoseInput = document.getElementById('glucoseInput');
                const glucose = parseInt(glucoseInput.value);
                if (isNaN(glucose) || glucose < 50 || glucose > 500) {
                    e.preventDefault();
                    alert("Please enter a valid glucose level between 50 and 500 mg/dL.");
                    glucoseInput.focus();
                    return false;
                }
                
                // Validate family history
                const familyHistoryRadios = document.querySelectorAll('input[name="family_history"]');
                let familyHistorySelected = false;
                familyHistoryRadios.forEach(radio => {
                    if (radio.checked) familyHistorySelected = true;
                });
                if (!familyHistorySelected) {
                    e.preventDefault();
                    alert("Please indicate family history status.");
                    return false;
                }
                
                // Show loading state
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-spinner fa-pulse"></i> Processing clinical data...';
                btn.disabled = true;
                
                // Reset after timeout (fallback)
                setTimeout(function() {
                    if (btn.disabled) {
                        btn.innerHTML = originalHTML;
                        btn.disabled = false;
                    }
                }, 8000);
            });
        }
    })();
</script>
{% endblock %}