@extends('layouts.app')
@section('style')
<style>
    .v-select input[type=search], .v-select input[type=search]:focus {
        width: 50% !important;
    }
    .v-select.searchable .dropdown-toggle{
        height: 27px;
    }
</style>
@stop 
@section('content')
@include('inventories.modal')
<!-- BEGIN CONTENT BODY -->
<!-- END PAGE BAR -->
<!-- <div class="row"> -->  
    <div class="portlet light bg-inverse">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-equalizer font-green-haze"></i>
                <span class="caption-subject font-green-haze bold uppercase">@lang('layout.AddNewResidenialUnit')</span>
                {{--<span class="caption-helper">some info...</span>--}}
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {{Form::open(['route' => 'residenialUnits.store','method' => 'POST','class' => 'form-horizontal','id'=>'service-form'])}}
            <div class="form-body">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px; padding-bottom: 10px;">
                        
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Customer')</label>
                            <v-select :class="selectMem + ' vue-select2 '" v-model="selectedMember" @input="getSummary()" label="name" :options="member" @search="MemberSearch"></v-select>
                            <input type="hidden" name="cutomer_id" :value="(!selectedMember)?null:selectedMember.id" v-validate="'required'" data-vv-as="@lang('layout.Member')">
                            <span class="required">@{{ errors.first('employee_id') }}</span>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Name') </label>
                            {{Form::text('name',null,['class' => 'form-control','placeholder' => __('layout.Name'),'v-validate' =>'"required"','data-vv-as' => __('layout.Name')])}}
                            <span class="required">@{{ errors.first('name') }}</span>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Number')</label>
                            <input type="number" name="number" class="form-control" v-model="number">
                            <span class="required">@{{ errors.first('number') }}</span>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Address')</label>
                            {{Form::text('address',null,['class' => 'form-control','min' =>'0','placeholder' => __('layout.Address')])}}
                            <span class="required">@{{ errors.first('address') }}</span>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Blocks')</label>
                            <v-select label="name" v-model="blockList" :options="{{json_encode($blocks)}}" v-validate="'required'" data-vv-as="@lang('layout.Blocks')">
                            </v-select>
                            <input type="hidden" name="block_id" v-model.number="(!blockList)?null:blockList.id">
                            <span class="required">@{{ errors.first('block_id') }}</span>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.BlockStatus')</label>
                            <v-select class="vue-select2" placeholder="@lang('layout.Select')" v-model="selectedblocksStatus" label="name" :options="{{$blocksStatus}}"></v-select>
                            <input type="hidden" name="status_id" v-model.number="(!selectedblocksStatus)?null:selectedblocksStatus.id" />
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Status')</label>
                            <select name="status" class="form-control" id="">
                                <option value="Active">@lang('layout.Active')</option>
                                <option value="DeActive">@lang('layout.Deactive')</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Residentialstatus')</label>
                            <select name="sale_type" class="form-control" id="">
                                <option value="Empty">@lang('layout.Empty')</option>
                                <option value="Fill">@lang('layout.Fill')</option>
                            </select>
                        </div>


                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Date')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="date" placeholder="@lang('layout.Date')">
                            <span class="required">@{{ errors.first('date') }}</span>
                        </div>
 
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.BuildDate')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="build_date" placeholder="@lang('layout.BuildDate')">
                            <span class="required">@{{ errors.first('build_date') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Description')</label>
                            {{Form::text('description',null,['class' => 'form-control','min' =>'0','placeholder' => __('layout.Description')])}}
                            <span class="required">@{{ errors.first('description') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.House')</label>
                            {{Form::text('house',null,['class'=>'form-control','min'=>'0','placeholder'=>__('layout.House')])}}
                            <span class="required">@{{errors.first('house')}}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.NumberOfRoom')</label>
                            {{Form::text('roomNumber',null,['class'=>'form-control','min'=>'0','placeholder'=>__('layout.NumberOfRoom')])}}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px; padding-bottom: 10px;">
                        <table id="table_content" class="table table-bordered" style="margin-top: 10px !important;">
                            <thead>
                                <tr style="background-color: rgb(84, 199, 211);color:white">
                                    <th class="text-center" style="width:3px;">#</th> 
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.ResidenialUnitCategory')
                                    </th> 
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.Service')
                                    </th>
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.Price')
                                    </th>
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.Currency')
                                    </th>
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.MeterNumber')
                                    </th> 
                                    <th class="text-center" style="min-width: 130px;">
                                        @lang('layout.Date')
                                    </th>
                                    <th style="min-width: 4px;">
                                        @lang('layout.Description')
                                    </th>
                                    <th style="min-width: 4px;">
                                        <i class="fa fa-ellipsis-h"></i>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                 <tr v-for="(row,itemIndex) in rows" class="even">
                                    <td class="td_one">
                                        <span v-if="rows.length >1 " class="badge badge3 badge-roundless" style="background-color: transparent !important; color: black;">@{{itemIndex+1}}</span>
                                    </td>
   
                                    <td>
                                        <select name="residenial_unit_category_id[]" class="form-control" v-on:click="(rows.length-1 == itemIndex)?addRow():null">
                                            <option value="">@lang('layout.SelectType')</option>
                                            <option v-for="cl in ResidenialUnitCategories" :value="cl.id">@{{cl.name}}</option>
                                        </select>
                                    </td>
                                    <td class="highlight">
                                        <v-select label="name" v-model="row.item" :options="(row.items)" v-on:click="(rows.length-1 == itemIndex)?addRow():null">
                                        </v-select>
                                        <input type="hidden" name="service_id[]" :value="(row.item==null)?null:row.item.id">
                                    </td>
                                    <td>
                                        <input type="number" step="any" name="amount[]" class="form-control" v-model="row.amount" step="any" min="0"   placeholder="@lang('layout.Price')" v-validate="''" data-vv-as="@lang('layout.Price')">
                                    </td>
                                    <td>
                                        <v-select label="code" :options="currency" v-model="row.selected_currency"></v-select>
                                        <input type="hidden" name="currency[]" :value="(row.selected_currency)?row.selected_currency.code:null">
                                    </td>
                                    <td>
                                        {{Form::number('counter[]',null,['class' => 'form-control','placeholder' =>__('layout.MeterNumber'),'autocomplete'=>'off'])}}
                                    </td>
                                    <td>
                                        <date_picker name="date_detail[]" v-model="row.date_detail" placeholder="@lang('layout.Date')" ></date_picker>
                                    </td>
                                    <td>
                                        {{Form::text('description_detail[]',null,['class' => 'form-control', 'placeholder' =>__('layout.Description'),'autocomplete'=>'off'])}}
                                    </td>
                                    <td class="text-center">
                                        <span span v-if="rows.length >1 " v-on:click="deleteRow(itemIndex)" style="cursor: pointer;">
                                            <i class="paddint-both fa fa-trash" style="color: red"></i>
                                        </span> 
                                    </td>
                                </tr> 
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- <div class="form-section"></div> -->
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button type="button" class="btn green" @click="handleSubmit($event)" >@lang('layout.Submit')</button>
                                <a href="{{route('service.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>
            {{Form::close()}}
            <!-- END FORM-->
        </div>
        @endsection
        @push('scripts')
        <script src="{{url('/vue/sweetalert1.min.js')}}"></script>
        <script src="{{url('/vue/vue-resource.js')}}"></script>
        <script>
            @if(App::getLocale())
            Vue.use(VeeValidate, {
                locale: '{{App::getLocale()}}',
            });
            @else
            Vue.use(VeeValidate, {
                locale: 'en',
            });
            @endif
            Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
            Vue.component('modal', {
                template: '#vendor-template'
            })
            Vue.component('modal', {
                template: '#modal-template'
            })
            Vue.component('v-select', VueSelect.VueSelect)
            var blockList = {!!$blocks!!};
            var currency = {!! $currency !!};
            var ResidenialUnitCategory = {!! $residenialUnitCategory !!};
            var service = {!! $service !!};
            var blocksStatus =  {!!$blocksStatus!!}; 


            var vu= new Vue({
                el: '#item-service',
                data: {
                    type: 'inventoryPart',
                    iscost: false,
                    currency:currency,
                    isAssembly: false,
                    isInventory: false,
                    blockList: null,
                    isDisabled: true,
                    blocksStatus:blocksStatus,
                    selectedblocksStatus:null,
                    service: service,
                    selected_serviceClass : null,
                    measureType: {},
                    measure: {},
                    incomeAccount:null,
                    costAccount:null,
                    assetAccount:null,
                    measureSelected:null,
                    cost: 0,
                    total: 0,
                    errorMessage: '',
                    showModal: false,
                    fieldErrors: [],
                    selectedMetric: {},
                    senddata: {},
                    selectedMeasure: {},
                    selectedMember: null,
                    selectMem:'',
                    member: [],
                    ResidenialUnitCategories: ResidenialUnitCategory,
                    rows: [
                        {
                            items: service,
                            quantity: null,
                            amount: null,
                            total_amount: null,
                            amount: null,
                            selected_currency:null,
                            description: null
                        }
                    ],
                    selectedBlock: null,
                    number: "{{$number}}",
                    old_number: "{{$number}}",
                },

                methods: {
                    addRow: function () {
                        this.rows.push(   
                            { 
                                quantity: null,
                                items: this.service,
                                amount: null,
                                total_amount: null,
                                amount: null,
                                description: null
                            }
                        )
                    },
                    deleteRow: function (index) {
                        this.rows.splice(index, 1)
                    },
                    getSummary() {
                        if (vu.selectedMember) {
                            var id = vu.selectedMember.id;
                            axios.get("{{route('callMethod.search')}}", {
                                params: {
                                    method_name: 'memberStatment',
                                    member_id: id,
                                }
                            })
                            .then(function(response) {
                                if (response.data.length > 0) {
                                    vu.summary = response.data;
                                } else {
                                    vu.summary = [];
                                }
                            })
                            .catch(function(error) {
                                vu.summary = [];
                                console.log(error);
                            });
                        }
                    },
                    MemberSearch: _.debounce((search, loading) => {
                        loading(true);
                        let class_id = (vu.selected_class != undefined) ? vu.selected_class.id : null;
                        axios.get("{{route('callMethod.search')}}", {
                            params: {
                                method_name: 'SearchMember', 
                                keyword: search,
                                class_id: class_id
                            }
                        })
                        .then(function(response) {
                            if (response.data.length > 0) {
                                // console.log(response.data);
                                vu.member = [];
                                vu.member = response.data;
                            }
                            loading(false);
                        })
                        .catch(function(error) {
                            loading(false);
                            console.log(error);
                        })
                    }, getDebounceTime()),
                    handleSubmit(e) {
                        this.$validator.validate().then(valid => {
                            if (valid) {
                                // alert(e.target);
                                regForm(e.target);
                            }
						});
                    },
                 onComplete: function () {
                    document.getElementById("account-form").submit()
//                this.$emit('on-complete')
//                alert('Yay. Done!');
},
//                     addMeasure: function () {

// //                 var sendMeasure =  this.measureType;
// //                 sendMeasure.measure = this.measure;

//                         this.$http.post("{{route('measure.store')}}", {
//                             type: this.measureType,
//                             measure: this.measure
//                         }).then(function (success) {

//                             this.$http.get("{{route('inventory.create')}}").then(function (response) {


//                                 this.measures = response.body;
//                                 this.showModal = false;

// //
//                             }),
//                                 this.errorMessage = '';

// //
//                         }, function (response) {

//                             this.errorMessage = response.body

//                         });

//                     },
addMeasure: function () {
    let senddata = _.clone(vu.selectedMetric);

    senddata.measure = _.clone(vu.selectedMeasure);
        // console.log('NN',response.me);

        var req = axios.post("{{route('measure.store')}}",senddata)
        .then(function (response) {
            vu.showModal = false;
            vu.fieldErrors = [];
            vu.selectedMetric = {};
            vu.selectedMeasure = {};
            if(response.data.me){
                vu.measureSelected = response.data.me;
            }
            
            
        // console.log('wews',response.data.me);
        axios.get("{{route('service.create')}}").then(function (response) {
            // console.log('meauser',response.data.meauser);
            // vu.measureList = response.data;
            // vu.measureList.push({id:response.data.me.id,name:response.data.me.name});
        });
    })
        .catch(function (error) {
            axios.get("{{route('service.create')}}").then(function (response) {
                // vu.measureList = response.data;
            });
            vu.fieldErrors = error.response.data
        });
    },
    submit: function () {
        swal({
            title: "Are you sure?",
            text: "",
            icon: "info",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                document.getElementById("service-form").submit()

            } else {

            }
        });
    },
}
});
</script>
@endpush