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

{% block importmap %}
    {{ importmap(['app','module', 'input','tab']) }}
{% endblock %}

{% import 'email/_module_item.html.twig' as email_item %}
{% import 'phone/_module_item.html.twig' as phone_item %}
{% import 'file/_module_item.html.twig' as file_item %}

{% set data = form.vars.data %}

{% set isEdit = isNotNull(form, ['vars', 'data', 'id']) %}



{% block title %}
    {% if isEdit %}
        Contact - {{ data.lastname }} {{ data.firstname }}
    {% else %}
        Contact - Nouveau
    {% endif %}
{% endblock %}

{% block body %}
    <a href="{{ path('app_contact_index') }}" class="btn-action">Retour à la liste</a>

    {% if isEdit %}
        <h1 class="module-title">Contact : {{ data.lastname }} {{ data.firstname }}</h1>
    {% else %}
        <h1 class="module-title">Nouveau contact</h1>
    {% endif %}



    {{ form_start(form, {'attr' : {'id' : form.vars.id}}) }}

    <div class="module-form-actions">
        <input type="submit" class="btn-action btn-save" value="Enregistrer">

        {% if isEdit %}
            <button class="btn-action btn-delete" data-targetedform="deleteform">Supprimer</button>
        {% endif %}
    </div>

    {% if isNotNull(form.vars ,['data', 'contactHighlightColor']) %}
        <div class="form-header" style="border-color: {{ form.vars.data.contactHighlightColor }}">
            {{ form.vars.data.contactHighlightLabel }}
        </div>
    {% endif %}

    {{ form_widget(form.id) }}


    <div class="module-form">
        <div class="module-form-row">
            <div class="module-form-section">
                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.customerCode) }}
                    {{ form_label(form.customerCode) }}
                </div>
                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.enterprise) }}
                    {{ form_label(form.enterprise) }}
                </div>


                <div class="module-form-input input-choice w-25-mobile-100">
                    {{ form_widget(form.contactHighlight) }}
                    {{ form_label(form.contactHighlight) }}
                </div>
                <div class="module-form-input input-choice w-25-mobile-100">
                    {{ form_widget(form.isArchive) }}
                    {{ form_label(form.isArchive) }}
                </div>

            </div>
        </div>

        <div class="module-form-row">
            <div class="module-form-section h-auto">
                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.title) }}
                    {{ form_label(form.title) }}
                </div>

                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.lastname) }}
                    {{ form_label(form.lastname) }}
                </div>

                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.firstname) }}
                    {{ form_label(form.firstname) }}
                </div>
            </div>
        </div>
        <div class="module-form-row">
            <div class="module-form-section">
                <div class="module-form-input input-text w-50-mobile-100">
                    {{ form_widget(form.address, {'attr' : {'data-autocomplete_postalcode' : form.postalCode.vars.id, 'data-autocomplete_city' : form.city.vars.id}}) }}
                    {{ form_label(form.address) }}
                </div>

                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.postalCode) }}
                    {{ form_label(form.postalCode) }}
                </div>
                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.city) }}
                    {{ form_label(form.city) }}
                </div>
            </div>
        </div>

        <div class="module-form-row">
            <div class="module-form-section">
                <div class="module-form-input input-text w-25-mobile-100" >
                    {{ form_widget(form.distance) }}
                    {{ form_label(form.distance) }}
                </div>

                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.distancePrice) }}
                    {{ form_label(form.distancePrice) }}
                </div>

                <div class="module-form-input input-text w-25-mobile-100">
                    {{ form_widget(form.duration) }}
                    {{ form_label(form.duration) }}
                </div>

                {% if isEdit is defined %}
                    <div class="w-25" style="display: flex; align-items: center; justify-content: center">
                        <button class="btn-action" id="contact_generate_distance" data-url="{{ path('app_api_distance', {id: form.vars.data.id}) }}">Calculer distance</button>

                    </div>
                {% endif %}
            </div>

        </div>

        <div class="module-form-row mobile-row-to-column">
            <div class="module-form-section flex-column">
                <div class="module-form-section-title">
                    Téléphone(s)
                </div>
                <table class=" module-form-list phones"
                       data-index="{{ form.phones|length > 0 ? form.phones|last.vars.name + 1 : 0 }}"
                       data-prototype="{{ phone_item.getRow({form: form})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                >
                    <tbody>
                    {% for phone in form.phones %}
                        {{ phone_item.getRow({phone: phone}) }}
                    {% endfor %}
                    </tbody>

                </table>
                <div class="input-list-btn flex-row flex-justify-end">
                    <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="phones">Ajouter</button>
                </div>
            </div>

            <div class="module-form-section flex-column">
                <div class="module-form-section-title">
                    Email(s)
                </div>
                <table class="module-form-list emails"
                       data-index="{{ form.emails|length > 0 ? form.emails|last.vars.name + 1 : 0 }}"
                       data-prototype="{{ email_item.getRow({form: form})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                >
                    <tbody>
                    {% for email in form.emails %}
                        {{ email_item.getRow({email: email}) }}
                    {% endfor %}
                    </tbody>

                </table>
                <div class="input-list-btn flex-row flex-justify-end">
                    <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="emails">Ajouter</button>
                </div>
            </div>


        </div>

        <div class="module-form-row">
            <div class="module-form-section h-auto">
                <div class="module-form-input input-largetext w-100">
                    {{ form_widget(form.comment) }}
                    {{ form_label(form.comment) }}
                </div>
            </div>
        </div>

        <span class="module-form-section-title mb-1">Équipements</span>
        {% include 'contact/_stuffs.html.twig' %}

        {% if isEdit %}

            <div class="module-form-row mobile-row-to-column">
                <div class="module-form-section flex-column">
                    <div class="module-form-section-title">
                        Devis
                    </div>
                    <table class="module-form-list estimateFiles"
                           data-index="{{ form.estimateFiles|length > 0 ? form.estimateFiles|last.vars.name + 1 : 0 }}"
                           data-prototype="{{ file_item.getRow({form: form, field: 'estimateFiles'})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                    >
                        <tbody>
                        {% for estimateFile in form.estimateFiles %}
                            {{ file_item.getRow({file: estimateFile}) }}
                        {% endfor %}
                        </tbody>

                    </table>
                    <div class="input-list-btn flex-row flex-justify-end">
                        <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="estimateFiles">Ajouter</button>
                    </div>
                </div>
                <div class="module-form-section flex-column">
                    <div class="module-form-section-title">
                        Facture(s)
                    </div>
                    <table class="module-form-list billFiles"
                           data-index="{{ form.billFiles|length > 0 ? form.billFiles|last.vars.name + 1 : 0 }}"
                           data-prototype="{{ file_item.getRow({form: form, field: 'billFiles'})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                    >
                        <tbody>
                        {% for billFile in form.billFiles %}
                            {{ file_item.getRow({file: billFile}) }}
                        {% endfor %}
                        </tbody>

                    </table>
                    <div class="input-list-btn flex-row flex-justify-end">
                        <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="billFiles">Ajouter</button>
                    </div>
                </div>

            </div>

            <div class="module-form-row mobile-row-to-column">
                <div class="module-form-section flex-column">
                    <div class="module-form-section-title">
                        Rapport(s)
                    </div>
                    <table class="module-form-list reportFiles"
                           data-index="{{ form.reportFiles|length > 0 ? form.reportFiles|last.vars.name + 1 : 0 }}"
                           data-prototype="{{ file_item.getRow({form: form, field: 'reportFiles'})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                    >
                        <tbody>
                        {% for reportFile in form.reportFiles %}
                            {{ file_item.getRow({file: reportFile}) }}
                        {% endfor %}
                        </tbody>

                    </table>
                    <div class="input-list-btn flex-row flex-justify-end">
                        <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="reportFiles">Ajouter</button>
                    </div>
                </div>
                <div class="module-form-section flex-column">
                    <div class="module-form-section-title">
                        Autre(s)
                    </div>
                    <table class="module-form-list otherFiles"
                           data-index="{{ form.otherFiles|length > 0 ? form.otherFiles|last.vars.name + 1 : 0 }}"
                           data-prototype="{{ file_item.getRow({form: form, field: 'otherFiles'})|e('html') }}<btn class='btn-remove-from-collection'></btn>"
                    >
                        <tbody>
                        {% for otherFile in form.otherFiles %}
                            {{ file_item.getRow({file: otherFile}) }}
                        {% endfor %}
                        </tbody>

                    </table>
                    <div class="input-list-btn flex-row flex-justify-end">
                        <button type="button" class="btn btn-action add_item_link" data-collection-holder-class="otherFiles">Ajouter</button>
                    </div>
                </div>

            </div>


        {% endif %}


    </div>


    {{ form_row(form._token) }}

    {{ form_end(form,{render_rest: false}) }}


    {% if isEdit %}

        {{ include('_modal.html.twig', {'modalId' : 'modal-communication', 'contentHTML' : subFormCommunication, 'formtarget': 'communication_sub'}) }}
        {{ include('_modal.html.twig', {'modalId' : 'modal-miseenservice', 'contentHTML' : subFormMiseenservice, 'formtarget': 'miseenservice_sub'}) }}
        {{ include('_modal.html.twig', {'modalId' : 'modal-entretien', 'contentHTML' : subFormEntretien, 'formtarget': 'entretien_sub'}) }}
        {{ include('_modal.html.twig', {'modalId' : 'modal-depannage', 'contentHTML' : subFormDepannage, 'formtarget': 'depannage_sub'}) }}
        {{ include('_modal.html.twig', {'modalId' : 'modal-rappel', 'contentHTML' : subFormRappel, 'formtarget': 'rappel_sub'}) }}

        <div class="tab_container">
            <input type="radio" id="tab_communication" name="tab_todo" class="tab_selector" checked="checked">
            <label for="tab_communication">Communications</label>
            <input type="radio" id="tab_miseenservice" name="tab_todo" class="tab_selector">
            <label for="tab_miseenservice">Mise en service</label>
            <input type="radio" id="tab_entretien" name="tab_todo" class="tab_selector">
            <label for="tab_entretien">Entretien</label>
            <input type="radio" id="tab_depannage" name="tab_todo" class="tab_selector">
            <label for="tab_depannage">Dépannage</label>
            <input type="radio" id="tab_rappel" name="tab_todo" class="tab_selector">
            <label for="tab_rappel">Rappel</label>

            <div class="tab_bodies">
                <div class="tab_body">
                    <button class="modal-toggle btn-action" data-target="modal-communication">Ajouter</button>
                    <div id="" class="module-list">
                        <div class="module-list-items">
                            <div class="module-list-body">
                                {% for item in data.communications %}
                                    {% include '_index_module_item.html.twig' with {
                                        'one' : item.subject,
                                        'two' : (item.communicationType ? item.communicationType : '') ~ " " ~ (item.dateProcess|datefr('l d F Y')) ~ " " ~ (item.dateProcess|datefr('H:i')),
                                        'three' : (item.description),
                                        'four' : '<a href="' ~ path("app_communication_edit", {id:item.id}) ~ '">' ~ ux_icon('lucide:edit') ~ '</a>',
                                    } %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab_body">
                    <button class="modal-toggle btn-action" data-target="modal-miseenservice">Ajouter</button>
                    <div id="" class="module-list">
                        <div class="module-list-items">
                            <div class="module-list-body">
                                {% for item in data.miseenservices %}
                                    {% include '_index_module_item.html.twig' with {
                                        'one' : item.label,
                                        'two' : item.type|capitalize ~ " " ~ item.dateStart|datefr('l d F Y'),
                                        'three' : (item.description),
                                        'four' : '<a href="' ~ path("app_miseenservice_edit", {id:item.id}) ~ '">' ~ ux_icon('lucide:edit') ~ '</a>',
                                    } %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab_body">
                    <button class="modal-toggle btn-action" data-target="modal-entretien">Ajouter</button>
                    <div id="" class="module-list">
                        <div class="module-list-items">
                            <div class="module-list-body">
                                {% for item in data.entretiens %}
                                    {% include '_index_module_item.html.twig' with {
                                        'one' : item.label,
                                        'two' : item.type|capitalize ~ " " ~ item.dateStart|datefr('l d F Y'),
                                        'three' : (item.description),
                                        'four' : '<a href="' ~ path("app_entretien_edit", {id:item.id}) ~ '">' ~ ux_icon('lucide:edit') ~ '</a>',
                                    } %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab_body">
                    <button class="modal-toggle btn-action" data-target="modal-depannage">Ajouter</button>
                    <div id="" class="module-list">
                        <div class="module-list-items">
                            <div class="module-list-body">
                                {% for item in data.depannages %}
                                    {% include '_index_module_item.html.twig' with {
                                        'one' : item.label,
                                        'two' : item.type|capitalize ~ " " ~ item.dateStart|datefr('l d F Y'),
                                        'three' : (item.description),
                                        'four' : '<a href="' ~ path("app_depannage_edit", {id:item.id}) ~ '">' ~ ux_icon('lucide:edit') ~ '</a>',
                                    } %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab_body">
                    <button class="modal-toggle btn-action" data-target="modal-rappel">Ajouter</button>
                    <div id="" class="module-list">

                        <div class="module-list-items">
                            <div class="module-list-body">
                                {% for item in data.rappels %}
                                    {% include '_index_module_item.html.twig' with {
                                        'one' : item.label,
                                        'two' : item.type|capitalize ~ " " ~ item.dateStart|datefr('l d F Y'),
                                        'three' : (item.description),
                                        'four' : '<a href="' ~ path("app_rappel_edit", {id:item.id}) ~ '">' ~ ux_icon('lucide:edit') ~ '</a>',
                                    } %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>







        <form id="deleteform" method="post" action="{{ path('app_contact_delete', {'id': data.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce contact ?');">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ data.id) }}">
        </form>
    {% endif %}

{% endblock %}




{% block javascripts %}


{% endblock %}