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

{% block title %}Imprimer — {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    <div class="d-flex">
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'imprimer'
        } %}

        <div class="main-content">
            <div class="dossier-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">{{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}{{ beneficiaire.nom }} {{ beneficiaire.prenom }}</h4>
                            <small class="sous-titre">Impression du dossier</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid p-4">
                <div class="row justify-content-center">
                    <div class="col-lg-9">

                        <div class="card border-0 shadow-sm">
                            <div class="card-header purple text-white d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">
                                    <i class="fas fa-print me-2"></i>Choisir les pages à imprimer
                                </h5>
                                <div class="d-flex gap-2">
                                    <button type="button" id="btn-all" class="btn btn-sm btn-outline-light">
                                        <i class="fas fa-check-double me-1"></i>Tout sélectionner
                                    </button>
                                    <button type="button" id="btn-none" class="btn btn-sm btn-outline-light">
                                        <i class="fas fa-times me-1"></i>Tout désélectionner
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-4">
                                <form id="form-print" method="get" action="{{ path('app_print_all', {id: beneficiaire.id}) }}" target="_blank">
                                    <div class="row g-3 mb-4">

                                        {% set sections = [
                                            {value: 'profil',           icon: 'fa-user',               label: 'Profil'},
                                            {value: 'planning',         icon: 'fa-calendar-alt',        label: 'Planning'},
                                            {value: 'suivi',            icon: 'fa-clipboard-list',      label: 'Suivi'},
                                            {value: 'masque',           icon: 'fa-mask',                label: 'Masque'},
                                            {value: 'diagnostic',       icon: 'fa-briefcase',           label: 'Diagnostic Pro'},
                                            {value: 'projection',       icon: 'fa-chart-line',          label: 'Projection Pro'},
                                            {value: 'bilan',            icon: 'fa-clipboard-check',     label: 'Bilan'},
                                            {value: 'atelier_confiance',icon: 'fa-chalkboard-teacher',  label: 'Atelier — Confiance & estime'},
                                            {value: 'atelier_emotions', icon: 'fa-chalkboard-teacher',  label: 'Atelier — Gestion des émotions'},
                                            {value: 'atelier_travail',  icon: 'fa-chalkboard-teacher',  label: 'Atelier — Moi et le monde du travail'}
                                        ] %}

                                        {% for s in sections %}
                                            <div class="col-md-6">
                                                <label for="chk-{{ s.value }}" class="d-flex align-items-center gap-3 p-3 border rounded section-label" style="cursor:pointer;border-color:#dee2e6 !important;">
                                                    <input class="form-check-input section-check flex-shrink-0" type="checkbox"
                                                           name="sections[]" value="{{ s.value }}"
                                                           id="chk-{{ s.value }}" checked>
                                                    <span class="fs-5" style="color:#495057;"><i class="fas {{ s.icon }}"></i></span>
                                                    <span class="fw-semibold" style="color:#495057;">{{ s.label }}</span>
                                                </label>
                                            </div>
                                        {% endfor %}

                                    </div>

                                    <div class="d-flex justify-content-end pt-3 border-top">
                                        <button type="submit" class="btn-action btn-success" id="btn-submit">
                                            <i class="fas fa-print me-1"></i>Imprimer la sélection
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const checks = document.querySelectorAll('.section-check');

    document.getElementById('btn-all').addEventListener('click', function () {
        checks.forEach(c => { c.checked = true; });
    });

    document.getElementById('btn-none').addEventListener('click', function () {
        checks.forEach(c => { c.checked = false; });
    });

    document.getElementById('btn-submit').addEventListener('click', function (e) {
        if (!Array.from(checks).some(c => c.checked)) {
            e.preventDefault();
            alert('Veuillez sélectionner au moins une section.');
        }
    });
});
</script>
{% endblock %}