{% extends 'scm/base.html' %}
{% load scm_filters %}
{% block content %}

<style>
    /* =========================================================
       STOCK REPORT - GREY SCM THEME
       ========================================================= */
    .stock-page {
        background: #f1f3f5;
        padding: 18px;
        border-radius: 10px;
    }

    .stock-page h3 {
        color: #343a40;
        font-weight: 600;
    }

    .stock-page > .card,
    .stock-page .tab-content > .tab-pane > .card {
        border: 1px solid #d5dbe0;
        border-radius: 8px;
    }

    .stock-page .card {
        border-color: #d5dbe0;
        border-radius: 8px;
        background: #fff;
    }

    .stock-page .form-control,
    .stock-page .form-select {
        border-color: #cbd1d6;
    }

    .stock-page .form-control:focus,
    .stock-page .form-select:focus {
        border-color: #7a8793;
        box-shadow: 0 0 0 .15rem rgba(91, 104, 117, .15);
    }

    .stock-page .btn-primary {
        background-color: #5b6875;
        border-color: #5b6875;
    }

    .stock-page .btn-primary:hover {
        background-color: #4f5b66;
        border-color: #4f5b66;
    }

    .stock-page .btn-success {
        background-color: #5b6875;
        border-color: #5b6875;
    }

    .stock-page .btn-success:hover {
        background-color: #4f5b66;
        border-color: #4f5b66;
    }

    .stock-page .nav-tabs {
        border-bottom-color: #cbd1d6;
    }

    .stock-page .nav-tabs .nav-link {
        color: #5b6875;
        border-color: transparent;
    }

    .stock-page .nav-tabs .nav-link:hover {
        color: #343a40;
        background: #eef0f2;
        border-color: #d5dbe0 #d5dbe0 transparent;
    }

    .stock-page .nav-tabs .nav-link.active {
        color: #fff;
        background: #5b6875;
        border-color: #5b6875 #5b6875 #5b6875;
    }

    .stock-page .table {
        margin-bottom: 0;
    }

    .stock-page .table thead th {
        background: #5b6875 !important;
        color: #fff !important;
        border-color: #697784;
        font-weight: 600;
        vertical-align: middle;
    }

    .stock-page .table tbody td {
        border-color: #d5dbe0;
    }

    .stock-page .table tbody tr:hover {
        background-color: #f1f3f5;
    }

    .stock-page .alert-info {
        color: #3f4c57;
        background-color: #e3e7eb;
        border-color: #cbd1d6;
    }

    .stock-page .badge.bg-primary,
    .stock-page .badge.bg-success,
    .stock-page .badge.bg-danger {
        background-color: #5b6875 !important;
    }

    .stock-page .card-body {
        background-color: #fff;
    }

    .stock-page .text-muted {
        color: #6c757d !important;
    }
