{% extends 'agent/_layout.html.twig' %}

{% block title %}Agent Withdrawal{% endblock %}

{% block agent_content %}

    <h1 class="mb-1" data-testid="agent-withdrawal-page-title">
        Withdrawal Request
    </h1>
    <p class="wfbo-card-desc mb-4">
        Request a withdrawal from your wallet balance.
    </p>

    {# Flash messages #}
    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">
            {{ flash }}
        </div>
    {% endfor %}

    {# ── Withdrawal hours notice ── #}
    {% if agent_withdrawal_today_label %}
        <div class="alert alert-warning mb-4" role="alert" data-testid="agent-withdrawal-hours-banner">
            <strong>Note:</strong> Withdrawal requests are accepted <strong>today</strong> from
            <strong>{{ agent_withdrawal_today_label }}</strong> only.
        </div>
    {% endif %}

    {# ── Wallet balance hint ── #}
    <div class="wallet-hint">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
        </svg>
        <p class="wallet-hint__text">
            Available balance:
            <strong data-testid="available-balance">₱{{ app.user.walletBalance|number_format(2) }}</strong>
        </p>
    </div>

    {# ── Withdrawal schedule status ── #}
    <div class="withdrawal-schedule-box" data-testid="allowed-days-info">
        <p class="withdrawal-schedule-box__title">
            Withdrawal Schedule
        </p>
        {% if not agent_withdrawal_configured %}
            <p class="withdrawal-schedule-box__body text-muted">
                Agent withdrawals are currently disabled. Please check back later.
            </p>
        {% elseif agent_withdrawal_today_label %}
            <p class="withdrawal-schedule-box__body">
                Withdrawal requests are accepted <strong>today</strong> from
                <strong>{{ agent_withdrawal_today_label }}</strong>.
            </p>
        {% else %}
            <p class="withdrawal-schedule-box__body">
                Withdrawal requests are accepted during scheduled hours only.
            </p>
        {% endif %}
    </div>

    {# ── WITHDRAWALS BLOCKED FOR THIS ACCOUNT ── #}
    {% if blocked %}
        <div class="card text-center" style="border: 1px solid #e5e7eb; padding: 40px 24px;"
             data-testid="withdrawal-blocked-card">
            <div class="unavailable-icon-circle">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
            </div>
            <p class="mb-2" style="font-size: 16px; font-weight: 700; color: #ffffff;" data-testid="withdrawal-blocked-title">
                Withdrawal requests are unavailable for your account
            </p>
            <p class="text-white mb-0" style="font-size: 14px;">
                Please contact support for assistance.
            </p>
        </div>

    {# ── NOT ALLOWED RIGHT NOW ── #}
    {% elseif not allowed %}
        <div class="card text-center" style="border: 1px solid #e5e7eb; padding: 40px 24px;"
             data-testid="withdrawal-unavailable-card">
            <div class="unavailable-icon-circle">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
            </div>
            <p class="mb-2" style="font-size: 16px; font-weight: 700; color: #ffffff;" data-testid="withdrawal-unavailable-title">
                Not available right now
            </p>
            <p class="text-white mb-0" style="font-size: 14px;">
                {% if agent_withdrawal_today_label %}
                    Requests are accepted today from <strong>{{ agent_withdrawal_today_label }}</strong>.
                {% else %}
                    Please try again during the scheduled withdrawal hours.
                {% endif %}
            </p>
        </div>

    {# ── ALLOWED TODAY ── #}
    {% else %}
        <div class="card card--white mb-5" style="border: 1px solid #e5e7eb; padding: 28px 24px;">
            <h2 class="wfbo-card-title mb-4">New Withdrawal Request</h2>

            {% if insufficientFunds is defined and insufficientFunds %}
                <div class="alert alert-danger mb-3" role="alert" data-testid="alert-insufficient-funds">
                    Insufficient wallet balance. Your current balance is ₱{{ app.user.walletBalance|number_format(2) }}.
                </div>
            {% endif %}

            {{ form_start(withdrawalForm, {attr: {
                'data-testid': 'agent-withdrawal-form',
                'novalidate': 'novalidate',
                'data-turbo': 'false'
            }}) }}

                {# Error summary #}
                {% if withdrawalForm.vars.submitted and not withdrawalForm.vars.valid %}
                    <div class="alert alert-danger mb-3" role="alert" data-testid="form-error-summary">
                        Please fix the errors below and try again.
                    </div>
                {% endif %}

                {# Amount #}
                <div class="mb-3">
                    {{ form_label(withdrawalForm.amount, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(withdrawalForm.amount) }}
                    {{ form_errors(withdrawalForm.amount) }}
                    <p class="form-hint">
                        Maximum: ₱{{ app.user.walletBalance|number_format(2) }}
                    </p>
                </div>

                {# Bank details #}
                <p class="form-section-title">
                    Bank / E-Wallet Details
                </p>

                <div class="mb-3">
                    {{ form_label(withdrawalForm.bankName, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(withdrawalForm.bankName) }}
                    {{ form_errors(withdrawalForm.bankName) }}
                </div>

                <div class="mb-3">
                    {{ form_label(withdrawalForm.bankAccountName, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(withdrawalForm.bankAccountName) }}
                    {{ form_errors(withdrawalForm.bankAccountName) }}
                </div>

                <div class="mb-3">
                    {{ form_label(withdrawalForm.bankAccountNumber, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(withdrawalForm.bankAccountNumber) }}
                    {{ form_errors(withdrawalForm.bankAccountNumber) }}
                </div>

                <div class="mb-4">
                    {{ form_label(withdrawalForm.notes, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(withdrawalForm.notes) }}
                </div>

                <button type="submit"
                        class="btn btn-form-submit"
                        data-testid="btn-agent-withdrawal-submit">
                    Submit Withdrawal Request
                </button>

            {{ form_end(withdrawalForm) }}
        </div>
    {% endif %}

    {# ── Withdrawal History ── #}
    {% if total > 0 or allowed %}
    <h2 class="mt-5 mb-3">History</h2>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-withdrawal-history-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Date</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Bank Details</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Review Note</th>
                    </tr>
                </thead>
                <tbody>
                    {% for withdrawal in withdrawals %}
                    <tr class="table-row" data-testid="agent-withdrawal-row-{{ withdrawal.id }}">
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ withdrawal.createdAt|date('M d, Y') }}
                        </td>
                        <td class="td-cell fw-semibold">
                            ₱{{ withdrawal.amount|number_format(2) }}
                        </td>
                        <td class="td-cell">
                            <p class="fw-semibold mb-0" style="font-size: 13px;">{{ withdrawal.bankName }}</p>
                            <p class="text-muted mb-0" style="font-size: 12px;">{{ withdrawal.bankAccountName }}</p>
                            <p class="font-mono-sm mb-0" style="color: #374151;">{{ withdrawal.bankAccountNumber }}</p>
                        </td>
                        <td class="td-cell">
                            {% if withdrawal.status == 'pending' %}
                                <span class="badge-status badge-status--pending" data-testid="badge-agent-withdrawal-{{ withdrawal.id }}">Pending</span>
                            {% elseif withdrawal.status == 'approved' %}
                                <span class="badge-status badge-status--approved" data-testid="badge-agent-withdrawal-{{ withdrawal.id }}">Approved</span>
                            {% else %}
                                <span class="badge-status badge-status--rejected" data-testid="badge-agent-withdrawal-{{ withdrawal.id }}">Rejected</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--muted">
                            {{ withdrawal.reviewNote ?? '—' }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty">
                            No withdrawal requests yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Pagination #}
    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="agent-withdrawal-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_agent_withdrawal', {page: currentPage - 1}) }}"
                   class="btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_agent_withdrawal', {page: currentPage + 1}) }}"
                   class="btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
    {% endif %}

{% endblock %}