{% extends "public/base.html" %}
{% load static humanize %}

{% block title %}{{ listing.name }} — Auction — {{ site.site_name }}{% endblock %}
{% block meta_description %}{{ listing.meta_description|default:listing.tagline }}{% endblock %}

{% block extra_head %}
<style>
.enquiry-box {
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 2rem;
    position: sticky;
    top: 100px;
}
.enquiry-box input,
.enquiry-box textarea {
    width: 100%;
    padding: .7rem 1rem;
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
    margin-bottom: .75rem;
}
.enquiry-box input::placeholder,
.enquiry-box textarea::placeholder { color: rgba(255,255,255,.35); }
.enquiry-box input:focus,
.enquiry-box textarea:focus { border-color: var(--accent-color, #ff404b); background: rgba(255,255,255,.08); }
.enquiry-box textarea { resize: vertical; min-height: 100px; }
.auction-badge {
    display: inline-block;
    padding: .3rem .85rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
}
.auction-badge-type {
    background: rgba(255,64,75,.12);
    color: var(--accent-color, #ff404b);
    border: 1px solid rgba(255,64,75,.25);
}
.auction-badge-premium {
    background: rgba(245,158,11,.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,.25);
}
.asset-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-color, #ff404b);
    margin: 1rem 0;
}
.enq-err { color: #ff6b6b; font-size: .82rem; margin-bottom: .75rem; display: none; }
</style>
{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>{{ listing.name }}</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="row grid-spacer-2">

                <div class="col-lg-7">

                    <div class="sub-heading mb-3">
                        <i class="fa-regular fa-circle-dot"></i>
                        <h6 class="font-1">{{ listing.get_asset_type_display }}</h6>
                    </div>

                    <h2 class="mb-1">
                        {% if listing.is_premium %}<span class="auction-badge auction-badge-premium" style="font-size:.7rem;vertical-align:middle;margin-right:.5rem;">★ Premium</span>{% endif %}{{ listing.name }}
                    </h2>

                    {% if listing.tagline %}
                    <p class="secondary-accent mb-3" style="font-size:.95rem;">{{ listing.tagline }}</p>
                    {% endif %}

                    {% if listing.description %}
                    <div class="secondary-accent mt-3" style="line-height:1.9;font-size:.95rem;">
                        {{ listing.description|safe }}
                    </div>
                    {% endif %}

                    <div class="mt-4">
                        <a href="{% url 'auction' %}" class="btn btn-accent-outline">← All Listings</a>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="enquiry-box">

                        {% if listing.asking_price %}
                        <div class="asset-price">£{{ listing.asking_price|floatformat:0|intcomma }}</div>

                        <div style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem;margin-bottom:1.25rem;font-size:.82rem;line-height:1.6;">
                            <strong style="color:#fff;">How to secure this domain:</strong><br>
                            Pay a <strong style="color:var(--accent-color,#ff404b);">15% reservation deposit</strong> online now to hold it for 48 hours. The remaining balance is arranged directly within 48 hours.
                        </div>

                        <a href="{% url 'auction_reserve' listing.slug %}" class="btn btn-accent w-100 mb-3">
                            <i class="fa-solid fa-lock me-2"></i>Reserve Now — Pay 15% Deposit
                        </a>

                        <div style="text-align:center;margin-bottom:1rem;font-size:.78rem;opacity:.5;text-transform:uppercase;letter-spacing:.08em;">or</div>

                        <div id="enquiry-form">
                            <h5 style="font-weight:700;margin-bottom:1rem;font-size:.9rem;">Make an Offer Instead</h5>
                            <input type="text"  id="enq-name"    placeholder="Your name *">
                            <input type="email" id="enq-email"   placeholder="Email address *">
                            <input type="tel"   id="enq-phone"   placeholder="Phone (optional)">
                            <textarea           id="enq-message" placeholder="Your offer or message…" style="min-height:70px;"></textarea>
                            <div id="enq-error" class="enq-err"></div>
                            <button class="btn btn-accent-outline w-100" onclick="submitEnquiry(event)">
                                <i class="fa-solid fa-paper-plane me-2"></i>Send Offer
                            </button>
                        </div>

                        {% else %}
                        <div class="asset-price" style="font-size:1.4rem;">Make an Offer</div>

                        <div id="enquiry-form">
                            <input type="text"  id="enq-name"    placeholder="Your name *">
                            <input type="email" id="enq-email"   placeholder="Email address *">
                            <input type="tel"   id="enq-phone"   placeholder="Phone (optional)">
                            <textarea           id="enq-message" placeholder="Your offer or message…"></textarea>
                            <div id="enq-error" class="enq-err"></div>
                            <button class="btn btn-accent w-100" onclick="submitEnquiry(event)">
                                <i class="fa-solid fa-paper-plane me-2"></i>Send Enquiry
                            </button>
                        </div>
                        {% endif %}

                        <div id="enquiry-success" style="display:none;text-align:center;padding:2rem 0;">
                            <i class="fa-solid fa-circle-check" style="font-size:2.5rem;color:var(--accent-color,#ff404b);margin-bottom:.75rem;display:block;"></i>
                            <h5 style="font-weight:700;">Sent!</h5>
                            <p class="secondary-accent" style="font-size:.88rem;margin-top:.5rem;">We'll be in touch within 48 hours.</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
function submitEnquiry(e) {
    var btn = e.target.closest('button');
    var name    = document.getElementById('enq-name').value.trim();
    var email   = document.getElementById('enq-email').value.trim();
    var phone   = document.getElementById('enq-phone').value.trim();
    var message = document.getElementById('enq-message').value.trim();
    var err     = document.getElementById('enq-error');

    if (!name || !email || email.indexOf('@') < 1) {
        err.textContent = 'Please enter your name and a valid email.';
        err.style.display = 'block';
        return;
    }
    err.style.display = 'none';
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i>Sending…';

    fetch('{% url "auction_enquiry" listing.slug %}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}'},
        body: JSON.stringify({name: name, email: email, phone: phone, message: message})
    })
    .then(function(r){ return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            document.getElementById('enquiry-form').style.display    = 'none';
            document.getElementById('enquiry-success').style.display = 'block';
        } else {
            err.textContent = data.error || 'Something went wrong.';
            err.style.display = 'block';
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-paper-plane me-2"></i>Send Enquiry';
        }
    })
    .catch(function() {
        err.textContent = 'Network error. Please try again.';
        err.style.display = 'block';
        btn.disabled = false;
        btn.innerHTML = '<i class="fa-solid fa-paper-plane me-2"></i>Send Enquiry';
    });
}
</script>
{% endblock %}