@push('pageModals')

<div class="modal" tabindex="-1" role="dialog" id="modalAddConsultantCategory">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="storeConsultantCategory" id="frmStoreConsultantCategory">
                <input type="hidden" id="id" name="id" v-model="id" />
                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label" for="name">@{{ current_entity }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                                <div class="form-group mb-1 documentFileName">
                                    <label class="control-label">Upload File<span class="required">*</span></label>
                                    <small>Valid files are jpg/png/svg. Ideal dimension is 48x48</small>
                                    <div class="custom-file w-100 file-type-new">
                                        <input type="file" class="custom-file-input w-100" name="image" ref="file"
                                            @change="fileUploadRef">
                                        <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                            file...</label>
                                        <span class="attachment-bg"><img src="{{ asset('img/ic-attachment-dark.svg') }}"
                                                alt="ic-attachment"></span>
                                    </div>
                                    <span class="m-0 xs-font-size filename">
                                        <template v-if="fileName!=''">@{{ fileName }}</template>
                                    </span>
                                    <span class="invalid-feedback" v-if="errors.fileUpload">@{{ errors.fileUpload[0]
                                        }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalSingleField">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">@{{ current_entity }}<span class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em">{{ @trans('settings.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddCategory">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">@{{ current_entity }}<span class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="parent_id">{{ @trans('settings.parent') }}</label>
                                    <select class="form-control" id="parent_id" name="parent_id" v-model="parent_id">
                                        <option value="" selected="selected">{{ @trans('settings.select_parent') }}
                                        </option>
                                        <option v-for="parent in parents" :value="parent.id">@{{ parent.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />

                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" id="modalAddBank" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">{{ @trans('settings.name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="branch">{{ @trans('settings.branch') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="branch" name="branch"
                                        placeholder="Enter Branch" v-model="branch">
                                    <span class="invalid-feedback" v-if="errors.branch">@{{ errors.branch[0] }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="account_name">{{ @trans('settings.account_name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="account_name" name="account_name"
                                        placeholder="Enter Account Name" v-model="account_name">
                                    <span class="invalid-feedback" v-if="errors.account_name">@{{ errors.account_name[0]
                                        }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="account_number">{{ @trans('settings.account_number') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="account_number" name="account_number"
                                        placeholder="Enter Account Number" v-model="account_number">
                                    <span class="invalid-feedback" v-if="errors.account_number">@{{
                                        errors.account_number[0] }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="account_number_usd">{{ @trans('settings.account_number_usd') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="account_number_usd"
                                        name="account_number_usd" placeholder="Enter Account Number (USD)"
                                        v-model="account_number_usd">
                                    <span class="invalid-feedback" v-if="errors.account_number_usd">@{{
                                        errors.account_number_usd[0] }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="account_number_euro">{{ @trans('settings.account_number_euro') }}</label>
                                    <input type="text" class="form-control" id="account_number_euro"
                                        name="account_number_euro" placeholder="Enter Account Number (EURO)"
                                        v-model="account_number_euro">
                                    <span class="invalid-feedback" v-if="errors.account_number_euro">@{{
                                        errors.account_number_euro[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="swift_code">{{ @trans('settings.swift_code') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="swift_code" name="swift_code"
                                        placeholder="Enter Swift Code" v-model="swift_code">
                                    <span class="invalid-feedback" v-if="errors.swift_code">@{{ errors.swift_code[0]
                                        }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="is_default"
                                        name="is_default" v-model="is_default">
                                    <label class="custom-control-label" for="is_default">{{
                                        @trans('settings.check_mark_as_default') }}</label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em">{{ @trans('settings.save') }}</button>
                </div>

            </form>


        </div>
    </div>
</div>

<div class="modal" id="modalAddConsultantPlan" tabindex="-1" role="dialog" aria-labelledby="modalAddConsultantPlan"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">{{ @trans('settings.name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description">Description<span class="required">*</span></label>
                                    <textarea class="form-control" id="description" name="description"
                                        placeholder="Enter Description" v-model="description"></textarea>
                                    <span class="invalid-feedback" v-if="errors.description">@{{ errors.description[0]
                                        }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="account_name">Duration<span class="required">*</span></label>
                                    <input type="text" class="form-control" id="duration" name="duration"
                                        placeholder="Enter Duration" v-model="duration">
                                    <span class="invalid-feedback" v-if="errors.duration">@{{ errors.duration[0]
                                        }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="price">Price<span class="required">*</span></label>
                                    <input type="text" class="form-control" id="price" name="price"
                                        placeholder="Enter Price" v-model="price">
                                    <span class="invalid-feedback" v-if="errors.price">@{{
                                        errors.price[0] }}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em">{{ @trans('settings.save') }}</button>
                </div>

            </form>


        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddFocusArea">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">{{ @trans('settings.title') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title"
                                        placeholder="Enter Title" v-model="title">
                                    <span class="invalid-feedback" v-if="errors.title">@{{ errors.title[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="pillar_id">{{ @trans('settings.pillars') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="pillar_id" name="pillar_id" v-model="pillar_id">
                                        <option value="" selected="selected">{{ @trans('settings.select_pillar') }}
                                        </option>
                                        <option v-for="pillar in pillars" :value="pillar.id">@{{ pillar.name }}</option>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.pillar_id">@{{ errors.pillar_id[0]
                                        }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />

                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddFocusDetail">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">{{ @trans('settings.title') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title"
                                        placeholder="Enter Title" v-model="title">
                                    <span class="invalid-feedback" v-if="errors.title">@{{ errors.title[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="focus_area_id">{{ @trans('settings.select_focus_area') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="focus_area_id" name="focus_area_id"
                                        v-model="focus_area_id">
                                        <option value="" selected="selected">{{ @trans('settings.focus_area') }}
                                        </option>
                                        <option v-for="focus_area in focus_areas" :value="focus_area.id">@{{
                                            focus_area.pillar_name }} / @{{ focus_area.title }}</option>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.focus_area_id">@{{
                                        errors.focus_area_id[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />

                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddRegistrationData">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">{{ @trans('settings.name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        placeholder="Enter Name" v-model="name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="rd_category">{{ @trans('settings.category') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="rd_category" name="rd_category"
                                        v-model="rd_category">
                                        <option value="" selected="selected">{{ @trans('settings.select_category') }}
                                        </option>
                                        <option vallue="bank">{{ @trans('settings.bank') }}</option>
                                        <option vallue="Fuel">{{ @trans('settings.fuel') }}</option>
                                        <option vallue="Insurance">{{ @trans('settings.insurance') }}</option>
                                        <option vallue="Tele Communication Network">{{
                                            @trans('settings.tele_communication_network') }}</option>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.rd_category">@{{ errors.rd_category[0]
                                        }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />

                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddTaxRegNo">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} @{{ current_entity}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="tax_reg_country">{{ @trans('settings.country') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="tax_reg_country" name="tax_reg_country"
                                        v-model="tax_reg_country">
                                        <option value="" selected="selected">{{ @trans('settings.select_tax_reg_country') }}</option>
                                        <template v-for="(item) in countries">
                                            <option :value="item.id">@{{ item.text }}</option>
                                        </template>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.country_id">@{{ errors.country_id[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">{{ @trans('settings.reg_number_label') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="reg_number_label" name="reg_number_label"
                                        placeholder="Enter Registration Number Label" v-model="reg_name">
                                    <span class="invalid-feedback" v-if="errors.registration_title">@{{ errors.registration_title[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <template v-if="tax_reg_country != '' && tax_reg_labels.length > 0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>{{ @trans('settings.select_connected_tax_type') }}</label><br />
                                        <template v-for="item in tax_reg_labels">
                                            <div class="custom-control custom-radio">
                                                <input type="radio" class="custom-control-input" name="tax_reg_label_id" :id="'tax_reg_label_' + item.id" :value="item.id"
                                                    v-model="tax_reg_label_id">
                                                <label class="custom-control-label" :for="'tax_reg_label_' + item.id">@{{ item.tax_title }}</label>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddCountryTax">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} Tax Type Label</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="tax_country">{{ @trans('settings.country') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="tax_country" name="tax_country"
                                        v-model="tax_country">
                                        <option value="" selected="selected">{{ @trans('settings.select_tax_country') }}</option>
                                        <template v-for="(item) in countries">
                                            <option :value="item.id">@{{ item.text }}</option>
                                        </template>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.country_id">@{{ errors.country_id[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="tax_label">{{ @trans('settings.tax_type_label') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="tax_label" name="tax_label"
                                        placeholder="Enter Tax Label" v-model="tax_label">
                                    <span class="invalid-feedback" v-if="errors.tax_title">@{{ errors.tax_title[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="tax_is_excluded"
                                        name="tax_is_excluded" v-model="tax_is_excluded">
                                    <label class="custom-control-label" for="tax_is_excluded">To be added on top of the total amount</label>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddSubDepartment">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} Sub Department</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="tax_label">{{ @trans('settings.name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="sub_dept_name" name="sub_dept_name"
                                        placeholder="Enter Name" v-model="sub_dept_name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group btm-arrow select">
                                    <label for="tax_country">{{ @trans('settings.department') }}<span
                                            class="required">*</span></label>
                                    <select class="form-control" id="dept_id" name="dept_id"
                                        v-model="dept_id">
                                        <option value="" selected="selected">{{ @trans('settings.select_department') }}</option>
                                        <template v-for="(item) in departments">
                                            <option :value="item.id">@{{ item.name }}</option>
                                        </template>
                                    </select>
                                    <span class="invalid-feedback" v-if="errors.dept_id">@{{ errors.dept_id[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddStockItem">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <form @submit.prevent="store">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} {{ @trans('settings.stock_item') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="tax_label">{{ @trans('settings.name') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="stock_item_name" name="stock_item_name"
                                        placeholder="Enter Name" v-model="stock_item_name">
                                    <span class="invalid-feedback" v-if="errors.name">@{{ errors.name[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="tax_label">{{ @trans('settings.price') }}<span
                                            class="required">*</span></label>
                                    <input type="text" class="form-control" id="stock_item_price" name="stock_item_price"
                                        placeholder="Enter Price" v-model="stock_item_price">
                                    <span class="invalid-feedback" v-if="errors.price">@{{ errors.price[0] }}</span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel') }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAddTaxBands" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">

            <form @submit.prevent="storeIncomeTaxBands">

                <div class="modal-header">
                    <h5 class="modal-title">@{{ action }} {{ trans('settings.tax_bands') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="container-fluid">
                        <div class="col-md-4">
                            <div class="form-group btm-arrow select">
                                <label for="tax_band_country">{{ @trans('settings.country') }}<span
                                        class="required">*</span></label>
                                <select class="form-control" id="tax_band_country" name="tax_band_country"
                                    v-model="tax_band_country">
                                    <option value="" selected="selected">{{ @trans('settings.select_tax_reg_country') }}</option>
                                    <template v-for="(item) in countries">
                                        <option :value="item.id">@{{ item.text }}</option>
                                    </template>
                                </select>
                                <span class="invalid-feedback" v-if="errors.country_id">@{{ errors.country_id[0] }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">{{trans('settings.secondary_emp_rate')}} <span
                                    class="required">*</span></label>
                                <input type="text" class="form-control" placeholder="{{trans('settings.secondary_emp_rate')}}" name="secondary_emp_income_tax_rate" v-model="secondary_emp_income_tax_rate">
                            <span class="invalid-feedback" v-if="errors.secondary_income_tax_rate">@{{ errors.secondary_income_tax_rate[0] }}</span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <h2 class="form-sec-title">
                                {{ trans('settings.primary_emp_rate') }}
                            </h2>
                            <div class="row">
                                <div class="col-md-12">
                                    <div v-for="(taxBand,index) in tax_bands" class="form-group mb-0">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label v-if="index == 0" class="control-label">{{trans('settings.title')}} <span
                                                        class="required">*</span></label>
                                                    <input type="text" class="form-control" placeholder="Title" name="taxBand[index][tax_band_title]" v-model="tax_bands[index].tax_band_title">
                                                    <template v-if="dynamicErrors">
                                                        <template v-for="(error, errIndex) in dynamicErrors" >
                                                            <span class="invalid-feedback" v-if="error.index == index && error.values.key == 'tax_band_title' ">@{{ error.values.error[0] }}</span>
                                                        </template>
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label v-if="index == 0" class="control-label">{{trans('settings.min_value')}}<span
                                                        class="required">*</span></label>
                                                    <input type="text" id="minTaxValue" class="form-control min-tax-value" 
                                                        placeholder="Min Value" name="taxBand[index][tax_band_min_value]" v-model="tax_bands[index].tax_band_min_value" disabled
                                                    >
                                                    <template v-if="dynamicErrors">
                                                        <template v-for="(error, errIndex) in dynamicErrors" >
                                                            <span class="invalid-feedback" v-if="error.index == index && error.values.key == 'tax_band_min_value' ">@{{ error.values.error[0] }}</span>
                                                        </template>
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label v-if="index == 0" class="control-label">{{trans('settings.max_value')}}<span
                                                        class="required">*</span></label>
                                                    <input type="text" id="maxTaxValue" class="form-control max-tax-value" placeholder="Max Value" 
                                                        name="taxBand[index][tax_band_max_value]" v-model="tax_bands[index].tax_band_max_value"
                                                        @input="minValueUpdate(index,tax_bands[index].tax_band_max_value,tax_bands.length)"
                                                        :disabled="tax_bands[index].tax_band_max_value == 'As Or Above' && is_last_band == true ? true : false"
                                                    >
                                                    <template v-if="dynamicErrors">
                                                        <template v-for="(error, errIndex) in dynamicErrors" >
                                                            <span class="invalid-feedback" v-if="error.index == index && error.values.key == 'tax_band_max_value' ">@{{ error.values.error[0] }}</span>
                                                        </template>
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label v-if="index == 0" class="control-label">{{trans('settings.percentage')}}<span
                                                        class="required">*</span></label>
                                                    <input type="text" class="form-control tax-band-percentage" placeholder="Pecentage" name="taxBand[index][tax_band_percentage]" 
                                                        v-model="tax_bands[index].tax_band_percentage"
                                                    >
                                                    <template v-if="dynamicErrors">
                                                        <template v-for="(error, errIndex) in dynamicErrors" >
                                                            <span class="invalid-feedback" v-if="error.index == index && error.values.key == 'tax_band_percentage' ">@{{ error.values.error[0] }}</span>
                                                        </template>
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label v-if="index == 0" class="control-label">{{trans('settings.min_tax_amount')}}<span
                                                        class="required">*</span></label>
                                                    @{{ maxValueUpdate(index,tax_bands.length,tax_bands[index].tax_band_max_value, tax_bands[index].tax_band_min_value, tax_bands[index].tax_band_percentage)}}
                                                    {{-- <input type="text" class="form-control" placeholder="Min Tax Amount" name="taxBand[index][min_tax_amount]" v-model="tax_bands[index].min_tax_amount" disabled> --}}
                                                    <template v-if="dynamicErrors">
                                                        <template v-for="(error, errIndex) in dynamicErrors" >
                                                            <span class="invalid-feedback" v-if="error.index == index && error.values.key == 'min_tax_amount' ">@{{ error.values.error[0] }}</span>
                                                        </template>
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group remove-wrapper">
                                                    <label v-if="index == 0" class="control-label"></label>
                                                    <a v-if="index == 0 && is_last_band == false" href="javascript:void(0)" class="btn add-row" title="add" @click="addTaxBandRow(tax_bands.length,tax_bands[index].tax_band_max_value)"><i class="material-icons">add</i></a>
                                                    <a v-if="index != 0" href="javascript:void(0)" class="btn remove-row" title="remove" @click="removeTaxBandRow(index)"><i class="material-icons">close</i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox d-flex align-items-center">
                                            <input type="checkbox" class="custom-control-input" id="isLastBand" name="is_last_band" value="1" v-model="is_last_band" @change="toggleMaxValue(is_last_band)">
                                            <label class="custom-control-label control-label" for="isLastBand">{{ @trans('payroll.is_last_band') }}</label>
                                        </div>
                                    </div>  
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="id" name="id" v-model="id" />
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('settings.cancel')
                        }}</button>
                    <button type="submit" class="btn btn-em actionButton">{{ @trans('settings.save') }}</button>
                </div>

            </form>

        </div>
    </div>
</div>


@include('admin.components.modal_delete_js')


@endpush