@extends('cms.layouts.authorized', ['isVue' => true])

@section('headerCustom')
    @php
        $title = 'Pengaturan';
    @endphp
@endsection

@section('content')

    @include('cms.form.errorbox')
    <transition name="slideUp">
        <div class="col-md-6 col-md-offset-3">
            <div class="alert alert-danger alert-dismissible" v-show="errors.length > 0" style="display:none;">
                <li v-for="error in errors">
                    @{{ error }}
                </li>
            </div>
        </div>
    </transition>

    <form id="mainForm" action="{{ route('admin.setting.incomeTierBreakdownSave') }}" v-on:submit="formSubmit"
          class="create-project form-horizontal" method="POST" enctype="multipart/form-data">
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Tier Penghasilan</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="accordion" id="individualTierAccordion">
                                    <div class="card">
                                        <div class="card-header" id="individualShoppingAccordion">
                                            Individual - Konsumtif
                                            <button type="button" class="pull-right btn btn-xs btn-default"
                                                    data-toggle="collapse"
                                                    data-target="#tierBreakdownIndividualShopping" aria-expanded="true"
                                                    aria-controls="tierBreakdownIndividualShopping">
                                                <i class="fa fa-chevron-down"></i>
                                            </button>
                                        </div>
                                        <div id="tierBreakdownIndividualShopping" class="collapse"
                                             aria-labelledby="individualShoppingAccordion"
                                             data-parent="individualTierAccordion">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-12">
                                                            <button class="btn btn-xs btn-primary pull-right"
                                                                    type="button"
                                                                    @click="addTier('individualShopping')">
                                                                <i class="fa fa-plus"></i> Tambah Tier
                                                            </button>
                                                        </div>
                                                        <div class="col-md-12"
                                                             v-for="(incomeTierBreakdown, index) in incomeTierBreakdownIndividualShopping">
                                                            <div class="row">
                                                                <div class="card">
                                                                    <div class="card-header">
                                                                        Tier @{{ index + 1 }}
                                                                        <button class="btn btn-danger btn-xs pull-right"
                                                                                type="button"
                                                                                @click="removeTier('individualShopping', index)">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">ISR</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.isrRate"
                                                                                            label-right="%"
                                                                                            decimal-places-override="2"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Penghasilan
                                                                                        Min.</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.minIncomeAmount"
                                                                                            label-left="Rp"
                                                                                            :disabled="index === 0"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Penghasilan
                                                                                        Max.</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.maxIncomeAmount"
                                                                                            label-left="Rp"
                                                                                            :disabled="(index + 1) === incomeTierBreakdownIndividualShopping.length"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Alokasi
                                                                                        ISR</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <table class="table table-striped">
                                                                                        <thead>
                                                                                        <tr>
                                                                                            <th class="col-md-6">Tenor
                                                                                            </th>
                                                                                            <th class="col-md-6">
                                                                                                Persentase
                                                                                            </th>
                                                                                        </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                        <tr v-for="(rate, month) in incomeTierBreakdown.plafondBreakdown">
                                                                                            <td>@{{ month }}</td>
                                                                                            <td>
                                                                                                <vue-autonumeric
                                                                                                        v-model="incomeTierBreakdown.plafondBreakdown[month]"
                                                                                                        label-right="%"
                                                                                                        decimal-places-override="2"/>
                                                                                            </td>
                                                                                        </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-header" id="companyShoppingAccordion">
                                            Perusahaan - Konsumtif
                                            <button type="button" class="pull-right btn btn-xs btn-default"
                                                    data-toggle="collapse" data-target="#tierBreakdownCompanyShopping"
                                                    aria-expanded="true" aria-controls="tierBreakdownCompanyShopping">
                                                <i class="fa fa-chevron-down"></i>
                                            </button>
                                        </div>
                                        <div id="tierBreakdownCompanyShopping" class="collapse"
                                             aria-labelledby="companyShoppingAccordion"
                                             data-parent="companyTierAccordion">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-12">
                                                            <button class="btn btn-xs btn-primary pull-right"
                                                                    type="button" @click="addTier('companyShopping')">
                                                                <i class="fa fa-plus"></i> Tambah Tier
                                                            </button>
                                                        </div>
                                                        <div class="col-md-12"
                                                             v-for="(incomeTierBreakdown, index) in incomeTierBreakdownCompanyShopping">
                                                            <div class="row">
                                                                <div class="card">
                                                                    <div class="card-header">
                                                                        Tier @{{ index + 1 }}
                                                                        <button class="btn btn-danger btn-xs pull-right"
                                                                                type="button"
                                                                                @click="removeTier('companyShopping', index)">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">ISR</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.isrRate"
                                                                                            label-right="%"
                                                                                            decimal-places-override="2"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Penghasilan
                                                                                        Min.</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.minIncomeAmount"
                                                                                            label-left="Rp"
                                                                                            :disabled="index === 0"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Penghasilan
                                                                                        Max.</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <vue-autonumeric
                                                                                            v-model="incomeTierBreakdown.maxIncomeAmount"
                                                                                            label-left="Rp"
                                                                                            :disabled="(index + 1) === incomeTierBreakdownCompanyShopping.length"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-3">
                                                                                    <label class="control-label">Alokasi
                                                                                        ISR</label>
                                                                                </div>
                                                                                <div class="col-md-9">
                                                                                    <table class="table table-striped">
                                                                                        <thead>
                                                                                        <tr>
                                                                                            <th class="col-md-6">Tenor
                                                                                            </th>
                                                                                            <th class="col-md-6">
                                                                                                Persentase
                                                                                            </th>
                                                                                        </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                        <tr v-for="(rate, month) in incomeTierBreakdown.plafondBreakdown">
                                                                                            <td>@{{ month }}</td>
                                                                                            <td>
                                                                                                <vue-autonumeric
                                                                                                        v-model="incomeTierBreakdown.plafondBreakdown[month]"
                                                                                                        label-right="%"
                                                                                                        decimal-places-override="2"/>
                                                                                            </td>
                                                                                        </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="col-md-3">&nbsp;</div>
                                        <div class="col-md-9">
                                            <button id="submitForm" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        var vueData = {!! json_encode($model) !!};
        vueData.incomeTierBreakdownIndividualShopping = {!! json_encode($model->incomeTierBreakdownIndividualShopping) !!};
        vueData.incomeTierBreakdownCompanyShopping = {!! json_encode($model->incomeTierBreakdownCompanyShopping) !!};

        var vueExcludeSubmit = [
            'errors'
        ];

        function formSubmit(data) {
            data.errors = [];

            if (data.incomeTierBreakdownIndividualShopping.length < 2) data.errors.push('Dibutuhkan minimal 2 tier penghasilan untuk individual - konsumtif');
            if (data.incomeTierBreakdownCompanyShopping.length < 2) data.errors.push('Dibutuhkan minimal 2 tier penghasilan untuk perusahaan - konsumtif');

            for (index in data.incomeTierBreakdownIndividualShopping) {
                index = parseInt(index);
                let tier = index + 1;
                data.incomeTierBreakdownIndividualShopping[index].isrRate = parseFloat(data.incomeTierBreakdownIndividualShopping[index].isrRate);
                data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount = parseInt(data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount);
                data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount = parseInt(data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount);

                if (empty(data.incomeTierBreakdownIndividualShopping[index].isrRate)) data.errors.push('ISR individual - konsumtif pada tier ' + tier + ' belum diisi');

                if (index === 0) {
                    if (data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount !== 0) data.errors.push('Penghasilan Min. individual - konsumtif pada tier ' + tier + ' harus 0');
                } else {
                    if (empty(data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount)) {
                        data.errors.push('Penghasilan Min. individual - konsumtif pada tier ' + tier + ' belum diisi');
                    } else if (data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount - data.incomeTierBreakdownIndividualShopping[(index - 1)].maxIncomeAmount !== 1) {
                        data.errors.push('Penghasilan Min. individual - konsumtif pada tier ' + tier + ' harus 1 poin diatas Penghasilan Max. tier ' + (tier - 1));
                    }
                }

                if ((index + 1) === data.incomeTierBreakdownIndividualShopping.length) {
                    if (data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount !== 0) data.errors.push('Penghasilan Max. individual - konsumtif pada tier ' + tier + ' harus 0');
                } else {
                    if (empty(data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount)) {
                        data.errors.push('Penghasilan Max. individual - konsumtif pada tier ' + tier + ' belum diisi');
                    } else if (data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount - data.incomeTierBreakdownIndividualShopping[(index + 1)].minIncomeAmount !== -1) {
                        data.errors.push('Penghasilan Max. individual - konsumtif pada tier ' + tier + ' harus 1 poin dibawah Penghasilan Min. tier ' + (tier + 1));
                    }
                }

                if (index !== 0 && (index + 1) !== data.incomeTierBreakdownIndividualShopping.length) {
                    if (data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount >= data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount) data.errors.push('Penghasilan Min. individual - konsumtif pada tier ' + tier + ' harus lebih kecil dari Penghasilan Max.');
                    if (data.incomeTierBreakdownIndividualShopping[index].maxIncomeAmount <= data.incomeTierBreakdownIndividualShopping[index].minIncomeAmount) data.errors.push('Penghasilan Max. individual - konsumtif pada tier ' + tier + ' harus lebih besar dari Penghasilan Min.');
                }

                for (month in data.incomeTierBreakdownIndividualShopping[index].plafondBreakdown) {
                    data.incomeTierBreakdownIndividualShopping[index].plafondBreakdown[month] = parseFloat(data.incomeTierBreakdownIndividualShopping[index].plafondBreakdown[month]);

                    if (empty(data.incomeTierBreakdownIndividualShopping[index].plafondBreakdown[month]) && data.incomeTierBreakdownIndividualShopping[index].plafondBreakdown[month] !== 0) data.errors.push('Persentase plafond tenor ' + month + ' bulan individual - konsumtif pada tier ' + tier + ' belum diisi');
                }
            }

            for (index in data.incomeTierBreakdownCompanyShopping) {
                index = parseInt(index);
                let tier = index + 1;
                data.incomeTierBreakdownCompanyShopping[index].isrRate = parseFloat(data.incomeTierBreakdownCompanyShopping[index].isrRate);
                data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount = parseInt(data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount);
                data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount = parseInt(data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount);

                if (empty(data.incomeTierBreakdownCompanyShopping[index].isrRate)) data.errors.push('ISR perusahaan - konsumtif pada tier ' + tier + ' belum diisi');

                if (index === 0) {
                    if (data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount !== 0) data.errors.push('Penghasilan Min. perusahaan - konsumtif pada tier ' + tier + ' harus 0');
                } else {
                    if (empty(data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount)) {
                        data.errors.push('Penghasilan Min. perusahaan - konsumtif pada tier ' + tier + ' belum diisi');
                    } else if (data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount - data.incomeTierBreakdownCompanyShopping[(index - 1)].maxIncomeAmount !== 1) {
                        data.errors.push('Penghasilan Min. perusahaan - konsumtif pada tier ' + tier + ' harus 1 poin diatas Penghasilan Max. tier ' + (tier - 1));
                    }
                }

                if ((index + 1) === data.incomeTierBreakdownCompanyShopping.length) {
                    if (data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount !== 0) data.errors.push('Penghasilan Max. perusahaan - konsumtif pada tier ' + tier + ' harus 0');
                } else {
                    if (empty(data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount)) {
                        data.errors.push('Penghasilan Max. perusahaan - konsumtif pada tier ' + tier + ' belum diisi');
                    } else if (data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount - data.incomeTierBreakdownCompanyShopping[(index + 1)].minIncomeAmount !== -1) {
                        data.errors.push('Penghasilan Max. perusahaan - konsumtif pada tier ' + tier + ' harus 1 poin dibawah Penghasilan Min. tier ' + (tier + 1));
                    }
                }

                if (index !== 0 && (index + 1) !== data.incomeTierBreakdownCompanyShopping.length) {
                    if (data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount >= data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount) data.errors.push('Penghasilan Min. perusahaan - konsumtif pada tier ' + tier + ' harus lebih kecil dari Penghasilan Max.');
                    if (data.incomeTierBreakdownCompanyShopping[index].maxIncomeAmount <= data.incomeTierBreakdownCompanyShopping[index].minIncomeAmount) data.errors.push('Penghasilan Max. perusahaan - konsumtif pada tier ' + tier + ' harus lebih besar dari Penghasilan Min.');
                }

                for (month in data.incomeTierBreakdownCompanyShopping[index].plafondBreakdown) {
                    data.incomeTierBreakdownCompanyShopping[index].plafondBreakdown[month] = parseFloat(data.incomeTierBreakdownCompanyShopping[index].plafondBreakdown[month]);

                    if (empty(data.incomeTierBreakdownCompanyShopping[index].plafondBreakdown[month]) && data.incomeTierBreakdownCompanyShopping[index].plafondBreakdown[month] !== 0) data.errors.push('Persentase plafond tenor ' + month + ' bulan perusahaan - konsumtif pada tier ' + tier + ' belum diisi');
                }
            }

            if (data.errors.length > 0) return false;

            return true;
        }

        var vueExtraMethods = {
            addTier(type) {
                const incomeTierBreakdownModel = {
                    isrRate: 0,
                    minIncomeAmount: 0,
                    maxIncomeAmount: 0,
                    plafondBreakdown: {
                        3: 0,
                        6: 0,
                        9: 0,
                        12: 0,
                        18: 0,
                        24: 0
                    }
                };
                if (type == 'individualShopping') {
                    this.incomeTierBreakdownIndividualShopping.push(incomeTierBreakdownModel);
                } else if (type == 'companyShopping') {
                    this.incomeTierBreakdownCompanyShopping.push(incomeTierBreakdownModel);
                }
            },
            removeTier(type, index) {
                if (type == 'individualShopping') {
                    this.incomeTierBreakdownIndividualShopping.splice(index, 1);
                } else if (type == 'companyShopping') {
                    this.incomeTierBreakdownCompanyShopping.splice(index, 1);
                }
            }
        }
    </script>
@endsection