{% extends 'teamer/layout.html.twig' %}

{% block title %}Mein Profil{% endblock %}

{% macro collectionRow(form) %}
    <div {{ stimulus_target('form-collection', 'field') }}>
        <div class="flex items-center space-x-4">
            {{ form_widget(form) }}
            <button type="button" {{ stimulus_action('form-collection', 'removeItem') }}>
                {{ icon('delete', 'w-4 h-4 mt-2 pointer-events-none') }}
            </button>
        </div>
        {{ form_errors(form) }}
    </div>
{% endmacro %}

{% block content %}
    {{ form_start(form) }}

    <div {{ stimulus_controller('tabs', {}, { 'buttonActive': 'bg-gray-50' }) }}>
        <div class="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-16">
            <div>
                <h1 class="text-2xl font-bold pb-8">
                    Mein Profil
                </h1>
                <ul role="list" class="space-y-1">
                    <li>
                        <button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 0 }) }}>
                            Persönliche Daten
                        </button>
                    </li>
                    <li>
                        <button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 1 }) }}>
                            Anschrift/Kontakt
                        </button>
                    </li>
                    <li>
                        <button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 2 }) }}>
                            Bankverbindung
                        </button>
                    </li>
                    <li>
                        <button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 3 }) }}>
                            Sonstiges
                        </button>
                    </li>
                    <li>
                        <button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 4 }) }}>
                            Foto
                        </button>
                    </li>
                </ul>
            </div>
            <div class="lg:col-span-2">
                {% if not form.vars.valid %}
                    <div class="border border-red-500 rounded-md p-4 text-red-500 mb-8">
                        {% include '_partials/_form_errors.html.twig' with { 'form': form } %}
                        {% include '_partials/_form_errors.html.twig' with { 'form': form.address } %}
                        {% include '_partials/_form_errors.html.twig' with { 'form': form.communication } %}
                        {% include '_partials/_form_errors.html.twig' with { 'form': form.bankAccount } %}
                    </div>
                {% elseif errors|length > 0 %}
                    <div class="border border-red-500 rounded-md p-4 text-red-500 mb-8">
                        <ul>
                            {% for error in errors %}
                                <li>
                                    {{ error.message }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
                <div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>
                    <h2 class="text-xl font-bold pb-2">
                        Persönliche Daten
                    </h2>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.salutation) }}
                        {{ form_row(form.academicTitle) }}
                        {{ form_row(form.firstName) }}
                        {{ form_row(form.lastName) }}
                        {{ form_row(form.gender) }}
                        {{ form_row(form.dateOfBirth) }}
                        {{ form_row(form.nationality) }}
                    </div>
                </div>

                <div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>
                    <h2 class="text-xl font-bold pb-2">
                        Anschrift
                    </h2>
                    <div class="flex flex-col space-y-4 pb-8">
                        {{ form_row(form.address.street) }}
                        {{ form_row(form.address.postCode) }}
                        {{ form_row(form.address.city) }}
                        {{ form_row(form.address.country) }}
                    </div>
                    <h2 class="text-xl font-bold pb-2">
                        Kontakt
                    </h2>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.communication.email) }}
                        {{ form_row(form.communication.phone) }}
                        {{ form_row(form.communication.mobile) }}
                    </div>
                </div>

                <div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>
                    <h2 class="text-xl font-bold pb-2">
                        Bankverbindung
                    </h2>
                    <div class="flex flex-col space-y-4">
                        {{ form_row(form.bankAccount.iban) }}
                        {{ form_row(form.bankAccount.bic) }}
                        {{ form_row(form.bankAccount.bank) }}
                        {{ form_row(form.bankAccount.holder) }}
                    </div>
                </div>

                <div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>
                    <h2 class="text-xl font-bold pb-2">
                        Sonstiges
                    </h2>
                    <div class="flex flex-col space-y-4 pb-8">
                        {{ form_row(form.taxId) }}
                        {{ form_row(form.healthInsuranceCompany) }}
                        {{ form_row(form.language) }}
                        {{ form_row(form.size) }}
                    </div>

                    <div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.pickups.vars.prototype)|json_encode }) }}>
                        <h4 class="font-bold">
                            Buszustiege
                        </h4>
                        <div {{ stimulus_target('form-collection', 'fields')}} class="flex flex-col space-y-4 mb-4">
                            {% do form.pickups.setRendered %}
                            {%- for pickup in form.pickups -%}{{- _self.collectionRow(pickup) -}}{%- endfor -%}
                        </div>
                        <div class="flex justify-end">
                            <button type="button"
                                    {{ stimulus_action('form-collection', 'addItem') }}
                                    title="Zustieg hinzufügen">
                                {{ icon('plus', 'w-4 h-4 pointer-events-none') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>

                    {% if teamer.photo %}
                        <div class="pb-8">
                            <h2 class="text-xl font-bold pb-2">
                                Mein Foto
                            </h2>
                            <img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
                                 class="w-48 h-auto border-2 border-primary"
                                 alt="{{ teamer.firstName }}">
                        </div>
                    {% endif %}
                    <h2 class="text-xl font-bold pb-2">
                        Fotoupload
                    </h2>
                    {% include '_partials/_upload_collection_form.html.twig' with {
                        'endpoint_upload': path('_uploader_upload_photo'),
                        'upload_session_params': form.vars.upload_session_params,
                        'accepted_files': 'image/jpg,image/jpeg',
                    } %}
                </div>

                <button type="submit" class="btn">
                    Aktualisieren
                </button>

            </div>
        </div>

    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}