@extends('layouts.app')
@section('style')
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet">
@stop
@section('content')
    <div class="row">

        <div class="portlet light bg-inverse">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase">@lang('layout.NGOProjectEdit') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">
                    <a href="" class="collapse" data-original-title="" title=""> </a>
                    <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
                    <a href="" class="reload" data-original-title="" title=""> </a>
                    <a href="" class="remove" data-original-title="" title=""> </a>
                </div>
            </div>
            <div class="portlet-body form" style="margin-bottom: 50%;" id="app" >
                <!-- BEGIN FORM-->
                {!! Form::model($nGOProject,['method' => 'PATCH','route' => ['nGOProject.update',$nGOProject->id],'class'=>'form-horizontal']) !!}
                <div class="form-body">
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="col-md-4">
                                    <label class="control-label ">@lang('layout.ProjectName')</label>
                                    {{Form::text('name',null,['class' => 'form-control','placeholder' => __('layout.ProjectName')])}}
                                </div>
                                <div class="col-md-8" style="padding: 0px !important;">
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.ProjectCode')</label>
                                        {{Form::text('code',null,['class' => 'form-control','placeholder' => __('layout.Code')])}}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.ReferenceNumber')</label>
                                        {{Form::text('ref_no',null,['class' => 'form-control','placeholder' => __('layout.ReferenceNumber')])}}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.Date')</label>
                                        <input type="text" class="form-control date" name="date" value="{{$nGOProject->date}}" >
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="control-label">@lang('layout.Location')</label>
                                    {{Form::text('location',null,['class' => 'form-control','placeholder' => __('layout.Location')])}}
                                </div>
                                <div class="col-md-8" style="padding: 0px !important;">
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.Category')</label>
                                        <v-select class="vue-select2" v-model="selectedCategory" label="name" :options="{{$projectCategory}}">
                                        </v-select>
                                        <input type="hidden" name="category_id" v-model.number="(!selectedCategory)?null:selectedCategory.id">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.StartDate')</label>
                                        <input type="text" class="form-control date" autocomplete="off" name="start_date" value="{{$nGOProject->start_date}}" >
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label">@lang('layout.EndDate')</label>
                                        <input type="text" class="form-control date" name="end_date" value="{{$nGOProject->end_date}}" >
                                    </div>
                                </div>
                                <div class="col-md-12" style="padding: 0px !important;">
                                    <div class="col-md-4 col-sm-12">
                                        <label class="control-label">@lang('layout.Currency')</label>
                                        <v-select label="code" :options="currency" v-model="selected_currency"></v-select>
                                        <input type="hidden" name="currency" :value="selected_currency.code">
                                    </div>

                                    <div class="col-md-3 col-sm-12">
                                        <label class="control-label">@lang('layout.Rate')</label>
                                        <input type="number" name="rate" v-model="!selected_currency?0:selected_currency.rate" class="form-control" >
                                    </div>
                                    <div class="col-md-5 col-sm-12">
                                        <label class="control-label">@lang('layout.Amount')</label>
                                        {{Form::number('amount',null,['class' => 'form-control'])}}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="control-label">@lang('layout.Status')</label>
                                    <select name="status" v-model="status" class="form-control">
                                        <option value="on">@lang('layout.Active')</option>
                                        <option value="pending">@lang('layout.Pending')</option>
                                        <option value="off">@lang('layout.InActive')</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="control-label">@lang('layout.Description')</label>
                                    {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 2, 'cols' => 30)) !!}
                                </div>
                                
                            </div> 
                            
                            <div class="col-md-12">    
                                <!-- begin donator -->
                                <table id="table_content" class="table table-striped table-bordered table-advance table-hover">
                                    <thead>
                                    <tr>
                                        <th class="text-center" style="min-width: 8px;"> #</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Donator')</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Description')</th>
                                        <th></th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(record,index) in donatorData">
                                        <td>@{{index+1}}</td>
                                        <td class="highlight">
                                            <v-select label="name" v-model="record.selected" :options="(record.donator_list)"
                                                    @click.native="addNew('donator',index)"
                                                    placeholder="@lang('layout.Select')">

                                            </v-select>
                                            <input type="hidden" name="donator_id[]"
                                                :value="(record.selected==null)?null:record.selected.id">
                                        </td>

                                        <td>
                                            <input class="form-control" type="text" name="don_description[]"
                                                v-model.number="record.description" placeholder="@lang('layout.Description')">
                                        </td>

                                        <td>
                                            <span v-on:click="deleteItem('donator',index)"><i
                                                        class="paddint-both glyphicon glyphicon-trash"></i></span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!-- end donator -->
                            </div>  
                            <div class="col-md-12">    
                                <!-- begin budgetLine -->
                                <table id="table_content" class="table table-striped table-bordered table-advance table-hover">
                                    <caption>@lang('layout.BudgetLine')</caption>
                                    <thead>
                                    <tr>
                                        <th class="text-center" style="min-width: 8px;"> #</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Name')</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Code')</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Amount')</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Unit')</th>
                                        <th class="text-center" style="min-width: 160px;">@lang('layout.Description')</th>
                                        <th></th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(record,index) in budgetLineData">
                                        <td>@{{index+1}}</td>
                                        <td>
                                            <input class="form-control" type="text" name="budget_name[]" v-model="record.name" @click="addNew('budgetLine',index)" placeholder="@lang('layout.Name')">
                                        </td>

                                        <td>
                                            <input class="form-control" type="text" name="budget_code[]" v-model="record.code" placeholder="@lang('layout.Code')">
                                        </td>

                                        <td>
                                            <input class="form-control" type="number" name="budget_amount[]" v-model="record.amount" placeholder="@lang('layout.Amount')">
                                        </td>

                                        <td>
                                            <input class="form-control" type="number" name="budget_unit[]" v-model="record.unit" placeholder="@lang('layout.Unit')">
                                        </td>

                                        <td>
                                            <input class="form-control" type="text" name="budget_description[]" v-model="record.description" placeholder="@lang('layout.Description')">
                                        </td>

                                        <td>
                                            <span v-on:click="deleteItem('budgetLine',index)"><i class="paddint-both glyphicon glyphicon-trash"></i></span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!-- end budgetLine -->
                            </div>
                        </div>  
                    </div>
                    <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                        <button type="button" class="btn green" onclick="regForm(this)"> @lang('layout.Update') </button>
                        <button href="{{url('nGOProject.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel') </button>
                     </div>  
                {!! Form::close() !!}
            </div>                  
            <!-- END FORM-->
        </div>
    </div> 
