{% extends '@Commercial/commercial/layout.html.twig' %}
{% block commercial_title %}{{ prospect.nom }}{% endblock %}
{% block commercial_content %}
{% set status_tones = {new:'neutral',contacted:'blue',qualified:'purple',quote:'amber',negotiation:'orange',won:'green',lost:'red'} %}
{% set quote_tones = {draft:'neutral',ready:'blue',sent:'amber',viewed:'blue',accepted:'green',refused:'red',expired:'red',cancelled:'neutral'} %}
{% set resolved_client_logo = client_logo_path(prospect) %}
<div class="prospect-show" data-controller="commercial-prospect-show">
    <header class="prospect-show__hero">
        <div class="prospect-show__identity">
            <span class="prospect-show__logo">{% if resolved_client_logo %}<img src="{{ resolved_client_logo }}" alt="Logo {{ prospect.nom }}">{% else %}<i class="ti ti-building"></i>{% endif %}</span>
            <div>
                <div class="prospect-show__name">
                    <h1>{{ prospect.nom }}</h1>
                    <span class="prospect-show__type"><i class="ti {{ prospect.type == 'Particulier' ? 'ti-user' : 'ti-building' }}"></i>{{ prospect.type ?: 'Entreprise' }}</span>
                    <span class="prospect-show__status is-{{ status_tones[view.status]|default('neutral') }}"><i></i>{{ view.status_label }}</span>
                    <span class="prospect-show__kind"><i class="ti ti-users-group"></i>Prospect</span>
                    {% if prospect.categorie %}<span class="prospect-show__kind"><i class="ti ti-tag"></i>{{ prospect.categorie.nom }}</span>{% endif %}
                </div>
                <p>
                    {% if prospect.siret %}<span><i class="ti ti-cube"></i>SIRET : <b>{{ view.siret }}</b></span>{% endif %}
                    <span><i class="ti ti-map-pin-filled"></i>{{ prospect.ville ?: 'Ville non renseignée' }}{% if prospect.codePostal %}, {{ prospect.codePostal }}{% endif %}</span>
                    <span><i class="ti ti-user-filled"></i>Responsable : <b>{{ prospect.prospectOwner ? prospect.prospectOwner.prenom~' '~prospect.prospectOwner.nom : 'Non attribué' }}</b></span>
                    <span><i class="ti ti-calendar"></i>Créé le <b>{{ prospect.createdAt|date('d/m/Y') }}</b></span>
                </p>
            </div>
        </div>
        <nav>
            <a class="prospect-show__btn is-primary" href="{{ path('billing_document_new',{type:'quote',clientId:prospect.id}) }}"><i class="ti ti-file-description"></i>Créer un devis</a>
            <a class="prospect-show__btn" href="{{ path('prospection_prospect_edit',{idtoken:prospect.idtoken}) }}"><i class="ti ti-pencil"></i>Modifier</a>
            <form method="post" action="{{ path('commercial_prospect_convert',{idtoken:prospect.idtoken}) }}" data-confirm="Convertir ce prospect en client ?">
                <input type="hidden" name="_token" value="{{ csrf_token('prospect_convert_'~prospect.idtoken) }}">
                <button class="prospect-show__btn is-success"><i class="ti ti-user-check"></i>Convertir en client</button>
            </form>
            <div class="prospect-show__menu">
                <button class="prospect-show__btn is-icon" type="button" data-action="commercial-prospect-show#toggleMenu"><i class="ti ti-dots-vertical"></i></button>
                <div hidden data-commercial-prospect-show-target="menu">
                    <a href="mailto:{{ prospect.email }}"><i class="ti ti-mail"></i> Envoyer un email</a>
                    <a href="{{ path('prospection_prospect_activity_new',{idtoken:prospect.idtoken}) }}" data-turbo-frame="frame_modal"><i class="ti ti-calendar-plus"></i> Planifier une activité</a>
                    <form method="post" action="{{ path('commercial_prospect_archive',{idtoken:prospect.idtoken}) }}" data-confirm="Archiver ce prospect ?"><input type="hidden" name="_token" value="{{ csrf_token('prospect_archive_'~prospect.idtoken) }}"><button><i class="ti ti-archive"></i> Archiver</button></form>
                </div>
            </div>
        </nav>
    </header>

    <section class="prospect-show__kpis">
        <article><div><i class="ti ti-file-description"></i><em>Total</em></div><strong>{{ view.quote_count }}</strong><p>Devis créés</p></article>
        <article><div><i class="ti ti-currency-euro is-green"></i><em class="is-green">TTC</em></div><strong>{{ view.latest_quote_total|number_format(0,',',' ') }} €</strong><p>Montant devis</p></article>
        <article><div><i class="ti ti-clock is-blue"></i><em class="is-blue">Récent</em></div><strong class="is-date">{{ view.last_activity }}</strong><p>Dernière activité</p></article>
        <article class="is-probability"><div><i class="ti ti-chart-pie-filled is-amber"></i><em class="is-amber">Estimée</em></div><strong>{{ view.probability }}%</strong><p>Probabilité</p></article>
        <article class="is-current"><i class="ti ti-users-group"></i><strong><i></i>{{ view.status_label }}</strong><p>Statut actuel</p></article>
    </section>

    <section class="prospect-show__workspace">
        <nav class="prospect-show__tabs" aria-label="Sections de la fiche">
            <button class="is-active" type="button" data-tab="overview" data-action="commercial-prospect-show#selectTab"><i class="ti ti-layout-columns"></i>Vue d’ensemble</button>
            <button type="button" data-tab="quotes" data-action="commercial-prospect-show#selectTab"><i class="ti ti-file-description"></i>Devis <span>{{ view.quote_count }}</span></button>
            <button type="button" data-tab="activity" data-action="commercial-prospect-show#selectTab"><i class="ti ti-timeline"></i>Activité <span>{{ view.activity_count }}</span></button>
            <button type="button" data-tab="notes" data-action="commercial-prospect-show#selectTab"><i class="ti ti-message"></i>Notes</button>
            <button type="button" data-tab="conversion" data-action="commercial-prospect-show#selectTab"><i class="ti ti-arrows-exchange"></i>Conversion</button>
        </nav>

        <div class="prospect-show__pane" data-commercial-prospect-show-target="pane" data-pane="overview">
            <div class="prospect-show__columns">
                <main>
                    <section class="prospect-detail-card">
                        <header><span><i class="ti ti-info-circle-filled"></i></span><h2>Informations</h2></header>
                        <dl class="prospect-info-grid">
                            <div><dt>Type</dt><dd><span class="prospect-show__type"><i class="ti ti-building"></i>{{ prospect.type ?: 'Entreprise' }}</span></dd></div>
                            <div><dt>Raison sociale</dt><dd><b>{{ prospect.nom }}</b></dd></div>
                            <div><dt>Catégorie commerciale</dt><dd>{{ prospect.categorie ? prospect.categorie.nom : '—' }}</dd></div>
                            <div><dt>Forme juridique</dt><dd>{{ prospect.formeJuridique ? prospect.formeJuridique.nom : '—' }}</dd></div>
                            <div><dt>SIRET</dt><dd class="is-mono">{{ view.siret ?: '—' }}</dd></div>
                            <div><dt>SIREN</dt><dd class="is-mono">{{ view.siren ?: '—' }}</dd></div>
                            <div><dt>Code NAF</dt><dd>{{ prospect.codeNaf ?: '—' }}</dd></div>
                            <div class="is-wide"><dt>Adresse</dt><dd><i class="ti ti-map-pin-filled"></i> {{ prospect.adresse ?: '—' }}{% if prospect.codePostal or prospect.ville %}, {{ prospect.codePostal }} {{ prospect.ville }}{% endif %}{% if prospect.pays %}, {{ prospect.pays }}{% endif %}</dd></div>
                            <div><dt>Email</dt><dd><a href="mailto:{{ prospect.email }}"><i class="ti ti-mail"></i>{{ prospect.email }}</a></dd></div>
                            <div><dt>Téléphone</dt><dd>{% if view.telephone %}<a href="tel:{{ view.telephone|replace({' ':''}) }}"><i class="ti ti-phone-filled"></i>{{ view.telephone }}</a>{% else %}—{% endif %}</dd></div>
                        </dl>
                    </section>

                    <section class="prospect-detail-card">
                        <header><span class="is-amber"><i class="ti ti-chart-line"></i></span><h2>Suivi commercial</h2></header>
                        <dl class="prospect-info-grid">
                            <div><dt>Source</dt><dd><span class="prospect-show__source"><i class="ti ti-users-group"></i>{{ prospect.prospectSource ?: 'Non renseignée' }}</span></dd></div>
                            <div><dt>Responsable</dt><dd>{% if prospect.prospectOwner %}<span class="prospect-show__owner"><img src="{{ user_avatar_url(prospect.prospectOwner) }}" alt=""><b>{{ prospect.prospectOwner.prenom }} {{ prospect.prospectOwner.nom }}</b></span>{% else %}—{% endif %}</dd></div>
                            <div><dt>Statut</dt><dd><span class="prospect-show__status is-{{ status_tones[view.status]|default('neutral') }}"><i></i>{{ view.status_label }}</span></dd></div>
                            <div><dt>Date de création</dt><dd><i class="ti ti-calendar"></i>{{ view.created_date }}</dd></div>
                            <div><dt>Dernière relance</dt><dd>{% if view.last_completed %}<i class="ti ti-bell-filled text-warning"></i>{{ view.last_completed.scheduledAt|date('d/m/Y') }}{% else %}—{% endif %}</dd></div>
                            <div><dt>Prochaine relance</dt><dd class="is-next">{% if view.next_planned %}<i class="ti ti-clock-filled"></i>{{ view.next_planned.scheduledAt|date('d/m/Y H:i') }}{% else %}Aucune planifiée{% endif %}</dd></div>
                        </dl>
                    </section>

                    {% include '@Commercial/commercial/prospect/_contacts_card.html.twig' with {prospect:prospect, view:view} only %}

                    {% include '@Commercial/commercial/prospect/_quotes_card.html.twig' with {prospect:prospect, view:view, quote_tones:quote_tones} only %}
                </main>

                <aside>
                    {% include '@Commercial/commercial/prospect/_show_sidebar.html.twig' with {prospect:prospect, view:view} only %}
                </aside>
            </div>
        </div>

        <div class="prospect-show__pane" hidden data-commercial-prospect-show-target="pane" data-pane="quotes">
            {% include '@Commercial/commercial/prospect/_quotes_card.html.twig' with {prospect:prospect, view:view, quote_tones:quote_tones} only %}
        </div>

        <div class="prospect-show__pane" hidden data-commercial-prospect-show-target="pane" data-pane="activity">
            <section class="prospect-detail-card">
                <header><span class="is-blue"><i class="ti ti-timeline"></i></span><div><h2>Activité commerciale</h2><p>{{ view.activity_count }} activité{{ view.activity_count > 1 ? 's' }}</p></div><a href="{{ path('prospection_prospect_activity_new',{idtoken:prospect.idtoken}) }}" data-turbo-frame="frame_modal"><i class="ti ti-plus"></i>Nouvelle activité</a></header>
                {% include '@Prospection/prospection/prospect/_activity_table.html.twig' with {prospect:prospect, activities:view.activities} only %}
            </section>
        </div>

        <div class="prospect-show__pane" hidden data-commercial-prospect-show-target="pane" data-pane="notes">
            <section class="prospect-detail-card prospect-show__notes"><header><span><i class="ti ti-message"></i></span><h2>Notes commerciales</h2><a href="{{ path('prospection_prospect_edit',{idtoken:prospect.idtoken}) }}"><i class="ti ti-pencil"></i>Modifier</a></header><p>{{ prospect.notesCommerciales ? prospect.notesCommerciales|nl2br : 'Aucune note commerciale pour ce prospect.' }}</p></section>
        </div>

        <div class="prospect-show__pane" hidden data-commercial-prospect-show-target="pane" data-pane="conversion">
            <section class="prospect-conversion">
                <span><i class="ti ti-user-check"></i></span><h2>Convertir {{ prospect.nom }} en client</h2>
                <p>Les devis, contacts, activités et notes seront intégralement conservés. Le prospect apparaîtra ensuite dans votre portefeuille clients.</p>
                <form method="post" action="{{ path('commercial_prospect_convert',{idtoken:prospect.idtoken}) }}" data-confirm="Confirmer la conversion en client ?"><input type="hidden" name="_token" value="{{ csrf_token('prospect_convert_'~prospect.idtoken) }}"><button class="prospect-show__btn is-success"><i class="ti ti-user-check"></i>Convertir en client maintenant</button></form>
            </section>
        </div>
    </section>
</div>
{% endblock %}