{% extends 'base.html' %}
{% load static %}

{% block title %}Liste des clients - Contrôle Technique{% endblock %}

{% block content %}

<!-- Navigation secondaire simplifiée -->
<nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
        <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
            <i class="icon-base bx bx-menu icon-md"></i>
        </a>
    </div>

    <div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
        <div class="navbar-nav align-items-center me-auto">
            <div class="nav-item d-flex align-items-center">
                <i class="icon-base bx bxs-user-detail icon-md me-2"></i>
                <h4 class="mb-0">Liste des clients</h4>
            </div>
        </div>
    </div>
</nav>

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Messages flash -->
    {% if messages %}
    <div class="row">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- En-tête avec bouton d'ajout -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="icon-base bx bx-group me-2"></i>
                        Gestion des clients
                    </h5>
                    <div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ajouterClientModal">
                            <i class="icon-base bx bx-plus me-1"></i>
                            Nouveau client
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Liste simple des clients -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Nom / Raison sociale</th>
                                <th>Contact</th>
                                <th>Localisation</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for client in clients %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="icon-base bx bxs-building-house fs-4 me-2 text-primary"></i>
                                        <div>
                                            <strong>{{ client.nom }}</strong>
                                            {% if not client.actif %}
                                            <span class="badge bg-secondary ms-2">Inactif</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if client.email or client.telephone %}
                                        {% if client.email %}
                                        <div><i class="icon-base bx bx-envelope me-1 text-muted"></i> {{ client.email }}</div>
                                        {% endif %}
                                        {% if client.telephone %}
                                        <div><i class="icon-base bx bx-phone me-1 text-muted"></i> {{ client.telephone }}</div>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if client.ville %}
                                        <i class="icon-base bx bx-map me-1 text-muted"></i> {{ client.ville }}
                                        {% if client.code_postal %}({{ client.code_postal }}){% endif %}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <!-- Détails -->
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#detailClient{{ client.id }}"
                                                title="Voir détails">
                                            <i class="icon-base bx bx-show-alt"></i>
                                        </button>
                                        
                                        <!-- Modifier -->
                                        <button type="button" class="btn btn-sm btn-outline-warning" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#modifierClient{{ client.id }}"
                                                title="Modifier">
                                            <i class="icon-base bx bx-edit-alt"></i>
                                        </button>
                                        
                                        <!-- Supprimer -->
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#supprimerClient{{ client.id }}"
                                                title="Supprimer">
                                            <i class="icon-base bx bx-trash-alt"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <i class="icon-base bx bx-group fs-1 text-muted d-block mb-3"></i>
                                    <p class="text-muted mb-3">Aucun client enregistré</p>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ajouterClientModal">
                                        <i class="icon-base bx bx-plus me-1"></i>
                                        Ajouter votre premier client
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Pied de tableau simple -->
                {% if clients.paginator and clients.paginator.num_pages > 1 %}
                <div class="card-footer">
                    <nav aria-label="Navigation">
                        <ul class="pagination justify-content-center mb-0">
                            {% if clients.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">&laquo; Première</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ clients.previous_page_number }}">Précédente</a>
                            </li>
                            {% endif %}
                            
                            <li class="page-item active">
                                <span class="page-link">Page {{ clients.number }} / {{ clients.paginator.num_pages }}</span>
                            </li>
                            
                            {% if clients.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ clients.next_page_number }}">Suivante</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ clients.paginator.num_pages }}">Dernière &raquo;</a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal d'ajout simplifié -->
<div class="modal fade" id="ajouterClientModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-plus-circle me-2"></i>
                    Nouveau client
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{% url 'controle:ajouter_client' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nom / Raison sociale <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nom" required 
                               placeholder="Ex: SARL BTP, Jean Dupont...">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" 
                               placeholder="contact@entreprise.com">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Téléphone</label>
                        <input type="text" class="form-control" name="telephone" 
                               placeholder="01 23 45 67 89">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Ville</label>
                        <input type="text" class="form-control" name="ville" 
                               placeholder="Paris">
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" name="actif" id="actif" checked>
                        <label class="form-check-label" for="actif">Client actif</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-base bx bx-save me-1"></i>
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modals de détails pour chaque client -->
{% for client in clients %}
<div class="modal fade" id="detailClient{{ client.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-info-circle me-2"></i>
                    Détails du client
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold">Nom :</td>
                        <td>{{ client.nom }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Email :</td>
                        <td>{{ client.email|default:"-" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Téléphone :</td>
                        <td>{{ client.telephone|default:"-" }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Adresse :</td>
                        <td>
                            {{ client.adresse|default:"-" }}<br>
                            {% if client.code_postal %}{{ client.code_postal }}{% endif %}
                            {% if client.ville %}{{ client.ville }}{% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Statut :</td>
                        <td>
                            {% if client.actif %}
                            <span class="badge bg-success">Actif</span>
                            {% else %}
                            <span class="badge bg-secondary">Inactif</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de modification -->
<div class="modal fade" id="modifierClient{{ client.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-edit-alt me-2"></i>
                    Modifier le client
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{% url 'controle:modifier_client' client.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nom <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nom" value="{{ client.nom }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" value="{{ client.email|default:'' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Téléphone</label>
                        <input type="text" class="form-control" name="telephone" value="{{ client.telephone|default:'' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Adresse</label>
                        <textarea class="form-control" name="adresse" rows="2">{{ client.adresse|default:'' }}</textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Code postal</label>
                            <input type="text" class="form-control" name="code_postal" value="{{ client.code_postal|default:'' }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Ville</label>
                            <input type="text" class="form-control" name="ville" value="{{ client.ville|default:'' }}">
                        </div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" name="actif" id="actif{{ client.id }}" 
                               {% if client.actif %}checked{% endif %}>
                        <label class="form-check-label" for="actif{{ client.id }}">Client actif</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="icon-base bx bx-save me-1"></i>
                        Modifier
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<div class="modal fade" id="supprimerClient{{ client.id }}" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-error-circle me-2"></i>
                    Confirmation
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Supprimer le client :</p>
                <p class="fw-bold text-center">{{ client.nom }}</p>
                <p class="text-danger small">Cette action est irréversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form method="POST" action="{% url 'controle:supprimer_client' client.id %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">
                        <i class="icon-base bx bx-trash me-1"></i>
                        Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<!-- Style simple -->
<style>
.table td, .table th {
    vertical-align: middle;
}

.btn-group .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.modal-header.bg-primary, .modal-header.bg-info, .modal-header.bg-warning, .modal-header.bg-danger {
    color: white;
}

.btn-close-white {
    filter: brightness(0) invert(1);
}

/* Animation hover simple */
.table-hover tbody tr:hover {
    background-color: rgba(0,123,255,0.05);
    cursor: pointer;
}
</style>

{% endblock %}