<x-form @submit.prevent="submit">
    <x-modal>
        <div class="form-group" v-if="!action_update">
            <x-label for="account_id"  > {{__('Name') }}</x-label>
            <v-select name="account_id"  :filterable="false"  v-model="fields.account_id" @search="fetchAccounts" :options="accounts" :reduce="item => item.id">
                <template slot="option" slot-scope="option">
                   <div class="d-center">
                     @{{option.number+' - ( '+owner(option).name+': '+owner(option).email+' )'}}
                   </div>
                 </template>
                 <template slot="selected-option" slot-scope="option">
                   <div class="d-center">
                    @{{option.number+' - ( '+owner(option).name+': '+owner(option).email+' )'}}
                   </div>
                 </template>
           </v-select>     
            <x-error v-if="errors && errors.account_id">@{{ errors.account_id[0] }}</x-error>
        </div>
        <div class="form-group" v-if="!action_update">
            <x-label for="amount"  > {{__('Amount') }}</x-label>
            <x-input type="number"  name="amount"  v-model="fields.amount" required />
            <x-error v-if="errors && errors.amount">@{{ errors.amount[0] }}</x-error>
        </div>
        <div class="form-group" v-if="!action_update">
            <x-label for="paid_at"  > {{__('Paid At') }}</x-label>
            <x-input type="date"  name="paid_at"  v-model="fields.paid_at" required />
            <x-error v-if="errors && errors.paid_at">@{{ errors.paid_at[0] }}</x-error>
        </div>
        <div class="form-group">
            <x-label for="status"  > {{__('Status') }}</x-label>
            <select class="form-control" v-model="fields.status" :class="{ 'is-invalid': errors.status }">
                <option value="success">{{__('Cash')}}</option>
                <option value="pending">{{__('Debt')}}</option>
            </select>
            <x-error v-if="errors && errors.status">@{{ errors.status[0] }}</x-error>
        </div>
         <!--v-if="fields.status=='success'"-->
        <div class="form-group">
            <x-label for="status"  > {{__('Number') }}</x-label>
            <x-input  type="text" v-model="fields.number" required />
            <x-error v-if="errors && errors.number">@{{ errors.number[0] }}</x-error>
        </div>
        <x-slot name="footer">
            <a @click="save" class="btn btn-success float-left mx-1 float-right link-submit">{{ __('Save') }}</a>
            <button type="submit" class="btn btn-primary float-right link-submit">{{ __('save and continue') }}</button>
        </x-slot>
    </x-modal>
</x-form>