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

{% block title %}Stock Mismatch Report{% endblock %}
{% block heading %}Stock Mismatch — present_stock vs stock_history{% endblock %}

{% block stylesheets %}
<style>
    .summary-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:16px 20px; margin-bottom:16px; }
    .summary-card h5 { margin:0 0 4px 0; }
    .summary-card .num { font-size:1.5rem; font-weight:700; }
    .diff-positive { color:#dc2626; font-weight:700; }
    .diff-negative { color:#2563eb; font-weight:700; }
    .text-end { text-align:right; }
    #searchBox { max-width:300px; }
</style>
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-md-3">
        <div class="summary-card">
            <h5 class="text-muted">Total Mismatched</h5>
            <div class="num text-danger">{{ total_mismatch }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card">
            <h5 class="text-muted">Excess (present &gt; history)</h5>
            <div class="num text-warning">{{ total_positive }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card">
            <h5 class="text-muted">Short (present &lt; history)</h5>
            <div class="num text-primary">{{ total_negative }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="summary-card d-flex align-items-center justify-content-center">
            {% if total_mismatch > 0 %}
                <button id="btnSyncAll" class="btn btn-danger btn-lg" onclick="doSync()">
                    Sync All {{ total_mismatch }} Products
                </button>
            {% else %}
                <span class="text-success fw-bold fs-5">All stocks match!</span>
            {% endif %}
        </div>
    </div>
</div>

<div class="mb-2">
    <input type="text" id="searchBox" class="form-control form-control-sm" placeholder="Search product name or code...">
</div>

<div class="card">
    <div class="card-body p-2">
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-sm mb-0" id="mismatchTable">
                <thead>
                    <tr style="background:#f2f6fc;">
                        <th>Prod ID</th>
                        <th>Code</th>
                        <th>Product</th>
                        <th>Company</th>
                        <th>Category</th>
                        <th class="text-end">Present Stock</th>
                        <th class="text-end">History Stock</th>
                        <th class="text-end">Difference</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rows %}
                    <tr>
                        <td>{{ r.prod_id }}</td>
                        <td>{{ r.product_code }}</td>
                        <td>{{ r.name }}</td>
                        <td>{{ r.company }}</td>
                        <td>{{ r.category }}</td>
                        <td class="text-end">{{ r.present_stock }}</td>
                        <td class="text-end">{{ r.history_stock }}</td>
                        <td class="text-end {% if r.diff > 0 %}diff-positive{% else %}diff-negative{% endif %}">
                            {% if r.diff > 0 %}+{% endif %}{{ r.diff }}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="8" class="text-center text-muted py-3">All products match! No mismatches found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function getCookie(name){
    let c=null;
    document.cookie.split(';').forEach(v=>{
        v=v.trim();
        if(v.startsWith(name+'=')) c=decodeURIComponent(v.slice(name.length+1));
    });
    return c;
}

// Search filter
document.getElementById('searchBox').addEventListener('input', function(){
    const q = this.value.toLowerCase();
    document.querySelectorAll('#mismatchTable tbody tr').forEach(tr => {
        tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
});

// Sync all
function doSync(){
    const prodIds = {{ rows|length }} > 0 ? [{% for r in rows %}{{ r.prod_id }}{% if not forloop.last %},{% endif %}{% endfor %}] : [];
    
    if(!prodIds.length){ alert('Nothing to sync'); return; }
    
    if(!confirm('This will update present_stock for ' + prodIds.length + ' products to match stock_history totals.\n\nThis action cannot be undone. Continue?')){
        return;
    }

    const btn = document.getElementById('btnSyncAll');
    btn.disabled = true;
    btn.textContent = 'Syncing...';

    fetch("{% url 'reports:stock_mismatch_sync' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken'),
        },
        body: JSON.stringify({prod_ids: prodIds})
    })
    .then(r => r.json())
    .then(data => {
        if(data.status === 'ok'){
            alert('Successfully synced ' + data.updated + ' products.');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Unknown error'));
            btn.disabled = false;
            btn.textContent = 'Sync All {{ total_mismatch }} Products';
        }
    })
    .catch(err => {
        alert('Request failed: ' + err);
        btn.disabled = false;
        btn.textContent = 'Sync All {{ total_mismatch }} Products';
    });
}
</script>
{% endblock %}