{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as popup %}
{% import "forms-macro/inputs_form.html.twig" as macro %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Clients | Fiche client
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-lg-4" style="float: right">
                <button class="boutonAction {{ finalCustomer.state === 'active' ? 'current-status' : '' }}"
                        type="button" id="btn-active-status">Client actif
                </button>
                <button class="boutonAction {{ finalCustomer.state === 'old' ? 'current-status' : '' }}"
                        type="button" id="btn-old-status">Ancien client
                </button>
                <button id="btnEditDetail" class="boutonAction">
                    Modification rapide
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-5 col-lg-5">
                <p>
                    <b>{{ finalCustomer.name ~ (finalCustomer.firstname is not empty ? ' ' ~ finalCustomer.firstname : '') ~ (finalCustomer.societe is not empty ? ' - ' ~ finalCustomer.societe : '') }}</b><br>
                    Adresse de facturation : {{ finalCustomer.address.adressHumanReadable(true) }}<br>
                    Latitude / longitude : {{ finalCustomer.address.latitude ~ ' / ' ~ finalCustomer.address.longitude }}<br>
                    N° de téléphone : {{ finalCustomer.phone }}<br>
                    Email : {{ finalCustomer.email }}
                </p>
                <form id="updateFCForm" method="post">
                    <input id="inputNameFC" type="hidden" value="{{ finalCustomer.name }}" name="nameFC">
                </form>
                <button class="boutonAction" id="btnNewProject">
                    Nouvelle étude avec ce client
                </button>
            </div>
            {{ include('final_customer/_block/customer_contact.html.twig') }}
        </div>
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                {{ macro.blockNotes('Customer', path('final_customer_notes_update', {'id': finalCustomer.id}), finalCustomer.note, false, 'Notes générales du client') }}
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="container-fluid" style="padding-bottom: 0">
                    <div class="row rubrique">
                        <div class="rubrique_titre">
                            <span>Études</span>
                        </div>
                        <div style="display: flex;flex-direction: column;gap: 1rem;">
                            {% if projects is empty %}
                                <p style="text-align:center;padding: 1rem;">Aucune étude disponible pour ce client</p>
                            {% else %}
                                {% for project in projects %}
                                    <div class="block-project">
                                        <div class="container-project-infos">
                                            <p>
                                                <b class="orange">N° {{ project.id }}</b><br>
                                                <b>{{ project.createdAt|date('d/m/Y') }}</b>
                                            </p>
                                            <p>
                                                <b>
                                                    Nom du projet :<br>
                                                    {{ project.projectName }}
                                                </b>
                                            </p>
                                            <p>
                                                Adresse d'installation :<br>
                                                {{ project.defaultAddress.adressHumanReadable|replace({',': '<br>'})|raw }}
                                            </p>
                                            <a href="{{ path('project_edit', {'id': project.id}) }}" class="boutonAction"
                                               style="display: block;width:fit-content;padding: .8rem 2rem;margin:2rem 0 0 0;" >Accéder</a>
                                        </div>
                                        <div style="flex: 1;">
                                            <div class="container-services-reports">
                                                <div>
                                                    {% for slug,service in services[project.id] %}
                                                        {% if service.done %}
                                                            <div>
                                                                <div class="container-service-image">
                                                                    <img alt="Image {{ slug }}"
                                                                         src="{{ asset('install-bois/reports/icon/' ~ ('_wet' in slug ? slug|replace({'_wet': ''}) : slug) ~ '.png') }}"
                                                                         style="{{ service.done ? '' : 'filter: grayscale(1);' }}">
                                                                    <span class="check" aria-hidden="true">
                                                                        <i style="font-size: 8px;" class="fas fa-check"></i>
                                                                    </span>
                                                                </div>
                                                                <span>{{ service.label }} : <span class="info-service">{{ service.info }}</span></span>
                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                                <div style="display: flex;flex-direction: column;gap: 1rem;">
    {#                                                @TODO add scroll bar + fixed height if too much reports#}
                                                    {% if services[project.id]['moninstallation']['done'] %}
                                                        {% if services[project.id]['rtp']['done'] %}
                                                            {{ macro.rowReport('Rapport client', services[project.id]['rtp']['done'] and services[project.id]['moninstallation']['done'], project.id) }}
                                                            {{ macro.rowReport('Rapport installateur', services[project.id]['rtp']['done'] and services[project.id]['moninstallation']['done'], project.id) }}
                                                        {% endif %}
                                                        {{ macro.rowReport('Rapport audit expertise', services[project.id]['moninstallation']['done'], project.id) }}
                                                    {% endif %}
                                                    {% if services[project.id]['deperditionthermique']['done'] %}
                                                        {{ macro.rowReport('Rapport déperditions thermiques', services[project.id]['deperditionthermique']['done'], project.id) }}
                                                    {% endif %}
                                                    {% for key,reportInfo in ramonageReports[project.id] %}
                                                        {{ macro.rowReport('Rapport ramonage '~reportInfo.date|date('d/m/Y'), services[project.id]['ramonage']['done'], project.id) }}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            <div class="container-project-notes">
                                                {{ macro.blockNotes('Project'~project.id, path('project_notes_update', {'id': project.id}), project.note, true) }}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ popup.simple_popup('danger', null, null, null, 'popup-delete-contact') }}
    {{ popup.simple_popup('info', 'Vous allez modifier les informations client pour toutes les études rattachées à ce client', null, null, 'popup-update-customer') }}
    {{ popup.popup_edit_fc_contact() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        const customerStatus = "{{ finalCustomer.state }}";
        const customerId = "{{ finalCustomer.id }}";

        $(document).ready(function () {
            $('#btnEditDetail').on('click', function () {
                if (!isDemo) {
                    $('#popup-update-customer').modal('show');
                }
            });

            $('#popup-update-customer #boutonOui').on('click', function () {
                window.location.href = "{{ path('final_customer_update', { 'id': finalCustomer.id }) }}";
            });


            $('#btnNewProject').on('click', function () {
                $('#updateFCForm').prop('action', '{{ path('final_customer_update', {'id': finalCustomer.id}) }}').submit();
            });

            $('#btn-old-status, #btn-active-status').on('click', function () {
                const isActive = $(this).attr('id').includes('active');
                let newState;
                if (customerStatus !== 'active' && isActive) {
                    newState = 'active';
                } else if (customerStatus === 'active' && !isActive) {
                    newState = 'old';
                }
                if (newState != null) {
                    $.ajax({
                        url: '{{ path('final_customer_bulk_state_change') }}',
                        type: "POST",
                        dataType: "JSON",
                        data: JSON.stringify({
                            customerIds: [customerId],
                            state: newState
                        }),
                        success: function (res) {
                            if (res.status === 'success') {
                                if (newState === 'active') {
                                    $("#btn-active-status").addClass('current-status');
                                    $("#btn-old-status").removeClass('current-status');
                                } else {
                                    $("#btn-active-status").removeClass('current-status');
                                    $("#btn-old-status").addClass('current-status');
                                }
                                createToast('success', "L'état du client a été modifié avec succès");
                            } else {
                                console.log(res.message);
                                createToast("error", "Une erreur s'est produite. Veuillez réssayer plus tard.")
                            }
                        },
                        error: function (res) {
                            console.log(res.message);
                            createToast("error", "Une erreur s'est produite. Veuillez réssayer plus tard.")
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}