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

{% block title %} {% trans %}COSAP - Opportunités CRM{% endtrans %} {% endblock %}

{% block body %}
    {{ parent() }}

    <link href="{{ asset('template/assets/css/organigrammeCRM.css') }}" rel="stylesheet">

    <style type="text/css">

        #btn-choix {
            border-radius: 6px;
            height: 30px;
            width: 99px;
        }

        .nav-choix li.nav-item {
            background: #0c4a6e;  
        }

        .nav-choix li a.nav-link.active { 
            background: #8ecbdd; 
            height: 100%;
            width: 100%
        }

        .nav-choix li.active { 
            box-shadow: 0px 0px 10px #8ecbdd;
            height: 100%;
            width: 100%;
            -webkit-animation-name: clignote_choix; 
            -webkit-animation-duration: 2s; 
            -webkit-animation-iteration-count: infinite; 
        }

        @-webkit-keyframes clignote_choix {
            0% {box-shadow: 0px 0px 10px #8ecbdd;}
            50% {box-shadow: 0px 0px 0px #8ecbdd;}
            100% {box-shadow: 0px 0px 10px #0c4a6e;}
        }

        .nav-choix li.nav-item a.nav-link{
            color: #fff;
            font-size: 13px !important;
        }

        .opportunity-card{
            width: 100%;
            color: #000;
            text-align: center;
            height: 480px;
            border: 1px solid #8ecbdd;
            border-radius: 3px;
        }

        #opportunity-card{
            height: 500px;
            width: 100%;
            position: relative;
            border-radius: 5px;
            border: 1px solid #e2e8f0;     
        }

        #borderTopGray {
            top: 7px;
            border-top: 1px solid #e2e8f0;
            position: absolute;
            border-top-right-radius: 5px;
            left: 0;
            right: 0;
        }

        #borderLeftGray {
            border-left: 1px solid #e2e8f0;
            border-top-left-radius: 5px;
            position: absolute;
            left: 7px;
            top: 0;
            bottom: 50%;
        }

        #borderRightGray {
            position: absolute;
            border-bottom-right-radius: 5px;
            right: 7px;
            top: 50%;
            height: 50%;
            width: 50%;
            border-right: 1px solid #e2e8f0;
        }

        #borderBottomGray {
            position: absolute;
            border-bottom-left-radius: 5px;
            left: 50%;
            bottom: 7px;
            height: 0;
            width: 50%;
            border-bottom: 1px solid #e2e8f0;
        }

        #borderTop {
            border-top: 8px solid #e57112;
            position: absolute;
            border-top-right-radius: 5px;
            left: 50%;
            right: 0;
        }

        #borderLeft {
            border-left: 8px solid #24348c;
            border-bottom-left-radius: 5px;
            position: absolute;
            top: 50%;
            bottom: 0;
        }

        #borderRight {
            position: absolute;
            border-top-right-radius: 5px;
            right: 0;
            top: 0;
            height: 50%;
            width: 50%;
            border-right: 8px solid #e57112;
        }

        #borderBottom {
            position: absolute;
            border-bottom-left-radius: 5px;
            left: 0;
            bottom: 0;
            height: 0;
            width: 50%;
            border-bottom: 8px solid #24348c;
        }

        #opportunity-card .box-header {
            height:35%;
        }

        #opportunity-card .profil {
            border-radius: 10%;
            position: absolute;
            top: -35px;
            left: 50%;
            opacity: 1;
            box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
            border: 2px solid #fff;
            -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
            height: 80px;
            width: 80px;
            margin: 1px;
            object-fit: contain;
            background: #fff
        }

        #selected_opportunity {
            box-shadow: 3px 3px 30px #24348c;
            -webkit-animation-name: clignote_choix_opportunity; 
            -webkit-animation-duration: 2s; 
            -webkit-animation-iteration-count: infinite;
        }

        .selected_opportunity {
            box-shadow: 3px 3px 30px #24348c;
            -webkit-animation-name: clignote_choix_opportunity; 
            -webkit-animation-duration: 2s; 
            -webkit-animation-iteration-count: infinite;
        }

        @-webkit-keyframes clignote_choix_opportunity {
            0% {box-shadow: 0px 0px 10px gray;}
            50% {box-shadow: 0px 0px 20px #24348c;}
            100% {box-shadow: 0px 0px 20px #e57112;}
        }

        .clignote_action {
            box-shadow: 3px 3px 30px #24348c;
            -webkit-animation-name: clignote_action_opportunity; 
            -webkit-animation-duration: 1s; 
            -webkit-animation-iteration-count: infinite;
        }

        @-webkit-keyframes clignote_action_opportunity {
            0% {box-shadow: 0px 0px 10px gray;}
            50% {box-shadow: 0px 0px 20px #24348c;}
            100% {box-shadow: 0px 0px 20px #e57112;}
        }

        #opportunity-card .info-header{
            position: absolute;
            bottom: 65%;
            width: 88%;
            display: inline-block;
            font-family: 'Open Sans', Arial, sans-serif; 
            text-align: center;
        }

        .btn-action {
            position: absolute;
            top: 0%;
            left: 100%;
            -webkit-transform: translate(0%, 0%);
            transform: translate(-100%, 0%);
            background-color: transparent !important;
        }

        #borderLeftTopOrangeList {
            border-left: 10px solid #e57112;
            border-top-left-radius: 10px;
            position: absolute;
            top: 0%;
            left: 0;
            height: 25%;
        }

        #borderLeftBottomOrangeList {
            border-left: 10px solid #e57112;
            border-bottom-left-radius: 10px;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 25%;
        }

        #borderLeftBlueList {
            border-left: 10px solid #24348c;
            position: absolute;
            top: 25%;
            left: 0;
            height: 50%
        }

        article.card.opportunity-details {
            border: 1px solid #f8f9fa;
            box-shadow: 0 0 20px 0px #e57112;
            /*cursor: pointer;*/
            /* overflow: hidden;
            -webkit-transition: 0.3s all;
            -moz-transition: 0.3s all;
            -ms-transition: 0.3s all;
            -o-transition: 0.3s all;
            transition: 0.3s all;*/
        }
        article.card.opportunity-details h3 {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0;
        }
        article.card.opportunity-details ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        article.card.opportunity-details ul li {
            margin-bottom: 0.4rem;
            font-size: 14px;
        }
        article.card.opportunity-details ul li i {
            width: 18px;
        }

        article.card.opportunity-details .thumbnail {
            width: 120px;
            height: 120px;
            margin-right: 0.5rem;
            border: 1px solid #e9ecef;
        }
        article.card.opportunity-details .thumbnail:after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            right: -1px;
            bottom: -1px;
            padding: 0.35rem 0.75rem;
            border: 1px solid #e9ecef;
            background: #0000000d;
            color: #6c757d;
        }

        article.card.opportunity-details:hover {
            background: #f8f9fa;
        }
        article.card.opportunity-details:before {
            width: 200px;
            color: #fff;
            position: absolute;
            transform: rotate(-45deg);
            z-index: 1;
            text-align: center;
            padding: 0.35rem;
            top: 35px;
            left: -60px;
            font-weight: bold;
        }
        .card-body{
            box-sizing: none;
        }

    </style>

    <section class="row">
        <div class="col-12">
            <div class="card" style="height:60px;">
                <div class="card-body">
                    <div class="bug-list-search">
                        <div class="bug-list-search-content">
                            <div class="sidebar-toggle d-block d-lg-none"><i class="ft-menu font-large-1" style="line-height:0.5"></i></div>
                            <form action="#">
                                <h6 style="font-weight: 500;">
                                    {% if app.request.get('nature') == 'all' %}{% trans %}Supervision des opportunités{% endtrans %}{% else %}{% trans %}Opportunités{% endtrans %}{% endif %} <span class="badge badge badge-info mr-2"> {{ opportunites.getTotalItemCount }} </span> <!--  opportunites.getTotalItemCount  -->
                                    
                                    {% set espace = false %}
                                    
                                    <span><a class="btn btn-warning btn-sm pull-right {% if espace == true %}mr-1{% endif %}" href="{{ path('opportunity_crm_page', {nature:app.request.get('nature')}) }}" title="{% trans %}Actualiser{% endtrans %}"><i class="fa fa-refresh"></i></a></span>

                                    {% if app.user and (is_granted('ROLE_EXPORTER_XSL_OPPORTUNITY_CRM') or is_granted('ROLE_EXPORTER_XSL_OPPORTUNITY_SUPERVISION') ) and opportunites|length %}
                                        <a class="btn btn-primary btn-not-load btn-sm pull-right mr-1" href="{{ path('export_xsl_opportunity_crm',{nature:app.request.get('nature'), search_input:app.request.get('search_input'), search_statut:app.request.get('search_statut'), search_date_debut:app.request.get('search_date_debut'), search_date_fin:app.request.get('search_date_fin'), search_client:app.request.get('search_client'), search_projet:app.request.get('search_projet'), search_responsable:app.request.get('search_responsable') }) }}" title="Exporter Excel"><i class="fa fa-file-excel-o"></i></a>
                                    {% endif %}

                                    {% if app.user and is_granted('ROLE_AJOUTER_OPPORTUNITY_CRM') and app.request.get('nature') == 'mine' %}
                                        <span><a class="btn btn-success btn-sm pull-right mr-1" href="{{ path('add_opportunity_crm_page') }}" title="{% trans %}Nouvelle opportunité{% endtrans %}"><i class="fa fa-plus"></i></a></span>
                                    {% endif %}
                                </h6>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row all-contacts">
        <div class="col-12">
            <div class="card card-bottom">
                <div class="card-content">
                    <div class="card-body" style="min-height:1000px;"> 
                    
                        <ul class="nav nav-choix d-inline-flex">
                            <li class="nav-item mr-1" id="btn-choix"> <a class="btn btn-sm nav-link" id="link-show-tab1" data-toggle="tab" href="#blocs" aria-controls="blocs" role="tab" aria-selected="false" title="{% trans %}Affichage sous format des blocs{% endtrans %}"><i class="fa fa-th"></i>Blocs</a></li>
                            <li class="nav-item mr-1" id="btn-choix"><a class="btn btn-sm nav-link" id="link-show-tab2" data-toggle="tab" href="#list" aria-controls="list" role="tab" aria-selected="false" title="{% trans %}Affichage sous format d'une liste{% endtrans %}"><i class="fa fa-list"></i>Liste</a></li>
                            <li class="nav-item" id="btn-choix"><a class="btn btn-sm nav-link" id="link-show-tab3" data-toggle="tab" href="#tableau" aria-controls="tableau" role="tab" aria-selected="false" title="{% trans %}Affichage sous format d'un tableau{% endtrans %}"><i class="fa fa-table"></i>Tableau</a></li>
                        </ul>

                        <span class="float-right">

                            <a class="btn btn-sm btn-search-opportunity 
                                {% if app.request.get('search_input') is not empty or app.request.get('search_date_debut') is not empty or app.request.get('search_date_fin') is not empty or app.request.get('search_statut') is not empty or app.request.get('search_client') or app.request.get('search_projet') or app.request.get('search_responsable') %} 
                                    btn-success 
                                {% else %} btn-search {% endif %}" style="cursor:pointer;color:white;font-size:13px;"> 
                                <i class="fa fa-search"></i>  Recherche avancée
                            </a>

                        </span><!--end advanced_search -->

                        {{ include('CRM/OpportunityCRM/advanced_search/search.html.twig') }}

                        <ul class="nav nav-tabs nav-top-border no-hover-bg nav-justified mt-3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="link-tab1" data-toggle="tab" href="#opportunites" aria-controls="opportunites" role="tab" aria-selected="true">Liste des opportunités</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab2" data-toggle="tab" href="#details" aria-controls="details" role="tab" aria-selected="false">Détails</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab3" data-toggle="tab" href="#organigramme" aria-controls="organigramme" role="tab" aria-selected="false">Ordinogramme</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab4" data-toggle="tab" href="#tracability" aria-controls="tracability" role="tab" aria-selected="false">Traçabilité</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab5" data-toggle="tab" href="#montants" aria-controls="montants" role="tab" aria-selected="false">Montants</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="link-tab6" data-toggle="tab" href="#demarche" aria-controls="demarche" role="tab" aria-selected="false">Démarche à suivre</a>
                            </li>
                        </ul>

                        <div class="tab-content px-1 pt-1">
                            <div class="tab-pane active" id="opportunites" aria-labelledby="link-tab1" role="tabpanel">
                                
                                <div class="tab-content mt-2">

                                    <div class="tab-pane in" id="blocs" aria-labelledby="link-show-tab1" role="tabpanel">
                                        {{ include('CRM/OpportunityCRM/tabs/list_mode_bloc.html.twig') }} 
                                    </div>

                                    <div class="tab-pane in" id="list" aria-labelledby="link-show-tab2" role="tabpanel">
                                        {{ include('CRM/OpportunityCRM/tabs/list_mode_ligne.html.twig') }}
                                    </div>

                                    <div class="tab-pane in" id="tableau" aria-labelledby="link-show-tab3" role="tabpanel">
                                        {{ include('CRM/OpportunityCRM/tabs/list_mode_tab.html.twig') }}
                                    </div>

                                    <div class="navigation pull-right" style="margin-left:20px;margin-bottom:250px;">
                                        {{ knp_pagination_render(opportunites) }}
                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane in mt-2" id="details" aria-labelledby="active-tab2" role="tabpanel">
                               {{ include('CRM/OpportunityCRM/tabs/details.html.twig') }}
                            </div>

                            <div class="tab-pane in mt-2" id="organigramme" aria-labelledby="active-tab3" role="tabpanel">
                               {{ include('CRM/OpportunityCRM/tabs/organigramme.html.twig') }}
                            </div>

                            <div class="tab-pane in mt-2" id="tracability" aria-labelledby="active-tab4" role="tabpanel">
                               {{ include('CRM/OpportunityCRM/tabs/tracability.html.twig') }}
                            </div>

                            <div class="tab-pane in mt-2" id="montants" aria-labelledby="active-tab5" role="tabpanel">
                               {{ include('CRM/OpportunityCRM/tabs/montants.html.twig') }}
                            </div>

                            <div class="tab-pane in mt-2" id="demarche" aria-labelledby="active-tab6" role="tabpanel">
                               {{ include('CRM/OpportunityCRM/tabs/demarche.html.twig') }}
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% include('CRM/OpportunityCRM/modals/edit_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/delete_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/comment_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/manage_qualification_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/suspension_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/reactivation_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/affectation_tache_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/next_level_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/previous_level_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/reaffectation_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/finish_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/modals/relances_opportunity.html.twig') %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $('.summernote').summernote({
            lang: "fr-FR",
            height: 120
        });

        var date = new Date();

        var current_date = new Date(date.getFullYear(), date.getMonth(), date.getDate());

        $('#date_debut_search').bootstrapMaterialDatePicker({maxDate: current_date, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#date_fin_search').bootstrapMaterialDatePicker({maxDate: current_date, weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $("#clear_input").click(function(){

            $('#date_debut_search').val("");

            $('#date_fin_search').val("");

        });

        $("#new_opportunity_intervenants").select2({closeOnSelect:false});

        $('#edit_date_soumission').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#new_opportunity_date_soumission').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

    </script>

    {% include('CRM/OpportunityCRM/ajax/manage_choix_view.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_organigramme.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/delete_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_next_level.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_previous_level.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_pieces_jointes.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_montants_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_comment_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_finish_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/manage_qualification_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/suspension_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/reactivation_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/reaffectation_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/affectation_tache_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/relances_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/edit_opportunity.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/default_search.html.twig') %}
    {% include('CRM/OpportunityCRM/ajax/alert_relance.html.twig') %}

{% endblock %}