{% extends "admin/change_form.html" %}
{% load static %}

{% block extrahead %}
{{ block.super }}
<style>
.document-previews {
    border: 1px solid #ddd;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.doc-preview {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.doc-preview:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.doc-preview h6 {
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
}

.doc-preview img {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.requirement-status {
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    border-left: 4px solid #007cba;
}

.requirement-status.met {
    border-left-color: #46b450;
    background: #f7fcf8;
}

.requirement-status.not-met {
    border-left-color: #dc3232;
    background: #fcf0f1;
}

.quick-actions {
    margin: 15px 0;
    padding: 15px;
    background: #f0f8ff;
    border-radius: 5px;
    border: 1px solid #007cba;
}

.btn-group .btn {
    margin-right: 5px;
}
</style>
{% endblock %}

{% block after_field_sets %}
{{ block.super }}

{% if show_details and merchant %}
<div class="module aligned">
    <h2>📊 Application Review Details</h2>
    
    <!-- Referral Requirements Status -->
    <div class="form-row field-requirements">
        <div class="requirement-status {% if meets_requirements %}met{% else %}not-met{% endif %}">
            <h3>Referral Requirements Status</h3>
            <p><strong>Direct Referrals (Level 1):</strong> {{ direct_count }}/5 required</p>
            <p><strong>Indirect Referrals (Level 2):</strong> {{ level2_count }}/25 required</p>
            <p><strong>Status:</strong> 
                <span style="color: {% if meets_requirements %}#46b450{% else %}#dc3232{% endif %}; font-weight: bold;">
                    {% if meets_requirements %}✅ Requirements MET{% else %}❌ Requirements NOT MET{% endif %}
                </span>
            </p>
        </div>
    </div>

    <!-- Business Information Summary -->
    <div class="form-row field-business-summary">
        <div class="quick-actions">
            <h3>Business Information Summary</h3>
            <p><strong>Business Name:</strong> {{ merchant.business_name }}</p>
            <p><strong>Merchant Type:</strong> {{ merchant.get_merchant_type_display }}</p>
            <p><strong>Business Address:</strong> {{ merchant.business_address }}</p>
            <p><strong>BEP20 Wallet:</strong> <code>{{ merchant.wallet_address }}</code></p>
            <p><strong>Applicant:</strong> {{ merchant.user.username }} ({{ merchant.user.email }})</p>
            <p><strong>Registration Fee Paid:</strong> 
                <span style="color: {% if merchant.registration_fee_paid %}#46b450{% else %}#dc3232{% endif %};">
                    {{ merchant.registration_fee_paid|yesno:"Yes,No" }}
                </span>
            </p>
        </div>
    </div>

    <!-- Quick Action Buttons for Pending Applications -->
    {% if merchant.status == 'PENDING' %}
    <div class="form-row field-quick-actions">
        <div class="quick-actions">
            <h3>Quick Actions</h3>
            <div class="btn-group">
                <a href="{% url 'admin:merchant-approve' merchant.id %}" class="button" style="background: #46b450; color: white; padding: 10px 15px; text-decoration: none; border-radius: 4px; margin-right: 10px;">
                    ✅ Approve Application
                </a>
                <a href="{% url 'admin:merchant-reject' merchant.id %}" class="button" style="background: #dc3232; color: white; padding: 10px 15px; text-decoration: none; border-radius: 4px;">
                    ❌ Reject Application
                </a>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}