{% extends "pos/base.html" %}
{% load static %}

{% block stylesheets %}
{{ block.super }}

<style>
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 15px 20px;
        border-radius: 10px;
        text-align: center;
        margin-bottom: 15px;
    }
    .stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .stat-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .stat-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .stat-card h4 { margin: 0; font-size: 24px; font-weight: bold; }
    .stat-card small { opacity: 0.9; }
    .filter-section { background: #f8f9fa; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
    .warehouse-badge { 
        background: #0B60D1; 
        color: #fff; 
        padding: 3px 10px; 
        border-radius: 15px; 
        font-size: 12px; 
    }
    .table th { background: #343a40; color: #fff; font-size: 12px; }
    .table td { font-size: 13px; vertical-align: middle; }
    .text-right { text-align: right; }
</style>
{% endblock %}

{% block heading %}Warehouse Inventory Report{% endblock heading %}

{% block content %}

<!-- Stats Cards -->
<div class="row mb-3">
    <div class="col-md-3">
        <div class="stat-card">
            <h4>{{ totals.total_items }}</h4>
            <small>Total Items</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card green">
            <h4>{{ totals.total_stock|floatformat:0 }}</h4>
            <small>Total Stock</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card orange">
            <h4>{% if 'show_purchase_price_inventory' in allowed_features %}{{ totals.total_value|floatformat:2 }}{% else %} - {% endif %}</h4>
            <small>Stock Value (Cost)</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card blue">
            <h4>{{ totals.total_sale_value|floatformat:2 }}</h4>
            <small>Stock Value (Sale)</small>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-section">
    <form method="get" class="form-row align-items-end">
        <!-- Warehouse Filter -->
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_warehouse" id="filter_warehouse" 
                       {% if params.filter_warehouse %}checked{% endif %}
                       {% if is_sub_tenant and locked_warehouse %}disabled{% endif %}>
                <label class="form-check-label small mb-0" for="filter_warehouse">
                    Warehouse
                    {% if is_sub_tenant and locked_warehouse %}
                        <i class="fas fa-lock text-warning" title="Locked to your sub-tenant"></i>
                    {% endif %}
                </label>
            </div>
            <select name="warehouse" class="form-control form-control-sm" 
                    {% if is_sub_tenant and locked_warehouse %}disabled{% endif %}>
                <option value="">-- All Warehouses --</option>
                {% for w in warehouses %}
                    <option value="{{ w }}" {% if params.warehouse == w %}selected{% endif %}>{{ w }}</option>
                {% endfor %}
            </select>
            {% if is_sub_tenant and locked_warehouse %}
                <!-- Hidden input to preserve value when disabled -->
                <input type="hidden" name="warehouse" value="{{ locked_warehouse }}">
                <input type="hidden" name="filter_warehouse" value="on">
            {% endif %}
        </div>
        <!-- Company Filter -->
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_company" id="filter_company"
                       {% if params.filter_company %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_company">Company</label>
            </div>
            <select name="company" class="form-control form-control-sm">
                <option value="">-- All Companies --</option>
                {% for c in companies %}
                    <option value="{{ c }}" {% if params.company == c %}selected{% endif %}>{{ c }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Category Filter -->
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_category" id="filter_category"
                       {% if params.filter_category %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_category">Category</label>
            </div>
            <select name="category" class="form-control form-control-sm">
                <option value="">-- All Categories --</option>
                {% for c in categories %}
                    <option value="{{ c }}" {% if params.category == c %}selected{% endif %}>{{ c }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Product Code -->
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_code" id="filter_code"
                       {% if params.filter_code %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_code">Product Code</label>
            </div>
            <input type="text" name="product_code" class="form-control form-control-sm" 
                   placeholder="Code..." value="{{ params.product_code }}">
        </div>

        <!-- Product Name -->
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_name" id="filter_name"
                       {% if params.filter_name %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_name">Product Name</label>
            </div>
            <input type="text" name="product_name" class="form-control form-control-sm" 
                   placeholder="Name..." value="{{ params.product_name }}">
        </div>

        <!-- Show Zero + Search -->
        <div class="form-group col-md-2 mb-2">
            <div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" name="show_zero" id="show_zero"
                       {% if params.show_zero %}checked{% endif %}>
                <label class="form-check-label small" for="show_zero">Show Zero Stock</label>
            </div>
            <button type="submit" class="btn btn-primary btn-sm btn-block">
                <i class="fas fa-search"></i> Search
            </button>
        </div>
    </form>
</div>

<!-- Export Buttons -->
<div class="mb-3 d-flex flex-wrap">
    <a href="{{ export_excel_url }}?{{ query_string }}" class="btn btn-success mr-2 mb-1">
        <i class="fas fa-file-excel"></i> Export Excel
    </a>
    <button type="button" class="btn btn-danger mr-2 mb-1" data-toggle="modal" data-target="#pdfModal">
        <i class="fas fa-file-pdf"></i> Export PDF
    </button>
    <a href="{% url 'reports:inventory_report' %}" class="btn btn-secondary mb-1">
        <i class="fas fa-arrow-left"></i> General Inventory
    </a>
    <a href="{% url 'reports:item_stock_comparison_report' %}" class="btn btn-secondary mb-1">
         Inventory Comparison
    </a>
    
</div>

<!-- Data Table -->
<div class="table-responsive">
    <table id="warehouseTable" class="table table-bordered table-hover table-sm">
        <thead>
            <tr>
                <th>Code</th>
                <th>Product</th>
                <th>SKU</th>
                <th>Warehouse</th>
                <th>Spec B</th>
                <th>Company</th>
                <th>Category</th>
                <th class="text-right">On Hand</th>
                <th class="text-right">Bonus</th>
                <th class="text-right">Total Stock</th>
                <th class="text-right">Pur. Price</th>
                <th class="text-right">Sale Price</th>
                <th class="text-right">Stock Value</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for r in rows %}
            <tr>
                <td>{{ r.product_code }}</td>
                <td>
                    {% if is_sub_tenant %}
                        {{ r.product_name }}
                    {% else %}
                        {{ r.product_with_variant }}
                        <br><small class="text-muted">{{ r.sku_code }}</small>
                    {% endif %}
                </td>
                <td><small class="text-muted">{{ r.sku_code }}</small></td>
                <td><span class="warehouse-badge">{{ r.warehouse }}</span></td>
                <td>{{ r.spec_b }}</td>
                <td>{{ r.company }}</td>
                <td>{{ r.category }}</td>
                <td class="text-right">{{ r.on_hand|floatformat:0 }}</td>
                <td class="text-right">{{ r.bonus|floatformat:0 }}</td>
                <td class="text-right"><strong>{{ r.stock_display }}</strong></td>
                <td class="text-right">{% if 'show_purchase_price_inventory' in allowed_features %}{{ r.purchase_price|floatformat:2 }}{% else %} - {% endif %}</td>
                <td class="text-right">{{ r.sale_price|floatformat:2 }}</td>
                <td class="text-right"><strong>{% if 'show_purchase_price_inventory' in allowed_features %}{{ r.stock_value|floatformat:2 }}{% else %} - {% endif %}</strong></td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-secondary btn-xs dropdown-toggle" data-toggle="dropdown">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="{% url 'reports:stock_history' r.prod_id %}">
                                <i class="fas fa-history"></i> Stock History
                            </a>
                            <a class="dropdown-item" href="{% url 'reports:fifo_layers' r.prod_id %}">
                                <i class="fas fa-layer-group"></i> FIFO Layers
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{% url 'products:products_update' r.product_id %}">
                                <i class="fas fa-edit"></i> Edit Product
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="14" class="text-center text-muted py-4">
                    <i class="fas fa-box-open fa-2x mb-2"></i><br>
                    No inventory data found.
                </td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr class="table-dark">
                <th colspan="7" class="text-right">Grand Totals:</th>
                <th class="text-right">-</th>
                <th class="text-right">{{ totals.total_bonus|floatformat:0 }}</th>
                <th class="text-right">{{ totals.total_stock|floatformat:0 }}</th>
                <th colspan="2"></th>
                <th class="text-right">{% if 'show_purchase_price_inventory' in allowed_features %}{{ totals.total_value|floatformat:2 }}{% else %} - {% endif %}</th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>


<!-- PDF Export Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form method="get" action="{{ export_pdf_url }}" target="_blank">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <div>
                        <h5 class="modal-title mb-0"><i class="fas fa-file-pdf"></i> PDF Export Options</h5>
                        <small>Choose columns + layout settings</small>
                    </div>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <!-- Carry over filters -->
                    {% for k, vlist in request.GET.lists %}
                        {% if k not in 'columns,page_size,orientation,group_by' %}
                            {% for v in vlist %}
                                <input type="hidden" name="{{ k }}" value="{{ v }}">
                            {% endfor %}
                        {% endif %}
                    {% endfor %}

                    <div class="row">
                        <!-- Columns Selection -->
                        <div class="col-md-6">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Select Columns</h6>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" id="colsAll">All</button>
                                    <button type="button" class="btn btn-outline-secondary" id="colsNone">None</button>
                                </div>
                            </div>
                            <div class="border rounded p-2" style="max-height:320px; overflow:auto;">
                                {% for key, label in all_columns %}
                                <div class="custom-control custom-checkbox mb-1">
                                    <input class="custom-control-input pdf-col" type="checkbox" 
                                           name="columns" value="{{ key }}" id="col_{{ key }}"
                                           {% if key in default_pdf_columns %}checked{% endif %}>
                                    <label class="custom-control-label" for="col_{{ key }}">{{ label }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- PDF Settings -->
                        <div class="col-md-6">
                            <h6 class="mb-2">PDF Settings</h6>

                            <div class="form-group">
                                <label class="mb-1">Page Size</label>
                                <select name="page_size" class="form-control">
                                    <option value="A4">A4</option>
                                    <option value="A5">A5</option>
                                    <option value="Thermal">Thermal (58mm)</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="mb-1">Orientation</label>
                                <select name="orientation" class="form-control">
                                    <option value="portrait">Portrait</option>
                                    <option value="landscape">Landscape</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="mb-1">Group By</label>
                                <select name="group_by" class="form-control">
                                    <option value="">None (All items)</option>
                                    <option value="warehouse">Warehouse</option>
                                    <option value="company">Company</option>
                                    <option value="category">Category</option>
                                </select>
                            </div>

                            <div class="alert alert-info small mb-0">
                                <i class="fas fa-info-circle"></i>
                                Grouping will show subtotals per group with grand totals at the end.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-file-pdf"></i> Generate PDF
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ block.super }}

<script>
$(function(){
    // Initialize DataTable
    $('#warehouseTable').DataTable({
        order: [[3, 'asc'], [1, 'asc']],  // Order by warehouse, then product
        pageLength: 50,
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        dom: '<"row"<"col-md-6"l><"col-md-6"f>>rtip',
    });

    // PDF Modal: All / None columns
    $('#colsAll').on('click', function(){ $('.pdf-col').prop('checked', true); });
    $('#colsNone').on('click', function(){ $('.pdf-col').prop('checked', false); });

    // Auto-check filter checkboxes
    $('select[name="warehouse"]').on('change', function(){
        if ($(this).val()) $('#filter_warehouse').prop('checked', true);
    });
    $('select[name="company"]').on('change', function(){
        if ($(this).val()) $('#filter_company').prop('checked', true);
    });
    $('select[name="category"]').on('change', function(){
        if ($(this).val()) $('#filter_category').prop('checked', true);
    });
    $('input[name="product_code"]').on('input', function(){
        if ($(this).val().trim()) $('#filter_code').prop('checked', true);
    });
    $('input[name="product_name"]').on('input', function(){
        if ($(this).val().trim()) $('#filter_name').prop('checked', true);
    });
});
</script>
{% endblock %}