{% extends "base.html" %}
{% load thumbnail %}

{% block title %}{{ thing.name }} - LabHelper{% endblock %}

{% block page_header %}
<div class="page-header">
    <h1><i class="fas fa-cube"></i> {{ thing.name }}</h1>
    <p class="breadcrumb">
        <a href="/"><i class="fas fa-home"></i> Home</a> / 
        <a href="/box/{{ thing.box.id }}/"><i class="fas fa-box"></i> Box {{ thing.box.id }}</a> / 
        {{ thing.name }}
    </p>
</div>
{% endblock %}

{% block content %}
<div class="section">
    <div class="thing-card" style="display: flex; gap: 40px; flex-wrap: wrap;">
        <div class="thing-image" style="flex-shrink: 0; width: 100%; max-width: 400px;">
            {% if thing.picture %}
            {% thumbnail thing.picture "400x400" crop="center" as thumb %}
            <img src="{{ thumb.url }}" alt="{{ thing.name }}" style="width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
            {% endthumbnail %}
            {% else %}
            <div style="width: 100%; aspect-ratio: 1; max-width: 400px; max-height: 400px; background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%); display: flex; align-items: center; justify-content: center; color: #999; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
                <div style="text-align: center;">
                    <i class="fas fa-image" style="font-size: 64px; margin-bottom: 15px; display: block;"></i>
                    No image
                </div>
            </div>
            {% endif %}

            <form method="post" enctype="multipart/form-data" style="margin-top: 20px;">
                {% csrf_token %}
                <input type="hidden" name="action" value="upload_picture">
                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                    <label class="btn" style="cursor: pointer; display: inline-flex; align-items: center; gap: 8px;">
                        <i class="fas fa-camera"></i>
                        <span>{% if thing.picture %}Change picture{% else %}Add picture{% endif %}</span>
                        <input type="file" id="picture_upload" name="picture" accept="image/*" style="display: none;" onchange="this.form.submit();">
                    </label>
                    {% if thing.picture %}
                    <button type="submit" name="action" value="delete_picture" class="btn" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none;" onclick="return confirm('Are you sure you want to delete this picture?');">
                        <i class="fas fa-trash"></i>
                        <span>Remove</span>
                    </button>
                    {% endif %}
                </div>
            </form>
        </div>
        
        <div class="thing-details" style="flex-grow: 1; min-width: 300px;">
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-tags"></i> Tags
                </div>
                <div style="display: flex; flex-direction: column; gap: 12px;">
                    {% regroup thing.tags.all by facet as facet_list %}
                    {% for facet in facet_list %}
                    <div>
                        <div style="font-size: 12px; color: {{ facet.grouper.color }}; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;">
                            {{ facet.grouper.name }}
                        </div>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                            {% for tag in facet.list %}
                            <form method="post" style="display: inline;" onsubmit="return confirm('Remove tag {{ tag.facet.name }}:{{ tag.name }}?');">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="remove_tag">
                                <input type="hidden" name="tag_id" value="{{ tag.id }}">
                                <button type="submit" style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: {{ facet.grouper.color }}20; color: {{ facet.grouper.color }}; border: 2px solid {{ facet.grouper.color }}; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
                                    {{ tag.name }}
                                    <i class="fas fa-times" style="font-size: 12px;"></i>
                                </button>
                            </form>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-map-marker-alt"></i> Location
                </div>
                <div style="font-size: 18px; color: #333;">
                    <a href="{% url 'box_detail' thing.box.id %}" style="color: #667eea; text-decoration: none; font-weight: 500;">Box {{ thing.box.id }}</a>
                    <span style="color: #999;"> ({{ thing.box.box_type.name }})</span>
                </div>
            </div>
            
            {% if thing.description %}
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-align-left"></i> Description
                </div>
                <div style="font-size: 16px; color: #555; line-height: 1.6; white-space: pre-wrap;">
{% spaceless %}{{ thing.description }}{% endspaceless %}
                </div>
            </div>
            {% endif %}

            {% if thing.files.all %}
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-file-alt"></i> Files
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    {% for file in thing.files.all %}
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <i class="fas fa-paperclip" style="color: #667eea; font-size: 16px;"></i>
                            <a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
                            <span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
                        </div>
                        <form method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this file?');">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_file">
                            <input type="hidden" name="file_id" value="{{ file.id }}">
                            <button type="submit" style="background: none; border: none; cursor: pointer; color: #e74c3c; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#c0392b'" onmouseout="this.style.color='#e74c3c'">
                                <i class="fas fa-times" style="font-size: 14px;"></i>
                            </button>
                        </form>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if thing.links.all %}
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-link"></i> Links
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    {% for link in thing.links.all %}
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <i class="fas fa-external-link-alt" style="color: #667eea; font-size: 16px;"></i>
                            <a href="{{ link.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ link.title }}</a>
                        </div>
                        <form method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this link?');">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_link">
                            <input type="hidden" name="link_id" value="{{ link.id }}">
                            <button type="submit" style="background: none; border: none; cursor: pointer; color: #e74c3c; padding: 5px; transition: all 0.3s;" onmouseover="this.style.color='#c0392b'" onmouseout="this.style.color='#e74c3c'">
                                <i class="fas fa-times" style="font-size: 14px;"></i>
                            </button>
                        </form>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="section">
    <h2 style="color: #667eea; font-size: 20px; font-weight: 700; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
        <i class="fas fa-plus-circle"></i> Add Tags
    </h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 30px;">
        <div>
            <h3 style="margin: 0 0 15px 0; color: #667eea; font-size: 16px; font-weight: 600;">
                <i class="fas fa-tag"></i> Add Tag
            </h3>
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_tag">
                <div style="display: flex; flex-direction: column; gap: 15px;">
                    <div>
                        <label for="tag_select" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">Select Tag</label>
                        <select name="tag_id" id="tag_select" style="width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; background: white; cursor: pointer; transition: all 0.3s;">
                            <option value="">-- Select a tag --</option>
                            {% for facet in facets %}
                            <optgroup label="{{ facet.name }} ({{ facet.get_cardinality_display }})">
                                {% for tag in facet.tags.all %}
                                {% if tag not in thing.tags.all %}
                                <option value="{{ tag.id }}">
                                    {{ tag.name }}
                                </option>
                                {% endif %}
                                {% endfor %}
                            </optgroup>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn">
                        <i class="fas fa-plus"></i> Add Tag
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="section">
    <h2 style="color: #667eea; font-size: 20px; font-weight: 700; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
        <i class="fas fa-plus-circle"></i> Add Attachments
    </h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 30px;">
    <div>
        <h3 style="margin: 0 0 15px 0; color: #667eea; font-size: 16px; font-weight: 600;">
            <i class="fas fa-file-upload"></i> Upload File
        </h3>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_file">
            <div style="display: flex; flex-direction: column; gap: 15px;">
                <div>
                    <label for="file_title" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">Title</label>
                    <input type="text" id="file_title" name="title" style="width: 100%; padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                </div>
                <div>
                    <label for="file_upload" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">File</label>
                    <input type="file" id="file_upload" name="file" style="width: 100%; padding: 10px 15px; border: 2px dashed #e0e0e0; border-radius: 8px; font-size: 14px; background: #f8f9fa;">
                </div>
                <button type="submit" class="btn">
                    <i class="fas fa-upload"></i> Upload File
                </button>
            </div>
        </form>
    </div>
    <div>
        <h3 style="margin: 0 0 15px 0; color: #667eea; font-size: 16px; font-weight: 600;">
            <i class="fas fa-link"></i> Add Link
        </h3>
        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_link">
            <div style="display: flex; flex-direction: column; gap: 15px;">
                <div>
                    <label for="link_title" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">Title</label>
                    <input type="text" id="link_title" name="title" style="width: 100%; padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                </div>
                <div>
                    <label for="link_url" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">URL</label>
                    <input type="url" id="link_url" name="url" style="width: 100%; padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                </div>
                <button type="submit" class="btn">
                    <i class="fas fa-plus"></i> Add Link
                </button>
            </div>
        </form>
    </div>
</div>

<form method="post" class="section">
    {% csrf_token %}
    <input type="hidden" name="action" value="move">
    <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
        <div style="flex-grow: 1;">
            <label for="new_box" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">
                <i class="fas fa-exchange-alt"></i> Move to:
            </label>
            <select name="new_box" id="new_box" style="width: 100%; max-width: 400px; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; background: white; cursor: pointer; transition: all 0.3s;">
                <option value="">Select a box...</option>
                {% for box in boxes %}
                <option value="{{ box.id }}" {% if box.id == thing.box.id %}selected{% endif %}>
                    Box {{ box.id }} ({{ box.box_type.name }})
                </option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn" style="height: 48px; min-width: 120px; margin-top: 24px;">
            <i class="fas fa-arrows-alt"></i> Move
        </button>
    </div>
</form>

{% endblock %}

{% block extra_js %}
<script>
$('#new_box').on('focus', function() {
    $(this).css('border-color', '#667eea');
    $(this).css('box-shadow', '0 0 0 3px rgba(102, 126, 234, 0.1)');
}).on('blur', function() {
    $(this).css('border-color', '#e0e0e0');
    $(this).css('box-shadow', 'none');
});
</script>
{% endblock %}