{% extends "public/base.html" %}
{% load static %}
{% block title %}Domain Search — {{ site.site_name }}{% endblock %}

{% block extra_head %}
<style>
.domain-hero { background: linear-gradient(135deg, #033152 0%, #0a4a7a 100%); color: #fff; padding: 5rem 0 3rem; text-align: center; }
.domain-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; margin-bottom: .75rem; }
.domain-hero p { opacity: .8; max-width: 540px; margin: 0 auto 2rem; }
.domain-search-bar { display: flex; max-width: 640px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.domain-search-bar input { flex: 1; padding: 1rem 1.5rem; border: none; font-size: 1.05rem; outline: none; color: #033152; }
.domain-search-bar button { background: #ff404b; color: #fff; border: none; padding: 1rem 2rem; font-weight: 700; font-size: 1rem; cursor: pointer; transition: opacity .15s; white-space: nowrap; }
.domain-search-bar button:hover { opacity: .9; }

.domain-results { padding: 3rem 0 5rem; }
.domain-result-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 12px; border: 1.5px solid #e5e7eb; padding: 1rem 1.5rem; margin-bottom: .75rem; gap: 1rem; flex-wrap: wrap; }
.domain-result-row.available { border-color: #22c55e; }
.domain-result-row.taken { border-color: #e5e7eb; opacity: .6; }
.domain-result-row.unchecked { border-color: #e5e7eb; }
.domain-name { font-size: 1.05rem; font-weight: 700; color: #033152; }
.domain-status-badge { font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.badge-available { background: #f0fdf4; color: #16a34a; border: 1.5px solid #22c55e; }
.badge-taken { background: #fef2f2; color: #dc2626; border: 1.5px solid #fca5a5; }
.badge-unchecked { background: #f9fafb; color: #6b7280; border: 1.5px solid #e5e7eb; }
.domain-price { font-weight: 700; color: #033152; font-size: 1rem; }
.btn-add-domain { background: #033152; color: #fff; border: none; border-radius: 8px; padding: .55rem 1.25rem; font-weight: 700; font-size: .88rem; cursor: pointer; transition: opacity .15s; }
.btn-add-domain:hover { opacity: .85; }
.btn-add-domain:disabled { background: #9ca3af; cursor: default; }
.years-select { border: 1.5px solid #e5e7eb; border-radius: 8px; padding: .45rem .75rem; font-size: .88rem; color: #374151; }
.cart-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; }
</style>
{% endblock %}

{% block content %}
<section class="domain-hero">
    <div class="hero-container">
        <h1>Find Your Perfect Domain</h1>
        <p>Search hundreds of domain extensions. Register instantly at the best prices.</p>
        <form method="get" class="domain-search-bar">
            <input type="text" name="q" value="{{ query }}" placeholder="mybusiness.co.uk or just mybusiness" autocomplete="off" autofocus>
            <button type="submit"><i class="fa-solid fa-magnifying-glass me-2"></i>Search</button>
        </form>
    </div>
</section>

<div class="hero-container domain-results">

{% if query and not results %}
    <div class="text-center py-5">
        <i class="fa-solid fa-globe fa-3x mb-3 d-block" style="color:#e5e7eb;"></i>
        <p class="text-muted">No domain extensions are set up yet. Add domain products in the CMS first.</p>
    </div>
{% elif results %}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 style="font-size:1.1rem;font-weight:700;color:#033152;">Results for "{{ query }}"</h2>
        <a href="{% url 'shop_cart' %}" class="btn btn-outline-secondary btn-sm position-relative">
            <i class="fa-solid fa-basket-shopping me-1"></i> Basket
            {% if cart_count %}<span style="position:absolute;top:-6px;right:-6px;background:#ff404b;color:#fff;border-radius:50%;font-size:.65rem;font-weight:700;width:18px;height:18px;display:flex;align-items:center;justify-content:center;">{{ cart_count }}</span>{% endif %}
        </a>
    </div>

    {% for result in results %}
    <div class="domain-result-row {% if result.available == True %}available{% elif result.available == False %}taken{% else %}unchecked{% endif %}">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <span class="domain-name">{{ result.domain }}</span>
            {% if result.available == True %}
                <span class="domain-status-badge badge-available"><i class="fa-solid fa-circle-check me-1"></i>Available</span>
            {% elif result.available == False %}
                <span class="domain-status-badge badge-taken"><i class="fa-solid fa-circle-xmark me-1"></i>Taken</span>
            {% else %}
                <span class="domain-status-badge badge-unchecked"><i class="fa-solid fa-clock me-1"></i>Not Checked</span>
            {% endif %}
        </div>

        <div class="d-flex align-items-center gap-3">
            <span class="domain-price">£{{ result.price }}/yr</span>
            {% if result.available != False %}
            <form class="domain-add-form d-flex align-items-center gap-2" data-domain="{{ result.domain }}" data-product="{{ result.product.pk }}">
                {% csrf_token %}
                <select class="years-select" name="years">
                    <option value="1">1 year</option>
                    <option value="2">2 years</option>
                    <option value="3">3 years</option>
                </select>
                <button type="submit" class="btn-add-domain {% if result.available == False %}d-none{% endif %}">
                    <i class="fa-solid fa-plus me-1"></i>Add
                </button>
            </form>
            {% else %}
            <button class="btn-add-domain" disabled>Taken</button>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    <div class="text-center mt-4">
        <a href="{% url 'shop_cart' %}" class="btn btn-accent">
            <i class="fa-solid fa-basket-shopping me-2"></i>Go to Basket
        </a>
    </div>

{% else %}
    <!-- Placeholder when no search yet -->
    <div class="row g-4 mt-2">
        <div class="col-md-4 text-center">
            <i class="fa-solid fa-globe fa-2x mb-3 d-block" style="color:#033152;"></i>
            <h4 style="font-weight:700;color:#033152;">Hundreds of Extensions</h4>
            <p class="text-muted">.co.uk, .com, .io, .agency and many more at competitive prices.</p>
        </div>
        <div class="col-md-4 text-center">
            <i class="fa-solid fa-bolt fa-2x mb-3 d-block" style="color:#ff404b;"></i>
            <h4 style="font-weight:700;color:#033152;">Instant Registration</h4>
            <p class="text-muted">Pay and your domain is registered automatically — no waiting.</p>
        </div>
        <div class="col-md-4 text-center">
            <i class="fa-solid fa-shield-halved fa-2x mb-3 d-block" style="color:#22c55e;"></i>
            <h4 style="font-weight:700;color:#033152;">Full DNS Control</h4>
            <p class="text-muted">Manage nameservers, DNS records, and WHOIS privacy from your panel.</p>
        </div>
    </div>
{% endif %}

</div>

{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll('.domain-add-form').forEach(form => {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const domain = this.dataset.domain;
        const productId = this.dataset.product;
        const years = this.querySelector('[name=years]').value;
        const btn = this.querySelector('button[type=submit]');

        const fd = new FormData();
        fd.append('domain_name', domain);
        fd.append('product_id', productId);
        fd.append('years', years);
        fd.append('csrfmiddlewaretoken', this.querySelector('[name=csrfmiddlewaretoken]').value);

        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i>Adding...';

        fetch('{% url "shop_domain_add_to_cart" %}', {
            method: 'POST',
            body: fd,
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                btn.innerHTML = '<i class="fa-solid fa-circle-check me-1"></i>Added!';
                btn.style.background = '#22c55e';
                // Update cart count
                document.querySelectorAll('.cart-count').forEach(el => el.textContent = data.cart_count);
            }
        })
        .catch(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-plus me-1"></i>Add';
        });
    });
});
</script>
{% endblock %}