{% extends edc_base_template %}
{% load static %}

{% block main %}
    {{ block.super }}
    <div class="container">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
            <div style="padding:10px">
                <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                <a href="{% url "edc_pharmacy:return_request_url" %}">Return Requests</a>
                {% if return_request %}&rsaquo; {{ return_request.return_identifier }}{% endif %}
            </div>

            {% if not return_request %}
            {# ─── Phase 1: Create a new return request ─────────────────── #}
            <div class="panel panel-default">
                <div class="panel-heading">New Return Request</div>
                <div class="panel-body">
                    <form class="form-horizontal" method="post"
                          onSubmit="document.getElementById('submit_new').disabled=true;">
                        {% csrf_token %}
                        <div class="form-group">
                            <label class="control-label col-sm-4" for="from_location_id">Site location</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="from_location_id" name="from_location_id" required autofocus>
                                    <option value="">---------</option>
                                    {% for loc in from_locations %}
                                        <option value="{{ loc.id }}"
                                            {% if current_site_location and loc.id == current_site_location.id %}selected{% endif %}>
                                            {{ loc.display_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4" for="item_count">Number of items</label>
                            <div class="col-sm-8">
                                <input type="number" class="form-control" id="item_count"
                                       name="item_count" min="1" max="500" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4" for="comment">Comment</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" id="comment" name="comment" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="submit" class="btn btn-primary" id="submit_new">
                                    Create
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Open Return Requests</div>
                <div class="panel-body">
                    {% if pending_returns %}
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>Reference</th>
                                <th>From</th>
                                <th>Date</th>
                                <th>Items</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rr in pending_returns %}
                            <tr>
                                <td>{{ rr.return_identifier }}</td>
                                <td>{{ rr.from_location.display_name }}</td>
                                <td>{{ rr.return_datetime|date:"d-M-Y" }}</td>
                                <td>{{ rr.received_item_count }} / {{ rr.item_count }}</td>
                                <td>
                                    <a href="{% url "edc_pharmacy:return_request_url" return_request=rr.pk %}"
                                       class="btn btn-xs btn-primary">Edit</a>
                                    {% if rr.dispatched_item_count == 0 %}
                                    <form method="post" style="display:inline;"
                                          onsubmit="return confirm('Delete {{ rr.return_identifier }}?');">
                                        {% csrf_token %}
                                        <input type="hidden" name="delete_pk" value="{{ rr.pk }}">
                                        <button type="submit" class="btn btn-xs btn-danger">Delete</button>
                                    </form>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">No open return requests.</p>
                    {% endif %}
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Recent Return Requests</div>
                <div class="panel-body">
                    {% if completed_returns %}
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>Reference</th>
                                <th>From</th>
                                <th>Date</th>
                                <th>Items</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rr in completed_returns %}
                            <tr>
                                <td>{{ rr.return_identifier }}</td>
                                <td>{{ rr.from_location.display_name }}</td>
                                <td>{{ rr.return_datetime|date:"d-M-Y" }}</td>
                                <td>{{ rr.dispatched_item_count }} / {{ rr.item_count }}</td>
                                <td>
                                    <a href="{% url "edc_pharmacy:return_manifest_url" return_request=rr.pk %}"
                                       class="btn btn-xs btn-default" target="_blank">
                                        <i class="fas fa-file-pdf"></i> Manifest
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">No completed return requests.</p>
                    {% endif %}
                    {% if completed_returns %}
                    <a href="{% url "edc_pharmacy_admin:edc_pharmacy_returnrequest_changelist" %}"
                       class="small">more &hellip;</a>
                    {% endif %}
                </div>
            </div>

            {% else %}
            {# ─── Phase 2: Dispatch items on an existing ReturnRequest ──── #}
            <div class="panel panel-default">
                <div class="panel-heading">
                    Dispatch: {{ return_request.return_identifier }}
                    &mdash; {{ return_request.from_location.display_name }}
                    &rarr; {{ return_request.to_location.display_name }}
                </div>
                <div class="panel-body">
                    <p>
                        Dispatched: <strong>{{ dispatched_count }}</strong> /
                        Expected: <strong>{{ return_request.item_count }}</strong>
                        {% if remaining_count > 0 %}
                            &mdash; <span class="text-warning">{{ remaining_count }} remaining</span>
                        {% else %}
                            &mdash; <span class="text-success">Complete</span>
                        {% endif %}
                    </p>

                    {# ── Update expected count (always visible) ── #}
                    <form class="form-inline" method="post" style="margin-bottom:12px;">
                        {% csrf_token %}
                        <input type="hidden" name="update_item_count" value="1">
                        <div class="form-group">
                            <label for="item_count_update" style="margin-right:6px;">Update expected count:</label>
                            <input type="number" class="form-control input-sm" id="item_count_update"
                                   name="item_count" min="{{ dispatched_count|default:1 }}" max="500"
                                   value="{{ return_request.item_count }}" style="width:80px;">
                        </div>
                        <button type="submit" class="btn btn-default btn-sm" style="margin-left:6px;">Update</button>
                    </form>

                    {% if remaining_count > 0 %}
                    <form class="form-horizontal" method="post"
                          onSubmit="document.getElementById('submit_dispatch').disabled=true;">
                        {% csrf_token %}
                        <div class="form-group">
                            {% for i in item_count %}
                                <label class="control-label col-sm-3" for="codes_{{ forloop.counter }}">
                                    {{ forloop.counter }}.
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="codes"
                                           id="codes_{{ forloop.counter }}"
                                           placeholder="stock code {{ forloop.counter }}"
                                           pattern="[A-Z0-9]{6}"
                                           {% if forloop.first %}autofocus{% endif %}>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="col-sm-12">
                            <button type="submit" class="btn btn-primary"
                                    id="submit_dispatch">Dispatch</button>
                            <a class="btn btn-default" style="margin-left:6px;"
                               href="{% url "edc_pharmacy:return_request_url" %}">Done</a>
                        </div>
                    </form>
                    {% else %}
                    <p class="text-success">All items dispatched.</p>
                    <a class="btn btn-default"
                       href="{% url "edc_pharmacy:return_request_url" %}">Done</a>
                    {% endif %}
                </div>
            </div>
            {% endif %}

        </div>
        <div class="col-sm-2"></div>
    </div>
{% endblock main %}