{% extends "base.html" %}

{% block title %}Low Stock Report - Ghana Wholesale Management{% endblock %}

{% block page_title %}Low Stock Report{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'reports_dashboard' %}">Reports</a></li>
    <li class="breadcrumb-item active">Low Stock Report</li>
{% endblock %}

{% block page_actions %}
    <div class="btn-group">
        <a href="{% url 'reports_dashboard' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Reports
        </a>
        <button class="btn btn-outline-success" onclick="window.print()">
            <i class="bi bi-printer"></i> Print Report
        </button>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Summary Cards -->
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card stat-card border-start border-warning border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Low Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ low_stock.count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-exclamation-triangle stat-icon text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card stat-card border-start border-danger border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-danger text-uppercase mb-1">
                            Out of Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">
                            {% with out_of_stock=low_stock|length %}
                                {% for item in low_stock %}
                                    {% if item.available == 0 %}
                                        {{ forloop.counter }}
                                    {% endif %}
                                {% endfor %}
                            {% endwith %}
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-x-circle stat-icon text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card stat-card border-start border-info border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-info text-uppercase mb-1">
                            Shop Low Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ shop_low_stock.count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-shop stat-icon text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Warehouse Low Stock -->
    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-warning text-white">
                <h6 class="mb-0">
                    <i class="bi bi-exclamation-triangle"></i> Main Warehouse - Low Stock Items
                </h6>
            </div>
            <div class="card-body">
                {% if low_stock %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>SKU</th>
                                <th>Available</th>
                                <th>Reorder Level</th>
                                <th>Value</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in low_stock %}
                            <tr class="{% if item.available == 0 %}table-danger{% else %}table-warning{% endif %}">
                                <td>
                                    <strong>{{ item.product.name }}</strong><br>
                                    <small class="text-muted">{{ item.product.category.name|default:"-" }}</small>
                                </td>
                                <td>{{ item.product.sku }}</td>
                                <td>
                                    <span class="badge bg-{% if item.available == 0 %}danger{% else %}warning{% endif %}">
                                        {{ item.available }}
                                    </span>
                                </td>
                                <td>{{ item.product.reorder_level }}</td>
                                <td>GH₵{{ item.stock_value|floatformat:2 }}</td>
                                <td>
                                    {% if item.available == 0 %}
                                    <span class="badge bg-danger">Out of Stock</span>
                                    {% else %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <div class="alert alert-warning">
                        <h6><i class="bi bi-lightbulb"></i> Action Required:</h6>
                        <small class="mb-0">
                            • These items need to be reordered soon<br>
                            • Consider ordering {{ low_stock.count }} items<br>
                            • Check supplier availability and delivery times
                        </small>
                    </div>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-check-circle-fill text-success fs-1"></i>
                    <h5 class="mt-3">No Low Stock Items</h5>
                    <p class="text-muted">All inventory levels in main warehouse are good!</p>
                </div>
                {% endif %}
            </div>
            <div class="card-footer">
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> Showing low stock items from main warehouse
                </small>
            </div>
        </div>
    </div>

    <!-- Shop Low Stock -->
    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="bi bi-shop"></i> Shop Locations - Low Stock Items
                </h6>
            </div>
            <div class="card-body">
                {% if shop_low_stock %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Shop</th>
                                <th>Product</th>
                                <th>Available</th>
                                <th>Reorder Point</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in shop_low_stock %}
                            <tr class="table-warning">
                                <td>
                                    <strong>{{ item.shop.name }}</strong><br>
                                    <small class="text-muted">{{ item.shop.code }}</small>
                                </td>
                                <td>
                                    {{ item.product.name }}<br>
                                    <small class="text-muted">{{ item.product.sku }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-warning">{{ item.available }}</span>
                                </td>
                                <td>{{ item.reorder_point }}</td>
                                <td>
                                    <a href="{% url 'transfer_create' %}?to_shop={{ item.shop.id }}&product={{ item.product.id }}" 
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-truck"></i> Transfer
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <div class="alert alert-info">
                        <h6><i class="bi bi-lightbulb"></i> Quick Actions:</h6>
                        <small class="mb-0">
                            • Use "Transfer" buttons to move stock from warehouse to shops<br>
                            • Consider shop location and customer demand<br>
                            • Check shop-specific sales patterns
                        </small>
                    </div>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-check-circle-fill text-success fs-1"></i>
                    <h5 class="mt-3">No Shop Low Stock Items</h5>
                    <p class="text-muted">All shop inventory levels are good!</p>
                </div>
                {% endif %}
            </div>
            <div class="card-footer">
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> Showing low stock items across all shops
                </small>
            </div>
        </div>
    </div>
</div>

<!-- Ghana Business Insights -->
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="bi bi-graph-up"></i> Ghana Business Insights & Recommendations
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card bg-light h-100">
                            <div class="card-body">
                                <h6 class="card-title text-success">
                                    <i class="bi bi-cart-plus"></i> Reorder Strategy
                                </h6>
                                <p class="card-text small">
                                    <strong>For Ghana Market:</strong><br>
                                    • Order before Friday (weekend rush)<br>
                                    • Consider 2-3 day delivery time<br>
                                    • Order in Ghana Cedis (GH₵)<br>
                                    • Check local supplier availability
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card bg-light h-100">
                            <div class="card-body">
                                <h6 class="card-title text-warning">
                                    <i class="bi bi-clock-history"></i> Timing Tips
                                </h6>
                                <p class="card-text small">
                                    <strong>Best Times to Reorder:</strong><br>
                                    • Monday-Wednesday for weekend stock<br>
                                    • Avoid month-end cash flow issues<br>
                                    • Consider Ghana holidays schedule<br>
                                    • Plan for rainy season delays
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card bg-light h-100">
                            <div class="card-body">
                                <h6 class="card-title text-danger">
                                    <i class="bi bi-exclamation-octagon"></i> Urgent Actions
                                </h6>
                                <p class="card-text small">
                                    <strong>Immediate Steps:</strong><br>
                                    • Call suppliers for urgent items<br>
                                    • Transfer between shops if possible<br>
                                    • Update customers on availability<br>
                                    • Consider local alternatives
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Ghana Supplier Contact -->
                <div class="alert alert-warning mt-4">
                    <h6><i class="bi bi-telephone"></i> Ghana Supplier Contact Tips:</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <small class="mb-0">
                                • Call during business hours (8am-5pm)<br>
                                • Confirm prices in Ghana Cedis<br>
                                • Get delivery timeframe in writing<br>
                                • Ask for bulk discounts
                            </small>
                        </div>
                        <div class="col-md-6">
                            <small class="mb-0">
                                • Check product quality before payment<br>
                                • Negotiate payment terms (30 days)<br>
                                • Get official receipts for GRA<br>
                                • Consider multiple suppliers
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Print-friendly Section -->
<div class="row mt-4 d-print-block d-none">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h5 class="text-center">Low Stock Report - Ghana Wholesale Management</h5>
                <p class="text-center text-muted">Generated on: {% now "F j, Y, g:i a" %}</p>
                
                <h6>Main Warehouse Low Stock:</h6>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>SKU</th>
                            <th>Available</th>
                            <th>Reorder Level</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in low_stock %}
                        <tr>
                            <td>{{ item.product.name }}</td>
                            <td>{{ item.product.sku }}</td>
                            <td>{{ item.available }}</td>
                            <td>{{ item.product.reorder_level }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center">No low stock items</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                <h6 class="mt-4">Shop Low Stock:</h6>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Shop</th>
                            <th>Product</th>
                            <th>Available</th>
                            <th>Reorder Point</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in shop_low_stock %}
                        <tr>
                            <td>{{ item.shop.name }}</td>
                            <td>{{ item.product.name }}</td>
                            <td>{{ item.available }}</td>
                            <td>{{ item.reorder_point }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center">No shop low stock items</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                <div class="mt-4">
                    <h6>Recommendations:</h6>
                    <ul class="small">
                        <li>Reorder items marked as low stock immediately</li>
                        <li>Check supplier availability and delivery times</li>
                        <li>Consider transferring stock between locations</li>
                        <li>Update reorder levels based on sales patterns</li>
                    </ul>
                </div>
                
                <div class="text-center mt-4">
                    <p class="text-muted small">
                        Ghana Wholesale Management System<br>
                        Report generated automatically
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Auto-refresh report every 5 minutes
        setTimeout(function() {
            window.location.reload();
        }, 300000);
    });
</script>

<style>
    @media print {
        .sidebar, .navbar-custom, .page-actions, .btn-group, .card-footer, 
        .alert, .d-print-none, .d-none {
            display: none !important;
        }
        .main-content {
            margin-left: 0 !important;
            padding: 0 !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
        .table {
            font-size: 12px;
            border: 1px solid #dee2e6;
        }
        h1, h2, h3, h4, h5, h6 {
            color: #000 !important;
        }
        .d-print-block {
            display: block !important;
        }
    }
    
    .stat-card {
        transition: transform 0.2s;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    /* Ghana-themed colors */
    .bg-warning {
        background-color: #FCD20F !important;
        color: #000 !important;
    }
    
    .bg-info {
        background-color: #006B3D !important;
    }
    
    .bg-success {
        background-color: #006B3D !important;
    }
    
    .border-warning {
        border-left-color: #FCD20F !important;
    }
    
    .border-danger {
        border-left-color: #EF3340 !important;
    }
    
    .border-info {
        border-left-color: #006B3D !important;
    }
</style>
{% endblock %}