@extends('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.limitTransactionAmountSave') }}" 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">Batas Nominal Transaksi</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-3">
                                            <label class="control-label">Konsumtif</label>
                                        </div>
                                        <div class="col-md-4">
                                            <vue-autonumeric v-model="minTransactionAmountShopping" label-left="Rp">
                                        </div>
                                        <div class="col-md-1">
                                            <i class="fa fa-arrows-h fa-3x"></i>
                                        </div>
                                        <div class="col-md-4">
                                            <vue-autonumeric v-model="maxTransactionAmountShopping" label-left="Rp">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="col-md-3">
                                            <label class="control-label">Perjalanan Religi</label>
                                        </div>
                                        <div class="col-md-4">
                                            <vue-autonumeric v-model="minTransactionAmountTravel" label-left="Rp">
                                        </div>
                                        <div class="col-md-1">
                                            <i class="fa fa-arrows-h fa-3x"></i>
                                        </div>
                                        <div class="col-md-4">
                                            <vue-autonumeric v-model="maxTransactionAmountTravel" label-left="Rp">
                                        </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) !!};

        var vueExcludeSubmit = [
            'errors'
        ];

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

            if(!data.minTransactionAmountShopping) data.errors.push('Nominal minimum konsumtif harus diisi');
            if(!data.maxTransactionAmountShopping) data.errors.push('Nominal maksimum konsumtif harus diisi');

            if(!data.minTransactionAmountTravel) data.errors.push('Nominal minimum perjalanan religi harus diisi');
            if(!data.maxTransactionAmountTravel) data.errors.push('Nominal maksimum perjalanan religi harus diisi');

            if(data.minTransactionAmountShopping >= data.maxTransactionAmountShopping) data.errors.push('Nominal minimum konsumtif harus lebih kecil dari nominal maksimum');
            if(data.minTransactionAmountTravel >= data.maxTransactionAmountTravel) data.errors.push('Nominal minimum perjalanan religi harus lebih kecil dari nominal maksimum');

            if (data.errors.length > 0) return false;
            return true;
        }
    </script>
@endsection