{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>💊 Medicine Inventory Management</h1>
    
    <div style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Add/Edit Medicine</h2>
        
        <form method="POST" id="medicineForm">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Medicine ID:</label>
                    <input type="text" name="medicine_id" id="medicine_id" 
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    <small style="color: #666;">Leave empty to auto-generate</small>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Name:</label>
                    <input type="text" name="name" id="name" required
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Generic Name:</label>
                    <input type="text" name="generic_name" id="generic_name"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Manufacturer:</label>
                    <input type="text" name="manufacturer" id="manufacturer"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Category:</label>
                    <input type="text" name="category" id="category"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Unit Price:</label>
                    <input type="number" name="unit_price" id="unit_price" step="0.01" value="0"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Stock Quantity:</label>
                    <input type="number" name="stock_quantity" id="stock_quantity" value="0"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Expiry Date:</label>
                    <input type="date" name="expiry_date" id="expiry_date"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
            </div>
            
            <div style="display: flex; gap: 10px; margin-top: 30px;">
                <button type="button" onclick="addMedicine()" class="btn btn-success" style="flex: 1; padding: 12px; font-size: 16px;">
                    ➕ Add Medicine
                </button>
                <button type="button" onclick="updateMedicine()" class="btn btn-accent" style="flex: 1; padding: 12px; font-size: 16px;">
                    🔄 Update Medicine
                </button>
                <button type="button" onclick="deleteMedicine()" class="btn btn-danger" style="flex: 1; padding: 12px; font-size: 16px;">
                    🗑️ Delete Medicine
                </button>
                <button type="button" onclick="clearForm()" class="btn btn-warning" style="flex: 1; padding: 12px; font-size: 16px;">
                    🧹 Clear
                </button>
            </div>
        </form>
    </div>
    
    <!-- Action Buttons -->
    <div style="display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 30px; justify-content: flex-end;">
        <a href="/medicines/import" class="btn btn-success" style="text-decoration: none; padding: 12px 24px; font-size: 16px; border-radius: 8px; white-space: nowrap;">
            📥 Import Medicines
        </a>
        <a href="/medicines/download_sample" class="btn btn-primary" style="text-decoration: none; padding: 12px 24px; font-size: 16px; border-radius: 8px; white-space: nowrap;">
            📥 Download Sample
        </a>
    </div>
    
    <div style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Medicine Inventory</h2>
        
        {% if medicines %}
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Medicine ID</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Name</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Category</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Stock</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Unit Price</th>
                            <th style="padding: 12px; text-align: left;">Expiry Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for medicine in medicines %}
                        <tr style="border-bottom: 1px solid #dee2e6;" onclick="selectMedicine('{{ medicine[0] }}', '{{ medicine[1] }}', '{{ medicine[2] }}', '{{ medicine[3] }}', '{{ medicine[4] }}', '{{ medicine[5] }}')" onmouseover="this.style.backgroundColor='#f8f9fa'" onmouseout="this.style.backgroundColor='white'">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ medicine[0] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ medicine[1] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ medicine[2] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">
                                <span style="padding: 4px 8px; border-radius: 4px; font-size: 12px;
                                    {% if medicine[3] <= 0 %}background: #f8d7da; color: #721c24;
                                    {% elif medicine[3] <= 10 %}background: #fff3cd; color: #856404;
                                    {% else %}background: #d4edda; color: #155724;
                                    {% endif %}">
                                    {{ medicine[3] }}
                                </span>
                            </td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">${{ "%.2f"|format(medicine[4]|float) }}</td>
                            <td style="padding: 12px;">
                                <span style="padding: 4px 8px; border-radius: 4px; font-size: 12px;
                                    {% if medicine[5] %}
                                        {% set expiry_date = medicine[5] %}
                                        {% if expiry_date < now().strftime('%Y-%m-%d') %}background: #f8d7da; color: #721c24;
                                        {% elif expiry_date <= (now() + timedelta(days=30)).strftime('%Y-%m-%d') %}background: #fff3cd; color: #856404;
                                        {% else %}background: #d4edda; color: #155724;
                                        {% endif %}
                                    {% else %}
                                        background: #e9ecef; color: #6c757d;
                                    {% endif %}">
                                    {{ medicine[5] if medicine[5] else 'N/A' }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p style="text-align: center; padding: 40px; color: #666;">No medicines found.</p>
        {% endif %}
    </div>
</div>

<script>
let selectedMedicineId = null;

function selectMedicine(medicineId, name, category, stockQuantity, unitPrice, expiryDate) {
    selectedMedicineId = medicineId;
    document.getElementById('medicine_id').value = medicineId;
    document.getElementById('name').value = name;
    document.getElementById('category').value = category;
    document.getElementById('stock_quantity').value = stockQuantity;
    document.getElementById('unit_price').value = unitPrice;
    document.getElementById('expiry_date').value = expiryDate;
}

function addMedicine() {
    const medicineId = document.getElementById('medicine_id').value;
    const name = document.getElementById('name').value;
    const genericName = document.getElementById('generic_name').value;
    const manufacturer = document.getElementById('manufacturer').value;
    const category = document.getElementById('category').value;
    const unitPrice = document.getElementById('unit_price').value;
    const stockQuantity = document.getElementById('stock_quantity').value;
    const expiryDate = document.getElementById('expiry_date').value;
    
    if (!name) {
        alert('Please enter medicine name');
        return;
    }
    
    fetch('/medicines/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `medicine_id=${encodeURIComponent(medicineId)}&name=${encodeURIComponent(name)}&generic_name=${encodeURIComponent(genericName)}&manufacturer=${encodeURIComponent(manufacturer)}&category=${encodeURIComponent(category)}&unit_price=${encodeURIComponent(unitPrice)}&stock_quantity=${encodeURIComponent(stockQuantity)}&expiry_date=${encodeURIComponent(expiryDate)}`
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.json();
        }
    })
    .then(data => {
        if (data && data.error) {
            alert(data.error);
        } else {
            alert('Medicine added successfully!');
            clearForm();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to add medicine');
    });
}

