{% extends 'layouts/base.html' %}

{% block title %}Suite Consultance - CRM{% endblock %}
{% block module_name %}crm{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2 text-crm">Gestion de la Relation Client (CRM)</h1>
    <a href="{{ url_for('add_client') }}" class="btn btn-crm">
        <i class="fas fa-plus"></i> Ajouter un client
    </a>
</div>

<ul class="nav nav-tabs mb-4" id="crmTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="clients-tab" data-bs-toggle="tab" data-bs-target="#clients-tab-pane" type="button" role="tab" aria-controls="clients-tab-pane" aria-selected="true">
            <i class="fas fa-user-tie"></i> Clients
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="prospects-tab" data-bs-toggle="tab" data-bs-target="#prospects-tab-pane" type="button" role="tab" aria-controls="prospects-tab-pane" aria-selected="false">
            <i class="fas fa-user-plus"></i> Prospects
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard-tab-pane" type="button" role="tab" aria-controls="dashboard-tab-pane" aria-selected="false">
            <i class="fas fa-chart-pie"></i> Tableau de bord
        </button>
    </li>
</ul>

<div class="tab-content" id="crmTabContent">
    <!-- Onglet Clients -->
    <div class="tab-pane fade show active" id="clients-tab-pane" role="tabpanel" aria-labelledby="clients-tab" tabindex="0">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Email</th>
                                <th>Téléphone</th>
                                <th>Projet</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if clients %}
                                {% for client in clients %}
                                <tr>
                                    <td>{{ client.name }}</td>
                                    <td>{{ client.email }}</td>
                                    <td>{{ client.phone }}</td>
                                    <td>{{ client.company }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('client_details', client_id=client.name|lower|replace(' ', '_')) }}" class="btn btn-sm btn-info" title="Détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ url_for('create_proposition') }}?client_id={{ client.name|lower|replace(' ', '_') }}" class="btn btn-sm btn-success" title="Créer une proposition">
                                                <i class="fas fa-file-contract"></i>
                                            </a>
                                            <a href="{{ url_for('create_devis') }}?client_id={{ client.name|lower|replace(' ', '_') }}" class="btn btn-sm btn-warning" title="Créer un devis">
                                                <i class="fas fa-file-invoice-dollar"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="5" class="text-center">Aucun client trouvé</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Onglet Prospects -->
    <div class="tab-pane fade" id="prospects-tab-pane" role="tabpanel" aria-labelledby="prospects-tab" tabindex="0">
        <div class="card">
            <div class="card-body">
                <div class="mb-3 d-flex justify-content-between">
                    <div>
                        <a href="{{ url_for('add_prospect') }}" class="btn btn-outline-primary">
                            <i class="fas fa-plus"></i> Ajouter un prospect
                        </a>
                    </div>
                    <div>
                        <a href="{{ url_for('send_bulk_email') }}" class="btn btn-outline-primary me-2">
                            <i class="fas fa-envelope"></i> Campagne d'emails
                        </a>
                        <a href="{{ url_for('email_templates') }}" class="btn btn-outline-info me-2">
                            <i class="fas fa-file-alt"></i> Templates
                        </a>
                        <a href="{{ url_for('email_config') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-cog"></i> Configuration
                        </a>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Email</th>
                                <th>Téléphone</th>
                                <th>Statut</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if prospects %}
                                {% for prospect in prospects %}
                                <tr>
                                    <td>{{ prospect.name }}</td>
                                    <td>{{ prospect.email }}</td>
                                    <td>{{ prospect.phone }}</td>
                                    <td>
                                        <span class="badge bg-{{ prospect.status|lower == 'nouveau' and 'primary' or (prospect.status|lower == 'contacté' and 'info' or (prospect.status|lower == 'qualifié' and 'success' or (prospect.status|lower == 'proposition' and 'warning' or 'secondary'))) }}">
                                            {{ prospect.status }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('prospect_details', prospect_id=prospect.id) }}" class="btn btn-sm btn-info" title="Détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ url_for('edit_prospect', prospect_id=prospect.id) }}" class="btn btn-sm btn-primary" title="Modifier">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ url_for('convert_prospect', prospect_id=prospect.id) }}" class="btn btn-sm btn-success" title="Convertir en client" onclick="return confirm('Êtes-vous sûr de vouloir convertir ce prospect en client ?');">
                                                <i class="fas fa-user-check"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="5" class="text-center">Aucun prospect trouvé</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Onglet Tableau de bord -->
    <div class="tab-pane fade" id="dashboard-tab-pane" role="tabpanel" aria-labelledby="dashboard-tab" tabindex="0">
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Répartition clients/prospects</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="clientProspectChart" width="400" height="300"></canvas>
                        <div class="row mt-4">
                            <div class="col-md-6 text-center">
                                <div class="h4 mb-0">{{ dashboard_stats.total_clients }}</div>
                                <div class="small text-muted">Total Clients</div>
                            </div>
                            <div class="col-md-6 text-center">
                                <div class="h4 mb-0">{{ dashboard_stats.total_prospects }}</div>
                                <div class="small text-muted">Total Prospects</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Statut des prospects</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="prospectStatusChart" width="400" height="300"></canvas>
                        <div class="row mt-3">
                            {% for status, count in dashboard_stats.prospect_status.items() %}
                            <div class="col-md-4 text-center mb-2">
                                <div class="h5 mb-0">{{ count }}</div>
                                <div class="small text-muted">{{ status }}</div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Graphique répartition clients/prospects
        const clientProspectCtx = document.getElementById('clientProspectChart').getContext('2d');
        const clientProspectChart = new Chart(clientProspectCtx, {
            type: 'pie',
            data: {
                labels: ['Clients', 'Prospects'],
                datasets: [{
                    data: [{{ dashboard_stats.total_clients }}, {{ dashboard_stats.total_prospects }}],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 99, 132, 0.7)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // Graphique statut des prospects
        const prospectStatusCtx = document.getElementById('prospectStatusChart').getContext('2d');
        const prospectStatusChart = new Chart(prospectStatusCtx, {
            type: 'bar',
            data: {
                labels: [{% for status in dashboard_stats.prospect_status %}'{{ status }}',{% endfor %}],
                datasets: [{
                    label: 'Nombre de prospects',
                    data: [{% for status, count in dashboard_stats.prospect_status.items() %}{{ count }},{% endfor %}],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    });
</script>
{% endblock %}