{% extends "base.html" %}

{% block title %}Transfer Orders - Ghana Wholesale{% endblock %}
{% block page_icon %}bi-truck{% endblock %}
{% block page_title %}Transfer Orders{% endblock %}
{% block page_subtitle %}Manage stock transfers between shops{% endblock %}

{% block page_actions %}
<div class="btn-group">
    <a href="{% url 'transfer_create' %}" class="btn btn-success">
        <i class="bi bi-plus-circle"></i> New Transfer
    </a>
    <a href="{% url 'fast_transfer' %}" class="btn btn-primary">
        <i class="bi bi-lightning"></i> Fast Transfer
    </a>
</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 active">Transfers</li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <select name="status" class="form-select" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    {% for code, name in status_choices %}
                    <option value="{{ code }}" {% if selected_status == code %}selected{% endif %}>
                        {{ name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <select name="shop" class="form-select" onchange="this.form.submit()">
                    <option value="">All Shops</option>
                    {% for shop in shops %}
                    <option value="{{ shop.id }}" {% if shop.id|stringformat:"s" == selected_shop %}selected{% endif %}>
                        {{ shop.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="start_date" class="form-control" value="{{ start_date }}" placeholder="From Date">
            </div>
            <div class="col-md-2">
                <input type="date" name="end_date" class="form-control" value="{{ end_date }}" placeholder="To Date">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-filter"></i> Filter
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Transfers Table -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Transfer #</th>
                        <th>From Shop</th>
                        <th>To Shop</th>
                        <th>Date</th>
                        <th>Items</th>
                        <th>Quantity</th>
                        <th>Value</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for transfer in page_obj %}
                    <tr>
                        <td>
                            <strong>{{ transfer.transfer_number }}</strong>
                            {% if transfer.priority == 'urgent' %}
                            <span class="badge bg-danger">Urgent</span>
                            {% elif transfer.priority == 'high' %}
                            <span class="badge bg-warning">High</span>
                            {% endif %}
                        </td>
                        <td>{{ transfer.from_shop.name }}</td>
                        <td>{{ transfer.to_shop.name }}</td>
                        <td>{{ transfer.requested_date|date:"d M Y" }}</td>
                        <td>{{ transfer.total_items }}</td>
                        <td>{{ transfer.total_quantity }}</td>
                        <td class="text-success">GH₵{{ transfer.total_value|floatformat:2 }}</td>
                        <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>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'transfer_detail' transfer.pk %}" class="btn btn-outline-primary" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                {% if transfer.can_approve and user.is_superuser %}
                                <a href="{% url 'transfer_approve' transfer.pk %}" class="btn btn-outline-success" title="Approve">
                                    <i class="bi bi-check-circle"></i>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <div class="mb-4">
                                <i class="bi bi-truck text-muted" style="font-size: 3rem;"></i>
                            </div>
                            <h5>No transfer orders found</h5>
                            <p class="text-muted mb-4">
                                {% if selected_status or selected_shop or start_date or end_date %}
                                No transfers match your filters. Try adjusting your criteria.
                                {% else %}
                                Create your first transfer order to get started.
                                {% endif %}
                            </p>
                            <a href="{% url 'transfer_create' %}" class="btn btn-primary me-2">
                                <i class="bi bi-plus-circle"></i> Create Transfer
                            </a>
                            <a href="{% url 'fast_transfer' %}" class="btn btn-success">
                                <i class="bi bi-lightning"></i> Fast Transfer
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_shop %}&shop={{ selected_shop }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}">
                        First
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_shop %}&shop={{ selected_shop }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}">
                        Previous
                    </a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_shop %}&shop={{ selected_shop }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}">
                            {{ num }}
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_shop %}&shop={{ selected_shop }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}">
                        Next
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_shop %}&shop={{ selected_shop }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}">
                        Last
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}