{% extends "base.html" %}

{% block title %}Cart ({{ total_items }}) - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <h1 class="page-title">Your Cart</h1>

        {% if checkout_status == "partial" %}
        <div class="callout callout--solid-warning mb-5">
            <strong>Some purchases completed.</strong> Part of your checkout succeeded, but one or more creators could not be processed. The items below are still in your cart; you can try checking out again.
        </div>
        {% endif %}

        {% if seller_groups.is_empty() %}
        <div class="content-section cart-empty">
            <p class="muted mb-4">Your cart is empty.</p>
            <p class="cart-empty-hint">Add items from the Discover page or from your wishlist.</p>
            <a href="/discover" class="btn-primary">Browse Discover</a>
        </div>
        {% else %}

        {% if seller_groups.len() > 1 %}
        <div class="cart-multi-bar">
            <div>
                <strong>{{ total_items }} items from {{ seller_groups.len() }} creators</strong>
                <span class="cart-multi-bar-note">You'll check out with each creator in sequence.</span>
            </div>
            <form action="/stripe/checkout/cart/all" method="post" class="cart-multi-bar-form">
                {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}
                <label class="cart-share-label">
                    <input type="checkbox" name="share_contact" value="true"> Share email
                </label>
                <button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Checkout All</button>
            </form>
        </div>
        {% endif %}

        {% for group in seller_groups %}
        <div class="content-section cart-group">
            <h2 class="cart-group-title">
                <a href="/u/{{ group.seller_username }}">{{ group.seller_username }}</a>
            </h2>
            <p class="cart-group-count">{{ group.item_count }} item{% if group.item_count != 1 %}s{% endif %}</p>

            <div class="scroll-x">
            <table class="data-table minw-400">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Type</th>
                        <th class="text-right">Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in group.items %}
                    <tr id="cart-row-{{ item.item_id }}">
                        <td><a href="/i/{{ item.item_id }}">{{ item.title }}</a></td>
                        <td><span class="badge">{{ item.item_type }}</span></td>
                        <td class="text-right">
                            {% if item.pwyw_enabled %}
                            <div class="cart-pwyw-cell">
                                <span class="cart-pwyw-symbol">$</span>
                                <input type="number"
                                       class="pwyw-cart-input cart-pwyw-input input--xs w-80 input--numeric"
                                       data-item-id="{{ item.item_id }}"
                                       value="{{ item.effective_price_input_value() }}"
                                       min="{{ item.pwyw_min_dollars() }}"
                                       step="0.01">
                            </div>
                            {% else if item.is_free() %}Free
                            {% else %}{{ item.effective_price_display() }}
                            {% endif %}
                        </td>
                        <td>
                            <button class="btn-secondary small cart-row-btn"
                                    hx-delete="/api/cart/{{ item.item_id }}"
                                    hx-target="#cart-row-{{ item.item_id }}"
                                    hx-swap="outerHTML"
                                    hx-confirm="Remove this item from your cart?">Remove</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>

            <div class="cart-group-summary">
                <div>
                    <div class="cart-subtotal">
                        Subtotal: {{ group.subtotal_display() }}
                    </div>
                    <div class="cart-fee-line">
                        Platform fee: $0.00 &middot; Stripe processing: ~2.9% + $0.30
                    </div>
                    {% if group.savings_cents > 0 %}
                    <div class="cart-savings">
                        Buying together saves {{ group.seller_username }} ~{{ group.savings_display() }} in processing fees vs. separate purchases.
                    </div>
                    {% endif %}
                </div>

                {% if group.stripe_ready %}
                <form action="/stripe/checkout/cart" method="post">
                    {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}
                    <input type="hidden" name="seller_id" value="{{ group.seller_id }}">
                    <div class="cart-promo-row">
                        <input type="text" name="promo_code" placeholder="Promo code (optional)"
                               autocomplete="off"
                               class="cart-promo-input input--sm w-180">
                    </div>
                    <label class="cart-checkout-share">
                        <input type="checkbox" name="share_contact" value="true">
                        Share my email with {{ group.seller_username }}
                    </label>
                    <button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Checkout ({{ group.item_count }} items)</button>
                </form>
                {% else %}
                <div class="cart-stripe-not-ready">
                    <p>This creator hasn't set up payments yet. You can keep these items in your cart for later, or remove them.</p>
                    <button type="button" class="btn-secondary small"
                            data-seller-name="{{ group.seller_username }}"
                            onclick="removeCartGroup(this)">Remove all from {{ group.seller_username }}</button>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        {% endif %}

        {% if !wishlist_suggestions.is_empty() %}
        <div class="content-section cart-wishlist">
            <h2 class="section-header">From your wishlist</h2>
            <p class="section-lead text-sm dimmed">Add wishlisted items to your cart to buy them together.</p>
            <div class="scroll-x">
            <table class="data-table minw-400">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Creator</th>
                        <th class="text-right">Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in wishlist_suggestions %}
                    <tr id="wish-row-{{ item.item_id }}">
                        <td><a href="/i/{{ item.item_id }}">{{ item.title }}</a></td>
                        <td><a href="/u/{{ item.creator }}">{{ item.creator }}</a></td>
                        <td class="text-right">
                            {{ item.price_display() }}
                        </td>
                        <td>
                            <button class="btn-primary small cart-row-btn"
                                    hx-post="/api/cart/{{ item.item_id }}"
                                    hx-on::after-request="if(event.detail.successful) this.closest('tr').classList.add('is-faded'); this.textContent='Added'">Add to Cart</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
        {% endif %}
    </div>

    <script>
    (function() {
        document.querySelectorAll('.pwyw-cart-input').forEach(function(input) {
            var debounce;
            input.addEventListener('change', function() {
                clearTimeout(debounce);
                var itemId = this.dataset.itemId;
                var dollars = parseFloat(this.value) || 0;
                var cents = Math.round(dollars * 100);
                debounce = setTimeout(function() {
                    fetch('/api/cart/' + itemId, {
                        method: 'PUT',
                        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                        body: JSON.stringify({ amount_cents: cents })
                    }).then(function(r) {
                        if (!r.ok) return r.json().then(function(d) { showToast(d.error || 'Invalid amount'); });
                    }).catch(function() { showToast('Failed to update amount'); });
                }, 300);
            });
        });
    })();

    window.removeCartGroup = function(btn) {
        var name = btn.dataset.sellerName || 'this creator';
        if (!confirm('Remove all items from ' + name + '?')) return;
        var group = btn.closest('.cart-group');
        if (!group) return;
        var rows = group.querySelectorAll('tr[id^="cart-row-"]');
        if (rows.length === 0) return;
        btn.disabled = true;
        var headers = csrfHeaders();
        var pending = rows.length;
        var failed = false;
        function finish() {
            if (--pending !== 0) return;
            if (failed) {
                showToast('Some items could not be removed. Refreshing.');
                window.location.reload();
            } else {
                window.location.reload();
            }
        }
        rows.forEach(function(row) {
            var id = row.id.replace('cart-row-', '');
            fetch('/api/cart/' + id, { method: 'DELETE', headers: headers })
                .then(function(r) { if (!r.ok) failed = true; })
                .catch(function() { failed = true; })
                .finally(finish);
        });
    };
    </script>
{% endblock %}