{% load static %}



{% block css %}
<style>
.alerts-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.alert-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.alert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.alert-critical { border-left-color: #dc3545; }
.alert-low { border-left-color: #ffc107; }
.alert-expired { border-left-color: #6f42c1; }
.alert-expiring { border-left-color: #fd7e14; }
.alert-overstock { border-left-color: #20c997; }
.alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
}
.icon-critical { background: #f8d7da; color: #dc3545; }
.icon-low { background: #fff3cd; color: #ffc107; }
.icon-expired { background: #e2e3f3; color: #6f42c1; }
.icon-expiring { background: #ffe8d4; color: #fd7e14; }
.icon-overstock { background: #d1ecf1; color: #20c997; }
.alert-priority {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}
.priority-high { background: #f8d7da; color: #dc3545; }
.priority-medium { background: #fff3cd; color: #ffc107; }
.priority-low { background: #d4edda; color: #28a745; }
.stock-level {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.stock-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin: 0 10px;
    overflow: hidden;
}
.stock-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.stock-critical { background: #dc3545; }
.stock-low { background: #ffc107; }
.stock-normal { background: #28a745; }
.stock-high { background: #20c997; }
.alert-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #dee2e6;
}
.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}
.stat-label {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 5px;
}
.filter-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.alert-summary {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}
.summary-item:last-child {
    border-bottom: none;
}
.expiry-date {
    font-weight: bold;
}
.expiry-critical { color: #dc3545; }
.expiry-warning { color: #ffc107; }
.expiry-normal { color: #28a745; }
.location-badge {
    background: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}
.supplier-info {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 5px;
}
.reorder-suggestion {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
    font-size: 0.9rem;
}
.bulk-actions {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-exclamation-triangle"></i> Stock Alerts</h4>
                        <h6>Monitor inventory levels and manage stock alerts</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-primary me-2" id="refreshAlerts">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                        <button class="btn btn-success me-2" id="generateReport">
                            <i class="fas fa-file-alt"></i> Generate Report
                        </button>
                        <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#alertSettingsModal">
                            <i class="fas fa-cog"></i> Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts Header -->
        <div class="row">
            <div class="col-12">
                <div class="alerts-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fas fa-warehouse"></i> Inventory Alert Dashboard</h5>
                            <p>Real-time monitoring of stock levels, expiration dates, and inventory alerts</p>
                        </div>
                        <div class="col-md-4">
                            <div class="stats-grid">
                                <div class="stat-card">
                                    <div class="stat-value">23</div>
                                    <div class="stat-label">Active Alerts</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">7</div>
                                    <div class="stat-label">Critical Items</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Panel -->
        <div class="row">
            <div class="col-12">
                <div class="filter-panel">
                    <div class="row">
                        <div class="col-md-2">
                            <label>Alert Type</label>
                            <select class="form-control" id="alertTypeFilter">
                                <option value="">All Types</option>
                                <option value="critical">Critical Stock</option>
                                <option value="low">Low Stock</option>
                                <option value="expired">Expired</option>
                                <option value="expiring">Expiring Soon</option>
                                <option value="overstock">Overstock</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Priority</label>
                            <select class="form-control" id="priorityFilter">
                                <option value="">All Priorities</option>
                                <option value="high">High</option>
                                <option value="medium">Medium</option>
                                <option value="low">Low</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Location</label>
                            <select class="form-control" id="locationFilter">
                                <option value="">All Locations</option>
                                <option value="pharmacy">Pharmacy</option>
                                <option value="emergency">Emergency</option>
                                <option value="icu">ICU</option>
                                <option value="warehouse">Main Warehouse</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>Category</label>
                            <select class="form-control" id="categoryFilter">
                                <option value="">All Categories</option>
                                <option value="medications">Medications</option>
                                <option value="supplies">Medical Supplies</option>
                                <option value="equipment">Equipment</option>
                                <option value="consumables">Consumables</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Search</label>
                            <input type="text" class="form-control" id="searchFilter" placeholder="Search items...">
                        </div>
                        <div class="col-md-1">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary form-control" id="applyFilters">
                                <i class="fas fa-filter"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stock Alerts -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-bell"></i> Active Alerts</h5>
                        <div class="card-tools">
                            <span class="badge bg-danger">7 Critical</span>
                            <span class="badge bg-warning">12 Low Stock</span>
                            <span class="badge bg-info">4 Expiring</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Critical Stock Alert -->
                        <div class="alert-card alert-critical">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="alert-icon icon-critical">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h6>Morphine 10mg/ml Injectable <span class="alert-priority priority-high">HIGH</span></h6>
                                    <p><strong>SKU:</strong> MED-001234 | <strong>Category:</strong> Controlled Substances</p>
                                    <div class="stock-level">
                                        <span>Current: 2 units</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill stock-critical" style="width: 5%"></div>
                                        </div>
                                        <span>Min: 50 units</span>
                                    </div>
                                    <div class="supplier-info">
                                        <i class="fas fa-building"></i> Supplier: PharmaCorp | Last Order: 2 weeks ago
                                    </div>
                                    <span class="location-badge">ICU Pharmacy</span>
                                </div>
                                <div class="col-md-4">
                                    <div class="reorder-suggestion">
                                        <strong>Suggested Reorder:</strong> 200 units<br>
                                        <small>Based on 30-day usage pattern</small>
                                    </div>
                                    <div class="alert-actions">
                                        <button class="btn btn-sm btn-danger">
                                            <i class="fas fa-shopping-cart"></i> Reorder Now
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Low Stock Alert -->
                        <div class="alert-card alert-low">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="alert-icon icon-low">
                                        <i class="fas fa-exclamation"></i>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h6>Surgical Gloves (Size M) <span class="alert-priority priority-medium">MEDIUM</span></h6>
                                    <p><strong>SKU:</strong> SUP-005678 | <strong>Category:</strong> Medical Supplies</p>
                                    <div class="stock-level">
                                        <span>Current: 45 boxes</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill stock-low" style="width: 25%"></div>
                                        </div>
                                        <span>Min: 100 boxes</span>
                                    </div>
                                    <div class="supplier-info">
                                        <i class="fas fa-building"></i> Supplier: MedSupply Inc | Last Order: 1 week ago
                                    </div>
                                    <span class="location-badge">Main Warehouse</span>
                                </div>
                                <div class="col-md-4">
                                    <div class="reorder-suggestion">
                                        <strong>Suggested Reorder:</strong> 500 boxes<br>
                                        <small>Bulk discount available</small>
                                    </div>
                                    <div class="alert-actions">
                                        <button class="btn btn-sm btn-warning">
                                            <i class="fas fa-shopping-cart"></i> Reorder
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Expiring Soon Alert -->
                        <div class="alert-card alert-expiring">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="alert-icon icon-expiring">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h6>Amoxicillin 500mg Capsules <span class="alert-priority priority-medium">MEDIUM</span></h6>
                                    <p><strong>SKU:</strong> MED-002345 | <strong>Category:</strong> Antibiotics</p>
                                    <p><strong>Expiry Date:</strong> <span class="expiry-date expiry-warning">2024-02-15</span> (25 days remaining)</p>
                                    <p><strong>Quantity:</strong> 150 bottles (3,000 capsules)</p>
                                    <div class="supplier-info">
                                        <i class="fas fa-building"></i> Supplier: Generic Pharma | Batch: GP-2023-456
                                    </div>
                                    <span class="location-badge">Pharmacy</span>
                                </div>
                                <div class="col-md-4">
                                    <div class="reorder-suggestion">
                                        <strong>Action Required:</strong><br>
                                        • Use before expiry<br>
                                        • Consider donation<br>
                                        • Return to supplier
                                    </div>
                                    <div class="alert-actions">
                                        <button class="btn btn-sm btn-info">
                                            <i class="fas fa-hand-holding-medical"></i> Prioritize Use
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Expired Alert -->
                        <div class="alert-card alert-expired">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="alert-icon icon-expired">
                                        <i class="fas fa-ban"></i>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h6>Insulin Rapid-Acting <span class="alert-priority priority-high">HIGH</span></h6>
                                    <p><strong>SKU:</strong> MED-003456 | <strong>Category:</strong> Diabetes Medications</p>
                                    <p><strong>Expiry Date:</strong> <span class="expiry-date expiry-critical">2024-01-10</span> (EXPIRED 10 days ago)</p>
                                    <p><strong>Quantity:</strong> 25 vials</p>
                                    <div class="supplier-info">
                                        <i class="fas fa-building"></i> Supplier: Diabetes Care Ltd | Batch: DC-2023-789
                                    </div>
                                    <span class="location-badge">Refrigerated Storage</span>
                                </div>
                                <div class="col-md-4">
                                    <div class="reorder-suggestion">
                                        <strong>Immediate Action:</strong><br>
                                        • Remove from inventory<br>
                                        • Dispose safely<br>
                                        • Document disposal
                                    </div>
                                    <div class="alert-actions">
                                        <button class="btn btn-sm btn-danger">
                                            <i class="fas fa-trash"></i> Mark for Disposal
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Overstock Alert -->
                        <div class="alert-card alert-overstock">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="alert-icon icon-overstock">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h6>Bandages (Assorted Sizes) <span class="alert-priority priority-low">LOW</span></h6>
                                    <p><strong>SKU:</strong> SUP-007890 | <strong>Category:</strong> Wound Care</p>
                                    <div class="stock-level">
                                        <span>Current: 2,500 units</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill stock-high" style="width: 95%"></div>
                                        </div>
                                        <span>Max: 1,000 units</span>
                                    </div>
                                    <div class="supplier-info">
                                        <i class="fas fa-building"></i> Supplier: WoundCare Solutions | Last Order: 3 days ago
                                    </div>
                                    <span class="location-badge">Main Warehouse</span>
                                </div>
                                <div class="col-md-4">
                                    <div class="reorder-suggestion">
                                        <strong>Overstock Notice:</strong><br>
                                        • Reduce future orders<br>
                                        • Check storage capacity<br>
                                        • Consider redistribution
                                    </div>
                                    <div class="alert-actions">
                                        <button class="btn btn-sm btn-success">
                                            <i class="fas fa-exchange-alt"></i> Redistribute
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Details
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!-- Alert Summary -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-chart-pie"></i> Alert Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert-summary">
                            <div class="summary-item">
                                <span><i class="fas fa-exclamation-triangle text-danger"></i> Critical Stock</span>
                                <span class="badge bg-danger">7</span>
                            </div>
                            <div class="summary-item">
                                <span><i class="fas fa-exclamation text-warning"></i> Low Stock</span>
                                <span class="badge bg-warning">12</span>
                            </div>
                            <div class="summary-item">
                                <span><i class="fas fa-clock text-info"></i> Expiring Soon</span>
                                <span class="badge bg-info">4</span>
                            </div>
                            <div class="summary-item">
                                <span><i class="fas fa-ban text-secondary"></i> Expired Items</span>
                                <span class="badge bg-secondary">3</span>
                            </div>
                            <div class="summary-item">
                                <span><i class="fas fa-arrow-up text-success"></i> Overstock</span>
                                <span class="badge bg-success">2</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-bolt"></i> Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-shopping-cart"></i> Reorder Critical Items
                            </button>
                            <button class="btn btn-outline-warning btn-sm">
                                <i class="fas fa-list"></i> Generate Purchase Orders
                            </button>
                            <button class="btn btn-outline-info btn-sm">
                                <i class="fas fa-clock"></i> Review Expiring Items
                            </button>
                            <button class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-trash"></i> Process Expired Items
                            </button>
                            <button class="btn btn-outline-success btn-sm">
                                <i class="fas fa-cog"></i> Update Alert Thresholds
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-history"></i> Recent Activity</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert-summary">
                            <div class="summary-item">
                                <small>Morphine stock critical</small>
                                <small class="text-muted">2 min ago</small>
                            </div>
                            <div class="summary-item">
                                <small>Purchase order created</small>
                                <small class="text-muted">15 min ago</small>
                            </div>
                            <div class="summary-item">
                                <small>Expired items removed</small>
                                <small class="text-muted">1 hour ago</small>
                            </div>
                            <div class="summary-item">
                                <small>Alert threshold updated</small>
                                <small class="text-muted">2 hours ago</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bulk Actions -->
        <div class="row">
            <div class="col-12">
                <div class="bulk-actions">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fas fa-tasks"></i> Bulk Actions</h6>
                            <p>Select multiple alerts to perform batch operations</p>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex gap-2 justify-content-end">
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-check-square"></i> Select All Critical
                                </button>
                                <button class="btn btn-sm btn-outline-warning">
                                    <i class="fas fa-shopping-cart"></i> Bulk Reorder
                                </button>
                                <button class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-file-export"></i> Export Selected
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Alert Settings Modal -->
<div class="modal fade" id="alertSettingsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-cog"></i> Alert Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group mb-3">
                        <label>Critical Stock Threshold (%)</label>
                        <input type="number" class="form-control" value="5" min="1" max="50">
                    </div>
                    <div class="form-group mb-3">
                        <label>Low Stock Threshold (%)</label>
                        <input type="number" class="form-control" value="20" min="5" max="50">
                    </div>
                    <div class="form-group mb-3">
                        <label>Expiry Warning (days)</label>
                        <input type="number" class="form-control" value="30" min="1" max="365">
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="emailAlerts" checked>
                        <label class="form-check-label" for="emailAlerts">
                            Send email alerts
                        </label>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="smsAlerts">
                        <label class="form-check-label" for="smsAlerts">
                            Send SMS alerts for critical items
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save Settings</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Filter functionality
    $('#applyFilters').click(function() {
        var alertType = $('#alertTypeFilter').val();
        var priority = $('#priorityFilter').val();
        var location = $('#locationFilter').val();
        var category = $('#categoryFilter').val();
        var search = $('#searchFilter').val().toLowerCase();
        
        $('.alert-card').each(function() {
            var show = true;
            
            if (alertType && !$(this).hasClass('alert-' + alertType)) {
                show = false;
            }
            
            if (priority && !$(this).find('.priority-' + priority).length) {
                show = false;
            }
            
            if (search && !$(this).text().toLowerCase().includes(search)) {
                show = false;
            }
            
            $(this).toggle(show);
        });
    });
    
    // Refresh alerts
    $('#refreshAlerts').click(function() {
        location.reload();
    });
    
    // Generate report
    $('#generateReport').click(function() {
        alert('Generating stock alerts report...');
    });
    
    // Quick action buttons
    $('.btn-outline-danger').click(function() {
        if ($(this).text().includes('Reorder Critical')) {
            alert('Creating purchase orders for all critical items...');
        }
    });
    
    $('.btn-outline-warning').click(function() {
        if ($(this).text().includes('Generate Purchase')) {
            alert('Generating purchase orders for low stock items...');
        }
    });
    
    $('.btn-outline-info').click(function() {
        if ($(this).text().includes('Review Expiring')) {
            alert('Opening expiring items review...');
        }
    });
    
    $('.btn-outline-secondary').click(function() {
        if ($(this).text().includes('Process Expired')) {
            alert('Opening expired items disposal process...');
        }
    });
    
    $('.btn-outline-success').click(function() {
        if ($(this).text().includes('Update Alert')) {
            $('#alertSettingsModal').modal('show');
        }
    });
    
    // Alert action buttons
    $('.alert-actions .btn-danger').click(function() {
        if ($(this).text().includes('Reorder Now')) {
            alert('Creating urgent purchase order...');
        } else if ($(this).text().includes('Mark for Disposal')) {
            alert('Marking item for disposal...');
        }
    });
    
    $('.alert-actions .btn-warning').click(function() {
        alert('Creating purchase order...');
    });
    
    $('.alert-actions .btn-info').click(function() {
        alert('Prioritizing item usage...');
    });
    
    $('.alert-actions .btn-success').click(function() {
        alert('Redistributing overstock items...');
    });
    
    $('.alert-actions .btn-outline-secondary').click(function() {
        alert('Opening item details...');
    });
    
    // Bulk actions
    $('.btn-outline-primary').click(function() {
        if ($(this).text().includes('Select All Critical')) {
            alert('Selecting all critical alerts...');
        }
    });
    
    $('.bulk-actions .btn-outline-warning').click(function() {
        alert('Creating bulk purchase orders...');
    });
    
    $('.bulk-actions .btn-outline-info').click(function() {
        alert('Exporting selected alerts...');
    });
});
</script>
{% endblock %}