{% extends "base_layout.html" %}

{% block title %}EPOLaw - Legal Analysis{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <!-- Empty div to maintain layout -->
                </div>
                <div>
                    <a href="{{ url_for('dashboard') }}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-tachometer-alt me-1"></i>Dashboard
                    </a>
                    {% if case %}
                    <a href="{{ url_for('cases.view_case', case_id=case.id) }}" class="btn btn-outline-info">
                        <i class="fas fa-folder-open me-1"></i>Back to Case
                    </a>
                    {% endif %}
                </div>
            </div>

            <!-- Case Context (if applicable) -->
            {% if case %}
            <div class="alert alert-info mb-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-folder-open me-2"></i>
                    <div>
                        <strong>Case Context:</strong> {{ case.case_name }} ({{ case.case_number }})
                        {% if case.client_name %}
                        <br><small>Client: {{ case.client_name }}</small>
                        {% endif %}
                        {% if document %}
                        <br><small>Document: {{ document.original_filename }}</small>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Usage Counter for Free and Pro Users -->
            {% if user_plan == 'free' %}
            <div class="alert alert-info mb-3 d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-chart-bar me-2"></i>
                    <strong>Monthly Usage:</strong>
                    {% set used = 5 - analyses_remaining %}
                    <span class="badge {% if analyses_remaining > 2 %}bg-success{% elif analyses_remaining > 0 %}bg-warning{% else %}bg-danger{% endif %} ms-2">
                        {{ used }}/5 analyses used
                    </span>
                    {% if analyses_remaining > 0 %}
                        <span class="ms-2 text-muted">({{ analyses_remaining }} remaining)</span>
                    {% else %}
                        <span class="ms-2 text-danger">Limit reached</span>
                    {% endif %}
                </div>
                {% if analyses_remaining == 0 %}
                <div>
                    <a href="{{ url_for('subscription.view_plans') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-crown me-1"></i>Upgrade to Pro
                    </a>
                </div>
                {% endif %}
            </div>
            {% elif user_plan == 'pro' %}
            <div class="alert alert-info mb-3 d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-chart-bar me-2"></i>
                    <strong>Monthly Usage:</strong>
                    {% set used = 75 - analyses_remaining %}
                    <span class="badge {% if analyses_remaining > 30 %}bg-success{% elif analyses_remaining > 10 %}bg-warning{% else %}bg-danger{% endif %} ms-2">
                        {{ used }}/75 analyses used
                    </span>
                    {% if analyses_remaining > 0 %}
                        <span class="ms-2 text-muted">({{ analyses_remaining }} remaining)</span>
                    {% else %}
                        <span class="ms-2 text-danger">Limit reached</span>
                    {% endif %}
                </div>
                {% if analyses_remaining == 0 %}
                <div>
                    <a href="{{ url_for('subscription.view_plans') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-rocket me-1"></i>Upgrade to Enterprise
                    </a>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Main Form Card -->
            <div class="card shadow-sm">
                <!-- Card Header with Title and Analyze Button -->
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                    <div>
                        <h2 class="text-primary mb-1">
                            <i class="fas fa-gavel me-2"></i>
                            Legal Document & Image Analysis
                        </h2>
                        {% if document %}
                        <p class="text-muted mb-0">Analyze existing case document with legal perspective</p>
                        <small class="text-success">✓ Document ready for analysis</small>
                        {% else %}
                        <p class="text-muted mb-0">Upload documents or images for comprehensive legal analysis</p>
                        <small class="text-muted">Supports PDF, Word docs, images, and text files with OCR processing</small>
                        {% endif %}
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary btn-lg" id="topAnalyzeBtn" 
                                {% if not document %}disabled{% endif %}>
                            <i class="fas fa-cogs me-2"></i>
                            {% if document %}Analyze Document{% else %}Analyze{% endif %}
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <!-- Hidden fields for case context -->
                        {% if case %}
                        <input type="hidden" name="case_id" value="{{ case.id }}">
                        {% endif %}
                        {% if document %}
                        <input type="hidden" name="document_id" value="{{ document.id }}">
                        {% endif %}

                        <!-- File Upload Section -->
                        <div class="mb-4">
                            <h5 class="mb-3"><i class="fas fa-cloud-upload-alt me-2"></i>Select Document</h5>

                            {% if document %}
                            <!-- Existing Document Selected -->
                            <div class="alert alert-success border-0" style="background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);">
                                <div class="d-flex align-items-center">
                                    {% set file_ext = document.original_filename.split('.')[-1].lower() if '.' in document.original_filename else 'file' %}
                                    {% if file_ext == 'pdf' %}
                                    <i class="fas fa-file-pdf fa-3x me-3 text-danger"></i>
                                    {% elif file_ext in ['doc', 'docx'] %}
                                    <i class="fas fa-file-word fa-3x me-3 text-primary"></i>
                                    {% elif file_ext == 'txt' %}
                                    <i class="fas fa-file-alt fa-3x me-3 text-secondary"></i>
                                    {% elif file_ext in ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'bmp'] %}
                                    <i class="fas fa-file-image fa-3x me-3 text-info"></i>
                                    {% else %}
                                    <i class="fas fa-file fa-3x me-3 text-muted"></i>
                                    {% endif %}
                                    <div>
                                        <h6 class="mb-1">📄 Document Ready for Analysis</h6>
                                        <p class="mb-1"><strong>{{ document.original_filename }}</strong></p>
                                        {% if document.document_type %}
                                        <small class="badge bg-light text-dark me-2">{{ document.document_type.replace('_', ' ').title() }}</small>
                                        {% endif %}
                                        <small class="text-muted d-block">Select your analysis perspective below and click "Analyze"</small>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <!-- File Upload Zone -->
                            <div class="border border-dashed border-2 rounded p-4 text-center upload-zone" id="uploadZone">
                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted mb-2">Drag & Drop Your Document</h5>
                                <p class="text-muted mb-0">or click to browse</p>
                                <input type="file" class="form-control d-none" id="file" name="file" 
                                       accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.tif,.tiff,.bmp" required>
                            </div>

                            <!-- Upload Tips - Always Visible -->
                            <div class="upload-hint mt-3">
                                <h6 class="text-muted mb-2">✓ Upload Tips:</h6>
                                <div class="hint-item"><i class="fas fa-file-pdf text-danger"></i>PDFs work best for text extraction</div>
                                <div class="hint-item"><i class="fas fa-image text-info"></i>Images will be processed with OCR</div>
                                <div class="hint-item"><i class="fas fa-shield-alt text-success"></i>All files are encrypted and secure</div>
                            </div>

                            <!-- File Info Display -->
                            <div class="mt-3 d-none" id="fileInfo">
                                <div class="alert alert-info mb-2">
                                    <i class="fas fa-file me-2"></i>
                                    <strong>Selected file:</strong> <span id="fileName"></span>
                                </div>
                            </div>

                            <!-- File Type Detection -->
                            <div class="mt-3 d-none" id="fileTypeSection">
                                <div class="alert" id="fileTypeAlert">
                                    <span id="fileTypeText"></span>
                                </div>
                            </div>

                            <!-- Supported formats info -->
                            <small class="text-muted">
                                Supported formats: PDF, TXT, JPG, PNG, TIFF, BMP • Max size: 50MB
                            </small>
                            {% endif %}
                        </div>

                        <!-- Practice Area Selection -->
                        <div class="mb-4">
                            <h5 class="mb-3"><i class="fas fa-balance-scale me-2"></i>Practice Area</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Select Practice Area</label>
                                    <select class="form-select" id="practice_area" name="practice_area">
                                        <option value="general" selected>General Legal Analysis</option>
                                        <option value="business">Business Law</option>
                                        <option value="family">Family Law</option>
                                        <option value="criminal">Criminal Law</option>
                                        <option value="civil">Civil Litigation</option>
                                    </select>
                                    <small class="text-muted">Selecting a specific practice area provides specialized analysis</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Analysis Type</label>
                                    <select class="form-select" id="analysis_type" name="analysis_type">
                                        <option value="general_analysis">General Analysis</option>
                                    </select>
                                    <small class="text-muted">Specific analysis types based on practice area</small>
                                </div>
                            </div>
                        </div>

                        <!-- Analysis Options - MATCHING SUMMARY LAYOUT -->
                        <div class="mb-4">
                            <h5 class="mb-4"><i class="fas fa-cogs me-2"></i>Analysis Perspective</h5>
                            <p class="text-muted mb-3">Choose the legal perspective for analysis</p>

                            <div class="row">
                                <div class="col-md-6">
                                    <!-- Analysis Perspective -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Legal Perspective</label>
                                        <div class="row g-2">
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="perspective" id="prosecutor" value="prosecutor">
                                                <label class="btn btn-outline-danger w-100 text-start" for="prosecutor">
                                                    <i class="fas fa-gavel me-2"></i>
                                                    <strong>Prosecutor</strong>
                                                    <br><small class="text-muted">Focus on evidence supporting charges</small>
                                                </label>
                                            </div>
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="perspective" id="defense" value="defense">
                                                <label class="btn btn-outline-success w-100 text-start" for="defense">
                                                    <i class="fas fa-shield-alt me-2"></i>
                                                    <strong>Defense</strong>
                                                    <br><small class="text-muted">Identify defensive strategies</small>
                                                </label>
                                            </div>
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="perspective" id="neutral" value="neutral" checked>
                                                <label class="btn btn-outline-secondary w-100 text-start" for="neutral">
                                                    <i class="fas fa-balance-scale me-2"></i>
                                                    <strong>Neutral</strong>
                                                    <br><small class="text-muted">Objective legal analysis</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <!-- Analysis Focus (Optional additional options) -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Analysis Focus</label>
                                        <div class="row g-2">
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="analysis_focus" id="comprehensive" value="comprehensive" checked>
                                                <label class="btn btn-outline-primary w-100 text-start" for="comprehensive">
                                                    <i class="fas fa-search me-2"></i>
                                                    <strong>Comprehensive</strong>
                                                    <br><small class="text-muted">Full document analysis</small>
                                                </label>
                                            </div>
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="analysis_focus" id="key_issues" value="key_issues">
                                                <label class="btn btn-outline-primary w-100 text-start" for="key_issues">
                                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                                    <strong>Key Issues</strong>
                                                    <br><small class="text-muted">Focus on critical legal issues</small>
                                                </label>
                                            </div>
                                            <div class="col-12">
                                                <input type="radio" class="btn-check" name="analysis_focus" id="evidence" value="evidence">
                                                <label class="btn btn-outline-primary w-100 text-start" for="evidence">
                                                    <i class="fas fa-fingerprint me-2"></i>
                                                    <strong>Evidence Review</strong>
                                                    <br><small class="text-muted">Evidence-focused analysis</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Instructions -->
                        <div class="mb-4">
                            <label for="additional_instructions" class="form-label fw-bold">
                                <i class="fas fa-edit me-2"></i>Additional Instructions (Optional)
                            </label>
                            <textarea class="form-control"
                                      id="additional_instructions"
                                      name="additional_instructions"
                                      rows="3"
                                      placeholder="Any specific areas of focus or questions you'd like addressed..."></textarea>
                            <small class="text-muted">
                                Example: "Focus on contract liability," "Analyze evidence chain of custody," or "Review for constitutional violations"
                            </small>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                                <i class="fas fa-cogs me-2"></i>
                                {% if document %}Analyze Document{% else %}Start Analysis{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Initializing analysis form...');

    const fileInput = document.getElementById('file');
    const uploadZone = document.getElementById('uploadZone');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileTypeSection = document.getElementById('fileTypeSection');
    const fileTypeAlert = document.getElementById('fileTypeAlert');
    const fileTypeText = document.getElementById('fileTypeText');
    const uploadForm = document.getElementById('uploadForm');
    const submitBtn = document.getElementById('submitBtn');
    const topAnalyzeBtn = document.getElementById('topAnalyzeBtn');
    const practiceAreaSelect = document.getElementById('practice_area');
    const analysisTypeSelect = document.getElementById('analysis_type');

    // Practice area analysis types mapping
    const analysisTypes = {
        'general': [
            {value: 'general_analysis', text: 'General Analysis'},
            {value: 'comprehensive', text: 'Comprehensive Review'},
            {value: 'issue_spotting', text: 'Issue Spotting'}
        ],
        'business': [
            {value: 'contract_review', text: 'Contract Review'},
            {value: 'merger_acquisition', text: 'M&A Analysis'},
            {value: 'corporate_compliance', text: 'Corporate Compliance'},
            {value: 'intellectual_property', text: 'IP Analysis'}
        ],
        'family': [
            {value: 'custody_evaluation', text: 'Custody Evaluation'},
            {value: 'divorce_settlement', text: 'Divorce Settlement Review'},
            {value: 'prenuptial_postnuptial', text: 'Prenuptial/Postnuptial Agreement'},
            {value: 'adoption_guardianship', text: 'Adoption/Guardianship'}
        ],
        'criminal': [
            {value: 'general_analysis', text: 'Criminal Case Analysis'},
            {value: 'evidence_review', text: 'Evidence Review'},
            {value: 'constitutional_issues', text: 'Constitutional Issues'}
        ],
        'civil': [
            {value: 'general_analysis', text: 'Civil Case Analysis'},
            {value: 'liability_assessment', text: 'Liability Assessment'},
            {value: 'damages_calculation', text: 'Damages Analysis'}
        ]
    };

    // Update analysis types when practice area changes
    practiceAreaSelect.addEventListener('change', function() {
        const selectedArea = this.value;
        const types = analysisTypes[selectedArea] || analysisTypes['general'];

        // Clear and rebuild options
        analysisTypeSelect.innerHTML = '';
        types.forEach(type => {
            const option = document.createElement('option');
            option.value = type.value;
            option.textContent = type.text;
            analysisTypeSelect.appendChild(option);
        });

        // Update help text based on practice area
        if (selectedArea === 'business') {
            analysisTypeSelect.nextElementSibling.textContent = 'Business law specific analysis types';
        } else if (selectedArea === 'family') {
            analysisTypeSelect.nextElementSibling.textContent = 'Family law specific analysis types';
        } else {
            analysisTypeSelect.nextElementSibling.textContent = 'Specific analysis types based on practice area';
        }
    });

    // Check if we have an existing document
    const hasExistingDocument = document.querySelector('input[name="document_id"]');
    console.log('Has existing document:', !!hasExistingDocument);
    
    // Enable top button if we have an existing document
    if (hasExistingDocument) {
        topAnalyzeBtn.disabled = false;
        console.log('✅ Existing document detected, enabling analyze button');
    }

    // Make top button trigger the same form submission
    topAnalyzeBtn.addEventListener('click', function(e) {
        e.preventDefault();
        console.log('🔝 Top analyze button clicked');
        uploadForm.dispatchEvent(new Event('submit'));
    });

    // Only add drag & drop functionality if we don't have an existing document
    if (!hasExistingDocument && uploadZone && fileInput) {
        console.log('📁 Setting up file upload functionality...');
        
        // Click to upload
        uploadZone.addEventListener('click', function() {
            console.log('📂 Upload zone clicked');
            fileInput.click();
        });

        // Drag and drop functionality
        uploadZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.style.backgroundColor = '#f8f9fa';
        });

        uploadZone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.style.backgroundColor = '';
        });

        uploadZone.addEventListener('drop', function(e) {
            e.preventDefault();
            this.style.backgroundColor = '';

            const files = e.dataTransfer.files;
            if (files.length > 0) {
                console.log('📄 File dropped:', files[0].name);
                fileInput.files = files;
                displayFileInfo(files[0]);
            }
        });

        // File input change
        fileInput.addEventListener('change', function(e) {
            if (this.files.length > 0) {
                console.log('📄 File selected:', this.files[0].name);
                displayFileInfo(this.files[0]);
            }
        });

        function displayFileInfo(file) {
            console.log('📋 Displaying file info for:', file.name);
            fileName.textContent = file.name;
            fileInfo.classList.remove('d-none');
            
            // Enable top analyze button when file is selected
            topAnalyzeBtn.disabled = false;
            topAnalyzeBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Analyze';

            // Detect file type and show appropriate message
            const extension = file.name.split('.').pop().toLowerCase();
            const imageExtensions = ['jpg', 'jpeg', 'png', 'tif', 'tiff', 'bmp'];
            const documentExtensions = ['pdf', 'doc', 'docx', 'txt'];

            if (imageExtensions.includes(extension)) {
                fileTypeText.innerHTML = '<strong>📷 Image Detected:</strong> This file will be processed with OCR for text extraction.';
                fileTypeAlert.className = 'alert alert-info';
                fileTypeSection.classList.remove('d-none');
            } else if (documentExtensions.includes(extension)) {
                fileTypeText.innerHTML = '<strong>📄 Document Detected:</strong> This file will be processed for text extraction and legal analysis.';
                fileTypeAlert.className = 'alert alert-success';
                fileTypeSection.classList.remove('d-none');
            } else {
                fileTypeSection.classList.add('d-none');
            }
        }
    }

    // Form submission - IMPROVED ERROR HANDLING
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        console.log('📤 Form submitted');

        // Validate: Check if we need a file and don't have one
        if (!hasExistingDocument && (!fileInput || !fileInput.files || fileInput.files.length === 0)) {
            alert('Please select a file to upload for analysis.');
            console.log('❌ No file selected for new upload');
            return;
        }

        const formData = new FormData(this);
        
        // Debug: Log form data
        console.log('📋 Form data being sent:');
        for (let [key, value] of formData.entries()) {
            if (key === 'file') {
                console.log(key, ':', value.name || 'No file');
            } else {
                console.log(key, ':', value);
            }
        }

        // Disable both submit buttons
        submitBtn.disabled = true;
        topAnalyzeBtn.disabled = true;
        
        if (hasExistingDocument) {
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Starting Analysis...';
            topAnalyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Analyzing...';
            console.log('🔄 Starting analysis of existing document...');
        } else {
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Uploading...';
            topAnalyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Uploading...';
            console.log('⬆️ Uploading new file...');
        }

        fetch('/upload', {
            method: 'POST',
            body: formData,
            credentials: 'same-origin'
        })
        .then(response => {
            console.log('📡 Response status:', response.status);
            // Check for usage limit error (429)
            if (response.status === 429) {
                return response.json().then(data => {
                    // Show upgrade/purchase modal
                    if (data.show_options) {
                        showUpgradeModal();
                    } else {
                        alert(data.message || 'Monthly analysis limit reached');
                    }
                    throw new Error('usage_limit');
                });
            }
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('✅ Upload/Analysis response:', data);

            if (data.success && data.job_id) {
                console.log('🎯 Redirecting to analysis:', data.job_id);
                // Redirect to processing page
                window.location.href = `/analysis/${data.job_id}`;
            } else {
                throw new Error(data.error || 'Analysis failed to start');
            }
        })
        .catch(error => {
            console.error('❌ Error:', error);
            if (error.message !== 'usage_limit') {
                alert('Error: ' + error.message);
            }
            
            // Reset buttons
            submitBtn.disabled = false;
            topAnalyzeBtn.disabled = hasExistingDocument ? false : (fileInput && fileInput.files.length > 0);
            
            if (hasExistingDocument) {
                submitBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Analyze Document';
                topAnalyzeBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Analyze Document';
            } else {
                submitBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Start Analysis';
                topAnalyzeBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Analyze';
            }
        });
    });
});

