{% extends 'dashboard/base.html.twig' %}

{% block title %}{{ 'items.title'|trans }} - {{ parent() }}{% endblock %}

{% block dashboard_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">
                    <i class="bi bi-box-seam"></i> {{ 'items.title'|trans }}
                    <span class="badge bg-primary ms-2">{{ currentCount }}</span>
                    {% if itemLimit %}
                        <small class="text-muted">/ {{ itemLimit }}</small>
                    {% endif %}
                </h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    {% if itemLimit is null or currentCount < itemLimit %}
                        <a href="{{ path('app_dashboard_items_new') }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> {{ 'items.new.title'|trans }}
                        </a>
                    {% else %}
                        <button type="button" class="btn btn-outline-secondary" disabled title="{{ 'items.limit_reached'|trans }}">
                            <i class="bi bi-plus-circle"></i> {{ 'items.new.title'|trans }}
                        </button>
                    {% endif %}
                </div>
            </div>

            <!-- Statistiques -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">{{ 'items.stats.total'|trans }}</h6>
                                    <h2 class="mb-0">{{ currentCount }}</h2>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-box-seam fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">{{ 'items.stats.available'|trans }}</h6>
                                    <h2 class="mb-0">{{ items|filter(item => item.status.value == 'available')|length }}</h2>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-check-circle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-dark">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">{{ 'items.stats.drafts'|trans }}</h6>
                                    <h2 class="mb-0">{{ items|filter(item => item.status.value == 'draft')|length }}</h2>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-pencil-square fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">{{ 'items.stats.sold'|trans }}</h6>
                                    <h2 class="mb-0">{{ items|filter(item => item.status.value == 'sold')|length }}</h2>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-currency-euro fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Liste des items -->
            {% if items|length > 0 %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-list"></i> {{ 'items.list.title'|trans }}
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th width="80">{{ 'items.table.headers.image'|trans }}</th>
                                        <th>{{ 'items.table.headers.title'|trans }}</th>
                                        <th>{{ 'items.table.headers.category'|trans }}</th>
                                        <th>{{ 'items.table.headers.price'|trans }}</th>
                                        <th>{{ 'items.table.headers.status'|trans }}</th>
                                        <th>{{ 'items.table.headers.views'|trans }}</th>
                                        <th>{{ 'items.table.headers.date'|trans }}</th>
                                        <th width="150">{{ 'items.table.headers.actions'|trans }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in items %}
                                        <tr>
                                            <td>
                                                {% if item.images and item.images|length > 0 %}
                                                    <img src="{{ asset('uploads/items/' ~ item.images[0].filename) }}" 
                                                         class="rounded" 
                                                         style="width: 50px; height: 50px; object-fit: cover;"
                                                         alt="{{ item.title }}">
                                                {% else %}
                                                    <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                                         style="width: 50px; height: 50px;">
                                                        <i class="bi bi-image text-muted"></i>
                                                    </div>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <strong>{{ item.title }}</strong>
                                                {% if item.description %}
                                                    <br>
                                                    <small class="text-muted">{{ item.description|slice(0, 60) }}{% if item.description|length > 60 %}...{% endif %}</small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if item.category %}
                                                    <span class="badge bg-secondary">{{ item.category.name }}</span>
                                                {% else %}
                                                    <span class="text-muted">{{ 'items.table.empty_category'|trans }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if item.price %}
                                                    <strong>{{ item.formattedPrice }}</strong>
                                                {% else %}
                                                    <span class="text-muted">{{ 'items.table.no_price'|trans }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% set statusClass = {
                                                    'draft': 'bg-warning',
                                                    'pending': 'bg-info',
                                                    'available': 'bg-success',
                                                    'reserved': 'bg-primary',
                                                    'sold': 'bg-dark'
                                                } %}
                                                <span class="badge {{ statusClass[item.status.value] ?? 'bg-secondary' }}">
                                                    {{ item.status.value|trans }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge bg-light text-dark">
                                                    <i class="bi bi-eye"></i> {{ item.viewCount }}
                                                </span>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ item.createdAt|date('d/m/Y') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <a href="{{ path('app_dashboard_items_edit', {id: item.id}) }}" 
                                                       class="btn btn-outline-primary d-flex align-items-center justify-content-center" 
                                                       style="width: 32px; height: 32px;"
                                                       title="{{ 'items.table.tooltips.edit'|trans }}">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>
                                                    <a href="{{ path('catalog_item_show', {id: item.id}) }}" 
                                                       class="btn btn-outline-info d-flex align-items-center justify-content-center" 
                                                       style="width: 32px; height: 32px;"
                                                       title="{{ 'items.table.tooltips.view'|trans }}" 
                                                       target="_blank">
                                                        <i class="bi bi-eye"></i>
                                                    </a>
                                                    <button type="button" 
                                                            class="btn btn-outline-danger d-flex align-items-center justify-content-center" 
                                                            style="width: 32px; height: 32px;"
                                                            title="{{ 'items.table.tooltips.delete'|trans }}"
                                                            onclick="confirmDelete({{ item.id }}, '{{ item.title|e('js') }}')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="bi bi-box-seam text-muted" style="font-size: 4rem;"></i>
                    </div>
                    <h4 class="text-muted mb-3">{{ 'items.empty.title'|trans }}</h4>
                    <p class="text-muted mb-4">{{ 'items.empty.description'|trans }}</p>
                    <a href="{{ path('app_dashboard_items_new') }}" class="btn btn-primary btn-lg">
                        <i class="bi bi-plus-circle"></i> {{ 'items.empty.button'|trans }}
                    </a>
                </div>
            {% endif %}

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'items.delete.modal.title'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ 'items.delete.modal.question'|trans }} <strong id="itemTitle"></strong> ?</p>
                <p class="text-muted">{{ 'items.delete.modal.warning'|trans }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'items.delete.modal.cancel'|trans }}</button>
                <form id="deleteForm" method="post" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash"></i> {{ 'items.delete.modal.confirm'|trans }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function confirmDelete(itemId, itemTitle) {
            document.getElementById('itemTitle').textContent = itemTitle;
            const baseUrl = '{{ path('app_dashboard_items')|raw }}';
            document.getElementById('deleteForm').action = baseUrl + '/' + itemId + '/delete';
            
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }
    </script>
{% endblock %}