{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Bid on Issues - Submit and Manage Bids
{% endblock title %}
{% block description %}
    Place bids on issues by providing a GitHub issue link, view current bids, and submit new bids. Manage and track your bids efficiently.
{% endblock description %}
{% block keywords %}
    bids, GitHub issues, bidding platform, submit bid, bid status, manage bids, pull requests
{% endblock keywords %}
{% block og_title %}
    Bid on Issues - Submit and Manage Bids
{% endblock og_title %}
{% block og_description %}
    Place bids on GitHub issues, view current bids, and manage your submissions. An efficient platform to submit, track, and update your bids.
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="min-h-screen bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Bidding Form Section -->
            <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
                <h1 class="text-3xl font-bold mb-4 flex items-center gap-3">
                    <i class="fas fa-gavel text-[#e74c3c]"></i>
                    Bid on Issues
                </h1>
                <!-- New Explainer Section -->
                <div class="mb-8 p-6 bg-gray-50 rounded-xl">
                    <h2 class="text-xl font-semibold mb-3 text-gray-900 flex items-center gap-2">
                        <i class="fas fa-lightbulb text-[#e74c3c]"></i>
                        How It Works
                    </h2>
                    <p class="text-gray-700 leading-relaxed">
                        OWASP BLT is proud to be the first platform to offer a revolutionary bidding system for open source contributions. Instead of relying on code maintainers to assign bounties on issues, you can take initiative by bidding on issues that interest you. This groundbreaking approach creates a dynamic marketplace where developers can choose their work and set their own prices, making open source contribution more accessible and rewarding than ever before.
                    </p>
                    <div class="mt-4 p-3 bg-[#e74c3c] bg-opacity-10 rounded-lg border border-[#e74c3c] border-opacity-20">
                        <p class="text-gray-800 flex items-start">
                            <i class="fas fa-info-circle text-[#e74c3c] mt-1 mr-2"></i>
                            <span><strong>No account required!</strong> You can place bids with just a valid GitHub username and issue URL. Simply enter your GitHub username and the issue you want to bid on.</span>
                        </p>
                    </div>
                </div>
                <form method="post" action="{% url 'BiddingData' %}" class="space-y-6">
                    {% csrf_token %}
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- GitHub Issue Link Input -->
                        <div class="lg:col-span-2">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fab fa-github mr-2"></i>GitHub Issue Link
                            </label>
                            <div class="relative">
                                <input type="text"
                                       id="issueLinkInput"
                                       name="issue_url"
                                       class="block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 pl-10 pr-4 py-3 transition-all duration-200"
                                       placeholder="https://github.com/owner/repo/issues/123">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-link text-gray-400"></i>
                                </div>
                            </div>
                            <p id="invalidUrlMessage" class="mt-2 text-sm text-red-600 hidden">Please enter a valid GitHub issue link</p>
                        </div>
                        <!-- Fetch Button -->
                        <div class="flex items-end">
                            <button type="button"
                                    onclick="fetchBid()"
                                    class="w-full inline-flex items-center justify-center px-6 py-3 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                <i class="fas fa-sync-alt mr-2"></i>
                                Fetch Current Bid
                            </button>
                        </div>
                    </div>
                    <!-- GitHub Username Input -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fab fa-github mr-2"></i>GitHub Username
                        </label>
                        <div class="relative">
                            <input type="text"
                                   id="githubUsername"
                                   name="user"
                                   class="block w-full rounded-lg border-2 border-gray-200 shadow-sm focus:border-[#e74c3c] focus:ring focus:ring-[#e74c3c] focus:ring-opacity-50 pl-10 pr-4 py-3 transition-all duration-200"
                                   placeholder="Enter GitHub username"
                                   value="{% if request.user.is_authenticated %}{{ request.user.username }}{% endif %}">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fab fa-github text-gray-400"></i>
                            </div>
                        </div>
                        <p class="mt-2 text-sm text-gray-500">
                            {% if request.user.is_authenticated %}
                                {% if request.user.userprofile.github_url %}
                                    We'll use your GitHub username from your profile if this field is left empty
                                {% else %}
                                    Enter your GitHub username or <a href="{% url 'profile_edit' %}"
    class="text-[#e74c3c] hover:underline">add it to your profile</a>
                                {% endif %}
                            {% else %}
                                Enter your GitHub username (required)
                            {% endif %}
                        </p>
                    </div>
                    <!-- Current Bid Display -->
                    <div id="BidDisplay" class="text-lg font-medium text-gray-900"></div>
                    <!-- Quick Bid Buttons -->
                    <div class="space-y-4">
                        <label class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-dollar-sign mr-2"></i>Select Bid Amount
                        </label>
                        <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
                            <button type="button"
                                    onclick="selectBidAmount(this, '1')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $1
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '5')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $5
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '10')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $10
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '20')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $20
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '30')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $30
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '40')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $40
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '50')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $50
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '75')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $75
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '100')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $100
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '125')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $125
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '150')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $150
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '175')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $175
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '200')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $200
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '250')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $250
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '300')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $300
                            </button>
                            <button type="button"
                                    onclick="selectBidAmount(this, '500')"
                                    class="bid-button inline-flex items-center justify-center px-4 py-2 border-2 border-[#e74c3c] text-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white font-medium transition-all duration-200">
                                $500
                            </button>
                        </div>
                    </div>
                    <!-- Custom Bid Amount -->
                    <div class="hidden">
                        <input type="number" id="bid_amount" name="bid_amount" required min="1">
                    </div>
                    <!-- Submit Button -->
                    <div class="flex justify-end">
                        <button type="submit"
                                class="inline-flex items-center justify-center px-8 py-3 bg-[#e74c3c] text-white rounded-lg hover:bg-opacity-90 font-medium transition-all duration-200">
                            <i class="fas fa-gavel mr-2"></i>
                            Submit Bid
                        </button>
                    </div>
                </form>
            </div>
            <!-- Current Bids Section -->
            <div class="bg-white rounded-xl shadow-lg p-8">
                <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
                    <i class="fas fa-list text-[#e74c3c]"></i>
                    Current Bids
                </h2>
                {% if bids %}
                    <div class="space-y-4">
                        {% for bid in bids %}
                            <div class="flex items-center justify-between p-4 rounded-lg border-2 border-gray-100 hover:border-[#e74c3c] transition-all duration-200">
                                <div class="flex items-center gap-4">
                                    <span class="text-lg font-bold text-[#e74c3c]">${{ bid.amount_bch }}</span>
                                    <div>
                                        <a href="{{ bid.issue_url }}"
                                           target="_blank"
                                           class="text-gray-900 hover:text-[#e74c3c] font-medium">
                                            {{ bid.issue_url|truncatechars:50 }}
                                        </a>
                                        <p class="text-sm text-gray-500">
                                            by
                                            {% if bid.user %}
                                                <a href="{{ bid.user.get_absolute_url }}"
                                                   class="text-[#e74c3c] hover:underline">{{ bid.user.username }}</a>
                                            {% else %}
                                                <span class="text-[#e74c3c]">{{ bid.github_username }}</span>
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12">
                        <div class="mx-auto w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                            <i class="fas fa-gavel text-4xl text-gray-400"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No Bids Yet</h3>
                        <p class="text-gray-500">Be the first to place a bid!</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <script>
    function fetchBid() {
        const issueUrl = document.getElementById('issueLinkInput').value;
        const csrftoken = getCookie('csrftoken');
        const githubUrlPattern = /^https?:\/\/github\.com\/.*$/i;
        
        if (!githubUrlPattern.test(issueUrl)) {
            document.getElementById('invalidUrlMessage').style.display = "block";
            return;
        } else {
            document.getElementById('invalidUrlMessage').style.display = "none";
        }

        fetch(`/fetch-current-bid/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken,
            },
            body: JSON.stringify({issue_url: issueUrl}),
        })
            .then(response => response.json())
            .then(data => {
                if ('current_bid' in data) {
                    const currentBid = data.current_bid;
                document.getElementById('BidDisplay').innerHTML = `
                    <div class="flex items-center gap-2 text-gray-900">
                        <i class="fas fa-info-circle text-[#e74c3c]"></i>
                        Current Bid: <span class="font-bold">$${currentBid}</span>
                    </div>
                `;
                    const bidAmountInput = document.getElementById('bid_amount');
                    bidAmountInput.setAttribute('max', currentBid - 1);
                } else {
                document.getElementById('BidDisplay').innerHTML = `
                    <div class="flex items-center gap-2 text-gray-900">
                        <i class="fas fa-info-circle text-[#e74c3c]"></i>
                        No current bid for this issue
                    </div>
                `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
            document.getElementById('BidDisplay').innerHTML = `
                <div class="flex items-center gap-2 text-red-600">
                    <i class="fas fa-exclamation-circle"></i>
                    Error fetching bid information
                </div>
            `;
        });
    }

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function selectBidAmount(button, amount) {
        // Remove active state from all buttons
        document.querySelectorAll('.bid-button').forEach(btn => {
            btn.classList.remove('bg-[#e74c3c]', 'text-white');
            btn.classList.add('text-[#e74c3c]');
        });
        
        // Add active state to clicked button
        button.classList.add('bg-[#e74c3c]');
        button.classList.remove('text-[#e74c3c]');
        button.classList.add('text-white');
        
        // Set the bid amount
        document.getElementById('bid_amount').value = amount;
    }
    </script>
{% endblock content %}