{% extends '@Commercial/commercial/layout.html.twig' %}
{% block commercial_title %}Prospects{% endblock %}
{% block commercial_content %}
{% set status_classes = {new:'is-neutral',contacted:'is-blue',qualified:'is-purple',quote:'is-amber',negotiation:'is-orange',won:'is-green',lost:'is-red'} %}
<div class="prospect-index" data-controller="commercial-prospect-index prospection-kanban">
    <header class="prospect-index__heading">
        <div class="prospect-index__title">
            <div><h1>Prospects</h1><p class="capsule-soustitre">Gérez les opportunités commerciales avant conversion en clients.</p></div>
        </div>
        <nav>
            <button type="button" class="prospect-btn" data-action="commercial-prospect-index#openImport"><i class="ti ti-file-import"></i> Importer</button>
            <a class="prospect-btn" href="{{ path('commercial_prospect_export') }}" data-turbo="false"><i class="ti ti-download"></i> Exporter</a>
            <a class="prospect-btn" href="{{ path('billing_document_new',{type:'quote'}) }}"><i class="ti ti-file-description"></i> Créer un devis</a>
            <a class="prospect-btn is-primary" href="{{ path('commercial_prospect_new') }}"><i class="ti ti-plus"></i> Nouveau prospect</a>
        </nav>
    </header>

    <section class="prospect-kpis">
        <article><div><span class="is-purple"><i class="ti ti-users"></i></span><em>Actifs</em></div><strong>{{ view.kpis.active }}</strong><p>Prospects actifs</p></article>
        <article><div><span class="is-amber"><i class="ti ti-file-description"></i></span><em>En cours</em></div><strong>{{ view.kpis.quotes_sent }}</strong><p>Devis envoyés</p></article>
        <article><div><span class="is-green"><i class="ti ti-circle-check-filled"></i></span><em>Acceptés</em></div><strong>{{ view.kpis.quotes_accepted }}</strong><p>Devis acceptés</p></article>
        <article class="is-highlight"><div><span class="is-blue"><i class="ti ti-user-check"></i></span><em>Ce mois</em></div><strong>{{ view.kpis.converted_month }}</strong><p>Convertis ce mois</p></article>
        <article><div><span class="is-red"><i class="ti ti-user-x"></i></span><em>Perdus</em></div><strong>{{ view.kpis.lost }}</strong><p>Prospects perdus</p></article>
    </section>

    <section class="prospect-filters">
        <label class="prospect-search"><i class="ti ti-search"></i><input type="search" placeholder="Rechercher par nom, email, SIRET, ville…" data-commercial-prospect-index-target="search" data-action="input->commercial-prospect-index#filter"></label>
        <select data-commercial-prospect-index-target="status" data-action="change->commercial-prospect-index#filter"><option value="">Statut</option>{% for key,label in view.statuses %}<option value="{{ key }}">{{ label }}</option>{% endfor %}</select>
        <select data-commercial-prospect-index-target="type" data-action="change->commercial-prospect-index#filter"><option value="">Type</option>{% for type in view.types %}<option>{{ type }}</option>{% endfor %}</select>
        <select data-commercial-prospect-index-target="owner" data-action="change->commercial-prospect-index#filter"><option value="">Responsable</option>{% for owner in view.owners %}<option value="{{ owner.id }}">{{ owner.prenom }} {{ owner.nom }}</option>{% endfor %}</select>
        <select data-commercial-prospect-index-target="source" data-action="change->commercial-prospect-index#filter"><option value="">Source</option>{% for source in view.sources %}<option>{{ source }}</option>{% endfor %}</select>
        <select data-commercial-prospect-index-target="category" data-action="change->commercial-prospect-index#filter"><option value="">Catégorie</option>{% for category in view.categories %}<option value="{{ category.id }}">{{ category.nom }}</option>{% endfor %}</select>
        <button class="prospect-btn is-primary" type="button" data-action="commercial-prospect-index#filter"><i class="ti ti-filter-filled"></i> Filtrer</button>
        <button class="prospect-reset" type="button" data-action="commercial-prospect-index#reset">Réinitialiser</button>
    </section>

    <div class="prospect-index__grid">
        <main class="prospect-list-card">
            <header>
                <div class="prospect-section-title"><span><i class="ti ti-users-group"></i></span><div><h2>Liste des prospects</h2><p><b data-commercial-prospect-index-target="activeCount">{{ view.kpis.active }}</b> actifs · {{ view.kpis.lost }} perdus · {{ company.nom }}</p></div></div>
                <div class="prospect-view-toggle">
                    <button class="is-active" type="button" title="Vue liste" data-commercial-prospect-index-target="listButton" data-action="commercial-prospect-index#showList"><i class="ti ti-list"></i></button>
                    <button type="button" title="Vue Kanban" data-commercial-prospect-index-target="kanbanButton" data-action="commercial-prospect-index#showKanban"><i class="ti ti-layout-kanban"></i></button>
                </div>
            </header>

            <div class="prospect-table-wrap" data-commercial-prospect-index-target="listView">
                <table>
                    <thead><tr><th>Prospect</th><th>Type</th><th>Catégorie</th><th>Contact</th><th>Ville</th><th>Source</th><th>Responsable</th><th>Statut</th><th>Dernier devis</th><th>Montant</th><th></th></tr></thead>
                    <tbody>
                    {% for item in view.rows %}
                        {% set prospect = item.prospect %}
                        {% set quote = item.quote %}
                        {% set owner = prospect.prospectOwner %}
                        <tr tabindex="0"
                            data-commercial-prospect-index-target="row"
                            data-action="click->commercial-prospect-index#selectRow keydown.enter->commercial-prospect-index#selectRow"
                            data-search="{{ (prospect.nom~' '~prospect.email~' '~prospect.siret~' '~prospect.ville~' '~(prospect.categorie ? prospect.categorie.nom : ''))|lower|e('html_attr') }}"
                            data-status="{{ prospect.prospectStatus ?: 'new' }}"
                            data-type="{{ prospect.type }}"
                            data-owner="{{ owner ? owner.id : '' }}"
                            data-source="{{ prospect.prospectSource }}"
                            data-category="{{ prospect.categorie ? prospect.categorie.id : '' }}"
                            data-show-url="{{ path('commercial_prospect_show',{idtoken:prospect.idtoken}) }}"
                            data-edit-url="{{ path('prospection_prospect_edit',{idtoken:prospect.idtoken}) }}"
                            data-quote-url="{{ path('billing_document_new',{type:'quote',clientId:prospect.id}) }}"
                            data-convert-url="{{ path('commercial_prospect_convert',{idtoken:prospect.idtoken}) }}"
                            data-convert-token="{{ csrf_token('prospect_convert_'~prospect.idtoken) }}"
                            data-lost-url="{{ path('prospection_prospect_status',{idtoken:prospect.idtoken}) }}"
                            data-lost-token="{{ csrf_token('prospection_prospect_status_'~prospect.idtoken) }}"
                            data-archive-url="{{ path('commercial_prospect_archive',{idtoken:prospect.idtoken}) }}"
                            data-archive-token="{{ csrf_token('prospect_archive_'~prospect.idtoken) }}">
                            <td><a href="{{ path('commercial_prospect_show',{idtoken:prospect.idtoken}) }}"><strong>{{ prospect.nom }}</strong><small>{{ prospect.siret ?: 'Prospect #'~prospect.id }}</small></a></td>
                            <td><span class="prospect-type {{ prospect.type == 'Particulier' ? 'is-person' : '' }}"><i class="ti {{ prospect.type == 'Particulier' ? 'ti-user' : 'ti-building' }}"></i>{{ prospect.type ?: 'Entreprise' }}</span></td>
                            <td>{% if prospect.categorie %}<span class="prospect-category"><i class="ti ti-tag"></i>{{ prospect.categorie.nom }}</span>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                            <td><strong>{{ prospect.nom }}</strong><small>{{ prospect.email }}</small></td>
                            <td><i class="ti ti-map-pin-filled text-muted"></i> {{ prospect.ville ?: '—' }}</td>
                            <td><span class="prospect-source"><i class="ti ti-world"></i>{{ prospect.prospectSource ?: 'Non renseignée' }}</span></td>
                            <td>{% if owner %}<div class="prospect-owner"><img src="{{ user_avatar_url(owner) }}" alt=""><b>{{ owner.prenom|first }}. {{ owner.nom }}</b></div>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                            <td><span class="prospect-status {{ status_classes[prospect.prospectStatus]|default('is-neutral') }}"><i></i>{{ view.statuses[prospect.prospectStatus]|default('Nouveau') }}</span></td>
                            <td>{% if quote %}<a class="prospect-quote" href="{{ path('billing_document_show',{idtoken:quote.idtoken}) }}"><strong>{{ quote.number ?: 'Brouillon' }}</strong><small>{{ quote.issueDate ? quote.issueDate|date('d/m/Y') : '—' }}</small></a>{% else %}<em class="prospect-none">Aucun<br>devis</em>{% endif %}</td>
                            <td>{% if quote %}<strong class="prospect-amount">{{ quote.totalTtc|number_format(0,',',' ') }} €</strong>{% elseif prospect.prospectEstimatedValue %}<strong class="prospect-amount">{{ prospect.prospectEstimatedValue|number_format(0,',',' ') }} €</strong>{% else %}<span class="text-muted">—</span>{% endif %}</td>
                            <td><a class="prospect-row-link" href="{{ path('commercial_prospect_show',{idtoken:prospect.idtoken}) }}" title="Voir"><i class="ti ti-chevron-right"></i></a></td>
                        </tr>
                    {% else %}
                        <tr class="prospect-empty-row"><td colspan="11">Aucun prospect enregistré.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
                <div class="prospect-no-result" hidden data-commercial-prospect-index-target="empty">Aucun prospect ne correspond aux filtres.</div>
            </div>

            <div class="prospect-kanban" hidden data-commercial-prospect-index-target="kanbanView">
                {% for status,label in view.statuses %}
                    <section>
                        <header><span class="prospect-status {{ status_classes[status] }}"><i></i>{{ label }}</span><b>{{ view.kanban[status]|length }}</b></header>
                        <div class="prospect-kanban__column" data-prospection-kanban-target="column" data-status="{{ status }}">
                            {% for prospect in view.kanban[status] %}
                                <article draggable="true" data-prospection-kanban-target="card"
                                    data-commercial-prospect-index-target="card"
                                    data-search="{{ (prospect.nom~' '~prospect.email~' '~prospect.siret~' '~prospect.ville~' '~(prospect.categorie ? prospect.categorie.nom : ''))|lower|e('html_attr') }}"
                                    data-status="{{ status }}" data-type="{{ prospect.type }}" data-owner="{{ prospect.prospectOwner ? prospect.prospectOwner.id : '' }}" data-source="{{ prospect.prospectSource }}" data-category="{{ prospect.categorie ? prospect.categorie.id : '' }}"
                                    data-status-url="{{ path('prospection_prospect_status',{idtoken:prospect.idtoken}) }}"
                                    data-csrf="{{ csrf_token('prospection_prospect_status_'~prospect.idtoken) }}">
                                    <a href="{{ path('commercial_prospect_show',{idtoken:prospect.idtoken}) }}"><strong>{{ prospect.nom }}</strong></a>
                                    <p><i class="ti ti-map-pin"></i> {{ prospect.ville ?: 'Ville non renseignée' }}</p>
                                    <small>{{ prospect.email }}</small>
                                    {% if prospect.categorie %}<span class="prospect-category mt-2"><i class="ti ti-tag"></i>{{ prospect.categorie.nom }}</span>{% endif %}
                                    <footer><span>{{ prospect.prospectSource ?: 'Sans source' }}</span>{% if prospect.prospectEstimatedValue %}<b>{{ prospect.prospectEstimatedValue|number_format(0,',',' ') }} €</b>{% endif %}</footer>
                                </article>
                            {% endfor %}
                        </div>
                    </section>
                {% endfor %}
            </div>

            <footer class="prospect-list-footer" data-commercial-prospect-index-target="footer">
                <p>Affichage de <b data-commercial-prospect-index-target="shownCount">{{ view.rows|length > 6 ? 6 : view.rows|length }}</b> prospects sur <b data-commercial-prospect-index-target="totalCount">{{ view.rows|length }}</b> · <span>{{ view.kpis.active }} actifs</span> · <em>{{ view.kpis.lost }} perdus</em></p>
                <nav data-commercial-prospect-index-target="pagination"></nav>
            </footer>
        </main>

        <aside class="prospect-aside">
            <section class="prospect-side-card">
                <header><span><i class="ti ti-bolt-filled"></i></span><div><h2>Actions rapides</h2><p>Sur le prospect sélectionné</p></div></header>
                <div class="prospect-actions">
                    <a href="{{ view.rows|first ? path('billing_document_new',{type:'quote',clientId:(view.rows|first).prospect.id}) : path('billing_document_new',{type:'quote'}) }}" data-commercial-prospect-index-target="quickQuote"><i class="ti ti-file-description is-purple"></i>Créer un devis</a>
                    <form method="post" data-commercial-prospect-index-target="quickConvert"><input type="hidden" name="_token"><button><i class="ti ti-user-check is-green"></i>Convertir en client</button></form>
                    <a href="{{ view.rows|first ? path('prospection_prospect_edit',{idtoken:(view.rows|first).prospect.idtoken}) : path('commercial_prospect_new') }}" data-commercial-prospect-index-target="quickEdit"><i class="ti ti-pencil is-amber"></i>Modifier le prospect</a>
                    <form method="post" data-commercial-prospect-index-target="quickLost"><input type="hidden" name="_token"><input type="hidden" name="status" value="lost"><button><i class="ti ti-circle-x-filled is-red"></i>Marquer perdu</button></form>
                    <form method="post" data-commercial-prospect-index-target="quickArchive" data-confirm="Archiver ce prospect ?"><input type="hidden" name="_token"><button><i class="ti ti-archive is-muted"></i>Archiver</button></form>
                </div>
            </section>

            <section class="prospect-side-card prospect-pipeline">
                <header><span class="is-green"><i class="ti ti-chart-line"></i></span><div><h2>Pipeline</h2><p>{{ view.period_label }}</p></div></header>
                <div>{% for status,label in view.statuses|slice(0,5) %}<article><p><span class="{{ status_classes[status] }}"><i></i>{{ label }}</span><b>{{ view.kanban[status]|length }}</b></p><div><i class="{{ status_classes[status] }}" style="width:{{ (view.kanban[status]|length / view.pipeline_max * 100)|round }}%"></i></div></article>{% endfor %}</div>
            </section>
        </aside>
    </div>

    <dialog class="prospect-import" data-commercial-prospect-index-target="importDialog">
        <form method="dialog"><button class="prospect-import__close"><i class="ti ti-x"></i></button></form>
        <form method="post" enctype="multipart/form-data" action="{{ path('commercial_prospect_import') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('prospect_import') }}">
            <span><i class="ti ti-file-import"></i></span><h2>Importer des prospects</h2>
            <p>Importez un fichier CSV contenant vos prospects. Les lignes valides seront ajoutées au pipeline.</p>
            <input name="prospects_file" type="file" accept=".csv,text/csv" required data-commercial-prospect-index-target="importFile" data-action="change->commercial-prospect-index#previewImport">
            <small data-commercial-prospect-index-target="importFeedback">Format attendu : nom, type, email, téléphone, ville, SIRET, source.</small>
            <button class="prospect-btn is-primary" type="submit" disabled data-commercial-prospect-index-target="importSubmit">Importer le fichier</button>
        </form>
    </dialog>
</div>
{% endblock %}