{% extends "base.html" %}

{% block content %}
<div style="padding: 30px; max-width: 1200px; margin: 0 auto;">
    <h1 style="color: #2c3e50; text-align: center; margin-bottom: 30px;">{% if patient %}✏️ Edit Patient{% else %}➕ Register Patient{% endif %}</h1>
    
    <div style="background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin: 0 auto; max-width: 1000px;">
        <form method="POST" style="width: 100%;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
                <!-- Left Column -->
                <div>
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Full Name:</label>
                        <input type="text" name="name" value="{{ patient[2] if patient else '' }}" required 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'">
                    </div>
                    
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">CNIC Number:</label>
                        <input type="text" name="cnic" value="{{ patient[3] if patient else '' }}" required 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'">
                    </div>
                    
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Mobile Number:</label>
                        <input type="text" name="mobile" value="{{ patient[4] if patient else '' }}" required 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'">
                    </div>
                    
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Year of Birth:</label>
                        <input type="text" name="dob" value="{{ patient[5] if patient else '' }}" required 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'"
                               placeholder="YYYY">
                    </div>
                </div>
                
                <!-- Right Column -->
                <div>
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Gender:</label>
                        <select name="gender" style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s;"
                                onfocus="this.style.borderColor='#3498db'" 
                                onblur="this.style.borderColor='#e0e0e0'">
                            <option value="Male" {% if not patient or patient[7] == 'Male' %}selected{% endif %}>Male</option>
                            <option value="Female" {% if patient and patient[7] == 'Female' %}selected{% endif %}>Female</option>
                            <option value="Other" {% if patient and patient[7] == 'Other' %}selected{% endif %}>Other</option>
                        </select>
                    </div>
                    
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Address:</label>
                        <textarea name="address" rows="4"
                                  style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s; resize: vertical;"
                                  onfocus="this.style.borderColor='#3498db'" 
                                  onblur="this.style.borderColor='#e0e0e0'">{{ patient[8] if patient else '' }}</textarea>
                    </div>
                    
                    <!-- Patient ID (Read-only for edit) -->
                    {% if patient %}
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Patient ID:</label>
                        <input type="text" value="{{ patient[1] }}" readonly
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; background-color: #f8f9fa; color: #6c757d;">
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-top: 40px;">
                <button type="submit" class="btn btn-success" style="flex: 1; min-width: 200px; padding: 16px; font-size: 18px; border-radius: 8px;">
                    {% if patient %}💾 Update Patient{% else %}💾 Save Patient{% endif %}
                </button>
                <a href="/patients" class="btn btn-danger" style="flex: 1; min-width: 200px; padding: 16px; font-size: 18px; border-radius: 8px; text-decoration: none;">
                    ❌ Cancel
                </a>
            </div>
        </form>
    </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;
}

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

.btn-success { background: #27ae60; color: white; }
.btn-danger { background: #e74c3c; color: white; }

/* Responsive design */
@media (max-width: 768px) {
    .btn {
        padding: 14px !important;
        font-size: 16px !important;
    }
    
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    div[style*="margin-bottom: 25px"] {
        margin-bottom: 20px !important;
    }
    
    h1 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
}
</style>
{% endblock %}