@endsection

@push('scripts')
<script>

    Vue.component('v-select', VueSelect.VueSelect);
    var donator = {!! $shareholder !!};
    var projectCategory = {!! $projectCategory !!};
    var seletedDonator = {!! $seletedDonator !!};
    var currency = {!! $currency!!}
    var selected_currency = {!! $selected_currency !!};
    var ngoBudgetLine = {!! $ngoBudgetLine !!};

    let vu = new Vue({
    el: '#app',
    data:{
        status: "{{$nGOProject->status}}",
        projectCategory: projectCategory,
        selectedCategory: null,
        donator: donator,
        seletedDonator: seletedDonator,
        ngoBudgetLine: ngoBudgetLine,
        donatorData: [],
        budgetLineData: [],
        currency: currency,
        selected_currency: selected_currency,
    },
    mounted: function () {

        // begin service

        for (var r = 0; r < this.seletedDonator.length; r++) {
            this.donatorData.push( {description: this.seletedDonator[r].description, donator_list: donator, selected: this.seletedDonator[r]})
        }
            this.donatorData.push({description: null, donator_list: donator, selected: null});
        // end service

        // begin budget Line 

        for (var r = 0; r < this.ngoBudgetLine.length; r++) {
            this.budgetLineData.push({description: this.ngoBudgetLine[r].description, name: this.ngoBudgetLine[r].name, amount: this.ngoBudgetLine[r].amount, unit: this.ngoBudgetLine[r].unit, code: this.ngoBudgetLine[r].code})
        }
            this.budgetLineData.push({description: null, name: null, amount: null, unit: null, code: null});
        // end budget Line 

        if ("{{$nGOProject->category_id}}") {
            this.selectedCategory=_.find(this.projectCategory,(v)=>v.id=="{{$nGOProject->category_id}}");
            
        }

    },
    methods:{
        // generic function for adding item to list
        addNew(type = null, index) {
            if (type != null) {
                if (type == 'donator') {
                    if (this.donatorData[index + 1] == undefined) {
                        this.donatorData.push({description: null, donator_list: this.donator, selected: null});
                    }
                }
            }
            if (type == 'budgetLine') {
                if (this.budgetLineData[index + 1] == undefined) {
                    this.budgetLineData.push({description: null, name: null, amount: null, unit: null, code: null});
                }
            }

        },

        // delete item from list
        deleteItem(type = null, index) {
            if (type != null) {
                if (type == 'donator') {
                    this.donatorData.splice(index, 1);
                }
                if (type == 'budgetLine') {
                    this.budgetLineData.splice(index, 1);
                }
            }

        },
    }
    });


</script>

@endpush