{% extends "base.html" %}
{% block title %}Sell Your Gold — GoldBuy{% endblock %}
{% block meta_description %}Post your gold item in two minutes — add photos, your location and asking price. Our team reviews it and calls you back the same day with a free offer.{% endblock %}
{% block container_class %}container-auth{% endblock %}

{% block content %}
<section class="auth-card sell-card">
    <div class="auth-badge">&#9670;</div>
    <h1>Sell your gold item</h1>
    <p class="auth-sub">Fill in the form and press <strong>Send</strong> —
       our team reviews your item and calls you back, usually the same day.</p>

    <form method="post" enctype="multipart/form-data" id="sell-form">
        {{ csrf_field() }}
        <div class="hp-field" aria-hidden="true">
            <label for="website">Website</label>
            <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
        </div>

        <div class="sell-section">
            <div class="sell-section-title"><span>1</span> Your contact details</div>
            <div class="form-grid">
                <div class="form-row">
                    <label for="seller_name">Your name *</label>
                    <input type="text" id="seller_name" name="seller_name" required
                           maxlength="100" autocomplete="name"
                           value="{{ form.get('seller_name', '') }}"
                           placeholder="e.g. Edwin Oduor">
                </div>
                <div class="form-row">
                    <label for="phone">Phone number * <span class="hint">(we call this number)</span></label>
                    <input type="tel" id="phone" name="phone" required
                           maxlength="20" autocomplete="tel"
                           value="{{ form.get('phone', '') }}"
                           placeholder="e.g. 0712 345 678">
                </div>
            </div>
            <div class="form-row">
                <label for="location">Your location *</label>
                <input type="text" id="location" name="location" required
                       maxlength="120"
                       value="{{ form.get('location', '') }}"
                       placeholder="e.g. Nairobi, Kasarani">
            </div>
        </div>

        <div class="sell-section">
            <div class="sell-section-title"><span>2</span> About your item</div>
            <div class="form-grid">
                <div class="form-row">
                    <label for="item_title">Item title *</label>
                    <input type="text" id="item_title" name="item_title" required
                           maxlength="120" value="{{ form.get('item_title', '') }}"
                           placeholder="e.g. 18k gold necklace, 12 grams">
                </div>
                <div class="form-row">
                    <label for="price">Asking price (KSh) *</label>
                    <input type="number" id="price" name="price" required
                           min="1" step="any" inputmode="numeric"
                           value="{{ form.get('price', '') }}"
                           placeholder="e.g. 45000">
                </div>
            </div>
            <div class="form-row">
                <label for="details">Item details *</label>
                <textarea id="details" name="details" required rows="4"
                          maxlength="2000"
                          placeholder="Type of gold, weight, karat, condition, how long you have owned it...">{{ form.get('details', '') }}</textarea>
            </div>
        </div>

        <div class="sell-section">
            <div class="sell-section-title"><span>3</span> Pictures of the item</div>
            <input type="file" id="photos" name="photos" accept="image/*" multiple required hidden>
            <div class="drop-zone" id="drop-zone" role="button" tabindex="0"
                 aria-label="Add photos of your item">
                <div class="drop-zone-icon">&#128247;</div>
                <div class="drop-zone-text"><strong>Add photos</strong> — click here or drop images</div>
                <div class="hint" id="photo-count">Up to 10 photos &middot; JPG, PNG, GIF or WEBP</div>
            </div>
            <div id="preview" class="photo-preview"></div>
        </div>

        <button type="submit" class="btn-auth btn-send">Send &#10148;</button>
        <p class="sell-reassure">Free quote &middot; no obligation to sell &middot; we call you back</p>
    </form>
</section>

<script>
(function () {
    const MAX_PHOTOS = 10;
    const input = document.getElementById('photos');
    const zone = document.getElementById('drop-zone');
    const preview = document.getElementById('preview');
    const counter = document.getElementById('photo-count');
    const store = new DataTransfer();

    zone.addEventListener('click', () => input.click());
    zone.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); }
    });
    ['dragover', 'dragenter'].forEach(ev => zone.addEventListener(ev, (e) => {
        e.preventDefault();
        zone.classList.add('drop-hover');
    }));
    ['dragleave', 'drop'].forEach(ev => zone.addEventListener(ev, (e) => {
        e.preventDefault();
        zone.classList.remove('drop-hover');
    }));
    zone.addEventListener('drop', (e) => addFiles(e.dataTransfer.files));

    input.addEventListener('change', () => addFiles(input.files));

    function addFiles(files) {
        for (const file of files) {
            if (store.items.length >= MAX_PHOTOS) break;
            if (!file.type.startsWith('image/')) continue;
            const dup = [...store.files].some(
                f => f.name === file.name && f.size === file.size);
            if (!dup) store.items.add(file);
        }
        sync();
    }

    function sync() {
        input.files = store.files;
        preview.innerHTML = '';
        [...store.files].forEach((file, idx) => {
            const wrap = document.createElement('div');
            wrap.className = 'photo-thumb';
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            img.onload = () => URL.revokeObjectURL(img.src);
            const del = document.createElement('button');
            del.type = 'button';
            del.className = 'photo-remove';
            del.textContent = '×';
            del.title = 'Remove this photo';
            del.addEventListener('click', () => { store.items.remove(idx); sync(); });
            wrap.appendChild(img);
            wrap.appendChild(del);
            preview.appendChild(wrap);
        });
        const n = store.files.length;
        counter.textContent = n === 0
            ? 'Up to 10 photos · JPG, PNG, GIF or WEBP'
            : n + ' photo' + (n > 1 ? 's' : '') + ' added' +
              (n >= MAX_PHOTOS ? ' (maximum reached)' : ' — click to add more');
    }
})();
</script>
{% endblock %}