{% 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;">📥 Import Medicines from Excel</h1>
    
    <div style="background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
        <div style="text-align: center; margin-bottom: 30px;">
            <a href="/medicines/download_sample" class="btn btn-success" style="padding: 12px 24px; font-size: 16px; text-decoration: none;">
                📥 Download Sample File
            </a>
        </div>
        
        <form method="POST" enctype="multipart/form-data">
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Excel File:</label>
                <input type="file" name="file" accept=".xlsx" required
                       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'">
                <small style="color: #7f8c8d; font-size: 14px;">Please upload an Excel file (.xlsx) with the required columns.</small>
            </div>
            
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 25px;">
                <h3 style="color: #34495e; margin: 0 0 15px 0;">Required Columns:</h3>
                <ul style="margin: 0; padding-left: 20px; color: #2c3e50;">
                    <li><strong>name</strong> - Medicine name</li>
                    <li><strong>generic_name</strong> - Generic name</li>
                    <li><strong>manufacturer</strong> - Manufacturer name</li>
                    <li><strong>category</strong> - Medicine category</li>
                    <li><strong>unit_price</strong> - Price per unit</li>
                    <li><strong>stock_quantity</strong> - Current stock</li>
                    <li><strong>expiry_date</strong> - Expiry date (YYYY-MM-DD)</li>
                </ul>
            </div>
            
            <div style="text-align: center;">
                <button type="submit" class="btn btn-primary" style="padding: 16px 40px; font-size: 18px; border-radius: 8px;">
                    🚀 Import Medicines
                </button>
            </div>
        </form>
    </div>
    
    <div style="text-align: center; margin-top: 30px;">
        <a href="/medicines" class="btn btn-danger" style="padding: 12px 24px; font-size: 16px; text-decoration: none;">
            ← Back to Medicines
        </a>
    </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-primary { background: #3498db; color: white; }
.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;
    }
}
</style>
{% endblock %}