{% extends "base.html" %}

{% block content %}
<div style="padding: 30px; max-width: 800px; margin: 0 auto;">
    <h1 style="color: #2c3e50; text-align: center; margin-bottom: 30px;">📤 Export Patient Data</h1>
    
    <div style="background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
        <form method="POST">
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Export Format:</label>
                <select name="format" style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                        onfocus="this.style.borderColor='#3498db'" 
                        onblur="this.style.borderColor='#e0e0e0'">
                    <option value="excel">Excel (.xlsx)</option>
                    <option value="pdf">PDF</option>
                </select>
            </div>
            
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Date Filter:</label>
                <select name="date_filter" id="date_filter" style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                        onfocus="this.style.borderColor='#3498db'" 
                        onblur="this.style.borderColor='#e0e0e0'"
                        onchange="toggleCustomDate()">
                    <option value="all">All Time</option>
                    <option value="today">Today</option>
                    <option value="weekly">Last 7 Days</option>
                    <option value="monthly">Last 30 Days</option>
                    <option value="custom">Custom Date Range</option>
                </select>
            </div>
            
            <div id="custom_date_range" style="display: none; margin-bottom: 25px;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Start Date:</label>
                        <input type="date" name="start_date" 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'">
                    </div>
                    <div>
                        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">End Date:</label>
                        <input type="date" name="end_date" 
                               style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                               onfocus="this.style.borderColor='#3498db'" 
                               onblur="this.style.borderColor='#e0e0e0'">
                    </div>
                </div>
            </div>
            
            <div style="text-align: center;">
                <button type="submit" class="btn btn-success" style="padding: 16px 40px; font-size: 18px; border-radius: 8px;">
                    🚀 Export Patients
                </button>
            </div>
        </form>
    </div>
    
    <div style="text-align: center; margin-top: 30px;">
        <a href="/patients" class="btn btn-danger" style="padding: 12px 24px; font-size: 16px; text-decoration: none;">
            ← Back to Patients
        </a>
    </div>
</div>

<script>
function toggleCustomDate() {
    const dateFilter = document.getElementById('date_filter').value;
    const customDateRange = document.getElementById('custom_date_range');
    
    if (dateFilter === 'custom') {
        customDateRange.style.display = 'block';
    } else {
        customDateRange.style.display = 'none';
    }
}
</script>

<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; }

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