{#
  Variables
    - lead
    - events
#}
{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}lead{% endblock %}

{% set isAnonymous = lead.isAnonymous %}
{% set leadName = lead.isAnonymous ? lead.primaryIdentifier|trans : lead.primaryIdentifier %}
{% set avatar %}
  {% if not isAnonymous %}
    <span class="pull-left img-wrapper img-rounded mr-10" style="width:33px"><img src="{{ leadGetAvatar(lead) }}" alt="" /></span>
  {% endif %}
{% endset %}

{% set flag = fields.core.country.value is not null ? assetGetCountryFlag(fields.core.country.value) : '' %}
{% set groups = fields|keys %}

{% block headerTitle %}
  {{ avatar }}<div class="pull-left mt-5"><span class="span-block">{{ leadName|purify }}</span><span class="span-block small ml-sm">
    {{ lead.secondaryIdentifier|purify }}</span></div>
{% endblock %}

{% block actions %}
    {% set canEdit = securityHasEntityAccess(permissions['lead:leads:editown'], permissions['lead:leads:editother'], lead.permissionUser) %}
    {% set buttons = [] %}

    {# Send email button #}
    {% if fields.core.email.value is not empty %}
      {% set buttons = buttons|merge([{
          'attr': {
              'id': 'sendEmailButton',
              'data-toggle': 'ajaxmodal',
              'data-target': '#MauticSharedModal',
              'data-header': 'mautic.lead.email.send_email.header'|trans({'%email%': fields.core.email.value}),
              'href': path('mautic_contact_action', {'objectId': lead.id, 'objectAction': 'email'}),
          },
          'btnText': 'mautic.lead.email.send_email'|trans,
          'iconClass': 'fa fa-send',
          'primary': true,
      }]) %}
    {% endif %}

    {# View Contact Frequency button #}
    {% if canEdit %}
      {% set buttons = buttons|merge([{
          'attr': {
              'data-toggle': 'ajaxmodal',
              'data-target': '#MauticSharedModal',
              'data-header': 'mautic.lead.lead.header.contact.frequency'|trans({'%name%': lead.primaryIdentifier|e}),
              'href': path('mautic_contact_action', {'objectId': lead.id, 'objectAction': 'contactFrequency'}),
          },
          'btnText': 'mautic.lead.contact.frequency'|trans,
          'iconClass': 'fa fa-signal',
      }]) %}
    {% endif %}

    {# View Campaigns List button #}
    {% if securityIsGranted('campaign:campaigns:edit') %}
      {% set buttons = buttons|merge([{
            'attr': {
                'data-toggle': 'ajaxmodal',
                'data-target': '#MauticSharedModal',
                'data-header': 'mautic.lead.lead.header.campaigns'|trans({'%name%': lead.primaryIdentifier|e}),
                'data-footer': 'false',
                'href': path('mautic_contact_action', {'objectId': lead.id, 'objectAction': 'campaign'}),
            },
            'btnText': 'mautic.campaign.campaigns'|trans,
            'iconClass': 'fa fa-clock-o',
      }]) %}
    {% endif %}

    {# Merge button #}
    {% if securityHasEntityAccess(permissions['lead:leads:deleteown'], permissions['lead:leads:deleteother'], lead.permissionUser) and canEdit %}
        {% set buttons = buttons|merge([{
            'attr': {
                'data-toggle': 'ajaxmodal',
                'data-target': '#MauticSharedModal',
                'data-header': 'mautic.lead.lead.header.merge'|trans({'%name%': lead.primaryIdentifier|e}),
                'href': path('mautic_contact_action', {'objectId': lead.id, 'objectAction': 'merge'}),
            },
            'btnText': 'mautic.lead.merge'|trans,
            'iconClass': 'fa fa-user',
        }]) %}
    {% endif %}

    {# Download button #}
    {% if securityHasEntityAccess(permissions['lead:leads:viewown'], permissions['lead:leads:viewother'], lead.permissionUser) %}
        {% set buttons = buttons|merge([{
            'attr': {
                'data-toggle': 'download',
                'href': path('mautic_contact_export_action', {'contactId': lead.id}),
            },
            'btnText': 'mautic.core.export'|trans,
            'iconClass': 'fa fa-download',
        }]) %}
    {% endif %}

    {{ include('@MauticCore/Helper/page_actions.html.twig', {
            'item': lead,
            'routeBase': 'contact',
            'langVar': 'lead.lead',
            'customButtons': buttons,
            'templateButtons': {
                'edit': canEdit,
                'delete': securityHasEntityAccess(
                    permissions['lead:leads:deleteown'],
                    permissions['lead:leads:deleteother'],
                    lead.permissionUser
                ),
                'close': securityHasEntityAccess(
                    permissions['lead:leads:viewown'],
                    permissions['lead:leads:viewother'],
                    lead.permissionUser
                ),
            },
    }) }}
{% endblock %}

{% block content %}
<!-- start: box layout -->
<div class="box-layout">
    <!-- left section -->
    <div class="col-md-9 bg-white height-auto">
        <div class="bg-auto">
            <!--/ lead detail header -->

            <!-- lead detail collapseable -->
            <div class="collapse" id="lead-details">
                <ul class="pt-md nav nav-tabs pr-md pl-md" role="tablist">
                    {% for g in groups %}
                        {% if fields[g] is not empty %}
                            <li class="{% if loop.first %}active{% endif %}">
                                <a href="#{{ g }}" class="group" data-toggle="tab">
                                    {{ ('mautic.lead.field.group.'~g)|trans }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% if devices %}
                        <li>
                            <a href="#devices" class="group" data-toggle="tab">{{ 'mautic.lead.devices'|trans }}</a>
                        </li>
                    {% endif %}
                    <li>
                        <a href="#lead-stats" class="group" data-toggle="tab">{{ 'mautic.lead.stats'|trans }}</a>
                    </li>
                </ul>

                <!-- start: tab-content -->
                <div class="tab-content pa-md bg-white">
                    {% for group in groups %}
                        <div class="tab-pane fade {% if loop.first %}in active{% endif %} bdr-w-0" id="{{ group }}">
                            <div class="pr-md pl-md pb-md">
                                <div class="panel shd-none mb-0">
                                    <table class="table table-bordered table-striped mb-0">
                                        <tbody>
                                        {% if 'core' == group %}
                                          {{ include('@MauticCore/Helper/details.html.twig', {'entity': lead}) }}
                                        {% endif %}
                                        {% for field in fields[group] %}
                                            {% if field.value is not empty %}
                                                <tr>
                                                    <td width="20%"><span class="fw-b textTitle">{{ field.label|purify }}</span></td>
                                                    <td>
                                                        {% if 'core' == group and 'country' == field.alias and flag is not empty %}
                                                            <img class="mr-sm" src="{{ flag }}" alt="" style="max-height: 24px;"/>
                                                            <span class="mt-1">{{ field.value|purify }}</span>
                                                        {% else %}
                                                            {% if 'multiselect' == field.type %}
                                                                {% if field.value is iterable %}
                                                                    {{ field.value|join(', ') }}
                                                                {% else %}
                                                                    {{ field.normalizedValue|purify|replace({'|': ', '}) }}
                                                                {% endif %}
                                                            {% elseif 'url' == field.type %}
                                                                <a href="{{ field.value|purify }}" target="_blank">{{ field.value }}</a>
                                                            {% elseif 'datetime' == field.type %}
                                                                {{ dateToFullConcat(field.value, 'UTC') }}
                                                            {% else %}
                                                                {{ field.normalizedValue|purify }}
                                                            {% endif %}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    {% if devices %}
                        <div class="tab-pane fade bdr-w-0" id="devices">
                            {{ include('@MauticLead/Lead/_devices.html.twig', {'devices': devices}) }}
                        </div>
                    {% endif %}
                    <div class="tab-pane fade bdr-w-0" id="lead-stats" data-target-url="{{ path('mautic_contact_stats', {'objectId': lead.id}) }}">
                        <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                    </div>
                </div>
            </div>
            <!--/ lead detail collapseable -->
        </div>

        <div class="bg-auto bg-dark-xs">
            <!-- lead detail collapseable toggler -->
            <div class="hr-expand nm">
                <span data-toggle="tooltip" title="{{ 'mautic.core.details'|trans }}">
                    <a href="javascript:void(0)" class="arrow text-muted collapsed" data-toggle="collapse" data-target="#lead-details">
                       <span class="caret"></span>
                       {{ 'mautic.core.details'|trans }}
                    </a>
                </span>
            </div>
            <!--/ lead detail collapseable toggler -->

            {% if not isAnonymous %}
                <div class="pa-md">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="panel">
                                <div class="panel-body box-layout">
                                    <div class="col-xs-8 va-m">
                                        <h5 class="text-white dark-md fw-sb mb-xs">{{ 'mautic.lead.field.header.engagements'|trans }}</h5>
                                    </div>
                                    <div class="col-xs-4 va-t text-right">
                                        <h3 class="text-white dark-sm"><span class="fa fa-eye"></span></h3>
                                    </div>
                                </div>
                                {{ include('@MauticCore/Helper/chart.html.twig', {'chartData': engagementData, 'chartType': 'line', 'chartHeight': 250}) }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <!-- tabs controls -->
            <ul class="nav nav-tabs pr-md pl-md mt-10">
                <li class="active">
                    <a href="#timeline-container" role="tab" data-toggle="tab">
                        <span class="label label-primary mr-sm" id="TimelineCount">
                            {{ events.total }}
                        </span>
                        {{ 'mautic.lead.lead.tab.history'|trans }}
                    </a>
                </li>
                <li class="">
                    <a href="#notes-container" role="tab" data-toggle="tab">
                        <span class="label label-primary mr-sm" id="NoteCount">
                            {{ noteCount }}
                        </span>
                        {{ 'mautic.lead.lead.tab.notes'|trans }}
                    </a>
                </li>
                {% if not isAnonymous %}
                    <li class="">
                        <a href="#social-container" role="tab" data-toggle="tab">
                        <span class="label label-primary mr-sm" id="SocialCount">
                            {{ socialProfiles|length }}
                        </span>
                            {{ 'mautic.lead.lead.tab.social'|trans }}
                        </a>
                    </li>
                {% endif %}
                <li class="">
                    <a href="#integration-container" role="tab" data-toggle="tab">
                    <span class="label label-primary mr-sm" id="IntegrationCount">
                        {{ integrations|length }}
                    </span>
                        {{ 'mautic.lead.lead.tab.integration'|trans }}
                    </a>
                </li>
                <li class="">
                    <a href="#auditlog-container" role="tab" data-toggle="tab">
                    <span class="label label-primary mr-sm" id="AuditLogCount">
                        {{ auditlog.total }}
                    </span>
                        {{ 'mautic.lead.lead.tab.auditlog'|trans }}
                    </a>
                </li>
                {% if places %}
                    <li class="">
                        <a href="#place-container" role="tab" data-toggle="tab" id="load-lead-map">
                        <span class="label label-primary mr-sm" id="PlaceCount">
                            {{ places|length }}
                        </span>
                            {{ 'mautic.lead.lead.tab.places'|trans }}
                        </a>
                    </li>
                {% endif %}
                {{ customContent('tabs', mauticTemplateVars|default([])) }}
            </ul>
            <!--/ tabs controls -->
        </div>

        <!-- start: tab-content -->
        <div class="tab-content pa-md">
            <!-- #history-container -->
            <div class="tab-pane fade in active bdr-w-0" id="timeline-container">
                {{ include('@MauticLead/Timeline/list.html.twig', {'events': events, 'lead': lead}) }}
            </div>
            <!--/ #history-container -->

            <!-- #notes-container -->
            <div class="tab-pane fade bdr-w-0" id="notes-container">
                {{ render(controller('Mautic\\LeadBundle\\Controller\\NoteController::indexAction', {'leadId': lead.id, 'ignoreAjax': 1})) }}
            </div>
            <!--/ #notes-container -->

            <!-- #social-container -->
            {% if not isAnonymous %}
                <div class="tab-pane fade bdr-w-0" id="social-container">
                    {{ include('@MauticLead/Social/index.html.twig', {
                        'lead': lead,
                        'socialProfiles': socialProfiles,
                        'socialProfileUrls': socialProfileUrls,
                    }) }}
                </div>
            {% endif %}
            <!--/ #social-container -->

            <!-- #integration-container -->
            <div class="tab-pane fade bdr-w-0" id="integration-container">
                {{ include('@MauticLead/Integration/index.html.twig', {
                     'lead': lead,
                     'integrations': integrations,
                }) }}
            </div>
            <!--/ #integration-container -->

            <!-- #auditlog-container -->
            <div class="tab-pane fade bdr-w-0" id="auditlog-container">
                {{ include('@MauticLead/Auditlog/_list.html.twig', {
                      'lead': lead,
                      'events': auditlog,
                }) }}
            </div>
            <!--/ #auditlog-container -->

            <!-- custom content -->
            {{ customContent('tabs.content', mauticTemplateVars|default([])) }}
            <!-- end: custom content -->

            <!-- #place-container -->
            {% if places %}
                <div class="tab-pane fade bdr-w-0" id="place-container">
                    {{ include('@MauticLead/Lead/_map.html.twig', {'places': places}) }}
                </div>
            {% endif %}
            <!--/ #place-container -->
        </div>
        <!--/ end: tab-content -->
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-3 bg-white bdr-l height-auto">
        <!-- form HTML -->
        <div class="panel bg-transparent shd-none bdr-rds-0 bdr-w-0 mb-0">
            {% if not lead.isAnonymous %}
                <div class="lead-avatar-panel">
                    <div class="avatar-collapser hr-expand nm">
                        <a href="javascript:void(0)"
                            class="arrow text-muted text-center {% if 'expanded' != avatarPanelState %}collapsed{% endif %}"
                            data-toggle="collapse"
                            data-target="#lead-avatar-block">
                            <span class="caret"></span>
                        </a>
                    </div>
                    <div class="collapse {% if 'expanded' == avatarPanelState %}in{% endif %}" id="lead-avatar-block">
                        <img class="img-responsive" src="{{ leadGetAvatar(lead) }}" alt="{{ leadName|e }}"/>
                    </div>
                </div>
            {% endif %}
            <div class="mt-sm points-panel text-center">
                <h1 style="{% if lead.color is not empty %}font-color:{{ lead.color }} !important;{% endif %}">
                    {{ 'mautic.lead.points.count'|trans({'%count%': lead.points}) }}
                </h1>
                <hr/>
                {% if lead.stage %}
                    {{ lead.stage.name|purify }}<hr>
                {% endif %}
            </div>

            {% if lead.groupScores is not empty %}
                <div class="panel-heading">
                    <div class="panel-title">
                        {{ 'mautic.lead.groups.panel.title'|trans }}
                    </div>
                </div>

                <div class="panel-body pt-sm group-points-panel">
                    {% for groupScore in lead.groupScores %}
                        <div class="row">
                            <h6 class="fw-sb col-md-6">
                                {{ groupScore.group.name }}
                            </h6>
                            <p class="text-muted col-md-6">
                                {{ 'mautic.lead.points.count'|trans({'%count%': groupScore.score}) }}
                            </p>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            {% if doNotContact %}
                {{ include('@MauticLead/Lead/_dnc_large.html.twig', {'doNotContact': doNotContact}) }}
            {% endif %}
            {% if doNotContactSms %}
                {{ include('@MauticLead/Lead/_dnc_large.html.twig', {'doNotContact': doNotContactSms}) }}
            {% endif %}
            <div class="panel-heading">
                <div class="panel-title">
                    {{ 'mautic.lead.field.header.contact'|trans }}
                </div>
            </div>
            <div class="panel-body pt-sm">
            {% if lead.owner %}
                <h6 class="fw-sb">{{ 'mautic.lead.lead.field.owner'|trans }}</h6>
                <p class="text-muted">{{ lead.owner.name|purify }}</p>
            {% endif %}

                <h6 class="fw-sb">
                    {{ 'mautic.lead.field.address'|trans }}
                </h6>
                <address class="text-muted">
                    {% if fields.core.address1 is defined %}{{ fields.core.address1.value|purify }}<br>{% endif %}
                    {% if fields.core.address2.value is not empty %}{{ fields.core.address2.value|purify }}<br>{% endif %}
                    {{ lead.location|purify }}
                    {% if fields.core.zipcode is defined %}{{ fields.core.zipcode.value|purify }}{% endif %}
                    <br>
                </address>

                <h6 class="fw-sb">{{ 'mautic.core.type.email'|trans }}</h6>
                <p class="text-muted">{{ fields.core.email.value|purify }}</p>

                {% if fields.core.phone is defined %}
                    <h6 class="fw-sb">{{ 'mautic.lead.field.type.tel.home'|trans }}</h6>
                    <p class="text-muted">{{ fields.core.phone.value|purify }}</p>
                {% endif %}

                {% if fields.core.mobile is defined %}
                    <h6 class="fw-sb">{{ 'mautic.lead.field.type.tel.mobile'|trans }}</h6>
                    <p class="text-muted mb-0">{{ fields.core.mobile.value|purify }}</p>
                {% endif %}
            </div>
        </div>
        <!--/ form HTML -->

        {% if upcomingEvents %}
            <hr class="hr-w-2" style="width:50%">

            <div class="panel bg-transparent shd-none bdr-rds-0 bdr-w-0">
                <div class="panel-heading">
                    <div class="panel-title">{{ 'mautic.lead.lead.upcoming.events'|trans }}</div>
                </div>
                <div class="panel-body pt-sm">
                    <ul class="media-list media-list-feed">
                        {% for event in upcomingEvents %}
                            {% set metadata = serializerDecode(event.metadata) %}
                            {% set errors = false %}
                            {% if metadata.errors is defined and metadata.errors is not empty %}
                                {% set errors = metadata.errors is iterable ? metadata.errors|join('<br/>') : metadata.errors %}
                            {% endif %}
                            <li class="media">
                                <div class="media-object pull-left mt-xs">
                                    <span class="figure"></span>
                                </div>
                                <div class="media-body">
                                    {{ 'mautic.lead.lead.upcoming.event.triggered.at'|trans({
                                          '%event%': event.event_name,
                                          '%link%': '<a href="'~path('mautic_campaign_action', {'objectAction': 'view', 'objectId': event.campaign_id})~'" data-toggle="ajax">'~event.campaign_name~'</a>',
                                    })|purify }}
                                    {% if errors is not empty %}
                                      <i class="fa fa-warning text-danger" data-toggle="tooltip" title="{{ errors|purify }}"></i>
                                    {% endif %}
                                    <p class="fs-12 dark-sm timeline-campaign-event-date-{{ event.event_id }}">
                                      {{ dateToFull(event.trigger_date, 'utc') }}
                                    </p>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}
        <div class="pa-sm">
            {% for tag in lead.tags %}
                <h5 class="pull-left mt-xs mr-xs">
                    <span class="label label-success label-tag">
                        <a href="{{ path('mautic_tagmanager_action', {'objectAction': 'view', 'objectId': tag.id}) }}" data-toggle="ajax" style="color: white;">
                             {{ tag.tag|purify }}
                        </a>
                    </span>
                </h5>
            {% endfor %}
            <div class="clearfix"></div>
        </div>
        <div class="pa-sm panel-companies">
            <div class="panel-title">
                {{ 'mautic.lead.lead.companies'|trans }}
            </div>
            {% for key, company in companies %}
            <h5 class="pull-left mt-xs mr-xs">
                <span class="label label-success">
                    <i id="company-{{ company.id }}" class="fa fa-check {% if 1 == company.is_primary %}primary{% endif %}" onclick="Mautic.setAsPrimaryCompany({{ company.id }}, {{ lead.id }});" title="{{ 'mautic.lead.company.set.primary'|trans }}"></i>
                    <a href="{{ path('mautic_company_action', {'objectAction': 'view', 'objectId': company.id}) }}" data-toggle="ajax" style="color: white;">
                        {{ company.companyname|purify }}
                    </a>
                </span>
            </h5>
            {% endfor %}
            <div class="clearfix"></div>
        </div>
        {% if lists[lead.id] is defined %}
          <div class="pa-sm panel-segments">
            <div class="panel-title">
              {{ 'mautic.lead.lead.lists'|trans }}
            </div>
            {% for key, list in lists[lead.id] %}
              <h5 class="pull-left mt-xs mr-xs">
                  <span class="label label-success">
                      <a href="{{ path('mautic_segment_action', {'objectAction': 'view', 'objectId': list.id}) }}" data-toggle="ajax" style="color: white;">
                          {{ list.name|purify }}
                      </a>
                  </span>
              </h5>
            {% endfor %}
          {% endif %}
          <div class="clearfix"></div>
        </div>
    </div>
    <!--/ right section -->
</div>
<!--/ end: box layout -->
{% endblock %}
