{% extends "base.html" %}

{% block title %}Verify - MSVERIFY{% endblock %}

{% block extra_css %}
<style>
.verify-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    color: white;
}

@media (max-width: 768px) {
    .verify-header {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }
    
    .service-card-modern {
        margin-bottom: 1rem;
    }
    
    .service-icon-large {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .verify-header {
        padding: 1.5rem 1rem;
    }
    
    .verify-header h1 {
        font-size: 1.5rem;
    }
    
    .service-card-modern {
        padding: 1.5rem;
    }
}

.service-card-modern {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
}

.service-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: var(--primary-color);
}

.service-card-modern.beta {
    border-color: #fbbf24;
}

.service-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.price-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1e293b;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.verify-btn-modern {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.info-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid #06B6D4;
}
</style>
{% endblock %}

{% block content %}
<!-- Verify Header -->
<div class="verify-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="display-6 fw-bold mb-2">
                    <i class="bi bi-patch-check-fill"></i> Verification Services
                </h1>
                <p class="lead mb-0" style="opacity: 0.9;">Choose your platform and start verification instantly</p>
            </div>
            <div class="col-lg-4 text-end">
                <div class="d-inline-block bg-white bg-opacity-20 rounded-4 p-3">
                    <div class="text-warning fw-bold mb-1" style="font-size: 0.9rem;">YOUR BALANCE</div>
                    <h2 class="fw-bold mb-0 user-balance">{{ user.balance }} <small style="font-size: 1rem;">points</small></h2>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-4">

    <!-- Verification Services -->
    <div class="row g-4 mb-4">
        <!-- Gemini One Pro -->
        <div class="col-lg-6">
            <div class="service-card-modern position-relative">
                <div class="price-tag">
                    <i class="bi bi-coin"></i> 1 Point
                </div>
                <div class="service-icon-large text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="bi bi-star-fill"></i>
                </div>
                <h4 class="fw-bold mb-2">Gemini One Pro</h4>
                <p class="text-muted mb-3">Teacher verification for Google AI Studio Education Discount</p>
                <span class="badge bg-success mb-3">
                    <i class="bi bi-check-circle-fill"></i> Active
                </span>
                
                <div class="mb-3">
                    <label class="form-label fw-semibold">SheerID Verification URL</label>
                    <input type="url" class="form-control" id="gemini-url" placeholder="https://services.sheerid.com/verify/...">
                    <small class="text-muted">Paste your SheerID URL here</small>
                </div>
                
                <button class="verify-btn-modern btn btn-primary" onclick="submitVerification('gemini')">
                    <i class="bi bi-rocket-takeoff"></i> Start Verification
                </button>
            </div>
        </div>

        <!-- ChatGPT K12 -->
        <div class="col-lg-6">
            <div class="service-card-modern position-relative">
                <div class="price-tag">
                    <i class="bi bi-coin"></i> 1 Point
                </div>
                <div class="service-icon-large text-white" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="bi bi-chat-dots-fill"></i>
                </div>
                <h4 class="fw-bold mb-2">ChatGPT K12</h4>
                <p class="text-muted mb-3">Teacher verification for OpenAI ChatGPT Education Discount</p>
                <span class="badge bg-success mb-3">
                    <i class="bi bi-check-circle-fill"></i> Active
                </span>
                
                <div class="mb-3">
                    <label class="form-label fw-semibold">SheerID Verification URL</label>
                    <input type="url" class="form-control" id="chatgpt-url" placeholder="https://services.sheerid.com/verify/...">
                    <small class="text-muted">Paste your SheerID URL here</small>
                </div>
                
                <button class="verify-btn-modern btn btn-primary" onclick="submitVerification('chatgpt')">
                    <i class="bi bi-rocket-takeoff"></i> Start Verification
                </button>
            </div>
        </div>

        <!-- Spotify Student -->
        <div class="col-lg-6">
            <div class="service-card-modern position-relative">
                <div class="price-tag">
                    <i class="bi bi-coin"></i> 1 Point
                </div>
                <div class="service-icon-large text-white" style="background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);">
                    <i class="bi bi-music-note-beamed"></i>
                </div>
                <h4 class="fw-bold mb-2">Spotify Student</h4>
                <p class="text-muted mb-3">Student verification for Spotify Premium Student Discount</p>
                <span class="badge bg-success mb-3">
                    <i class="bi bi-check-circle-fill"></i> Active
                </span>
                
                <div class="mb-3">
                    <label class="form-label fw-semibold">SheerID Verification URL</label>
                    <input type="url" class="form-control" id="spotify-url" placeholder="https://services.sheerid.com/verify/...">
                    <small class="text-muted">Paste your SheerID URL here</small>
                </div>
                
                <button class="verify-btn-modern btn btn-primary" onclick="submitVerification('spotify')">
                    <i class="bi bi-rocket-takeoff"></i> Start Verification
                </button>
            </div>
        </div>

        <!-- Bolt.new -->
        <div class="col-lg-6">
            <div class="service-card-modern position-relative">
                <div class="price-tag">
                    <i class="bi bi-coin"></i> 1 Point
                </div>
                <div class="service-icon-large text-white" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="bi bi-lightning-charge-fill"></i>
                </div>
                <h4 class="fw-bold mb-2">Bolt.new Teacher</h4>
                <p class="text-muted mb-3">Teacher verification with auto code retrieval</p>
                <span class="badge bg-success mb-3">
                    <i class="bi bi-check-circle-fill"></i> Active
                </span>
                <span class="badge bg-info mb-3">
                    <i class="bi bi-magic"></i> Auto Code
                </span>
                
                <div class="mb-3">
                    <label class="form-label fw-semibold">SheerID Verification URL</label>
                    <input type="url" class="form-control" id="bolt-url" placeholder="https://services.sheerid.com/verify/...">
                    <small class="text-muted">Auto-retrieves verification code</small>
                </div>
                
                <button class="verify-btn-modern btn btn-primary" onclick="submitVerification('bolt')">
                    <i class="bi bi-rocket-takeoff"></i> Start Verification
                </button>
            </div>
        </div>

        <!-- YouTube Premium -->
        <div class="col-lg-6">
            <div class="service-card-modern beta position-relative">
                <div class="price-tag" style="background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);">
                    <i class="bi bi-coin"></i> 1 Point
                </div>
                <div class="service-icon-large text-white" style="background: linear-gradient(135deg, #FF0000 0%, #cc0000 100%);">
                    <i class="bi bi-youtube"></i>
                </div>
                <h4 class="fw-bold mb-2">YouTube Premium</h4>
                <p class="text-muted mb-3">Student verification for YouTube Premium Student</p>
                <span class="badge bg-warning text-dark mb-3">
                    <i class="bi bi-exclamation-triangle-fill"></i> Beta
                </span>
                
                <div class="alert alert-warning mb-3 small">
                    <i class="bi bi-info-circle-fill"></i> Beta status - success rate may vary
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-semibold">SheerID Verification URL</label>
                    <input type="url" class="form-control" id="youtube-url" placeholder="https://services.sheerid.com/verify/...">
                    <small class="text-muted">Paste your SheerID URL here</small>
                </div>
                
                <button class="verify-btn-modern btn btn-warning text-dark" onclick="submitVerification('youtube')">
                    <i class="bi bi-rocket-takeoff"></i> Start Verification
                </button>
            </div>
        </div>
    </div>
    
    <!-- Help Section -->
    <div class="row">
        <div class="col-12">
            <div class="info-card">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <h5 class="fw-bold mb-3">
                            <i class="bi bi-question-circle-fill text-info"></i> How to Get SheerID URL?
                        </h5>
                        <ol class="mb-0">
                            <li class="mb-2">Visit the service's student/teacher discount page</li>
                            <li class="mb-2">Start the verification process</li>
                            <li class="mb-2">When redirected to SheerID, copy the URL from your browser</li>
                            <li class="mb-2">URL should contain <code class="bg-white px-2 py-1 rounded">services.sheerid.com/verify/</code></li>
                            <li>Paste the URL above and click "Start Verification"</li>
                        </ol>
                    </div>
                    <div class="col-lg-4 text-center">
                        <div class="mb-3">
                            <i class="bi bi-book-fill" style="font-size: 4rem; color: #06B6D4;"></i>
                        </div>
                        <a href="/how-to-use" class="btn btn-info text-white btn-lg">
                            <i class="bi bi-arrow-right-circle"></i> Detailed Guide
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function getBoltnewCode() {
    const url = $('#boltnewUrl').val();
    if (!url) {
        showToast('Please enter Bolt.new SheerID URL first', 'warning');
        return;
    }
    
    showLoading();
    
    $.ajax({
        url: '/api/verify/boltnew/code',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ url: url }),
        success: function(response) {
            hideLoading();
            if (response.success) {
                showToast('Verification code: ' + response.code, 'success');
                copyToClipboard(response.code);
            }
        },
        error: function(xhr) {
            hideLoading();
            const response = xhr.responseJSON || {};
            showToast(response.message || 'Failed to get code', 'danger');
        }
    });
}

$(document).ready(function() {
    loadUserBalance();
});
</script>
{% endblock %}