<div class="checkout-content checkout-register">
    <fieldset id="account">
        <h2 class="secondary-title"><i class="fa fa-user-plus"></i>{{ text_your_details }}</h2>
        <div class="payment-new box-inner">
            <div class="form-group customer-group" style="display: {{ customer_groups|length > 1 ? 'block' : 'none' }}">
                <label class="control-label">{{ entry_customer_group }}</label>
                {% for customer_group in customer_groups %}
                    {% if customer_group.customer_group_id == customer_group_id %}
                        <div class="radio">
                            <label>
                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}" checked="checked"/>
                                {{ customer_group.name }}
                            </label>
                        </div>
                    {% else %}
                        <div class="radio">
                            <label>
                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}"/>
                                {{ customer_group.name }}
                            </label>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="form-group input-firstname required" style="width: 49%; float: left;">
                <input type="text" name="firstname" value="{{ SoUtils.getProperty(order_data, 'firstname') }}" placeholder="{{ entry_firstname }} *" id="input-payment-firstname" class="form-control"/>
            </div>
            <div class="form-group input-lastname required" style="width: 49%; float: right;">
                <input type="text" name="lastname" value="{{ SoUtils.getProperty(order_data, 'lastname') }}" placeholder="{{ entry_lastname }} *" id="input-payment-lastname" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="text" name="email" value="{{ SoUtils.getProperty(order_data, 'email') }}" placeholder="{{ entry_email }} *" id="input-payment-email" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="text" name="telephone" value="{{ SoUtils.getProperty(order_data, 'telephone') }}" placeholder="{{ entry_telephone }} *" id="input-payment-telephone" class="form-control"/>
            </div>
            <div class="form-group fax-input">
                <input type="text" name="fax" value="{{ SoUtils.getProperty(order_data, 'fax') }}" placeholder="{{ entry_fax }}" id="input-payment-fax" class="form-control"/>
            </div>
            {% for custom_field in custom_fields %}
                {% if custom_field.location == 'account' %}
                    {% if custom_field.type == 'select' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <select
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control">
                                <option value="">{{ text_select }}</option>
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <option value="{{ custom_field_value.custom_field_value_id }}">{{ custom_field_value.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'radio' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <div id="input-payment-custom-field{{ custom_field.custom_field_id }}">
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}"/>
                                            {{ custom_field_value.name }}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'checkbox' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <div id="input-payment-custom-field{{ custom_field.custom_field_id }}">
                                {% for custom_field_value in custom_field.custom_field_value %}
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="custom_field[{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}"/>
                                            {{ custom_field_value.name }}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'text' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <input type="text"
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                value="{{ custom_field.value }}"
                                placeholder="{{ custom_field.name }}"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control"/>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'textarea' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <textarea
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                rows="5" placeholder="{{ custom_field.name }}"
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                class="form-control">{{ custom_field.value }}</textarea>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'file' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label">{{ custom_field.name }}</label>
                            <br/>
                            <button type="button"
                                id="button-payment-custom-field{{ custom_field.custom_field_id }}"
                                data-loading-text="{{ text_loading }}" class="btn btn-default"><i
                                class="fa fa-upload"></i> {{ button_upload }}</button>
                            <input type="hidden"
                                name="custom_field[{{ custom_field.custom_field_id }}]"
                                value=""
                                id="input-payment-custom-field{{ custom_field.custom_field_id }}"/>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'date' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group date">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'time' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group time">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}" data-date-format="HH:mm"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}

                    {% if custom_field.type == 'datetime' %}
                        <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group {{ custom_field.required ? ' required' : '' }} custom-field" data-sort="{{ custom_field.sort_order }}">
                            <label class="control-label" for="input-payment-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                            <div class="input-group datetime">
                                <input type="text"
                                    name="custom_field[{{ custom_field.custom_field_id }}]"
                                    value="{{ custom_field.value }}"
                                    placeholder="{{ custom_field.name }}"
                                    data-date-format="YYYY-MM-DD HH:mm"
                                    id="input-payment-custom-field{{ custom_field.custom_field_id }}"
                                    class="form-control"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </fieldset>
    <fieldset id="password" style="display: {{ setting_so_onepagecheckout_layout_setting.so_onepagecheckout_account_open == 'register' ? 'block' : 'none' }}">
        {% if layout != 2 %}
            <h2 class="secondary-title"><i class="fa fa-lock"></i>{{ text_your_password }}</h2>
        {% endif %}
        <div class="box-inner">
            <div class="form-group required">
                <input type="password" name="password" value="{{ SoUtils.getProperty(order_data, 'password') }}" placeholder="{{ entry_password }} *" id="input-payment-password" class="form-control"/>
            </div>
            <div class="form-group required">
                <input type="password" name="confirm" value="{{ SoUtils.getProperty(order_data, 'confirm') }}" placeholder="{{ entry_confirm }} *" id="input-payment-confirm" class="form-control"/>
            </div>
        </div>
    </fieldset>
    <fieldset id="address">
        <h2 class="secondary-title"><i class="fa fa-map-marker"></i>{{ text_your_address }}</h2>
        {{ payment_address_form }}
    </fieldset>
    
    {% if is_shipping_required %}
        <div class="checkbox">
            <label>
                {% if shipping_address == '1' %}
                    <input type="checkbox" name="shipping_address" value="1" checked="checked" />
                {% else %}
                    <input type="checkbox" name="shipping_address" value="0" />
                {% endif %}
                {{ entry_shipping }}
            </label>
        </div>
        <fieldset id="shipping-address" style="display: {{ shipping_address == '1' ? 'none' : 'block' }}">
            <h2 class="secondary-title"><i class="fa fa-map-marker"></i>{{ text_shipping_address }}</h2>
            {{ shipping_address_form }}
        </fieldset>
    {% endif %}

    <script type="text/javascript">
        if ($('.so-onepagecheckout .date').length) {
            $('.so-onepagecheckout .date').datetimepicker({pickTime: false});
        }
        if ($('.so-onepagecheckout .time').length) {
            $('.so-onepagecheckout .time').datetimepicker({pickDate: false});
        }
        if ($('.so-onepagecheckout .datetime').length) {
            $('.so-onepagecheckout .datetime').datetimepicker({pickDate: true, pickTime: true});
        }

        {% if customer_groups|length > 1 %}
            $(document).delegate('input[name="customer_group_id"]', 'change', function () {
                $(document).trigger('so_checkout_customer_group_changed', this.value);
            });
        {% endif %}

        $('#account .form-group[data-sort]').detach().each(function() {
            if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#account .form-group').length) {
                $('#account .form-group').eq($(this).attr('data-sort')).before(this);
            }

            if ($(this).attr('data-sort') > $('#account .form-group').length) {
                $('#account .form-group:last').after(this);
            }

            if ($(this).attr('data-sort') < -$('#account .form-group').length) {
                $('#account .form-group:first').before(this);
            }
        });
    </script>
</div>