{% extends 'core/base.html' %}
{% load currency_filters %}
{% load static %}

{% block title %}Confirm Receipt — PO #{{ order.id }}{% endblock %}
{% block topbar_title %}Confirm Goods Receipt{% endblock %}

{% block extra_css %}
<style>
.confirm-card {
  border: none;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  max-width: 720px;
  margin: 0 auto;
}
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.5rem;
  transition: background 0.15s;
}
.item-row:hover { background: #eef2ff; border-color: #c7d2fe; }
.qty-badge {
  background: #4F46E5;
  color: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-weight: 700;
  font-size: 0.82rem;
}
.warning-box {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fbbf24;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: #78350f;
}
.btn-confirm {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  font-weight: 700;
  padding: 0.75rem 2rem;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,0.35); color: #fff; }
.btn-confirm:active { transform: translateY(0); }
.branch-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 0.5rem;
}
.branch-option:has(input:checked) {
  border-color: #4F46E5;
  background: #eef2ff;
}
.branch-option input { flex-shrink: 0; accent-color: #4F46E5; }
.branch-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; flex-shrink: 0;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0 pb-5">

  <div class="confirm-card card">
    <div class="card-body p-5">

      <!-- Header -->
      <div class="text-center mb-4">
        <div class="mb-3" style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:inline-flex;align-items:center;justify-content:center;">
          <i class="fas fa-boxes-packing text-white fs-3"></i>
        </div>
        <h4 class="fw-bold mb-1">Confirm Goods Receipt</h4>
        <p class="text-muted mb-0">
          PO #{{ order.id }} &mdash; <strong>{{ order.supplier.name }}</strong>
        </p>
      </div>

      <!-- Warning -->
      <div class="warning-box mb-4">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Heads up!</strong> Confirming receipt will <strong>immediately add the quantities below to inventory</strong>
        and update the cost prices. This action cannot be undone.
      </div>

      <form method="post" action="{% url 'inventory:purchase_order_mark_received' order.id %}">
        {% csrf_token %}

        <!-- Branch selector -->
        <div class="mb-4">
          <div class="fw-bold mb-2 small text-uppercase text-muted" style="letter-spacing:0.5px;">
            <i class="fas fa-code-branch me-1 text-primary"></i> Receiving Branch
          </div>

          {% if branches|length > 1 %}
            <p class="small text-muted mb-3">
              Select which branch is receiving these goods. Stock will be tracked per-branch.
            </p>
            {% for branch in branches %}
            <label class="branch-option w-100">
              <input type="radio" name="branch_id" value="{{ branch.id }}"
                {% if user_branch and branch.id == user_branch.id %}checked{% elif forloop.first and not user_branch %}checked{% endif %}>
              <div class="branch-icon"><i class="fas fa-store"></i></div>
              <div>
                <div class="fw-semibold small">{{ branch.name }}</div>
                <div class="text-muted" style="font-size:0.73rem;">{{ branch.code }}</div>
              </div>
              {% if user_branch and branch.id == user_branch.id %}
                <span class="badge bg-primary-subtle text-primary ms-auto rounded-pill" style="font-size:0.7rem;">Your Branch</span>
              {% endif %}
            </label>
            {% endfor %}

            <!-- Option: no specific branch (global) -->
            <label class="branch-option w-100" style="border-style:dashed;">
              <input type="radio" name="branch_id" value="">
              <div class="branch-icon" style="background:linear-gradient(135deg,#64748b,#94a3b8);"><i class="fas fa-globe"></i></div>
              <div>
                <div class="fw-semibold small">Global (No Specific Branch)</div>
                <div class="text-muted" style="font-size:0.73rem;">Add directly to overall product stock</div>
              </div>
            </label>
          {% else %}
            {% for branch in branches %}
            <div class="item-row">
              <div class="d-flex align-items-center gap-3">
                <div class="branch-icon"><i class="fas fa-store"></i></div>
                <div>
                  <div class="fw-semibold small">{{ branch.name }}</div>
                  <div class="text-muted" style="font-size:0.73rem;">Only branch — stock will be assigned here</div>
                </div>
              </div>
              <span class="badge bg-success-subtle text-success rounded-pill">Auto-selected</span>
            </div>
            <input type="hidden" name="branch_id" value="{{ branch.id }}">
            {% empty %}
            <div class="alert alert-warning py-2 small" style="border-radius:10px;">
              <i class="fas fa-exclamation-triangle me-1"></i>
              No branches found. Stock will be added to global quantity.
            </div>
            {% endfor %}
          {% endif %}
        </div>

        <!-- Items list -->
        <div class="mb-4">
          <div class="fw-bold mb-2 small text-uppercase text-muted" style="letter-spacing:0.5px;">
            <i class="fas fa-list-ul me-1 text-primary"></i> Items to be Received
          </div>
          {% for item in order.items.all %}
          <div class="item-row">
            <div>
              <div class="fw-semibold small">{{ item.product.name }}</div>
              <div class="text-muted" style="font-size:0.75rem;">
                Unit cost: {% money item.unit_cost %}
                &nbsp;&bull;&nbsp;
                Current stock: <strong>{{ item.product.stock_quantity }}</strong>
                &nbsp;&rarr;&nbsp;
                <span class="text-success fw-semibold">{{ item.product.stock_quantity|add:item.quantity }} after receipt</span>
              </div>
            </div>
            <span class="qty-badge">+{{ item.quantity }}</span>
          </div>
          {% empty %}
          <div class="text-muted text-center py-3">No items found on this order.</div>
          {% endfor %}
        </div>

        <!-- Total -->
        <div class="d-flex justify-content-between align-items-center p-3 rounded-3 mb-4"
             style="background:linear-gradient(135deg,#4F46E5,#7C3AED);">
          <span class="text-white fw-bold">Total Order Cost</span>
          <span class="text-white fw-bold fs-5">{% money order.total_cost %}</span>
        </div>

        <!-- Actions -->
        <div class="d-flex gap-3 justify-content-center">
          <a href="{% url 'inventory:purchase_order_detail' order.id %}"
             class="btn btn-outline-secondary rounded-pill px-4">
            <i class="fas fa-arrow-left me-1"></i> Cancel
          </a>
          <button type="submit" class="btn-confirm">
            <i class="fas fa-check-circle me-2"></i>
            Yes, Receive Goods & Update Stock
          </button>
        </div>

      </form>

    </div>
  </div>

</div>
{% endblock %}
