{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% set active_menu = 'invoice' %}

{% block meta_title %}Transaction {{ transaction.txn_id }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'invoice/transactions'|url }}">{{ 'Transactions'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">#{{transaction.id}}</li>
    </ol>
{% endblock %}

{% block content %}
{% embed 'partial_admin_detail_tabs.html.twig' with {
    title: transaction.txn_id|default('#' ~ transaction.id),
    subtitle: 'Review transaction details, correct payment metadata, and inspect the raw callback payload.'|trans
} %}
    {% block detail_tabs %}
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" href="#tab-index" data-bs-toggle="tab" role="tab">{{ 'Transaction'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-manage" data-bs-toggle="tab" role="tab">{{ 'Manage'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-note" data-bs-toggle="tab" role="tab">{{ 'Notes'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-ipn" data-bs-toggle="tab" role="tab">{{ 'IPN'|trans }}</a>
                    </li>
    {% endblock %}

    {% block detail_tab_content %}
        {% import 'macro_functions.html.twig' as mf %}
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
            <div class="card-body">
                {% embed 'partial_admin_summary_card.html.twig' with {
                    title: 'Transaction Details'|trans ~ ' #' ~ transaction.id,
                    subtitle: 'Review the stored payment record, gateway response details, and current processing status.'|trans,
                    centered_actions: true
                } %}
                    {% import 'macro_functions.html.twig' as mf %}
                    {% block summary_content %}
                        {% if transaction.error %}
                            <div class="px-3 pt-3">
                                <strong class="text-danger">{{ transaction.error_code }} - {{ transaction.error }}</strong>
                                <p class="mb-0">{{ 'If you are sure that this transaction is valid you can update transaction details in &quot;Manage&quot; tab and try processing transaction again'|trans }}</p>
                            </div>
                        {% endif %}

                        <table class="table card-table table-vcenter table-striped text-nowrap">
                            <tbody>
                                <tr>
                                    <td class="w-50 text-end">{{ 'ID'|trans }}</td>
                                    <td>{{ transaction.id }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Invoice ID'|trans }}</td>
                                    <td>
                                        <a href='{{ "invoice/manage/#{transaction.invoice_id}"|url }}'>{{ transaction.invoice_id|default('-') }}</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Amount'|trans }}</td>
                                    <td>{{ transaction.amount|format_currency(transaction.currency ?? default_currency) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Payment Gateway'|trans }}</td>
                                    <td>{{ transaction.gateway|default('-') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Transaction ID on Payment Gateway'|trans }}</td>
                                    <td>{{ transaction.txn_id|default('-') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Transaction Status on Payment Gateway'|trans }}</td>
                                    <td>
                                        {% if transaction.txn_status %}
                                            {{ mf.status_badge(transaction.txn_status, 'gateway_tx') }}
                                        {% else %}
                                            {{ mf.text_badge('-', 'text-bg-secondary') }}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'Status'|trans }}</td>
                                    <td>{{ mf.status_badge(transaction.status, 'transaction') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end">{{ 'IP'|trans }}</td>
                                    <td>
                                        {{ transaction.ip }}
                                        {% set ip_country_code = transaction.ip|ip_country_code %}
                                        {% set ip_country_name = transaction.ip|ip_country_name %}
                                        {% if ip_country_code %}
                                            <span class="flag flag-country-{{ ip_country_code }} ms-1" title="{{ ip_country_name|default('Unknown') }}"></span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if transaction.note %}
                                <tr>
                                    <td class="text-end">{{ 'Note'|trans }}</td>
                                    <td>
                                        <svg class="icon">
                                            <use xlink:href="#support" />
                                        </svg>
                                        <a href="#tab-note" data-bs-toggle="tab" role="button">{{ transaction.note }}</a>
                                    </td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <td class="text-end">{{ 'Received At'|trans }}</td>
                                    <td>{{ transaction.created_at|format_date }}</td>
                                </tr>
                                {% if transaction.created_at != transaction.updated_at %}
                                <tr>
                                    <td class="text-end">{{ 'Updated At'|trans }}</td>
                                    <td>{{ transaction.updated_at|format_date }}</td>
                                </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    {% endblock %}

                    {% block summary_actions %}
                        <a class="btn btn-primary" href="{{ 'invoice/transaction_process'|api_url(query: { 'id': transaction.id }) }}" {{ fb_api_link({reload: true}) }}>
                            <svg class="icon" width="24" height="24">
                                <use xlink:href="#refresh" />
                            </svg>
                            <span>{{ 'Process'|trans }}</span>
                        </a>
                        <a class="btn btn-danger" href="{{ 'invoice/transaction_delete'|api_url(query: { 'id': transaction.id }) }}"
                            {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'invoice/transactions'|url}) }}>
                            <svg class="icon" width="24" height="24">
                                <use xlink:href="#delete" />
                            </svg>
                            <span>{{ 'Delete'|trans }}</span>
                        </a>
                    {% endblock %}
                {% endembed %}
            </div>
        </div>

        <div class="tab-pane fade" id="tab-manage" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'invoice/transaction_update'|api_url }}" {{ fb_api_form({reload: true}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Transaction Payment Information'|trans,
                        subtitle: 'Correct the linked invoice and stored payment amount for this transaction.'|trans,
                        card_class: 'mb-4'
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-4">
                                    <label class="form-label" for="transaction_invoice_id">{{ 'Invoice ID'|trans }}</label>
                                    <input class="form-control" id="transaction_invoice_id" type="text" name="invoice_id" value="{{ transaction.invoice_id }}">
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label" for="transaction_amount">{{ 'Amount'|trans }}</label>
                                    <input class="form-control" id="transaction_amount" type="text" name="amount" value="{{ transaction.amount }}">
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label" for="transaction_currency">{{ 'Currency'|trans }}</label>
                                    <input class="form-control" id="transaction_currency" type="text" name="currency" value="{{ transaction.currency }}">
                                </div>
                            </div>
                        {% endblock %}
                    {% endembed %}
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Transaction Processing Information'|trans,
                        subtitle: 'Define how this transaction should be processed and validated.'|trans,
                        card_class: 'mb-4'
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-xl-6">
                                    <label class="form-label">{{ 'Payment Gateway'|trans }}</label>
                                    {{ mf.selectbox('gateway_id', admin.invoice_gateway_get_pairs, transaction.gateway_id, 0, 'Select Payment Gateway'|trans) }}
                                </div>
                                <div class="col-xl-6">
                                    <label class="form-label d-block">{{ 'Validate IPN'|trans }}</label>
                                    <div class="d-flex flex-wrap gap-3">
                                        <label class="form-check">
                                            <input class="form-check-input" id="radioValidateIpnYes" type="radio" name="validate_ipn" value="1"{% if transaction.validate_ipn  %} checked{% endif %}>
                                            <span class="form-check-label">{{ 'Yes'|trans }}</span>
                                        </label>
                                        <label class="form-check">
                                            <input class="form-check-input" id="radioValidateIpnNo" type="radio" name="validate_ipn" value="0"{% if not transaction.validate_ipn %} checked{% endif %}>
                                            <span class="form-check-label">{{ 'No'|trans }}</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        {% endblock %}
                    {% endembed %}
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Gateway Transaction Information'|trans,
                        subtitle: 'Keep the stored gateway-side transaction metadata accurate for reconciliation.'|trans,
                        card_class: 'mb-4'
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-4">
                                    <label class="form-label">{{ 'Transaction Type'|trans }}</label>
                                    {{ mf.selectbox('type', admin.invoice_transaction_types, transaction.type, 0, 'Select Transaction Type'|trans) }}
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label">{{ 'Transaction Status on Payment Gateway'|trans }}</label>
                                    {{ mf.selectbox('txn_status', admin.invoice_transaction_gateway_statuses, transaction.txn_status, 0, 'Select Status'|trans) }}
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label" for="transaction_txn_id">{{ 'Transaction ID on Payment Gateway'|trans }}</label>
                                    <input class="form-control" id="transaction_txn_id" type="text" name="txn_id" value="{{ transaction.txn_id }}">
                                </div>
                            </div>
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Update Transaction'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                    <input type="hidden" name="id" value="{{ transaction.id }}">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-note" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'invoice/transaction_update'|api_url }}" {{ fb_api_form({message: 'Transaction Note Updated'|trans}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Note About This Transaction'|trans,
                        subtitle: 'Keep internal notes about reconciliation, investigation, or gateway behavior.'|trans
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <label class="form-label" for="transaction_note">{{ 'Content'|trans }}</label>
                            <textarea class="form-control" id="transaction_note" name="note" rows="10">{{ transaction.note }}</textarea>
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Update Note'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                    <input type="hidden" name="id" value="{{ transaction.id }}">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-ipn" role="tabpanel">
            <div class="card-body">
                <div class="d-flex flex-column gap-3">
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'GET Parameters'|trans,
                        subtitle: 'Review GET values captured with the payment callback request.',
                        card_class: 'mb-0'
                    } %}
                        {% block form_content %}
                            {% if transaction.ipn.get %}
                            <div class="table-responsive">
                                <table class="table card-table table-vcenter table-striped text-nowrap">
                                    <tbody>
                                        {% for key, val in transaction.ipn.get %}
                                        <tr>
                                            <td class="w-25">{{ key }}</td>
                                            <td>{{ val }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <p class="text-muted mb-0">{{ 'No GET parameters received'|trans }}</p>
                            {% endif %}
                        {% endblock %}
                    {% endembed %}

                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'POST Parameters'|trans,
                        subtitle: 'Review POST values captured with the payment callback request.',
                        card_class: 'mb-0'
                    } %}
                        {% block form_content %}
                            {% if transaction.ipn.post %}
                            <div class="table-responsive">
                                <table class="table card-table table-vcenter table-striped text-nowrap">
                                    <tbody>
                                        {% for key, val in transaction.ipn.post %}
                                        <tr>
                                            <td class="w-25">{{ key }}</td>
                                            <td>{{ val }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <p class="text-muted mb-0">{{ 'No POST parameters received'|trans }}</p>
                            {% endif %}
                        {% endblock %}
                    {% endembed %}

                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Server Parameters'|trans,
                        subtitle: 'Inspect the server variables logged alongside the callback payload.',
                        card_class: 'mb-0'
                    } %}
                        {% block form_content %}
                            {% if transaction.ipn.server %}
                            <div class="table-responsive">
                                <table class="table card-table table-vcenter table-striped text-nowrap">
                                    <tbody>
                                        {% for key, val in transaction.ipn.server %}
                                        <tr>
                                            <td class="w-25">{{ key }}</td>
                                            <td>{{ val }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <p class="text-muted mb-0">{{ 'No SERVER parameters logged'|trans }}</p>
                            {% endif %}
                        {% endblock %}
                    {% endembed %}

                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Raw POST Payload'|trans,
                        subtitle: 'Review the raw request body received from the payment gateway.',
                        card_class: 'mb-0'
                    } %}
                        {% block form_content %}
                            {% if transaction.ipn.http_raw_post_data %}
                            <pre class="mb-0 text-wrap">{{ transaction.ipn.http_raw_post_data }}</pre>
                            {% else %}
                            <p class="text-muted mb-0">{{ 'No raw POST payload received'|trans }}</p>
                            {% endif %}
                        {% endblock %}
                    {% endembed %}
                </div>
            </div>
        </div>
    {% endblock %}
{% endembed %}
{% endblock %}
