{% extends 'base.html' %}
{% load static %}
{% block title %}{{ t.title_picker_dashboard }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">{{ t.picker_dashboard_kicker }}</span>
                <h1>{{ t.picker_welcome_back }}{% if profile %}{% endif %}</h1>
                {% if profile %}
                <p style="color: var(--muted); font-size: 0.88rem; margin-top: 4px;">
                    <span class="source-type-tag">
                        {% if profile.source_type == 'warehouse' %}{{ t.picker_source_warehouse }}{% elif profile.source_type == 'shop' %}{{ t.picker_source_shop }}{% else %}{{ t.picker_source_market }}{% endif %}
                    </span>
                    &middot; {{ profile.market_location }}
                    {% if profile.regions_served %} &middot; {{ t.profile_regions_served }}: {{ profile.regions_served }}{% endif %}
                </p>
                {% endif %}
            </div>
            {% if availability_status %}
            <div class="availability-status-badge availability-{{ availability_status.reason }}">
                {% if availability_status.reason == 'delivering' %}{{ t.picker_status_delivering }}
                {% elif availability_status.reason == 'at_capacity' %}{{ t.picker_status_at_capacity }}
                {% else %}{{ t.picker_status_available }}{% endif %}
                <span class="availability-count">{{ availability_status.today_count }}/{{ availability_status.max_orders_per_day }} {{ t.picker_status_today }}</span>
            </div>
            {% endif %}
        </div>

        {% if not profile.is_approved %}
        <div class="approval-pending-banner">
            <strong>{{ t.picker_pending_approval_title }}</strong>
            <p>{{ t.picker_pending_approval_body }}</p>
        </div>
        {% endif %}

        {% if pending_count %}
        <p style="color: var(--muted); margin-bottom: 20px;">{{ pending_payment_note }}</p>
        {% endif %}

        <div class="picker-stats-grid">
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.picker_pending_earnings }}</span>
                <span class="spending-stat-value">TSh {{ earnings.pending_amount|floatformat:0 }}</span>
                <span style="font-size: 0.78rem; color: var(--muted);">{{ earnings.pending_count }} deliver{{ earnings.pending_count|pluralize:"y,ies" }} awaiting payout</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.picker_lifetime_earned }}</span>
                <span class="spending-stat-value">TSh {{ earnings.lifetime_amount|floatformat:0 }}</span>
                <span style="font-size: 0.78rem; color: var(--muted);">{{ commission_note }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.picker_deliveries_hours_places }}</span>
                <span class="spending-stat-value" style="font-size: 1.1rem;">{{ performance.deliveries }} &middot; {{ performance.hours }}h &middot; {{ performance.places }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.picker_rating_label }}</span>
                <span class="spending-stat-value">
                    {% if rating_summary.average %}&#9733; {{ rating_summary.average }}{% else %}{{ t.picker_no_ratings }}{% endif %}
                </span>
                {% if rating_summary.count %}<span style="font-size: 0.78rem; color: var(--muted);">from {{ rating_summary.count }} delivery{{ rating_summary.count|pluralize:"y,ies" }}</span>{% endif %}
            </div>
        </div>

        <div class="payout-terms-card">
            <div class="payout-terms-header">
                <h3>{{ t.picker_payout_terms_title }}</h3>
                <button type="button" class="btn-small payout-terms-edit-btn" id="payout-edit-btn" style="background: var(--muted);">{{ t.picker_payout_edit }}</button>
            </div>

            <div id="payout-terms-view">
                <label>{{ t.picker_get_paid_out }}</label>
                <p class="payout-terms-current">{% if profile.payout_frequency == 'daily' %}{{ t.picker_daily }}{% else %}{{ t.picker_weekly }}{% endif %}</p>
            </div>

            <form method="post" action="{% url 'accounts:picker_set_payout_frequency' %}" class="payout-frequency-form" id="payout-terms-form" style="display: none;">
                {% csrf_token %}
                <label for="payout_frequency">{{ t.picker_get_paid_out }}</label>
                <select id="payout_frequency" name="payout_frequency">
                    <option value="daily" {% if profile.payout_frequency == 'daily' %}selected{% endif %}>{{ t.picker_daily }}</option>
                    <option value="weekly" {% if profile.payout_frequency == 'weekly' %}selected{% endif %}>{{ t.picker_weekly }}</option>
                </select>
                <div style="display: flex; gap: 8px; margin-top: 10px;">
                    <button type="submit" class="btn-small" style="background: var(--blue);">{{ t.picker_payout_save }}</button>
                    <button type="button" class="btn-small" id="payout-cancel-btn" style="background: var(--muted);">{{ t.picker_payout_cancel }}</button>
                </div>
            </form>

            <h4 style="margin-top: 18px; margin-bottom: 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);">{{ t.picker_payout_schedule_title }}</h4>
            <p style="font-size: 0.88rem; color: var(--muted);">
                {% if profile.payout_frequency == 'daily' %}{{ t.picker_payout_schedule_daily }}{% else %}{{ t.picker_payout_schedule_weekly }}{% endif %}
            </p>

            {% if earnings_history %}
            <h4 style="margin-top: 18px; margin-bottom: 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);">{{ t.picker_earnings_history_title }}</h4>
            <div class="admin-table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>{{ t.picker_earnings_col_order }}</th>
                            <th>{{ t.picker_earnings_col_gross }}</th>
                            <th>{{ t.picker_earnings_col_commission }}</th>
                            <th>{{ t.picker_earnings_col_net }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for e in earnings_history %}
                        <tr>
                            <td>{{ t.order_hash_prefix }}{{ e.order_id }}</td>
                            <td>{% if e.gross_amount %}TSh {{ e.gross_amount|floatformat:0 }}{% else %}—{% endif %}</td>
                            <td>{% if e.commission_amount %}TSh {{ e.commission_amount|floatformat:0 }} ({{ e.commission_pct|floatformat:1 }}%){% else %}TSh 0{% endif %}</td>
                            <td>TSh {{ e.amount|floatformat:0 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var editBtn = document.getElementById('payout-edit-btn');
                var cancelBtn = document.getElementById('payout-cancel-btn');
                var viewBox = document.getElementById('payout-terms-view');
                var formBox = document.getElementById('payout-terms-form');
                if (editBtn) {
                    editBtn.addEventListener('click', function () {
                        viewBox.style.display = 'none';
                        formBox.style.display = 'block';
                        editBtn.style.display = 'none';
                    });
                }
                if (cancelBtn) {
                    cancelBtn.addEventListener('click', function () {
                        viewBox.style.display = 'block';
                        formBox.style.display = 'none';
                        editBtn.style.display = 'inline-block';
                    });
                }
            });
        </script>

        {% if profile.picker_segment == 'b2b' %}
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px;">
            <h3 style="margin: 0;">{{ t.fleet_tools_title }}</h3>
            <div style="display: flex; gap: 8px;">
                <a href="{% url 'accounts:picker_log_fuel_stop' %}" class="btn-small">{{ t.fuel_log_link }}</a>
                <a href="{% url 'accounts:picker_signoff_forms' %}" class="btn-small" style="background: var(--muted);">{{ t.signoff_forms_link }}</a>
            </div>
        </div>
        {% endif %}

        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;">
            <h3 style="margin: 0;">{{ t.picker_active_deliveries }}</h3>
            <div style="display: flex; gap: 8px;">
                <a href="{% url 'accounts:picker_delivery_route' %}" class="btn-small">{{ t.picker_view_my_route }}</a>
                <a href="{% url 'accounts:picker_picking_guide' %}" class="btn-small" style="background: var(--muted);">{{ t.picker_guide_link }}</a>
            </div>
        </div>
        {% if active_orders %}
        {% for order in active_orders %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                <div>
                    <strong><a href="{% url 'accounts:picker_order_detail' order.id %}">{{ t.order_hash_prefix }}{{ order.id }}</a></strong>
                    <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
                    {% if order.is_quick %}<span class="surface-badge warn">{{ t.badge_quick_delivery }}</span>{% endif %}
                    <p style="color: var(--muted); font-size: 0.88rem; margin-top: 6px;">
                        {{ order.delivery_date }} &middot; {{ order.delivery_time_slot }} &middot; {{ order.distance_km }} km &middot;
                        TSh {{ order.delivery_fee|floatformat:0 }} {{ t.order_fee_delivery }} + TSh {{ order.picking_fee|floatformat:0 }} {{ t.order_fee_picking }}{% if order.package_fee > 0 %} + TSh {{ order.package_fee|floatformat:0 }} {{ t.order_fee_package }}{% endif %}
                    </p>
                    <p style="font-size: 0.9rem; margin-top: 4px;">{{ t.picker_deliver_to }} {{ order.delivery_address }}</p>
                </div>
                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-end;">
                    {% if order.next_action_label %}
                    <form method="post" action="{% url 'accounts:advance_order' order.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-cta">{{ order.next_action_label }}</button>
                    </form>
                    {% endif %}
                    <a href="{% url 'accounts:picker_order_detail' order.id %}" class="btn-small" style="background: var(--muted);">{{ t.picker_message_customer }}</a>
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <p style="color: var(--muted);">{{ t.picker_no_active_deliveries }}</p>
        {% endif %}

        {% if history_orders %}
        <h3 style="margin: 30px 0 12px;">{{ t.picker_recently_delivered }}</h3>
        {% for order in history_orders %}
        <div class="order-card">
            <strong>{{ t.order_hash_prefix }}{{ order.id }}</strong>
            <span class="status-badge status-delivered">{{ t.tracker_delivered }}</span>
            <p style="color: var(--muted); font-size: 0.88rem;">{{ order.delivery_date }} &middot; TSh {{ order.total_amount|floatformat:0 }}</p>
        </div>
        {% endfor %}
        {% endif %}
    </div>
</section>
{% endblock %}