function updateMedicine() {
    if (!selectedMedicineId) {
        alert('Please select a medicine to update');
        return;
    }
    
    const medicineId = document.getElementById('medicine_id').value;
    const name = document.getElementById('name').value;
    const genericName = document.getElementById('generic_name').value;
    const manufacturer = document.getElementById('manufacturer').value;
    const category = document.getElementById('category').value;
    const unitPrice = document.getElementById('unit_price').value;
    const stockQuantity = document.getElementById('stock_quantity').value;
    const expiryDate = document.getElementById('expiry_date').value;
    
    if (!name) {
        alert('Please enter medicine name');
        return;
    }
    
    fetch('/medicines/update', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `medicine_id=${encodeURIComponent(medicineId)}&name=${encodeURIComponent(name)}&generic_name=${encodeURIComponent(genericName)}&manufacturer=${encodeURIComponent(manufacturer)}&category=${encodeURIComponent(category)}&unit_price=${encodeURIComponent(unitPrice)}&stock_quantity=${encodeURIComponent(stockQuantity)}&expiry_date=${encodeURIComponent(expiryDate)}`
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.json();
        }
    })
    .then(data => {
        if (data && data.error) {
            alert(data.error);
        } else {
            alert('Medicine updated successfully!');
            clearForm();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update medicine');
    });
}

function deleteMedicine() {
    if (!selectedMedicineId) {
        alert('Please select a medicine to delete');
        return;
    }
    
    if (!confirm('Are you sure you want to delete this medicine?')) {
        return;
    }
    
    fetch('/medicines/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `medicine_id=${selectedMedicineId}`
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.json();
        }
    })
    .then(data => {
        if (data && data.error) {
            alert(data.error);
        } else {
            alert('Medicine deleted successfully!');
            clearForm();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to delete medicine');
    });
}

function clearForm() {
    document.getElementById('medicine_id').value = '';
    document.getElementById('name').value = '';
    document.getElementById('generic_name').value = '';
    document.getElementById('manufacturer').value = '';
    document.getElementById('category').value = '';
    document.getElementById('unit_price').value = '0';
    document.getElementById('stock_quantity').value = '0';
    document.getElementById('expiry_date').value = '';
    selectedMedicineId = null;
}
</script>

<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-success { background: #27ae60; color: white; }
.btn-accent { background: #9b59b6; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.btn-warning { background: #f39c12; color: white; }
.btn-primary { background: #3498db; color: white; }

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