@extends('cms.layouts.authorized', ['isVue' => true])
@inject('aclConstant', '\App\Util\AclConstant')

@section('headerCustom')
    @php
        $id = 0;
        if (!empty($model->getKey())) $id = $model->getKey();
        $formUrl = $model->getUrlDetails(['id' => $id]);
        $cancelUrl = $model->getUrlIndex();
        $language = '';
        $title = 'Profil Company';
    @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="{{ $formUrl }}" 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">Info General</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">Nama</label>
                                </div>
                                <div class="col-md-9">
                                	<input type="text" v-model="name" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">Kode</label>
                                </div>
                                <div class="col-md-9">
                                	<input type="text" v-model="code" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">Telepon</label>
                                </div>
                                <div class="col-md-9">
                                	<input type="text" v-model="phone" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">Alamat</label>
                                </div>
                                <div class="col-md-9">
                                	<textarea class="form-control" v-model="address"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Provinsi</label>
                                </div>
                                <div class="col-md-9">
                                    <select class="form-control" v-model="provinceId" @change="getCityList(provinceId, 'cities', 'subdistricts')">
                                        <option v-for="province in lists.provinces" v-bind:value="province.id">@{{ province.name }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Kota</label>
                                </div>
                                <div class="col-md-9">
                                    <select class="form-control" v-model="cityId" :disabled="lists.cities.length == 0" @change="getSubdistrictList(cityId, 'subdistricts')">
                                        <option v-for="city in lists.cities" v-bind:value="city.id">@{{ city.name }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Kecamatan</label>
                                </div>
                                <div class="col-md-9">
                                    <select class="form-control" v-model="subdistrictId" :disabled="lists.subdistricts.length == 0">
                                        <option v-for="subdistrict in lists.subdistricts" v-bind:value="subdistrict.id">@{{ subdistrict.name }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Kelurahan</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" v-model="villageName" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Kode Pos</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" v-model="postalCode" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">PIC Name</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" v-model="picName" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">PIC Email</label>
                                </div>
                                <div class="col-md-9">
                                	<input type="text" v-model="picEmail" class="form-control">
                                </div>
                            </div>
                            <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 class="col-md-12">
                                <div class="col-md-3">
                                	<label class="control-label">Tanggal Gajian</label>
                                </div>
                                <div class="col-md-9">
                                	<vue-autonumeric v-model="paydayDate">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label class="control-label">Toleransi Keterlambatan</label>
                                </div>
                                <div class="col-md-9">
                                    <vue-autonumeric v-model="lateToleranceDay" label-right="Hari">
                                </div>
                            </div>
                            <div class="col-md-12">
                            	<div class="col-md-3">
                            		<label class="control-label">Status</label>
                            	</div>
                            	<div class="col-md-9">
                            		<select class="form-control" v-model="status">
                            			@foreach (\App\Util\Constant::COMPANY_STATUS as $key => $value)
                            				<option value="{{ $key }}">{{ $value }}</option>
                            			@endforeach
                            		</select>
                            	</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-3">&nbsp;</div>
                                <div class="col-md-9">
                                    <a href="{{ route('admin.companies') }}" class="btn btn-default">Kembali</a>
                                    @if (checkPermission($aclConstant::COMPANY_UPDATE))
                                        <button id="submitForm" class="btn btn-primary">Submit</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
    	var vueData = {!! json_encode($model) !!};

        @if (empty($id))
            vueData.provinceName = '';
            vueData.cityName = '';
            vueData.subdistrictName = '';
        @endif

        vueData.lists = {
            provinces: {!! json_encode($provinces) !!},
            cities: {!! json_encode($cities) !!},
            subdistricts: {!! json_encode($subdistricts) !!}
        };

        var vueExtraMethods = {
            getCityList: function (provinceId, cityFormName, subdistrictFormName) {
                this.subdistrictId = '';
                this.cityId = '';
                this.lists[subdistrictFormName] = [];
                this.lists[cityFormName] = [];
                if(provinceId) this.lists[cityFormName] = getCityList(provinceId);
            },
            getSubdistrictList: function (cityId, subdistrictFormName) {
                this.subdistrictId = '';
                this.lists[subdistrictFormName] = [];
                if(cityId) this.lists[subdistrictFormName] = getSubdistrictList(cityId);
            }
        }

        var vueExtraWatch = {
            provinceId : function () {
                provinceId = this.provinceId;
                provinceName = '';

                this.lists.provinces.forEach(function(value, index) {
                    if (value.id == provinceId) {
                        provinceName = value.name;
                    }
                });

                this.provinceName = provinceName;
            },
            cityId : function () {
                cityId = this.cityId;
                cityName = '';

                this.lists.cities.forEach(function(value, index) {
                    if (value.id == cityId) {
                        cityName = value.name;
                    }
                });

                this.cityName = cityName;
            },
            subdistrictId : function () {
                subdistrictId = this.subdistrictId;
                subdistrictName = '';

                this.lists.subdistricts.forEach(function(value, index) {
                    if (value.id == subdistrictId) {
                        subdistrictName = value.name;
                    }
                });
                
                this.subdistrictName = subdistrictName;
            }
        }

        var vueExcludeSubmit = [
            'lists',
        ];

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

    		if (empty(data.name)) data.errors.push('Nama Company tidak boleh kosong');
    		if (empty(data.code)) data.errors.push('Kode tidak boleh kosong');
    		if (empty(data.picEmail)) data.errors.push('PIC Email tidak boleh kosong');
    		if (empty(data.paydayDate)) data.errors.push('Tanggal Gajian tidak boleh kosong');
    		if (empty(data.status)) data.errors.push('Status tidak boleh kosong');

    		if (data.paydayDate > 31) data.errors.push('Tanggal gajian harus berada dalam range 1 - 31');
    		if (data.paydayDate < 1) data.errors.push('Tanggal gajian harus berada dalam range 1 - 31');

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

@section('jsCustom')
    <script>
        function getCityList(provinceId) {
            var cityList = [];
            $.ajax({
                url: '{{ route('admin.city.ajaxAutoComplete') }}',
                data: {
                    provinceId: provinceId
                },
                method: 'POST', 
                async: false,
                success: function(successData) {
                    if(successData.status == 'success') cityList = successData.data;
                }
            });
            return cityList;
        }

        function getSubdistrictList(cityId) {
            var subdistrictList = [];
            $.ajax({
                url: '{{ route('admin.subdistrict.ajaxAutoComplete') }}',
                data: {
                    cityId: cityId
                },
                method: 'POST', 
                async: false,
                success: function(successData) {
                    if(successData.status == 'success') subdistrictList = successData.data;
                }
            });
            return subdistrictList;
        }
    </script>
@endsection