{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8 text-center">分支机构设备间图片列表</h1>
    <div class="flex justify-center mb-6">
        <form method="get" action="" class="w-full max-w-md">
            <div class="flex">
                <input type="text" name="search" placeholder="搜索分支机构名称..." value="{{ request.GET.search }}"
                       class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    搜索
                </button>
            </div>
        </form>
    </div>
    <p class="text-gray-600 mb-6 text-center">共 {{ total_count }} 个分支机构</p>

    {% if branches %}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {% for branch in branches %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-4">
                <h2 class="text-xl font-semibold text-gray-900 mb-1">{{ branch.name }}</h2>
                <a href="{% url 'branch-detail' branch.id %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    查看分支机构详情 →
                </a>
            </div>
            <div class="bg-gray-100 p-2">
                {% if branch.equipment_images.exists %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
                        {% for image in branch.equipment_images.all %}
                            <img src="{{ image.image.url }}" alt="{{ branch.name }}设备间图片"
                                 class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
                                 data-branch-id="{{ branch.id }}" data-image-type="equipment" data-index="{{ forloop.counter0 }}"
                                 onclick="openImageModal(this)">
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="flex items-center justify-center h-48 bg-gray-200">
                        <span class="text-gray-400 text-sm">无图片</span>
                    </div>
                {% endif %}
            </div>

            <!-- 图纸显示区域 -->
            <div class="bg-gray-100 p-2 mt-4">
                <h3 class="text-lg font-semibold mb-2">图纸</h3>
                {% if branch.drawings.exists %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
                        {% for drawing in branch.drawings.all %}
                            <img src="{{ drawing.image.url }}" alt="{{ branch.name }}图纸"
                                 class="h-[100px] md:h-[150px] lg:h-[200px] w-auto object-cover cursor-pointer"
                                 data-branch-id="{{ branch.id }}" data-image-type="drawings" data-index="{{ forloop.counter0 }}"
                                 onclick="openImageModal(this)">
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="flex items-center justify-center h-48 bg-gray-200">
                        <span class="text-gray-400 text-sm">无图纸</span>
                    </div>
                {% endif %}
            </div>

<!-- 图片查看模态框 -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="relative">
        <button id="prevBtn" onclick="navigateImage(-1)" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-4xl font-bold focus:outline-none hover:text-gray-300 z-10 bg-black bg-opacity-50 px-2 py-1 rounded">👈</button>
        <button onclick="closeImageModal()" class="absolute -top-10 right-0 text-white text-2xl font-bold">&times;</button>
        <img id="modalImage" src="" alt="大图预览" class="max-w-full max-h-[90vh]">
        <div id="imageCounter" class="absolute -bottom-8 left-0 right-0 text-center text-white text-lg"></div>
    <button id="nextBtn" onclick="navigateImage(1)" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white text-4xl font-bold focus:outline-none hover:text-gray-300 z-10 bg-black bg-opacity-50 px-2 py-1 rounded">👉</button>
      </div>
</div>

<script>
window.branchImages = {};
{% for branch in branches %}
window.branchImages[{{ branch.id }}] = {
    equipment: [{% for img in branch.equipment_images.all %}"{{ img.image.url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}],
    drawings: [{% for img in branch.drawings.all %}"{{ img.image.url|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}]
};
{% endfor %}

var currentImages = [];
var currentIndex = 0;

function openImageModal(element) {
    const branchId = element.dataset.branchId;
    const imageType = element.dataset.imageType;
    currentIndex = parseInt(element.dataset.index);
    currentImages = window.branchImages[branchId][imageType];
    
    document.getElementById('modalImage').src = currentImages[currentIndex];
    updateNavigationButtons();
    updateImageCounter();
    
    document.getElementById('imageModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function navigateImage(direction) {
    currentIndex += direction;
    if (currentIndex < 0) currentIndex = 0;
    if (currentIndex >= currentImages.length) currentIndex = currentImages.length - 1;
    
    document.getElementById('modalImage').src = currentImages[currentIndex];
    updateNavigationButtons();
    updateImageCounter();
}

function updateNavigationButtons() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    prevBtn.style.display = currentIndex === 0 ? 'none' : 'block';
    nextBtn.style.display = currentIndex === currentImages.length - 1 ? 'none' : 'block';
}

function updateImageCounter() {
    document.getElementById('imageCounter').textContent = 
        `${currentIndex + 1}/${currentImages.length}`;
}

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
    document.body.style.overflow = 'auto'; // 恢复背景滚动
}

// 点击模态框背景也可关闭
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});
</script>
            
        </div>
        {% endfor %}
    </div>

    <!-- 分页控件 -->
    <div class="mt-10 flex justify-center">
        <nav class="inline-flex rounded-md shadow">
            {% if branches.has_previous %}
            <a href="?page=1" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                首页
            </a>
            <a href="?page={{ branches.previous_page_number }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                上一页
            </a>
            {% endif %}

            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-700">
                第 {{ branches.number }} 页，共 {{ branches.paginator.num_pages }} 页
            </span>

            {% if branches.has_next %}
            <a href="?page={{ branches.next_page_number }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                下一页
            </a>
            <a href="?page={{ branches.paginator.num_pages }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                末页
            </a>
            {% endif %}
        </nav>
    </div>
    {% else %}
    <div class="text-center py-12 bg-gray-50 rounded-lg">
        <p class="text-gray-500 text-lg">暂无分支机构设备间图片数据</p>
    </div>
    {% endif %}
</div>
{% endblock %}