{{-- <h2>{{ trans('account_settings.business_information') }}</h2>

<h3 class="white"><span>{{ trans('account_settings.business.general_information') }} </span></h3> --}}

<form class="general-information" ng-submit="saveBusiness(businessSetting)" name="businessSetting" ng-model="business" novalidate>
    <h3 class="white"><span>{{ trans('account_settings.business.general_information') }}</span></h3>
    <div class="mixed-fields">
        <fieldset ng-class="{'has-error':(businessSetting.$submitted || businessSetting.business_name.$touched && businessSetting.business_name.$invalid) && businessSetting.business_name.$error.required || businessSetting.business_name.$error.minlength}">
            <label>{{ trans('account_settings.business.business_name') }}</label>
            <input type="text" name="business_name" id="business-address" class="business-address" ng-model="business.business_name" required />
            <span ng-show="(businessSetting.$submitted || businessSetting.business_name.$touched && businessSetting.business_name.$invalid) && businessSetting.business_name.$error.required" class="field-error">
                {{ trans('account_settings.validation.business_name') }}
            </span>
            <span class="field-error" ng-show="( errors.business_name )" ng-bind="errors.business_name[ 0 ]"></span>
        </fieldset>

        <fieldset class="half" ng-class="{'has-error' : errors.business_email || (businessSetting.$submitted || businessSetting.business_email.$touched && businessSetting.business_email.$invalid) && businessSetting.business_email.$error.email || businessSetting.business_email.$error.required}">
            <label>{{ trans('account_settings.business.business_email') }}</label>
            <input type="email" name="business_email" id="business-address" class="business-address" ng-model="business.business_email" required />
            <span ng-show="(businessSetting.$submitted || businessSetting.business_email.$touched && businessSetting.business_email.$invalid) && businessSetting.business_email.$error.required" class="field-error">
                {{ trans('account_settings.validation.business_email') }}
            </span>
            <span ng-show="(businessSetting.$submitted || businessSetting.business_email.$touched && businessSetting.business_email.$invalid) && businessSetting.business_email.$error.email" class="field-error">
                {{ trans('account_settings.validation.email_invalid') }}
            </span>
            <span class="field-error" ng-show="( errors.business_email )" ng-bind="errors.business_email[ 0 ]"></span>
        </fieldset>

        <fieldset class="half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.phone_number.$touched && businessSetting.phone_number.$invalid) && businessSetting.phone_number.$error.required || businessSetting.phone_number.$error.minlength}">
            <label>{{ trans('account_settings.business.phone_number') }}</label>
            <input type="number" name="phone_number" id="business-address" class="business-address" ng-model="business.phone_number" string-to-number required />
            <span ng-show="(businessSetting.$submitted || businessSetting.phone_number.$touched && businessSetting.phone_number.$invalid) && businessSetting.phone_number.$error.required" class="field-error">
                {{ trans('account_settings.validation.phone_number') }}
            </span>
            <span class="field-error" ng-show="( errors.phone_number )" ng-bind="errors.phone_number[ 0 ]"></span>
        </fieldset>

        <fieldset class="half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.registration_number.$touched && businessSetting.registration_number.$invalid) && businessSetting.registration_number.$error.required}">
            <label>{{ trans('account_settings.business.tax_registration_number') }} </label>
            <input type="text" name="registration_number" id="registration-number" class="registration-number" ng-model="business.registration_number" />
            <span ng-show="(businessSetting.$submitted || businessSetting.registration_number.$touched && businessSetting.registration_number.$invalid) && businessSetting.registration_number.$error.required" class="field-error">
                {{ trans('account_settings.validation.registration_number') }}
            </span>
            <span class="field-error" ng-show="( errors.registration_number )" ng-bind="errors.registration_number[ 0 ]"></span>
        </fieldset>

        <fieldset class="half color_picker" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.color_palette.$touched && businessSetting.color_palette.$invalid) && businessSetting.color_palette.$error.required}">
            <label>{{ trans('account_settings.business.color_palette') }} </label>
            <div class="sp-original-input-container">
                <div class="sp-colorize-container sp-add-on">
                    <input type="color" name="color_palette" id="color-palette" class="color-palette" ng-model="business.color_palette" required colorpicker colorpick-eyedropper-active="true">
                </div>
            </div>
            <!-- <input color-picker color-picker-model="business.color_palette" ng-style="{background: business.color_palette}" name="color_palette" ng-model="business.color_palette" required/> -->

            <!-- <input name="color_palette" id="color-palette" class="jscolor color-palette" ng-model="business.color_palette" ng-style="{background: business.color_palette}" required /> -->
            <span ng-show="(businessSetting.$submitted || businessSetting.color_palette.$touched && businessSetting.color_palette.$invalid) && businessSetting.color_palette.$error.required" class="field-error">
                {{ trans('account_settings.validation.color_palette') }}
            </span>
            <span class="field-error" ng-show="( errors.color_palette )" ng-bind="errors.color_palette[ 0 ]"></span>
        </fieldset>
    </div>

    <div class="logo-field-wrapper">
        <fieldset class="upload-logo">
            <a href="javascript:;" class="upload-file" ngf-select ngf-pattern="'image/*'" ngf-accept="'image/*'" ng-model="temporary_logo" ng-change="addLogo()">
                <img ng-if="business.logo_path && !temporary_logo" ng-src="@{{business.logo_path}}" alt="Logo image" style="display: block; max-width: 50%; ">
                <img ng-if="temporary_logo" ngf-src="temporary_logo" alt="Logo image" style="display: block; max-width: 50%; ">

                <svg ng-if="!business.logo_path && !temporary_logo" width="24" height="20" viewBox="0 0 24 20">
                    <defs>
                        <path id="a" d="M0 20h24V0H0z"/>
                    </defs>
                    <g fill="none" fill-rule="evenodd">
                        <path class="svg-stroke" stroke-width="1.5" d="M1 18l5-6 4 4 7-8 6 7"/>
                        <mask id="b" fill="#fff">
                            <use xlink:href="#a"/>
                        </mask>
                        <path class="svg-stroke" stroke-linecap="square" stroke-width="1.5" d="M1 19h22V1H1z" mask="url(#b)"/>
                        <path class="svg-stroke" stroke-linecap="square" stroke-width="1.5" d="M9 4A2 2 0 1 1 8.999 8 2 2 0 0 1 9 4z" mask="url(#b)"/>
                    </g>
                </svg>

                <span ng-if="!business.logo_path && !temporary_logo">
                    {{ trans('account_settings.business.upload_logo') }}
                </span>
            </a>
        </fieldset>
        {{ trans('account_settings.business.minimum_size') }}
        {!! trans('account_settings.business.minimum_size_px', ['width'=>170, 'height'=> 125]) !!}
    </div>

    <h3 class="white"><span>{{ trans('account_settings.business.business_address') }} </span></h3>

    <fieldset class="address1-wrap" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.address1.$touched && businessSetting.address1.$invalid) && businessSetting.address1.$error.required || businessSetting.address1.$error.minlength}">
        <label>{{ trans('account_settings.location.address_1') }} <i>({{ trans('account_settings.location.address_message') }})</i></label>
        <input type="text" name="address1" id="address1" class="address1" ng-model="business.address_1" ng-minlength="6" />
        <span ng-show="(businessSetting.$submitted || businessSetting.address1.$touched && businessSetting.address1.$invalid) && businessSetting.address1.$error.required" class="field-error">
            {{ trans('account_settings.validation.address_1') }}
        </span>
        <span ng-show="(businessSetting.$submitted || businessSetting.address1.$touched)  && businessSetting.address1.$error.minlength" class="field-error">
            {{ trans('account_settings.validation.address_atleast') }}
        </span>
        <span class="field-error" ng-show="( errors.address_1 )" ng-bind="errors.address_1[ 0 ]"></span>
    </fieldset>

    <fieldset class="address2-wrap half" ng-class="{'has-error': (businessSetting.$submitted || businessSetting.address2.$touched)  && businessSetting.address2.$error.minlength}">
        <label>{{ trans('account_settings.location.address_2') }} <i>({{ trans('account_settings.location.address_message') }})</i></label>
        <input type="text" name="address2" id="address2" class="address2" ng-model="business.address_2" ng-minlength="6" />
        <span ng-show="(businessSetting.$submitted || businessSetting.address2.$touched)  && businessSetting.address2.$error.minlength" class="field-error">
            {{ trans('account_settings.validation.address_atleast') }}
        </span>
        <span class="field-error" ng-show="( errors.address_2 )" ng-bind="errors.address_2[ 0 ]"></span>
    </fieldset>

    <fieldset class="city-wrap half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.city.$touched && businessSetting.city.$invalid) && businessSetting.city.$error.required}">
        <label>{{ trans('account_settings.location.city') }} </label>
        <input type="text" name="city" id="city" class="city" ng-model="business.city" />
        <span ng-show="(businessSetting.$submitted || businessSetting.city.$touched && businessSetting.city.$invalid) && businessSetting.city.$error.required" class="field-error">
            {{ trans('account_settings.validation.city') }}
        </span>
        <span class="field-error" ng-show="( errors.city )" ng-bind="errors.city[ 0 ]"></span>
    </fieldset>

    <fieldset class="country-wrap half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.country.$touched && businessSetting.country.$invalid) && businessSetting.country.$error.required}">
        <label>{{ trans('account_settings.location.country') }}</label>
        <select id="freelancer_country" name="country" ng-model="business.country_id" class="country" >
            <option value="">Select Country</option>
            @php
                $countries = json_decode(file_get_contents(asset('countries.json')));
            @endphp
            @foreach ( $countries as $country )
                <option value="{{ $country->id }}">{{ $country->name }}</option>
            @endforeach
        </select>
        <span ng-show="(businessSetting.$submitted || businessSetting.country.$touched && businessSetting.country.$invalid) && businessSetting.country.$error.required" class="field-error">{{ trans('account_settings.validation.country') }}</span>
        <span class="field-error" ng-show="( errors.country_id )" ng-bind="errors.country_id[ 0 ]"></span>
    </fieldset>

    <fieldset class="zip-code-wrap half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.zip_code.$touched && businessSetting.zip_code.$invalid) && businessSetting.zip_code.$error.required || businessSetting.zip_code.$error.minlength}">
        <label>{{ trans('account_settings.location.zip_code') }} <i>({{ trans('account_settings.location.zip_code_message') }})</i></label>
        <input type="text" name="zip_code" id="zip-code" class="zip-code" minlength=3 ng-model="business.zip" ng-minlength="3" />
        <span ng-show="(businessSetting.$submitted || businessSetting.zip_code.$touched && businessSetting.zip_code.$invalid) && businessSetting.zip_code.$error.required" class="field-error">
            {{ trans('account_settings.validation.zip_code') }}
        </span>
        <span ng-show="(businessSetting.$submitted || businessSetting.zip_code.$touched && businessSetting.zip_code.$invalid) && businessSetting.zip_code.$error.minlength" class="field-error">
            {{ trans('account_settings.validation.atleast_zip_code') }}
        </span>
        <p class="field-error" ng-show="( errors.zip )" ng-bind="errors.zip[ 0 ]"></p>
    </fieldset>

    <h3 class="white"><span>{{ trans('account_settings.business.addition_information') }}</span></h3>

    <fieldset>
        <textarea placeholder="i.e Thank you for your choosing to work with Teem" ng-model="business.additional_info"></textarea>
    </fieldset>

    <h3 class="white"><span>{{ trans('account_settings.bank_information') }}</span></h3>

    <fieldset>
        <label for="name">{{ trans('account_settings.bank.name') }}</label>
        <input type="text" id="name" name="name" ng-model="business.name" />
    </fieldset>

    <fieldset class="half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.iban.$touched && businessSetting.iban.$invalid) && businessSetting.iban.$error.required || businessSetting.iban.$error.minlength || businessSetting.iban.$error.maxlength }">
        <label for="iban">{{ trans('account_settings.bank.iban') }}</label>
        <input type="text" id="iban" name="iban" ng-model="business.iban" ng-minlength="8" ng-maxlength="11" />

        <span ng-show="(businessSetting.$submitted || businessSetting.iban.$touched && businessSetting.iban.$invalid) && businessSetting.iban.$error.required" class="field-error">
            {{ trans('account_settings.validation.iban') }}
        </span>
        <span ng-show="(businessSetting.$submitted || businessSetting.iban.$touched)  && businessSetting.iban.$error.minlength" class="field-error">
            {{ trans('account_settings.validation.iban_error') }}
        </span>
        <span ng-show="(businessSetting.$submitted || businessSetting.iban.$touched)  && businessSetting.iban.$error.maxlength" class="field-error">
            {{ trans('account_settings.validation.iban_error') }}
        </span>
    </fieldset>

    <fieldset class="half" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.account_number.$touched && businessSetting.account_number.$invalid) && businessSetting.account_number.$error.required || businessSetting.account_number.$error.maxlength }">
        <label for="account-number">{{ trans('account_settings.bank.account_number') }}</label>
        <input type="text" id="account-number" name="account_number" ng-maxlength="17" ng-model="business.account_number"  />

        <span ng-show="(businessSetting.$submitted || businessSetting.account_number.$touched && businessSetting.account_number.$invalid) && businessSetting.account_number.$error.required" class="field-error">
            {{ trans('account_settings.validation.account_number') }}
        </span>
        <span ng-show="(businessSetting.$submitted || businessSetting.account_number.$touched)  && businessSetting.account_number.$error.maxlength" class="field-error">
            {{ trans('account_settings.validation.account_number_must_be') }}
        </span>
        <span class="field-error" ng-show="( errors.account_number )" ng-bind="errors.account_number[ 0 ]"></span>
    </fieldset>

    <fieldset class="half">
        <label for="bank-name">{{ trans('account_settings.bank.bank_name') }}</label>
        <input type="text" id="bank-name" name="bank" ng-model="business.bank"  />
    </fieldset>

    <fieldset class="half">
        <label for="country">{{ trans('account_settings.bank.country') }}</label>
        <input type="text" id="country" name="country" ng-model="business.bank_country"  />
    </fieldset>

    <h3 class="white"><span>{{ trans('account_settings.business.social_accounts') }} </span></h3>

    <fieldset class="oneThird" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.instagram.$touched && businessSetting.instagram.$invalid) && businessSetting.instagram.$invalid-pattern}">
        <label>{{ trans('account_settings.business.instagram') }} </label>
        <input type="text" name="instagram" id="instagram" class="social-media" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="business.instagram" />
        <span ng-show="(businessSetting.$submitted || businessSetting.instagram.$touched && businessSetting.instagram.$invalid) && businessSetting.instagram.$invalid-pattern" class="field-error">
            {{ trans('account_settings.validation.valid_url') }}
        </span>
    </fieldset>    

    <fieldset class="oneThird" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.twitter.$touched && businessSetting.twitter.$invalid) && businessSetting.twitter.$invalid-pattern}">
        <label>{{ trans('account_settings.business.twitter') }} </label>
        <input type="text" name="twitter" id="twitter" class="social-media" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="business.twitter " />
        <span ng-show="(businessSetting.$submitted || businessSetting.twitter.$touched && businessSetting.twitter.$invalid) && businessSetting.twitter.$invalid-pattern" class="field-error">
            {{ trans('account_settings.validation.valid_url') }}
        </span>
    </fieldset>    

    <fieldset class="oneThird" ng-class="{'has-error':(businessSetting.$submitted || businessSetting.linkedin.$touched && businessSetting.linkedin.$invalid) && businessSetting.linkedin.$invalid-pattern}">
        <label>{{ trans('account_settings.business.linkedin') }} </label>
        <input type="text" name="linkedin" id="linkedin" class="social-media" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="business.linkedin" />
        <span ng-show="(businessSetting.$submitted || businessSetting.linkedin.$touched && businessSetting.linkedin.$invalid) && businessSetting.linkedin.$invalid-pattern" class="field-error">
            {{ trans('account_settings.validation.valid_url') }}
        </span>
    </fieldset>
    <div class="account-setting__actionButtonsWrap">
        <button type="submit" class="tu-btn pink save-btn">{{ trans('account_settings.save') }}</button>
    </div>
</form>