</style>
<div class="container-fluid stock-page">
  <div class="d-flex justify-content-between align-items-center mb-3"><h3>Stock Report</h3><a href="?from={{ start_date|date:'Y-m-d' }}&to={{ end_date|date:'Y-m-d' }}&location={{ location_filter }}&kimap={{ kimap_filter }}&download=excel" class="btn btn-success btn-sm"><i class="bi bi-file-earmark-excel"></i> Download Excel</a></div>
  <div class="card mb-4"><div class="card-body"><form method="get"><div class="row g-3"><div class="col-md-3"><label class="form-label">From</label><input type="date" name="from" value="{{ start_date|date:'Y-m-d' }}" class="form-control"></div><div class="col-md-3"><label class="form-label">To</label><input type="date" name="to" value="{{ end_date|date:'Y-m-d' }}" class="form-control"></div><div class="col-md-3"><label class="form-label">Location</label><select name="location" class="form-select">{% for x in locations %}<option {% if x == location_filter %}selected{% endif %}>{{ x }}</option>{% endfor %}</select></div><div class="col-md-3"><label class="form-label">KIMAP</label><select name="kimap" class="form-select">{% for x in kimaps %}<option {% if x == kimap_filter %}selected{% endif %}>{{ x }}</option>{% endfor %}</select></div></div><div class="text-end mt-3"><button class="btn btn-primary"><i class="bi bi-search"></i> Apply Filter</button></div></form></div></div>
  <div class="card"><div class="card-body"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><button class="nav-link {% if active_tab == "balance" %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#balance">Stock Balance</button></li><li class="nav-item"><button class="nav-link {% if active_tab == "movement" %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#movement">Stock Movement</button></li><li class="nav-item"><button class="nav-link {% if active_tab == "card" %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#card">Stock Card</button></li></ul><div class="tab-content pt-3">
    <div class="tab-pane fade {% if active_tab == "balance" %}show active{% endif %}" id="balance"><div class="row g-2 mb-3"><div class="col"><div class="card"><div class="card-body"><small>Items</small><h5>{{ total_items }}</h5></div></div></div><div class="col"><div class="card"><div class="card-body"><small>Opening Stock</small><h5>{{ total_opening|floatformat:2 }}</h5></div></div></div><div class="col"><div class="card"><div class="card-body"><small>MRF / IN</small><h5>{{ total_in|floatformat:2 }}</h5></div></div></div><div class="col"><div class="card"><div class="card-body"><small>MTF / OUT</small><h5>{{ total_out|floatformat:2 }}</h5></div></div></div><div class="col"><div class="card"><div class="card-body"><small>Stock Balance</small><h5>{{ total_balance|floatformat:2 }}</h5></div></div></div></div><div class="table-responsive"><table class="table table-bordered table-hover table-sm"><thead><tr><th>KIMAP</th><th>Description</th><th>UOM</th><th>Opening</th><th>MRF / IN</th><th>MTF / OUT</th><th>Stock Balance</th><th>Location</th></tr></thead><tbody>{% for r in balance %}<tr><td>{{ r.KIMAP }}</td><td>{{ r.Description }}</td><td>{{ r.UOM }}</td><td>{{ r.Opening|floatformat:2 }}</td><td>{{ r|get_item:'MRF / IN'|floatformat:2 }}</td><td>{{ r|get_item:'MTF / OUT'|floatformat:2 }}</td><td><strong>{{ r|get_item:'Stock Balance'|floatformat:2 }}</strong></td><td>{{ r.Location }}</td></tr>{% empty %}<tr><td colspan="8" class="text-center">No stock balance data.</td></tr>{% endfor %}</tbody></table></div></div>
    <div class="tab-pane fade {% if active_tab == "movement" %}show active{% endif %}" id="movement"><div class="mb-3"><span class="badge bg-primary">Transactions {{ movement_count }}</span> <span class="badge bg-success">IN {{ movement_in|floatformat:2 }}</span> <span class="badge bg-danger">OUT {{ movement_out|floatformat:2 }}</span></div><div class="table-responsive"><table class="table table-bordered table-hover table-sm"><thead><tr><th>Date</th><th>Document No</th><th>Transaction</th><th>KIMAP</th><th>Description</th><th>UOM</th><th>IN</th><th>OUT</th><th>Net</th><th>Reference</th></tr></thead><tbody>{% for r in movement %}<tr><td>{{ r.Date }}</td><td>{{ r|get_item:'Document No' }}</td><td>{{ r.Transaction }}</td><td>{{ r.KIMAP }}</td><td>{{ r.Description }}</td><td>{{ r.UOM }}</td><td>{{ r.IN|floatformat:2 }}</td><td>{{ r.OUT|floatformat:2 }}</td><td>{{ r.Net|floatformat:2 }}</td><td>{{ r.Reference }}</td></tr>{% empty %}<tr><td colspan="10" class="text-center">No stock movement.</td></tr>{% endfor %}</tbody></table></div></div>
    <div class="tab-pane fade {% if active_tab == "card" %}show active{% endif %}" id="card">
      <form method="get" class="mb-3">
        <input type="hidden" name="from" value="{{ start_date|date:'Y-m-d' }}">
        <input type="hidden" name="to" value="{{ end_date|date:'Y-m-d' }}">
        <input type="hidden" name="location" value="{{ location_filter }}">
        <input type="hidden" name="kimap" value="{{ kimap_filter }}">
        <input type="hidden" name="tab" value="card">

        <div class="row align-items-end g-3">
          <div class="col-md-8">
            <label class="form-label">Select KIMAP</label>
            <select name="card_kimap" class="form-select" onchange="this.form.submit()">
              {% for k in card_options %}
                <option value="{{ k }}" {% if k == card_kimap %}selected{% endif %}>
                  {{ k }}{% for b in balance %}{% if b.KIMAP == k %} - {{ b.Description }}{% endif %}{% endfor %}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-search"></i> Show Stock Card
            </button>
          </div>
        </div>
      </form>

      <div class="row mb-3">
        <div class="col-md-4"><strong>KIMAP:</strong> {{ selected_card }}</div>
        <div class="col-md-4"><strong>Description:</strong> {{ item.name }}</div>
        <div class="col-md-2"><strong>UOM:</strong> {{ item.uom }}</div>
        <div class="col-md-2"><strong>Current Stock:</strong> {{ current_stock|floatformat:2 }}</div>
      </div>

      <div class="alert alert-info">
        Opening Stock (from KIMAP):
        <strong>{{ base_stock|floatformat:2 }} {{ item.uom }}</strong>
      </div>

      <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm">
          <thead>
            <tr>
              <th>Date</th>
              <th>Document No</th>
              <th>Transaction</th>
              <th>KIMAP</th>
              <th>Description</th>
              <th>IN</th>
              <th>OUT</th>
              <th>Balance</th>
              <th>UOM</th>
            </tr>
          </thead>
          <tbody>
            {% for r in card %}
            <tr>
              <td>{{ r.Date }}</td>
              <td>{{ r|get_item:'Document No' }}</td>
              <td>{{ r.Transaction }}</td>
              <td>{{ r.KIMAP }}</td>
              <td>{{ r.Description }}</td>
              <td>{{ r.IN|floatformat:2 }}</td>
              <td>{{ r.OUT|floatformat:2 }}</td>
              <td><strong>{{ r.Balance|floatformat:2 }}</strong></td>
              <td>{{ r.UOM }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="9" class="text-center">No movement for this KIMAP in the selected period.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div></div></div>
</div>

<style>
  #card .form-select {
    min-height: 42px;
  }
  #card .form-label {
    font-weight: 600;
    margin-bottom: 6px;
  }
</style>
{% endblock %}