@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.ResidenialUnitEdit')</span>
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {!! Form::model($residenialUnit, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['residenialUnits.update',$residenialUnit->id]]) !!}
            <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.Employee')</label>
                            <v-select class="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" value="{{$residenialUnit->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 class="vue-select2" placeholder="@lang('layout.Select')" v-model="selectedBlocks" label="name" :options="{{$blocks}}"> </v-select>
                            <input type="hidden" name="block_id" v-model.number="(!selectedBlocks)?null:selectedBlocks.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-3">
                            <label class="control-label ">@lang('layout.Status')</label>
                            <select name="status" v-model="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-3">
                            <label class="control-label ">@lang('layout.Residentialstatus')</label>
                            <select name="sale_type" v-model="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-3">
                            <label class="control-label ">@lang('layout.Date')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="date" value="{{convertDate($residenialUnit->date)}}" placeholder="@lang('layout.Date')">
                            <span class="required">@{{ errors.first('date') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label ">@lang('layout.BuildDate')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="build_date" value="{{convertDate($residenialUnit->build_date)}}" placeholder="@lang('layout.BuildDate')">
                            <span class="required">@{{ errors.first('address') }}</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')])}}
                        </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">
                                    <td class="td_one" style="text-align: center;"> 
                                        <span span v-if="rows.length >1 " style="background: transparent !important; color: black;">
                                            @{{itemIndex+1}} 
                                        </span>
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        <select v-model="row.selecte_category" class="form-control" v-on:click="(rows.length-1 == itemIndex)?addRow():null">
                                            <option value="">@lang('layout.SelectType')</option>
                                            <option v-for="cl in residenialUnitCategory" :value="cl" :key="cl.id">@{{cl.name}}</option>
                                        </select>
                                        <input type="hidden" name="residenial_unit_category_id[]" :value="(row.selecte_category)?row.selecte_category.id:null">
                                    </td>   

                                    <td class="highlight">
                                        <v-select label="name" v-model="row.item" :options="service" 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 class="td_one" style="text-align: center;"> 
                                        {{Form::text('amount[]',null,['class' => 'form-control','v-model'=>'row.amount','placeholder' =>__('layout.Amount'),'autocomplete'=>'off','v-on:focus'=>'(rows.length-1 == itemIndex)?addRow():null'])}}
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        <v-select label="code" :options="currency" v-model="row.selecte_currency"></v-select>
                                        <input type="hidden" name="currency[]" :value="(row.selecte_currency)?row.selecte_currency.code:null">
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        {{Form::number('counter[]',null,['class' => 'form-control','v-model'=>'row.counter','placeholder' =>__('layout.MeterNumber'),'autocomplete'=>'off'])}}
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        {{-- <input type="text" name="date_detail[]" class="form-control date" autocomplete="off" v-model="row.date_detail"> --}}
                                        <date_picker name="date_detail[]" v-model="row.date_detail" placeholder="@lang('layout.Date')" ></date_picker>
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        {{Form::text('description_detail[]',null,['class' => 'form-control','v-model'=>'row.description','placeholder' =>__('layout.Description'),'autocomplete'=>'off'])}}
                                    </td>
                                    <td class="td_one" style="text-align: center;"> 
                                        <span span v-if="rows.length >1 " style="color: red;cursor: pointer;" v-on:click="deleteRow(itemIndex,row.id)">
                                            <i class="paddint-both fa fa-trash"></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('residenialUnits.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 block = {!!$blocks!!};
            var residenialUnitDetails = {!! $residenialUnitDetails !!};
            var residenialUnitCategory = {!! $residenialUnitCategory !!};
            var currency = {!! $currency !!};
            var service = {!! $service !!};
            var blocksStatus =  {!!$blocksStatus!!}; 
            var residenialUnit =  {!!$residenialUnit!!}; 
            
            var vu= new Vue({
                el: '#item-service',
                data: {
                    residenialUnitDetails: residenialUnitDetails,
                    residenialUnitCategory: residenialUnitCategory,
                    selectedMember:{!!$selectedMember!!},
                    member: [],
                    service: service,
                    status: 'Active',
                    sale_type: 'Empty',
                    rows: [
                        // { 
                        //     date: null,
                        //     counter: null,
                        //     description: null,
                        //     amount: null,
                        //     detailsDescription: null,
                        //     name: null,
                        //     currency:currency,
                        //     selected_currency:null,
                        //     selected_category:null,
                        //     residenial_unit_category_id: '',
                        //     unit: null
                        // },
                    ], 
                    deletedRow: [],
                    blocksStatus:blocksStatus,
                    selectedblocksStatus:null,
                    selectedBlocks: null,
                    selectedCategory: null
                },
                mounted() {
                    @if($residenialUnit->block_id != null)    
                        this.selectedBlocks = _.find(block, (e) => e.id == {{$residenialUnit->block_id}});
                    @endif

                    this.status = residenialUnit.status;
                    this.sale_type = residenialUnit.sale_type;
                     
                    @if($residenialUnit->status_id != null)    
                        this.selectedblocksStatus = _.find(blocksStatus, (e) => e.id == {{$residenialUnit->status_id}});
                    @endif

                    this.setData();
                },
                methods: {
                    setData: function(){
                        this.rows = residenialUnitDetails;
                    },
                    addRow: function () { 
                        this.rows.push(   
                            { 
                                items: this.service,
                                date_detail: null,
                                quantity: null,
                                price_fe: null,
                                total_amount: null,
                                unit: null,
                                name: null,
                                detailsDescription: null
                            }
                        )
                    },
                    deleteRow: function (index,id) {
                        this.deletedRow.push({check: id});
                        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);
                            }
						});
                    },
                    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