{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title|default(equipment.name) }}{% endblock %}

{% block content %}
<div class="space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-box mr-3"></i>{{ equipment.name }}</h1>
                <p class="mt-2 text-teal-100">{{ equipment.internalReference }}{% if equipment.serialNumber %} &mdash; S/N: {{ equipment.serialNumber }}{% endif %}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_equipment_index') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Retour
                </a>
                <a href="{{ path('manager_equipment_edit', {id: equipment.id}) }}" class="inline-flex items-center px-4 py-2 bg-white text-teal-700 rounded-lg font-medium text-sm hover:bg-teal-50 transition-colors">
                    <i class="fas fa-pen mr-2"></i>Modifier
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Colonne principale #}
        <div class="lg:col-span-2 space-y-6">

            {# Informations generales #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-info-circle mr-2 text-teal-600"></i>Informations generales
                </h2>
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Reference interne</dt>
                        <dd class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ equipment.internalReference }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Nom</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ equipment.name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Categorie</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.category %}
                                {{ equipment.category.name }}
                            {% else %}
                                <span class="text-gray-400">Non categorise</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Marque</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ equipment.brand|default('-') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Modele</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ equipment.model|default('-') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Numero de serie</dt>
                        <dd class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ equipment.serialNumber|default('-') }}</dd>
                    </div>
                </dl>

                {% if equipment.description %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 dark:text-gray-400 mb-1">Description</dt>
                    <dd class="text-gray-900 dark:text-white">{{ equipment.description|nl2br }}</dd>
                </div>
                {% endif %}
            </div>

            {# Informations financieres #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-coins mr-2 text-teal-600"></i>Informations financieres
                </h2>
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Date d'achat</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.purchaseDate %}
                                {{ equipment.purchaseDate|date('d/m/Y') }}
                                {% if equipment.age %}<span class="text-xs text-gray-400 ml-1">({{ equipment.age }})</span>{% endif %}
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Prix d'achat</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.purchasePrice %}
                                {{ equipment.purchasePrice|number_format(0, ',', ' ') }} <span class="text-sm text-gray-500">XOF</span>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Valeur actuelle</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.currentValue %}
                                {{ equipment.currentValue|number_format(0, ',', ' ') }} <span class="text-sm text-gray-500">XOF</span>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Taux d'amortissement</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.depreciationRate %}
                                {{ equipment.depreciationRate }}%
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div class="md:col-span-2">
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Garantie</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if equipment.warrantyExpiresAt %}
                                Expire le {{ equipment.warrantyExpiresAt|date('d/m/Y') }}
                                {% if equipment.warrantyExpired %}
                                    <span class="ml-2 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Expiree</span>
                                {% elseif equipment.warrantyExpiringSoon %}
                                    <span class="ml-2 bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Expire bientot</span>
                                {% else %}
                                    <span class="ml-2 bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Active</span>
                                {% endif %}
                            {% else %}
                                <span class="text-gray-400">Non renseignee</span>
                            {% endif %}
                        </dd>
                    </div>
                </dl>
            </div>

            {# Historique des assignations #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-history mr-2 text-teal-600"></i>Historique des assignations
                </h2>

                {% if assignmentHistory|length > 0 %}
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th class="px-4 py-3">Date</th>
                                <th class="px-4 py-3">Assigne a</th>
                                <th class="px-4 py-3">Assigne par</th>
                                <th class="px-4 py-3">Etat a l'affectation</th>
                                <th class="px-4 py-3">Date retour</th>
                                <th class="px-4 py-3">Etat au retour</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            {% for assignment in assignmentHistory %}
                            <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                                <td class="px-4 py-3 text-gray-900 dark:text-white">
                                    {{ assignment.assignedAt|date('d/m/Y') }}
                                </td>
                                <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
                                    {{ assignment.assignedTo.fullName|default('-') }}
                                </td>
                                <td class="px-4 py-3 text-gray-700 dark:text-gray-300">
                                    {{ assignment.assignedBy.fullName|default('-') }}
                                </td>
                                <td class="px-4 py-3">
                                    <span class="text-xs font-medium">{{ assignment.conditionAtAssignment|default('-') }}</span>
                                </td>
                                <td class="px-4 py-3 text-gray-900 dark:text-white">
                                    {% if assignment.returnedAt %}
                                        {{ assignment.returnedAt|date('d/m/Y') }}
                                    {% else %}
                                        {% if assignment.active %}
                                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">En cours</span>
                                        {% else %}
                                            <span class="text-gray-400">-</span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3">
                                    <span class="text-xs font-medium">{{ assignment.conditionAtReturn|default('-') }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-8">
                    <i class="fas fa-clipboard-list text-3xl text-gray-300 dark:text-gray-600"></i>
                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Aucune assignation enregistree.</p>
                </div>
                {% endif %}
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">

            {# Etat et statut #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-clipboard-check mr-2 text-teal-600"></i>Etat et statut
                </h2>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Statut</dt>
                        <dd class="mt-1">
                            <span class="bg-{{ equipment.statusBadgeColor }}-100 text-{{ equipment.statusBadgeColor }}-800 text-sm font-medium px-3 py-1 rounded dark:bg-{{ equipment.statusBadgeColor }}-900 dark:text-{{ equipment.statusBadgeColor }}-300">
                                {{ equipment.statusLabel }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Etat physique</dt>
                        <dd class="mt-1">
                            <span class="bg-{{ equipment.conditionBadgeColor }}-100 text-{{ equipment.conditionBadgeColor }}-800 text-sm font-medium px-3 py-1 rounded dark:bg-{{ equipment.conditionBadgeColor }}-900 dark:text-{{ equipment.conditionBadgeColor }}-300">
                                {{ equipment.conditionLabel }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Emplacement</dt>
                        <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ equipment.location|default('Non renseigne') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Quantite</dt>
                        <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ equipment.quantity }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Assigne a</dt>
                        <dd class="mt-1 font-medium text-gray-900 dark:text-white">
                            {% if equipment.assignedTo %}
                                {{ equipment.assignedTo.fullName }}
                                {% if equipment.assignedAt %}
                                    <span class="block text-xs text-gray-400">depuis le {{ equipment.assignedAt|date('d/m/Y') }}</span>
                                {% endif %}
                            {% else %}
                                <span class="text-gray-400">Non assigne</span>
                            {% endif %}
                        </dd>
                    </div>
                </dl>
            </div>

            {# Actions contextuelles #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-controller="equipment-workflow">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Actions</h2>
                <div class="space-y-3">

                    {# Assigner (si disponible) #}
                    {% if equipment.available %}
                    <button type="button"
                            data-action="equipment-workflow#toggle"
                            data-equipment-workflow-target-param="assign-form"
                            class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        <i class="fas fa-user-plus mr-2"></i>Assigner
                    </button>

                    <div id="assign-form" class="hidden mt-3 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_assign', {id: equipment.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('assign_equipment_' ~ equipment.id) }}">
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Employe</label>
                                    <input type="text" name="assignedTo" required placeholder="ID de l'employe"
                                           class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Etat a l'affectation</label>
                                    <select name="condition" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                                        <option value="new">Neuf</option>
                                        <option value="good" selected>Bon etat</option>
                                        <option value="fair">Etat correct</option>
                                        <option value="poor">Mauvais etat</option>
                                        <option value="damaged">Endommage</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
                                    <textarea name="notes" rows="2" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white"></textarea>
                                </div>
                                <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                                    <i class="fas fa-check mr-1"></i>Confirmer l'assignation
                                </button>
                            </div>
                        </form>
                    </div>
                    {% endif %}

                    {# Retourner (si assigne) #}
                    {% if equipment.assigned %}
                    <button type="button"
                            data-action="equipment-workflow#toggle"
                            data-equipment-workflow-target-param="return-form"
                            class="w-full px-4 py-3 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                        <i class="fas fa-undo mr-2"></i>Retourner
                    </button>

                    <div id="return-form" class="hidden mt-3 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_return', {id: equipment.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('return_equipment_' ~ equipment.id) }}">
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Etat au retour</label>
                                    <select name="condition" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
                                        <option value="new">Neuf</option>
                                        <option value="good" selected>Bon etat</option>
                                        <option value="fair">Etat correct</option>
                                        <option value="poor">Mauvais etat</option>
                                        <option value="damaged">Endommage</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
                                    <textarea name="notes" rows="2" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white"></textarea>
                                </div>
                                <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                                    <i class="fas fa-check mr-1"></i>Confirmer le retour
                                </button>
                            </div>
                        </form>
                    </div>
                    {% endif %}

                    {# Declasser (si pas deja declasse) #}
                    {% if equipment.status != 'decommissioned' %}
                    <button type="button"
                            data-action="equipment-workflow#toggle"
                            data-equipment-workflow-target-param="decommission-form"
                            class="w-full px-4 py-3 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors">
                        <i class="fas fa-ban mr-2"></i>Declasser
                    </button>

                    <div id="decommission-form" class="hidden mt-3 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg" data-equipment-workflow-target="panel">
                        <form method="post" action="{{ path('manager_equipment_decommission', {id: equipment.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('decommission_equipment_' ~ equipment.id) }}">
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Motif</label>
                                    <textarea name="reason" rows="2" required placeholder="Raison du declassement..."
                                              class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white"></textarea>
                                </div>
                                <button type="submit" class="w-full px-4 py-2 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors"
                                        data-action="equipment-workflow#confirm"
                                        data-equipment-workflow-confirm-param="Confirmer le déclassement de cet équipement ?">
                                    <i class="fas fa-check mr-1"></i>Confirmer le declassement
                                </button>
                            </div>
                        </form>
                    </div>
                    {% endif %}
                </div>
            </div>

            {# Notes #}
            {% if equipment.notes %}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-sticky-note mr-2 text-teal-600"></i>Notes
                </h2>
                <p class="text-gray-700 dark:text-gray-300">{{ equipment.notes|nl2br }}</p>
            </div>
            {% endif %}

            {# Metadonnees #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-clock mr-2 text-teal-600"></i>Metadonnees
                </h2>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500 dark:text-gray-400">Cree le</dt>
                        <dd class="text-gray-900 dark:text-white">{{ equipment.createdAt|date('d/m/Y H:i') }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500 dark:text-gray-400">Modifie le</dt>
                        <dd class="text-gray-900 dark:text-white">{{ equipment.updatedAt|date('d/m/Y H:i') }}</dd>
                    </div>
                    {% if equipment.createdBy %}
                    <div class="flex justify-between">
                        <dt class="text-gray-500 dark:text-gray-400">Cree par</dt>
                        <dd class="text-gray-900 dark:text-white">{{ equipment.createdBy.fullName }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>

            {# Suppression #}
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
                <h2 class="text-lg font-semibold text-red-800 dark:text-red-400 mb-2">Zone de danger</h2>
                <p class="text-sm text-red-600 dark:text-red-300 mb-4">La suppression d'un equipement est irreversible.</p>
                <form method="post" action="{{ path('manager_equipment_delete', {id: equipment.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_equipment_' ~ equipment.id) }}">
                    <button type="submit" class="w-full px-4 py-3 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors"
                            data-action="equipment-workflow#confirm"
                            data-equipment-workflow-confirm-param="Êtes-vous sûr de vouloir supprimer cet équipement ? Cette action est irréversible."
                        <i class="fas fa-trash mr-2"></i>Supprimer cet equipement
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}