{% extends 'base.html' %}

{% block title %}Profile - FinBot Vendor Portal{% endblock %}

{% block meta_description %}FinBot Vendor Portal Profile - View and manage your vendor profile information{% endblock %}

{% block nav_profile %}active{% endblock %}

{% block page_title %}Vendor Profile{% endblock %}
{% block page_subtitle %}View and manage your vendor information{% endblock %}

{% block header_actions %}
<button id="edit-profile-btn" class="vendor-btn quantum-secondary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
    </svg>
    Edit Profile
</button>
<a href="/vendor/assistant" class="vendor-btn quantum-primary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
    </svg>
    AI Assistant
</a>
{% endblock %}

{% block content %}
<!-- Profile Header -->
<div class="mb-8">
    <div class="holo-card">
        <div class="holo-body">
            <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between space-y-4 lg:space-y-0">
                <div class="flex items-center space-x-6">
                    <!-- Company Logo/Avatar -->
                    <div class="w-24 h-24 rounded-2xl bg-gradient-to-r from-vendor-primary to-vendor-secondary flex items-center justify-center text-3xl font-bold text-text-bright shadow-lg">
                        <span id="company-initials">FB</span>
                    </div>
                    <div>
                        <h2 id="company-name" class="text-3xl font-bold text-text-bright mb-2">OWASP FinBot</h2>
                        <div class="flex items-center space-x-4">
                            <span id="vendor-category" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-vendor-primary/20 text-vendor-primary border border-vendor-primary/30 uppercase">
                                Film & Entertainment
                            </span>
                            <span id="vendor-status" class="status-indicator approved text-xs">Pending</span>
                            <span id="vendor-id" class="text-xs text-text-secondary font-mono">ID: VEN-2024-001</span>
                        </div>
                    </div>
                </div>
                <div class="text-left lg:text-right">
                    <div class="text-sm text-text-secondary">Member Since</div>
                    <div id="member-since" class="text-lg font-semibold text-text-bright">January 15, 2024</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Profile Information Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Company Information -->
    <div class="holo-card">
        <div class="holo-header">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-vendor-primary to-vendor-secondary flex items-center justify-center">
                    <svg class="w-5 h-5 text-text-bright" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-text-bright">Company Information</h3>
            </div>
        </div>
        <div class="holo-body">
            <div class="space-y-4">
                <div class="profile-field">
                    <label class="profile-label">Company Name</label>
                    <div id="profile-company-name" class="profile-value">OWASP FinBot</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Category</label>
                    <div id="profile-category" class="profile-value">Film, TV & Entertainment</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Industry</label>
                    <div id="profile-industry" class="profile-value">Film & Entertainment</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Services Offered</label>
                    <div id="profile-services" class="profile-value">Full-service production company specializing in commercial films, corporate videos, and digital content creation. We offer end-to-end production services including pre-production planning, filming, and post-production.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Information -->
    <div class="holo-card">
        <div class="holo-header">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-vendor-accent to-vendor-warning flex items-center justify-center">
                    <svg class="w-5 h-5 text-portal-bg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-text-bright">Contact Information</h3>
            </div>
        </div>
        <div class="holo-body">
            <div class="space-y-4">
                <div class="profile-field">
                    <label class="profile-label">Primary Contact</label>
                    <div id="profile-contact-name" class="profile-value">John Smith</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Business Email</label>
                    <div class="flex items-center justify-between">
                        <div id="profile-email" class="profile-value">john.smith@example.com</div>

                    </div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Phone Number</label>
                    <div id="profile-phone" class="profile-value">+1 (555) 123-4567</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Information -->
    <div class="holo-card">
        <div class="holo-header">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-vendor-secondary to-vendor-primary flex items-center justify-center">
                        <svg class="w-5 h-5 text-text-bright" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-text-bright">Payment Information</h3>
                </div>
                <button class="text-vendor-primary hover:text-vendor-accent transition-colors text-xs font-medium">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    Show/Hide
                </button>
            </div>
        </div>
        <div class="holo-body">
            <div class="space-y-4">
                <div class="profile-field">
                    <label class="profile-label">Tax Identification Number (TIN/EIN)</label>
                    <div id="profile-tin" class="profile-value font-mono">**-*******</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Bank Name</label>
                    <div id="profile-bank-name" class="profile-value">Chase Bank</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Account Holder Name</label>
                    <div id="profile-account-holder" class="profile-value">OWASP FinBot</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Account Number</label>
                    <div id="profile-account-number" class="profile-value font-mono">****1234</div>
                </div>
                <div class="profile-field">
                    <label class="profile-label">Routing Number/Swift Code</label>
                    <div id="profile-routing-number" class="profile-value font-mono">****5678</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Agent Notes -->
    <div class="holo-card">
        <div class="holo-header">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-vendor-warning to-vendor-accent flex items-center justify-center">
                    <svg class="w-5 h-5 text-portal-bg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-text-bright">Agent Notes</h3>
            </div>
        </div>
        <div class="holo-body">
            <!-- Trust & Risk Levels -->
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="p-4 bg-portal-surface rounded-lg border border-vendor-primary/20">
                    <div class="flex items-center space-x-2 mb-2">
                        <svg class="w-4 h-4 text-vendor-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        <span class="text-xs text-text-secondary uppercase tracking-wide">Trust Level</span>
                    </div>
                    <div id="vendor-trust-level" class="text-lg font-semibold text-vendor-primary">Standard</div>
                </div>
                <div class="p-4 bg-portal-surface rounded-lg border border-vendor-warning/20">
                    <div class="flex items-center space-x-2 mb-2">
                        <svg class="w-4 h-4 text-vendor-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                        <span class="text-xs text-text-secondary uppercase tracking-wide">Risk Level</span>
                    </div>
                    <div id="vendor-risk-level" class="text-lg font-semibold text-vendor-warning">Low</div>
                </div>
            </div>

            <!-- Agent Notes -->
            <div class="p-4 bg-portal-surface rounded-lg border border-vendor-secondary/20">
                <div class="flex items-center space-x-2 mb-3">
                    <svg class="w-4 h-4 text-vendor-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                    </svg>
                    <span class="text-xs text-text-secondary uppercase tracking-wide">Review History</span>
                </div>
                <div id="agent-notes" class="text-sm text-text-bright leading-relaxed max-h-64 overflow-y-auto">
                    <span class="text-text-secondary italic">No notes available.</span>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-vendor-primary/20">
                <div class="flex items-center justify-between text-sm mb-4">
                    <span class="text-text-secondary">Last Activity</span>
                    <span id="stats-last-activity" class="text-text-bright font-medium">3 hours ago</span>
                </div>

                <!-- Request Re-Review Action -->
                <div id="review-request-section" class="p-4 bg-gradient-to-r from-vendor-primary/5 to-vendor-secondary/5 rounded-lg border border-vendor-primary/20">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 mr-4">
                            <p class="text-sm text-text-secondary">
                                Updated your profile? Request a new review to update your status.
                            </p>
                        </div>
                        <button id="request-review-btn" class="vendor-btn quantum-secondary whitespace-nowrap">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Request Re-Review
                        </button>
                    </div>
                    <div id="review-status-message" class="hidden mt-3 p-3 rounded-lg text-sm"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Profile Modal (Hidden by default) -->
