{% set userData = app.session.get('userData') %}
<style>
    #patientEmail_addCc_btn{
        cursor: pointer;
        color: gray;
    }
    .patientEmail_removeCc_btn{
        cursor: pointer;
        color: #cc4b37;
        float: right;
    }
</style>
<form method="POST" id="form-patientEmail" enctype="multipart/form-data">
    <h5>{{ page_title }}</h5>
    <div id="flash-messages-content-modal"></div>
    <div class="row max-width-initial">
        <div class="large-12 columns">
            <div class="row">
                <div class="large-12 columns">
                    {{ form_label(form.emailFrom) }}
                    {{ form_widget(form.emailFrom) }}
                </div>
                <div class="large-12 columns">
                    <span style="font-weight: bold;">Recipient:</span>
                    <div class="row">
                        <div class="large-12 columns">
                            {{ form_label(form.email) }}
                            {{ form_widget(form.email, {'attr': {'value': patient.email|default('')}}) }}
                        </div>
                    </div>
                </div>
                <div class="large-12 columns">
                    <span style="font-weight: bold;">CC: <span id="patientEmail_addCc_btn"><i class="fa fa-plus-circle"></i></span></span>
                    <div id="cc_container">
                        {% for pe_cc in form.patientEmailCcs %}
                            <div class="cc_row row" data-idx="{{ loop.index0 }}">
                                <div class="cc_col2 small-12 columns"  data-idx="{{ loop.index0 }}">
                                    <span class="patientEmail_removeCc_btn" data-idx="{{ loop.index0 }}"><i class="fa fa-times-circle"></i></span> <label for="patientEmail_patientEmailCc_{{ loop.index0 }}_email" class="hidden-cc-{{ loop.index0 }}" id="patientEmail_patientEmailCc_{{ loop.index0 }}_email_label">Email</label>
                                    <input
                                            value="{{ pe_cc.vars.value.email|default('') }}"
                                            type="text" name="patient_email[patientEmailCcs][{{ loop.index0 }}][email]"
                                            id="patientEmail_patientEmailCc_{{ loop.index0 }}_email">
                                    <input
                                            value="{{ pe_cc.vars.value.id }}"
                                            type="hidden"
                                            name="patient_email[patientEmailCcs][{{ loop.index0 }}][id]"
                                            id="patientEmail_patientEmailCc_{{ loop.index0 }}_id"
                                            class="patientEmail_patientEmailCc_id hidden-cc-{{ loop.index0 }}">
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="large-12 columns">
                    {{ form_label(form.email_template_description) }}
                    {{ form_widget(form.email_template_description) }}
                    {{ form_widget(form.emailTemplate) }}
                </div>
                <div class="large-12 columns">
                    {{ form_label(form.accountUser_fullName) }}
                    {{ form_widget(form.accountUser_fullName) }}
                    {{ form_widget(form.accountUser) }}
                </div>
                <div class="large-12 columns">
                    {{ form_label(form.customBody) }}
                    {{ form_widget(form.customBody) }}
                </div>
                <div class="large-12 columns" style="margin-top: 2%">
                    <h5>Attachments(s) <a href="javascript:void(0)" id="href-new-file-field"><i class="fa fa-plus"></i></a></h5>
                    <p class="form-hint-text">Upload file(s) below</p>
                    <div id="file-field-container">
                        {% if patientEmail %}
                            {% for key,pe in patientEmail.patientEmailFiles %}
                                {% if pe.isDeleted != true %}
                                    <div class="input-group no-margin-bottom">
                                        <input type="hidden" name="otherForm[files][{{ key }}]" value="{{ pe.idencoded }}" />
                                        <a href="{{ path('patient_email_file_download', {id: pe.idencoded}) }}">{{ pe.filedesc }}</a>
                                        <div class="input-group-button">
                                            <button type="button" class="button secondary file-field-remove"><i class="fa fa-remove"></i></button>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row-max-width-initial">
        <div class="small-12 columns no-padding-right">
            <div class="button-container clearfix text-right">
                {#{% if action == 'n' and (userData.type == 'Super Admin' or 'Admin Patient Letter New' in userData.accesses) %}#}
                    <a href="javascript:void(0)" class="button just-continue href-patient-email-action float-right" data-axn="{{ action }}"
                       data-message="Are you sure you want to save this information?"
                       style="margin-left: 10px; margin-right: 0;"
                    >Save</a>
                {#{% endif %}#}
                {% if action == 'u' and (userData.type == 'Super Admin' or 'Admin Patient Email Delete' in userData.accesses) %}
                    <a href="javascript:void(0)" class="ask-continue button alert href-patient-email-action float-right" data-axn="d"
                       data-message="Are you sure you want to delete this record?"
                       style="margin-left: 10px; margin-right: 0;"
                    >Delete</a>
                {% endif %}
                <a href="javascript:void(0)" class="button secondary" data-close style="margin-left: 10px; margin-right: 0;">Close</a>
            </div>
        </div>
    </div>
    {{ form_widget(form.action) }}
    {{ form_widget(form.id) }}
    {{ form_widget(form.patient) }}
    {{ form_widget(form._token) }}
</form>
<script language="javascript">
    //<![CDATA[

    jQ('.pdfOnly').on('change', function() {
        var value = jQ(this).val(),
            file = value.toLowerCase(),
            extension = file.substring(file.lastIndexOf('.') + 1);

        if (jQ.inArray(extension, ['pdf','PDF']) == -1) {
            jQ(this).focus().val('');
            alert('WARNING: Only PDF file is allowed.');
        }

    });

    jQ(document).ready(function(){
        let patient_email_form = {
            settings: {},
            init: function() {
                patient_email_form.bindElements();
                patient_email_form.fileField_arrangeIndexes();
                patient_email_form.fileField_bindRemove();
            },
            bindElements: function() {
                jQ('#href-new-file-field').unbind('click').bind('click', this.newFileField);
            },
            newFileField: function() {
                var div_ig = jQ('<div/>'),
                    div_igb = jQ('<div/>'),
                    btn = jQ('<button/>'),
                    input_file = jQ('<input/>');

                div_ig.addClass('input-group').addClass('no-margin-bottom');
                div_igb.addClass('input-group-button');
                btn.attr('type', 'button').addClass('button secondary').addClass('file-field-remove').html('<i class="fa fa-remove"></i>');
                input_file.attr({
                    type:'file',
                    accept : 'application/pdf'
                }).addClass('input-group-field');

                div_igb.append(btn);
                div_ig.append(input_file).append(div_igb);

                jQ('#file-field-container').append(div_ig);

                patient_email_form.fileField_arrangeIndexes();
                patient_email_form.fileField_bindRemove();
            },
            fileField_arrangeIndexes: function() {
                jQ('#file-field-container .input-group').each(function(key){
                    jQ(this).attr('id', 'file-field-input-group-' + key).data('key', key);
                    jQ(this).find('input[type=file]').attr('name', 'files[' + key + ']');
                    jQ(this).find('button').data('key', key);
                });
            },
            fileField_bindRemove: function() {
                jQ('.file-field-remove').unbind('click').bind('click', function(){
                    jQ('#file-field-input-group-' + jQ(this).data('key')).remove();
                    patient_email_form.fileField_arrangeIndexes();
                });
            },
        };

        patient_email_form.init();

    });


    //]]>
</script>