{% if createClientContactPersonForm is defined %}
    {{ form_start(createClientContactPersonForm, {'action': path('client_new'), 'method': 'POST'}) }}

    {% do createClientContactPersonForm.isBenefitSystem.setRendered() %}
    {% do createClientContactPersonForm.nameDay.setRendered() %}
    {% do createClientContactPersonForm.birthday.setRendered() %}
    {% do createClientContactPersonForm.mobile.setRendered() %}

    {% do createClientContactPersonForm.client.isActive.setRendered() %}
    {% do createClientContactPersonForm.client.isVerified.setRendered() %}
    {% do createClientContactPersonForm.client.isKrd.setRendered() %}
    {% do createClientContactPersonForm.client.eInvoice.setRendered() %}
    {% do createClientContactPersonForm.client.company.gusAddress.setRendered() %}

    {% do createClientContactPersonForm.client.company.nipEu.setRendered() %}
    {% do createClientContactPersonForm.client.company.hqAddress.setRendered() %}

    {% do createClientContactPersonForm.client.company.flatNumber.setRendered() %}

    {{ form_row(createClientContactPersonForm.statusId) }}
    {{ form_row(createClientContactPersonForm.client.statusId) }}
    {{ form_row(createClientContactPersonForm.client.company.statusId) }}

    <div class="main-container-client">
        <div class="close"></div>
        <div class="text-header-client-modal">
            <p>Dodaj Nowego Klienta</p>
        </div>
        {# left container #}
        <div class="content-wrapper-row">
            <div class="left-container-client-create">
                <div class="subtitle-client-create">
                    <div class="ml-60">
                        <div class="mt10">
                            <p>Dane Klienta</p>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>NIP*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.nip, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Pełna nazwa*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.fullName, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml60">
                                <label class="label-form-w185-h45"><b>Nazwa wyświetlana*</b></label>
                                <div class="input-container-w324">
                                    <div class="one-row">
                                        {{ form_row(createClientContactPersonForm.client.company.shortName, { 'attr': { 'class': 'client_create_field' }}) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml60 form-upload">
                                <label class="label-form-w185-h45"><b>Logo</b></label>
                                <div class="input-container-w324">
                                    <label id="client_logo_group" for="client_logo" class="upload-add-file">
                                        <i class="icons icon-plus-circle">Dodaj plik</i>
                                        {{ form_widget(createClientContactPersonForm.client.company.logo, { 'attr': { 'hidden': 'true' }}) }}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Wybierz kraj*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.country, { 'attr': { 'class': 'client_create_field' }}) }}
                                    <span class="select-option-arrow-down-icon"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Miasto*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.city, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Kod pocztowy*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.postalCode, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Ulica*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.street, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Numer budynku*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.company.buildNumber, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Adres korespondencyjny</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.addressForCorrespondence, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Spedytor</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.shipper, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Branża</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.industry, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Adres www</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.www, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Adres e-mail</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.email, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Telefon</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.phoneNumber, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Telefon zastępczy</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.secondPhoneNumber, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Fax</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.fax, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Domyślny język klienta*</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.language, { 'attr': { 'class': 'client_create_field' }}) }}
                                    <span class="select-option-arrow-down-icon"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-header-client-modal">
                    <div class="mt30">
                        <p>Kontakty klienta</p>
                    </div>
                </div>
                <div class="subtitle-client-create">
                    <div class="ml-60">
                        <div class="mt10">
                            <p>Dane osoby kontaktowej</p>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Imię*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.firstName, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Nazwisko*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.lastName, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Telefon*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.phone, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>Komunikator*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.communicator, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml60">
                            <label class="label-form-w185-h45"><b>E-mail*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.email, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="two-rows">
                            <div class="ml60">
                                <label class="label-form-w185-h45"><b>Czy zbiera punkty Benefit?</b></label>
                                <div class="switch-wrapper-up-15">
                                    <label class="switch">
                                        <input type="checkbox" id="contact_person_is_benefit_system"
                                               name="client_contact_person[isBenefitSystem]" class="client_create_field"
                                               value="1">
                                        <span class="slider round"></span>
                                        <div class="answer-options">
                                            <span class="label-no"><b>Nie</b></span>
                                            <span class="label-yes"><b>Tak</b></span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# right container #}
            <div class="right-container-client-create">
                <div class="subtitle-client-create">
                    <div class="ml-40">
                        <div class="mt10">
                            <p>Dane cd.</p>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml40 form-upload">
                                <label class="label-form-w185-h45"><b>Skan nadania NIP</b></label>
                                <div class="input-container-w324">
                                    <label id="client_nip_group" for="client_logo" class="upload-add-file">
                                        <i class="icons icon-plus-circle">Dodaj plik</i>
                                        {{ form_row(createClientContactPersonForm.client.company.assignmentNipScan, { 'attr': { 'hidden': 'true' }}) }}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml40">
                                <label class="label-form-w185-h45"><b>REGON</b></label>
                                <div class="input-container-w324">
                                    <div class="one-row">
                                        {{ form_row(createClientContactPersonForm.client.company.regon, { 'attr': { 'class': 'client_create_field' }}) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml40 form-upload">
                                <label class="label-form-w185-h45"><b>Skan nadania REGON</b></label>
                                <div class="input-container-w324">
                                    <label id="client_regon_group" for="client_logo" class="upload-add-file">
                                        <i class="icons icon-plus-circle">Dodaj plik</i>
                                        {{ form_row(createClientContactPersonForm.client.company.assignmentRegonScan, { 'attr': { 'hidden': 'true' }}) }}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml40">
                                <label class="label-form-w185-h45"><b>EDG/CEIDG/KRS</b></label>
                                <div class="input-container-w324">
                                    <div class="one-row">
                                        {{ form_row(createClientContactPersonForm.client.company.edgCeidgKrs, { 'attr': { 'class': 'client_create_field' }}) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="mb5">
                            <div class="ml40 form-upload">
                                <label class="label-form-w185-h45"><b>Dokument potwierdzający istnienie
                                        firmy</b></label>
                                <div class="input-container-w324">
                                    <label id="client_document_group" for="client_logo" class="upload-add-file">
                                        <i class="icons icon-plus-circle">Dodaj plik</i>
                                        {{ form_row(createClientContactPersonForm.client.company.documentConfirmCompanyExist, { 'attr': { 'hidden': 'true' }}) }}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Termin płatności*</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.dueDate, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Po ilu dniach do windykacji</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.daysIsVindication, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Po ilu dniach zablokowany</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.daysIsBlocked, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="one-row">
                            <div class="ml40">
                                <label class="label-form-w185-h45"><b>Czy w KRD</b></label>
                                <div class="switch-wrapper">
                                    <label class="switch">
                                        <input type="checkbox" id="client_contact_person_client_is_krd"
                                               name="client_contact_person[client][isKrd]" class="client_create_field"
                                               value="1">
                                        <span class="slider round"></span>
                                        <div class="answer-options">
                                            <span class="label-no"><b>Nie</b></span>
                                            <span class="label-yes"><b>Tak</b></span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="one-row">
                            <div class="ml40">
                                <label class="label-form-w185-h45"><b>Czy aktywny</b></label>
                                <div class="switch-wrapper">
                                    <label class="switch">
                                        <input type="checkbox" id="client_contact_person_client_is_active"
                                               name="client_contact_person[client][isActive]"
                                               class="client_create_field" value="1">
                                        <span class="slider round"></span>
                                        <div class="answer-options">
                                            <span class="label-no"><b>Nie</b></span>
                                            <span class="label-yes"><b>Tak</b></span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-row-container-w520">
                    <div class="one-row">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>E-Faktura</b></label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="client_contact_person_client_e_invoice"
                                           name="client_contact_person[client][eInvoice]" class="client_create_field"
                                           value="1">
                                    <span class="slider round"></span>
                                    <div class="answer-options">
                                        <span class="label-no"><b>Nie</b></span>
                                        <span class="label-yes"><b>Tak</b></span>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-row-container-w520">
                    <div class="one-row">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Czy zweryfikowany</b></label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="client_contact_person_client_is_verified"
                                           name="client_contact_person[client][isVerified]" class="client_create_field"
                                           value="1">
                                    <span class="slider round"></span>
                                    <div class="answer-options">
                                        <span class="label-no"><b>Nie</b></span>
                                        <span class="label-yes"><b>Tak</b></span>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Program lojalnościowy ST</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.loyaltyProgram, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Opis klienta i uwagi</b></label>
                            <div class="input-container-w324">
                                <div class="one-row">
                                    {{ form_row(createClientContactPersonForm.client.comments, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520">
                        <div class="ml40">
                            <label class="label-form-w185-h45"><b>Numer konta bankowego</b></label>
                            <div class="input-container-w324">
                                <div class="two-rows">
                                    {{ form_row(createClientContactPersonForm.client.company.bankAccountNumber, { 'attr': { 'class': 'client_create_field' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-container-w520 mb5">
                        <div class="ml40 form-upload">
                            <label class="label-form-w185-h45"><b>Inne załączniki</b></label>
                            <div class="input-container-w324">
                                <label id="client_attachments_group" for="client_logo" class="upload-add-file">
                                    <i class="icons icon-plus-circle">Dodaj plik</i>
                                    {{ form_row(createClientContactPersonForm.client.company.otherAttachments, { 'attr': { 'hidden': 'true' }}) }}
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="legend-client-create">
                    <div class="ml-220"><p>* pole wymagane</p></div>
                </div>
                <div class="client-modal-horizontal-bottom-container">
                    <div class="nav-modal-buttons-container">
                        <button class="cancel-custom-btn">{{ button_label|default('Anuluj') }}</button>
                        <button class="blue-custom-btn">{{ button_label|default('Zapisz') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ form_end(createClientContactPersonForm) }}
{% endif %}

<script type="application/javascript">
    const logo = document.getElementById("client_logo_group");
    const assignmentNip = document.getElementById("client_nip_group");
    const assignmentRegon = document.getElementById("client_regon_group");
    const confirmDocument = document.getElementById("client_document_group");
    const attachments = document.getElementById("client_attachments_group");
    const uploadIcon = document.querySelectorAll(".icon-plus-circle");
    const uploadIconText = document.querySelectorAll(".upload-icon-text");

    logo.addEventListener("click", function () {
        let input = this.querySelector('input');
        let span = this.querySelector('span');
        input.click();
        input.addEventListener("change", function () {
            if (input.value) {
                span.innerHTML = input.value.match(
                    /[\/\\]([\w\d\s\.\-\(\)]+)$/
                )[1];
                uploadIcon[0].remove();
            }
        });
    });
    assignmentNip.addEventListener("click", function () {
        let input = this.querySelector('input');
        let span = this.querySelector('span');
        input.click();
        input.addEventListener("change", function () {
            if (input.value) {
                span.innerHTML = input.value.match(
                    /[\/\\]([\w\d\s\.\-\(\)]+)$/
                )[1];
                uploadIcon[1].remove();
            }
        });
    });

    assignmentRegon.addEventListener("click", function () {
        let input = this.querySelector('input');
        let span = this.querySelector('span');
        input.click();
        input.addEventListener("change", function () {
            if (input.value) {
                span.innerHTML = input.value.match(
                    /[\/\\]([\w\d\s\.\-\(\)]+)$/
                )[1];
                uploadIcon[2].remove();
            }
        });
    });

    confirmDocument.addEventListener("click", function () {
        let input = this.querySelector('input');
        let span = this.querySelector('span');
        input.click();
        input.addEventListener("change", function () {
            if (input.value) {
                span.innerHTML = input.value.match(
                    /[\/\\]([\w\d\s\.\-\(\)]+)$/
                )[1];
                uploadIcon[3].remove();
            }
        });
    });

    attachments.addEventListener("click", function () {
        let input = this.querySelector('input');
        let span = this.querySelector('span');
        input.click();
        input.addEventListener("change", function () {
            if (input.value) {
                span.innerHTML = input.value.match(
                    /[\/\\]([\w\d\s\.\-\(\)]+)$/
                )[1];
                uploadIcon[4].remove();
            }
        });
    });

</script>