{% extends "base.html" %}
{% block content %}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-building-gear"></i> Service: {{ service.name }}</h1>
        <div>
            <a href="{{ url_for('services.edit', id=service.id) }}" class="btn btn-warning me-2">
                <i class="bi bi-pencil"></i> Modifier
            </a>
            <a href="{{ url_for('services.index') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    <!-- Infos du service -->
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Informations du Service</h5>
                </div>
                <div class="card-body">
                    <p><strong>Nom:</strong> {{ service.name }}</p>
                    <p><strong>Description:</strong> {{ service.description or '-' }}</p>
                    <p><strong>Responsable:</strong> {{ service.manager.full_name if service.manager else '-' }}</p>
                    <p><strong>Chargé d'opération:</strong> {{ service.operator.full_name if service.operator else '-' }}</p>
                    <p><strong>Directeur:</strong> {{ service.director.full_name if service.director else '-' }}</p>
                    <p><strong>Statut:</strong> 
                        {% if service.is_active %}
                            <span class="badge bg-success">Actif</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactif</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Lots gérés par ce service -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Lots gérés par ce service ({{ lots.total }})</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Lot</th>
                        <th>Catégories</th>
                        <th>Entreprise</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lot in lots %}
                    <tr>
                        <td><strong>{{ lot.name }}</strong></td>
                        <td><span class="badge bg-info">{{ lot.categories|length }}</span></td>
                        <td>
                            {% if lot.company %}
                                <span class="badge bg-success">{{ lot.company.name }}</span>
                            {% else %}
                                <span class="text-muted">Non assigné</span>
                            {% endif %}
                        </td>
                        <td>
                            <form method="POST" action="{{ url_for('services.remove_lot', id=service.id, lot_id=lot.id) }}" style="display:inline;">
                                <button type="submit" class="btn btn-sm btn-outline-danger" 
                                        onclick="return confirm('Retirer ce lot du service ?')">
                                    <i class="bi bi-x"></i> Retirer
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-muted">Aucun lot assigné à ce service.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Assignation de lots -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0">Assigner des lots à ce service</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('services.assign_lot', id=service.id) }}" class="row g-3">
                <div class="col-md-8">
                    <select name="lot_ids[]" class="form-select" multiple size="8" required>
                        {% for lot in all_lots %}
                        <option value="{{ lot.id }}">{{ lot.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Assigner les lots</button>
                </div>
            </form>
            <small class="text-muted d-block mt-2">Ctrl+clic pour sélection multiple. Un lot ne peut être assigné qu'à un maximum de 2 services.</small>
        </div>
    </div>
</div>

{% endblock %}