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

{% block account_content %}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0">Verify Your Identity</h5>
    </div>
    <div class="card-body">
        {% if verification.verification_status == 'verified' %}
            <div class="text-center py-5">
                <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>
                <a href="{% url 'accounts:dashboard' %}" class="btn btn-primary">
                    Back to Dashboard
                </a>
            </div>
        {% elif verification.verification_status == 'pending' %}
            <div class="text-center py-5">
                <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="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_status' %}" class="btn btn-primary">
                        Check Status
                    </a>
                </div>
            </div>
        {% else %}
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Why verify your identity?</h6>
                        <p class="mb-0 small">
                            Verifying your identity helps build trust in our community. 
                            We use this information to confirm your identity and keep our platform secure.
                        </p>
                    </div>
                    
                    <form method="post" enctype="multipart/form-data" class="mt-4">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <h6 class="mb-3">1. Select ID Type</h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-check card p-3 border {% if form.id_type.value == 'national_id' %}border-primary{% else %}border-light{% endif %}">
                                        <input class="form-check-input" type="radio" name="id_type" id="id_type_national" value="national_id" 
                                               {% if form.id_type.value == 'national_id' %}checked{% endif %}>
                                        <label class="form-check-label d-block" for="id_type_national">
                                            <h6 class="mb-1">National ID</h6>
                                            <small class="text-muted">Government-issued national ID card</small>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check card p-3 border {% if form.id_type.value == 'passport' %}border-primary{% else %}border-light{% endif %}">
                                        <input class="form-check-input" type="radio" name="id_type" id="id_type_passport" value="passport"
                                               {% if form.id_type.value == 'passport' %}checked{% endif %}>
                                        <label class="form-check-label d-block" for="id_type_passport">
                                            <h6 class="mb-1">Passport</h6>
                                            <small class="text-muted">Valid passport from any country</small>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check card p-3 border {% if form.id_type.value == 'driving_license' %}border-primary{% else %}border-light{% endif %}">
                                        <input class="form-check-input" type="radio" name="id_type" id="id_type_license" value="driving_license"
                                               {% if form.id_type.value == 'driving_license' %}checked{% endif %}>
                                        <label class="form-check-label d-block" for="id_type_license">
                                            <h6 class="mb-1">Driving License</h6>
                                            <small class="text-muted">Valid driver's license</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            {% if form.id_type.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.id_type.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-4">
                            <h6 class="mb-3">2. Enter ID Information</h6>
                            <div class="mb-3">
                                <label for="{{ form.id_number.id_for_label }}" class="form-label">
                                    {{ form.id_number.label }}
                                </label>
                                {{ form.id_number }}
                                {% if form.id_number.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.id_number.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <h6 class="mb-3">3. Upload Photos</h6>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="card border-2 border-dashed h-100">
                                        <div class="card-body text-center p-4">
                                            <div class="mb-3">
                                                <i class="fas fa-id-card fa-3x text-muted"></i>
                                            </div>
                                            <h6>Front of ID</h6>
                                            <p class="small text-muted mb-3">
                                                Upload a clear photo of the front of your ID
                                            </p>
                                            <div class="d-grid">
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('id_id_document').click()">
                                                    <i class="fas fa-upload me-1"></i> Upload Front
                                                </button>
                                            </div>
                                            <input type="file" name="id_document" id="id_id_document" class="d-none" accept="image/*,.pdf">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-2 border-dashed h-100">
                                        <div class="card-body text-center p-4">
                                            <div class="mb-3">
                                                <i class="fas fa-id-card fa-3x text-muted"></i>
                                            </div>
                                            <h6>Back of ID</h6>
                                            <p class="small text-muted mb-3">
                                                Upload a clear photo of the back of your ID
                                            </p>
                                            <div class="d-grid">
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('id_id_document_back').click()">
                                                    <i class="fas fa-upload me-1"></i> Upload Back
                                                </button>
                                            </div>
                                            <input type="file" name="id_document_back" id="id_id_document_back" class="d-none" accept="image/*,.pdf">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% if form.id_document.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.id_document.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text mt-2">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    Accepted formats: JPG, PNG, or PDF (max 5MB). Make sure all text is clearly visible.
                                </small>
                            </div>
                        </div>
                        
                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" id="terms_agreement" required>
                            <label class="form-check-label small" for="terms_agreement">
                                I confirm that the information provided is accurate and belongs to me. 
                                I understand that {{ site_name }} may use third-party services to verify my identity.
                            </label>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{% url 'accounts:dashboard' %}" class="btn btn-outline-secondary me-md-2">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-1"></i> Submit for Review
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
// Preview uploaded images
function previewImage(input, previewId) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const preview = document.getElementById(previewId);
            if (preview) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                
                // Show the preview container if it exists
                const previewContainer = document.getElementById(previewId + '-container');
                if (previewContainer) {
                    previewContainer.style.display = 'block';
                }
            }
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

// Set up file input change events
document.getElementById('id_id_document').addEventListener('change', function() {
    previewImage(this, 'preview-front');
});

document.getElementById('id_id_document_back').addEventListener('change', function() {
    previewImage(this, 'preview-back');
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const idType = document.querySelector('input[name="id_type"]:checked');
    const idNumber = document.getElementById('id_id_number').value;
    const idDocument = document.getElementById('id_id_document').files[0];
    const termsAgreement = document.getElementById('terms_agreement').checked;
    
    if (!idType) {
        e.preventDefault();
        alert('Please select an ID type');
        return false;
    }
    
    if (!idNumber) {
        e.preventDefault();
        alert('Please enter your ID number');
        return false;
    }
    
    if (!idDocument) {
        e.preventDefault();
        alert('Please upload the front of your ID');
        return false;
    }
    
    if (!termsAgreement) {
        e.preventDefault();
        alert('You must agree to the terms');
        return false;
    }
    
    // Show loading state
    const submitButton = this.querySelector('button[type="submit"]');
    if (submitButton) {
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Submitting...';
    }
});
</script>
{% endblock %}