<div id="edit-profile-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-portal-bg-secondary border border-vendor-primary/30 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
        <div class="p-6 border-b border-vendor-primary/20">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-text-bright">Edit Profile</h3>
                <button id="close-modal-btn" class="text-text-secondary hover:text-text-bright transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>
        <div class="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
            <form id="edit-profile-form" class="space-y-6">
                <!-- CSRF Token -->
                {{ csrf_token_field | safe }}

                <!-- Company Information -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-vendor-primary border-b border-vendor-primary/30 pb-2">
                        Company Information
                    </h4>
                    <div class="vendor-form-group">
                        <label for="edit-company-name" class="vendor-label">Company Name</label>
                        <input type="text" id="edit-company-name" name="company_name" class="vendor-input" placeholder="Enter company name">
                    </div>
                    <div class="vendor-form-group">
                        <label for="edit-services" class="vendor-label">Services Offered</label>
                        <textarea id="edit-services" name="services" rows="4" class="vendor-input resize-none" placeholder="Describe your services..."></textarea>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-vendor-primary border-b border-vendor-primary/30 pb-2">
                        Contact Information
                    </h4>
                    <div class="vendor-form-group">
                        <label for="edit-contact-name" class="vendor-label">Primary Contact</label>
                        <input type="text" id="edit-contact-name" name="contact_name" class="vendor-input" placeholder="Contact name">
                    </div>
                    <div class="vendor-form-group">
                        <label for="edit-email" class="vendor-label">Business Email</label>
                        <input type="email" id="edit-email" name="email" class="vendor-input" placeholder="email@company.com">
                    </div>
                    <div class="vendor-form-group">
                        <label for="edit-phone" class="vendor-label">Phone Number</label>
                        <input type="tel" id="edit-phone" name="phone" class="vendor-input" placeholder="+1 (555) 123-4567">
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-end space-x-4 pt-4 border-t border-vendor-primary/20">
                    <button type="button" id="cancel-edit-btn" class="vendor-btn quantum-secondary">
                        Cancel
                    </button>
                    <button type="submit" class="vendor-btn quantum-primary">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', path='js/vendor/profile.js') }}"></script>
{% endblock %}