{% extends "base.html" %}

{% block title %}签到详情{% endblock %}

{% block content %}
<div class="p-4 max-w-xl mx-auto space-y-6">

    <!-- 顶部 -->
    <div class="flex justify-between items-center">
        <h1 class="text-xl font-bold">签到详情</h1>
        <a href="/sign" class="text-sm text-blue-500 hover:underline">返回签到列表</a>
    </div>

    <hr>

    <!-- 基本信息 -->
    <div class="space-y-3 text-sm">
        <div>
            <span class="text-zinc-500">签到名称</span>
            <div class="font-medium">{{ knowing_name }}</div>
        </div>

        <div>
            <span class="text-zinc-500">时间</span>
            <div class="font-medium">
                {{ start_date }} {{ start_time }} - {{ end_time }}
            </div>
        </div>

        <div>
            <span class="text-zinc-500">发起人</span>
            <div class="font-medium">
                {{ send_name }}（{{ send_role }}）
            </div>
        </div>

        <!-- <div>
            <span class="text-zinc-500">签到状态</span>
            <div class="font-medium">
                {% if is_finish_know == 1 %}
                <span class="text-green-600">已签到</span>
                {% else %}
                <span class="text-red-600">未签到</span>
                {% endif %}
            </div>
        </div> -->

        <div>
            <span class="text-zinc-500">是否需要拍照</span>
            <div class="font-medium">
                {{ "是" if is_picture == 0 else "否" }}
            </div>
        </div>
    </div>

    <!-- 签到表单 -->
    {% if is_finish_know == 0 and is_check == 0 %}
    <form method="POST" action="/sign/{{ know_id }}/complete" enctype="multipart/form-data"
        class="space-y-4 border rounded-lg p-4 bg-zinc-50">

        <!-- 地点选择 -->
        <div>
            <label class="block text-sm font-medium text-zinc-700 mb-1">
                签到地点
            </label>

            <select id="location-select" class="w-full p-2 border rounded-md bg-white">
                <option value="">请选择预设地点</option>

                {% for loc in locations %}
                <option value="{{ loc.longitude }}:{{ loc.latitude }}" data-address="{{ loc.location }}">
                    {{ loc.alias }}（{{ loc.radius }}m）
                </option>
                {% endfor %}

                <option value="custom">📍 自定义地点</option>
            </select>
        </div>

        <!-- 自定义地点 -->
        <div id="custom-location" class="hidden space-y-2">
            <div>
                <label class="block text-sm text-zinc-600">
                    经度:纬度
                </label>
                <input type="text" id="custom-location-value" class="w-full p-2 border rounded-md"
                    placeholder="106.534597:29.341189">
            </div>

            <div>
                <label class="block text-sm text-zinc-600">
                    地址描述
                </label>
                <input type="text" id="custom-address" class="w-full p-2 border rounded-md" placeholder="请输入签到地址">
            </div>
        </div>

        <!-- 实际提交字段 -->
        <input type="hidden" name="location" id="location" required>
        <input type="hidden" name="address" id="address" required>

        <!-- 备注 -->
        <div>
            <label class="block text-sm font-medium text-zinc-700 mb-1">
                备注（必填）
            </label>
            <textarea name="remark" class="w-full p-2 border rounded-md" rows="3" placeholder="请输入备注"
                required></textarea>
        </div>

        <!-- 图片上传 -->
        {% if is_picture == 1 %}
        <div>
            <label class="block text-sm font-medium text-zinc-700 mb-1">
                上传图片（可多张）
            </label>
            <input type="file" name="images" multiple accept="image/*" class="w-full p-2 border rounded-md bg-white">
        </div>
        {% endif %}

        <!-- 提交 -->
        <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
            完成签到
        </button>
    </form>
    {% endif %}

</div>

<script>
    const select = document.getElementById("location-select")
    const customBox = document.getElementById("custom-location")

    select?.addEventListener("change", function () {
        const value = this.value

        if (value === "custom") {
            customBox.classList.remove("hidden")
            document.getElementById("location").value = ""
            document.getElementById("address").value = ""
            return
        }

        customBox.classList.add("hidden")

        if (!value) return

        const opt = this.options[this.selectedIndex]
        document.getElementById("location").value = value
        document.getElementById("address").value = opt.dataset.address
    })

    document.getElementById("custom-location-value")?.addEventListener("input", e => {
        document.getElementById("location").value = e.target.value
    })

    document.getElementById("custom-address")?.addEventListener("input", e => {
        document.getElementById("address").value = e.target.value
    })
</script>

{% endblock %}