{% extends "base.html" %}
{% load humanize %}

{% block title %}Transfer {{ transfer.transfer_number }} - Ghana Wholesale{% endblock %}

{% block page_icon %}bi-truck{% endblock %}
{% block page_title %}Transfer {{ transfer.transfer_number }}{% endblock %}
{% block page_subtitle %}Transfer order details{% endblock %}

{% block page_actions %}
<div class="btn-group">
    <a href="{% url 'transfer_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> Back to List
    </a>
    {% if transfer.status == 'pending' and perms.shops.change_transferorder %}
    <a href="{% url 'transfer_approve' transfer.pk %}" class="btn btn-success">
        <i class="fas fa-check-circle"></i> Approve
    </a>
    <a href="{% url 'transfer_reject' transfer.pk %}" class="btn btn-danger">
        <i class="fas fa-times-circle"></i> Reject
    </a>
    {% endif %}
</div>
{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'inventory_dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'transfer_list' %}">Transfers</a></li>
        <li class="breadcrumb-item active">{{ transfer.transfer_number }}</li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Transfer Information -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Transfer Information
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Transfer Number:</th>
                                <td><strong>{{ transfer.transfer_number }}</strong></td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    {% if transfer.status == 'draft' %}
                                    <span class="badge bg-secondary">Draft</span>
                                    {% elif transfer.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                    {% elif transfer.status == 'approved' %}
                                    <span class="badge bg-info">Approved</span>
                                    {% elif transfer.status == 'shipped' %}
                                    <span class="badge bg-primary">Shipped</span>
                                    {% elif transfer.status == 'delivered' %}
                                    <span class="badge bg-success">Delivered</span>
                                    {% elif transfer.status == 'cancelled' %}
                                    <span class="badge bg-danger">Cancelled</span>
                                    {% elif transfer.status == 'rejected' %}
                                    <span class="badge bg-dark">Rejected</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Priority:</th>
                                <td>
                                    {% if transfer.priority == 'urgent' %}
                                    <span class="badge bg-danger">Urgent</span>
                                    {% elif transfer.priority == 'high' %}
                                    <span class="badge bg-warning">High</span>
                                    {% elif transfer.priority == 'normal' %}
                                    <span class="badge bg-info">Normal</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Low</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Requested By:</th>
                                <td>{{ transfer.requested_by.get_full_name|default:transfer.requested_by.username }}</td>
                            </tr>
                            <tr>
                                <th>Requested Date:</th>
                                <td>{{ transfer.requested_date|date:"d M Y, g:i A" }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">From Shop:</th>
                                <td>
                                    <strong>{{ transfer.from_shop.name }}</strong>
                                    <br><small class="text-muted">{{ transfer.from_shop.code }} - {{ transfer.from_shop.get_shop_type_display }}</small>
                                </td>
                            </tr>
                            <tr>
                                <th>To Shop:</th>
                                <td>
                                    <strong>{{ transfer.to_shop.name }}</strong>
                                    <br><small class="text-muted">{{ transfer.to_shop.code }} - {{ transfer.to_shop.get_shop_type_display }}</small>
                                </td>
                            </tr>
                            {% if transfer.approved_by %}
                            <tr>
                                <th>Approved By:</th>
                                <td>{{ transfer.approved_by.get_full_name|default:transfer.approved_by.username }}</td>
                            </tr>
                            <tr>
                                <th>Approved Date:</th>
                                <td>{{ transfer.approved_date|date:"d M Y, g:i A" }}</td>
                            </tr>
                            {% endif %}
                            {% if transfer.rejected_by %}
                            <tr>
                                <th>Rejected By:</th>
                                <td>{{ transfer.rejected_by.get_full_name|default:transfer.rejected_by.username }}</td>
                            </tr>
                            <tr>
                                <th>Rejected Date:</th>
                                <td>{{ transfer.rejected_date|date:"d M Y, g:i A" }}</td>
                            </tr>
                            {% endif %}
                            {% if transfer.received_by %}
                            <tr>
                                <th>Received By:</th>
                                <td>{{ transfer.received_by.get_full_name|default:transfer.received_by.username }}</td>
                            </tr>
                            <tr>
                                <th>Delivered Date:</th>
                                <td>{{ transfer.delivered_date|date:"d M Y, g:i A" }}</td>
                            </tr>
                            {% endif %}
                        </table>
                    </div>
                </div>
                
                {% if transfer.reject_reason %}
                <div class="mt-3 alert alert-danger">
                    <h6>Rejection Reason:</h6>
                    <p class="mb-0">{{ transfer.reject_reason|linebreaks }}</p>
                </div>
                {% endif %}
                
                {% if transfer.notes %}
                <div class="mt-3">
                    <h6>Notes:</h6>
                    <p class="mb-0">{{ transfer.notes|linebreaks }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Transfer Items -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-list"></i> Transfer Items ({{ transfer.total_items }})
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>SKU</th>
                                <th class="text-end">Quantity</th>
                                <th class="text-end">Unit Cost</th>
                                <th class="text-end">Total Cost</th>
                                <th>Stock Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in transfer.items.all %}
                            <tr>
                                <td>
                                    <strong>{{ item.product.name }}</strong>
                                    {% if item.product.barcode %}
                                    <br><small class="text-muted">{{ item.product.barcode }}</small>
                                    {% endif %}
                                </td>
                                <td>{{ item.product.sku }}</td>
                                <td class="text-end">{{ item.quantity }}</td>
                                <td class="text-end text-danger">GH₵ {{ item.unit_cost|floatformat:2 }}</td>
                                <td class="text-end text-success">GH₵ {{ item.total_cost|floatformat:2 }}</td>
                                <td>
                                    {% if transfer.status == 'approved' or transfer.status == 'shipped' or transfer.status == 'delivered' %}
                                    <span class="badge bg-success">Deducted from {{ transfer.from_shop.code }}</span>
                                    {% if transfer.status == 'delivered' %}
                                    <br><small class="text-success">Added to {{ transfer.to_shop.code }}</small>
                                    {% endif %}
                                    {% else %}
                                    <span class="badge bg-warning">Pending deduction</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr class="table-light">
                                <td colspan="2" class="text-end"><strong>Totals:</strong></td>
                                <td class="text-end fw-bold">{{ transfer.total_quantity }}</td>
                                <td class="text-end"></td>
                                <td class="text-end fw-bold text-success">GH₵ {{ transfer.total_value|floatformat:2 }}</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                {% if transfer.status == 'approved' %}
                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle"></i>
                    <strong>Stock Status:</strong> Stock has been deducted from {{ transfer.from_shop.name }} and is ready to be shipped.
                </div>
                {% elif transfer.status == 'delivered' %}
                <div class="alert alert-success mt-3">
                    <i class="fas fa-check-circle"></i>
                    <strong>Stock Status:</strong> Stock has been delivered to {{ transfer.to_shop.name }}.
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Transfer Actions & Summary -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="fas fa-calculator"></i> Transfer Summary
                </h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <div class="display-4 fw-bold">{{ transfer.total_items }}</div>
                    <small class="text-muted">Total Items</small>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Total Quantity:</span>
                        <strong>{{ transfer.total_quantity }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Total Value:</span>
                        <strong class="text-success">GH₵ {{ transfer.total_value|floatformat:2 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Source Shop:</span>
                        <strong>{{ transfer.from_shop.code }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mt-2">
                        <span>Destination Shop:</span>
                        <strong>{{ transfer.to_shop.code }}</strong>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h6 class="border-bottom pb-2">Transfer Timeline</h6>
                    <div class="timeline">
                        <div class="timeline-item {% if transfer.status != 'cancelled' and transfer.status != 'rejected' %}active{% endif %}">
                            <small>Requested</small>
                            <div>{{ transfer.requested_date|date:"d M, H:i" }}</div>
                        </div>
                        {% if transfer.approved_date %}
                        <div class="timeline-item {% if transfer.status in 'shipped,delivered' %}active{% endif %}">
                            <small>Approved</small>
                            <div>{{ transfer.approved_date|date:"d M, H:i" }}</div>
                            <small class="text-success">Stock deducted</small>
                        </div>
                        {% endif %}
                        {% if transfer.rejected_date %}
                        <div class="timeline-item">
                            <small>Rejected</small>
                            <div>{{ transfer.rejected_date|date:"d M, H:i" }}</div>
                            <small class="text-danger">Transfer cancelled</small>
                        </div>
                        {% endif %}
                        {% if transfer.shipped_date %}
                        <div class="timeline-item {% if transfer.status == 'delivered' %}active{% endif %}">
                            <small>Shipped</small>
                            <div>{{ transfer.shipped_date|date:"d M, H:i" }}</div>
                        </div>
                        {% endif %}
                        {% if transfer.delivered_date %}
                        <div class="timeline-item active">
                            <small>Delivered</small>
                            <div>{{ transfer.delivered_date|date:"d M, H:i" }}</div>
                            <small class="text-success">Stock added</small>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Transfer Actions -->
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0">
                    <i class="fas fa-gear"></i> Transfer Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    {% if transfer.status == 'pending' and perms.shops.change_transferorder %}
                    <a href="{% url 'transfer_approve' transfer.pk %}" class="btn btn-success">
                        <i class="fas fa-check-circle"></i> Approve Transfer
                    </a>
                    <a href="{% url 'transfer_reject' transfer.pk %}" class="btn btn-danger">
                        <i class="fas fa-times-circle"></i> Reject Transfer
                    </a>
                    {% endif %}
                    
                    {% if transfer.status == 'approved' %}
                    <form method="post" action="{% url 'process_transfer' transfer.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="ship">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-truck"></i> Mark as Shipped
                        </button>
                    </form>
                    {% endif %}
                    
                    {% if transfer.status == 'shipped' %}
                    <form method="post" action="{% url 'process_transfer' transfer.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="deliver">
                        <button type="submit" class="btn btn-success w-100">
                            <i class="fas fa-check-circle"></i> Mark as Delivered
                        </button>
                    </form>
                    {% endif %}
                    
                    <a href="{% url 'fast_transfer' %}" class="btn btn-outline-primary">
                        <i class="fas fa-bolt"></i> New Fast Transfer
                    </a>
                    
                    <a href="{% url 'transfer_create' %}" class="btn btn-outline-success">
                        <i class="fas fa-plus-circle"></i> Create New Transfer
                    </a>
                </div>
            </div>
        </div>

        <!-- Transport Information -->
        {% if transfer.transport_method or transfer.driver_name or transfer.vehicle_number %}
        <div class="card mt-4">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0">
                    <i class="fas fa-truck"></i> Transport Details
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    {% if transfer.transport_method %}
                    <tr>
                        <th width="40%">Method:</th>
                        <td>{{ transfer.transport_method }}</td>
                    </tr>
                    {% endif %}
                    {% if transfer.driver_name %}
                    <tr>
                        <th>Driver:</th>
                        <td>{{ transfer.driver_name }}</td>
                    </tr>
                    {% endif %}
                    {% if transfer.vehicle_number %}
                    <tr>
                        <th>Vehicle No:</th>
                        <td>{{ transfer.vehicle_number }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<style>
.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 15px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dee2e6;
}

.timeline-item.active::before {
    background: #28a745;
}

.timeline-item small {
    display: block;
    color: #6c757d;
}

.timeline-item div {
    font-weight: 500;
}
</style>
{% endblock %}