// Function to show upgrade modal
function showUpgradeModal() {
    const modal = new bootstrap.Modal(document.getElementById('upgradeModal'));
    modal.show();
}
</script>

<!-- Upgrade/Purchase Modal -->
<div class="modal fade" id="upgradeModal" tabindex="-1" aria-labelledby="upgradeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="upgradeModalLabel">
                    <i class="fas fa-chart-line me-2"></i>Monthly Analysis Limit Reached
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-4">
                    <i class="fas fa-info-circle me-2"></i>
                    You've used all 5 of your free monthly analyses. Choose an option below to continue.
                </div>

                <div class="row g-4">
                    <!-- Option 1: Single Analysis -->
                    <div class="col-md-6">
                        <div class="card h-100 border-primary">
                            <div class="card-body text-center">
                                <h4 class="text-primary mb-3">Single Analysis</h4>
                                <div class="display-5 fw-bold text-primary mb-2">$9.75</div>
                                <p class="text-muted mb-4">One-time payment</p>
                                <ul class="list-unstyled mb-4">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>1 document analysis</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>All perspectives available</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Full AI insights</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Instant access</li>
                                </ul>
                                <a href="{{ url_for('subscription.purchase_single_analysis') }}" class="btn btn-primary w-100">
                                    <i class="fas fa-shopping-cart me-2"></i>Purchase Single Analysis
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Option 2: Upgrade to Pro -->
                    <div class="col-md-6">
                        <div class="card h-100 border-success">
                            <div class="card-header bg-success text-white text-center py-2">
                                <span class="badge bg-white text-success">BEST VALUE</span>
                            </div>
                            <div class="card-body text-center">
                                <h4 class="text-success mb-3">Pro Plan</h4>
                                <div class="display-5 fw-bold text-success mb-2">$150</div>
                                <p class="text-muted mb-4">Per month</p>
                                <ul class="list-unstyled mb-4">
                                    <li class="mb-2"><i class="fas fa-infinity text-success me-2"></i><strong>Unlimited analyses</strong></li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Case management</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Advanced features</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Priority support</li>
                                </ul>
                                <a href="{{ url_for('subscription.view_plans') }}" class="btn btn-success w-100">
                                    <i class="fas fa-crown me-2"></i>Upgrade to Pro
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <small class="text-muted">
                        <i class="fas fa-lock me-1"></i>Secure payment processing by Stripe
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.upload-zone {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.upload-zone:hover {
    background-color: #f8f9fa;
}

.upload-hint {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    max-width: 400px;
    margin: 0 auto;
}

.hint-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.hint-item i {
    margin-right: 8px;
    width: 20px;
}

.btn-check:checked + .btn-outline-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-check:checked + .btn-outline-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-check:checked + .btn-outline-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-check:checked + .btn-outline-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.card {
    border-radius: 15px;
}

.btn-lg {
    padding: 12px 30px;
    font-size: 1.1rem;
}

/* Top analyze button styling */
#topAnalyzeBtn {
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    white-space: nowrap;
}

#topAnalyzeBtn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

#topAnalyzeBtn:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Card header styling */
.card-header {
    border-bottom: 1px solid #e9ecef !important;
}

/* Enhanced existing document display */
.alert-success {
    position: relative;
    overflow: hidden;
}

.alert-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #28a745, #20c997);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-outline-danger,
    .btn-outline-success,
    .btn-outline-secondary,
    .btn-outline-primary {
        margin-bottom: 10px;
    }

    .hint-item {
        font-size: 0.85rem;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    #topAnalyzeBtn {
        width: 100%;
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

/* Focus states for accessibility */
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>
{% endblock %}