{% extends 'accounts/base_account.html' %}

{% block account_content %}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Verification Status</h5>
            {% if verification.verification_status == 'verified' %}
                <span class="badge bg-success">
                    <i class="fas fa-check-circle me-1"></i> Verified
                </span>
            {% elif verification.verification_status == 'pending' %}
                <span class="badge bg-warning text-dark">
                    <i class="fas fa-clock me-1"></i> Under Review
                </span>
            {% else %}
                <span class="badge bg-secondary">
                    <i class="fas fa-times-circle me-1"></i> Not Verified
                </span>
            {% endif %}
        </div>
    </div>
    
    <div class="card-body">
        {% if verification.verification_status == 'verified' %}
            <div class="text-center py-4">
                <div class="mb-4">
                    <div class="bg-soft-success rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                        <i class="fas fa-check-circle fa-4x text-success"></i>
                    </div>
                </div>
                <h4 class="mb-3">Identity Verified</h4>
                <p class="text-muted mb-4">
                    Your identity has been successfully verified on {{ verification.verified_at|date:"F j, Y" }}.
                </p>
                <div class="verification-details bg-light p-4 rounded text-start mb-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Document Type</h6>
                            <p class="mb-0">{{ verification.get_id_type_display|default:"Not specified" }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Verified On</h6>
                            <p class="mb-0">{{ verification.verified_at|date:"F j, Y \a\t g:i A"|default:"N/A" }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-uppercase text-muted small mb-2">Verified By</h6>
                            <p class="mb-0">
                                {% if verification.verified_by %}
                                    {{ verification.verified_by.get_full_name|default:verification.verified_by.email }}
                                {% else %}
                                    System
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
                <a href="{% url 'accounts:dashboard' %}" class="btn btn-primary">
                    Back to Dashboard
                </a>
            </div>
            
        {% elif verification.verification_status == 'pending' %}
            <div class="text-center py-4">
                <div class="mb-4">
                    <div class="bg-soft-warning rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                        <i class="fas fa-clock fa-4x text-warning"></i>
                    </div>
                </div>
                <h4 class="mb-3">Verification in Progress</h4>
                <p class="text-muted mb-4">
                    We're currently reviewing your verification documents. This usually takes 1-2 business days.
                    You'll receive an email once your verification is complete.
                </p>
                
                <div class="verification-details bg-light p-4 rounded text-start mb-4">
                    <h6 class="text-uppercase text-muted small mb-3">Submission Details</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Document Type</h6>
                            <p class="mb-0">{{ verification.get_id_type_display|default:"Not specified" }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Submitted On</h6>
                            <p class="mb-0">{{ verification.updated_at|date:"F j, Y \a\t g:i A"|default:"N/A" }}</p>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-secondary">
                        Back to Dashboard
                    </a>
                    <a href="{% url 'accounts:verification_request' %}" class="btn btn-primary">
                        Update Documents
                    </a>
                </div>
            </div>
            
        {% elif verification.verification_status == 'rejected' %}
            <div class="text-center py-4">
                <div class="mb-4">
                    <div class="bg-soft-danger rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                        <i class="fas fa-times-circle fa-4x text-danger"></i>
                    </div>
                </div>
                <h4 class="mb-3">Verification Rejected</h4>
                <p class="text-muted mb-4">
                    We couldn't verify your identity with the provided documents.
                </p>
                
                {% if verification.rejection_reason %}
                <div class="alert alert-danger text-start">
                    <h6 class="alert-heading">Reason for Rejection:</h6>
                    <p class="mb-0">{{ verification.rejection_reason }}</p>
                </div>
                {% endif %}
                
                <div class="verification-details bg-light p-4 rounded text-start mb-4">
                    <h6 class="text-uppercase text-muted small mb-3">Submission Details</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Document Type</h6>
                            <p class="mb-0">{{ verification.get_id_type_display|default:"Not specified" }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <h6 class="text-uppercase text-muted small mb-2">Rejected On</h6>
                            <p class="mb-0">{{ verification.updated_at|date:"F j, Y \a\t g:i A"|default:"N/A" }}</p>
                        </div>
                    </div>
                </div>
                
                <a href="{% url 'accounts:verification_request' %}" class="btn btn-primary">
                    <i class="fas fa-redo me-1"></i> Try Again
                </a>
            </div>
            
        {% else %}
            <div class="text-center py-5">
                <div class="mb-4">
                    <div class="bg-soft-secondary rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                        <i class="fas fa-id-card fa-4x text-secondary"></i>
                    </div>
                </div>
                <h4 class="mb-3">Verify Your Identity</h4>
                <p class="text-muted mb-4">
                    Verify your identity to access all features and increase trust with other members.
                    This helps us keep our community safe.
                </p>
                
                <div class="row justify-content-center mb-4">
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body text-start">
                                <h5 class="mb-3">Why verify your identity?</h5>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Build trust with other community members
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Access all platform features
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Higher chance of booking acceptance
                                    </li>
                                    <li>
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Faster payout processing
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <a href="{% url 'accounts:verification_request' %}" class="btn btn-primary btn-lg">
                    <i class="fas fa-id-card me-2"></i> Start Verification
                </a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}