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

{% block title %}Envoyer des plannings{% endblock %}

{% block body %}
<!-- Page Title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">Envoyer des plannings par email</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ path('app_dashboard') }}">Accueil</a></li>
                    <li class="breadcrumb-item active">Envoyer plannings</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Envoi aux agents -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">
                    <i class="bi bi-people text-primary me-2"></i>
                    Envoyer aux agents
                </h4>
                <form action="{{ path('app_email_send_bulk') }}" method="post">
                    <input type="hidden" name="type" value="agents">
                    
                    <div class="mb-3">
                        <label class="form-label">Période</label>
                        <div class="row">
                            <div class="col-6">
                                <select name="month" class="form-select">
                                    {% for m in 1..12 %}
                                        <option value="{{ m }}" {{ currentMonth == m ? 'selected' : '' }}>
                                            {{ ('2024-' ~ '%02d'|format(m) ~ '-01')|date('F') }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <select name="year" class="form-select">
                                    {% for y in (currentYear - 1)..(currentYear + 1) %}
                                        <option value="{{ y }}" {{ currentYear == y ? 'selected' : '' }}>{{ y }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Sélectionner les agents</label>
                        <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="selectAllAgents">
                                <label class="form-check-label fw-bold" for="selectAllAgents">
                                    Sélectionner tout
                                </label>
                            </div>
                            <hr>
                            {% for agent in agents %}
                                <div class="form-check">
                                    <input class="form-check-input agent-checkbox" type="checkbox" name="ids[]" value="{{ agent.id }}" id="agent{{ agent.id }}">
                                    <label class="form-check-label" for="agent{{ agent.id }}">
                                        {{ agent.matricule }} - {{ agent.fullName }}
                                        <small class="text-muted">({{ agent.email }})</small>
                                    </label>
                                </div>
                            {% else %}
                                <p class="text-muted mb-0">Aucun agent trouvé</p>
                            {% endfor %}
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-envelope me-1"></i>
                        Envoyer aux agents sélectionnés
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Envoi aux clients -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">
                    <i class="bi bi-building text-success me-2"></i>
                    Envoyer aux clients
                </h4>
                <form action="{{ path('app_email_send_bulk') }}" method="post">
                    <input type="hidden" name="type" value="sites">
                    
                    <div class="mb-3">
                        <label class="form-label">Période</label>
                        <div class="row">
                            <div class="col-6">
                                <select name="month" class="form-select">
                                    {% for m in 1..12 %}
                                        <option value="{{ m }}" {{ currentMonth == m ? 'selected' : '' }}>
                                            {{ ('2024-' ~ '%02d'|format(m) ~ '-01')|date('F') }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <select name="year" class="form-select">
                                    {% for y in (currentYear - 1)..(currentYear + 1) %}
                                        <option value="{{ y }}" {{ currentYear == y ? 'selected' : '' }}>{{ y }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Sélectionner les sites</label>
                        <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="selectAllSites">
                                <label class="form-check-label fw-bold" for="selectAllSites">
                                    Sélectionner tout
                                </label>
                            </div>
                            <hr>
                            {% for site in sites %}
                                <div class="form-check">
                                    <input class="form-check-input site-checkbox" type="checkbox" name="ids[]" value="{{ site.id }}" id="site{{ site.id }}">
                                    <label class="form-check-label" for="site{{ site.id }}">
                                        {{ site.name }}
                                        <small class="text-muted">({{ site.clientName ?? '-' }} - {{ site.clientEmail ?? '-' }})</small>
                                    </label>
                                </div>
                            {% else %}
                                <p class="text-muted mb-0">Aucun site trouvé</p>
                            {% endfor %}
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-envelope me-1"></i>
                        Envoyer aux clients sélectionnés
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Sélectionner tous les agents
        document.getElementById('selectAllAgents').addEventListener('change', function() {
            document.querySelectorAll('.agent-checkbox').forEach(cb => cb.checked = this.checked);
        });
        
        // Sélectionner tous les sites
        document.getElementById('selectAllSites').addEventListener('change', function() {
            document.querySelectorAll('.site-checkbox').forEach(cb => cb.checked = this.checked);
        });
    </script>
{% endblock %}