@extends('layouts.app')
@section('style')

<style>

</style>
@stop
@section('content')

<div class="row">

        <div class="portlet light bg-inverse" style="min-height: 100%;">
            <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.MemberStatement') </span>
                </div>
                <div class="tools">
                    
                </div>
            </div>
            <div class="portlet-body form" style="margin-bottom:50%;">


              
                    <div  id="app" v-cloak>
                      <!-- BEGIN FORM-->
                      {!! Form::open(array('route' => 'export.PDFAll','method'=>'DELETE','class'=>'form-horizontal')) !!}
                    

                          <div class="form-body">
                          <div class="row" >
                              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                  <div class="form-group">
                                      
                                      <div class="col-md-12">
                                        <label class="control-label">@lang('layout.SelectClass')</label>
                                          <select class="list-style form-control" @change="changeCategory(this)" name="class_id" v-model="selected_class">
                                                  <option value="" disabled>@lang('layout.SelectClass')</option>
                                                  <option v-for="cat in category" :value="cat.id">@{{cat.name}}</option>
                                          </select>
                                      </div>
                                  </div> 
                              </div>

                              <!-- <div class="col-md-4">
                                    <label class="control-label ">@lang('layout.SelectClass') </label>
                                    

                                    <v-select class="vue-select2"
                                              v-model="selected_class1"
                                              label="name"
                                              :options="member_class"
                                              @search="lala()">
                                    </v-select>

                                </div> -->

                                              

                            
                            </div>
                        

                            <input type="hidden" name="type" value="member_statment_form">
                          <div class="row" style=" overflow-y: scroll; height:600px;">               
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr style="background-color: rgb(174, 183, 178)">
                                        <th colspan="6">@lang('layout.SelectAll') </th>
                                    </tr> 
                                    <tr style="background-color: rgb(174, 183, 178);">
                                        <th style="background-color: #6b716b;"><input type="checkbox" name="selectedItem"  @change="selectAll(this)" v-model="selectedAll"> </th>
                                        <th>@lang('layout.Code') </th>
                                        <th>@lang('layout.Name') </th>
                                        <th>@lang('layout.Phone') </th>
                                        <th>@lang('layout.Address') </th>
                                        @if(getCustomerStatement() == "true")
                                        <th>@lang('layout.Statements') </th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in items">
                                        <input type="hidden" name="item[]" v-model="item.id">
                                        <td class="highlight" style="background-color: rgb(174, 183, 178);">
                                            <input type="checkbox" @click="toggleCheck(index)" :checked="item.selected"  >
                                            <input type="hidden" name="selected_item[]" :value="item.selected">
                                        </td>
                                          <td class="highlight">
                                            <div class="success"></div>
                                            @{{item.code}} 
                                          </td>
                                        <td class="highlight">
                                            <div class="success"></div>
                                            @{{item.name}}
                                        </td>
                                        <td class="highlight">
                                            <div class="success"></div>
                                            @{{item.phone}}
                                        </td>
                                        <td class="highlight">
                                            <div class="success"></div>
                                            @{{item.address1}}
                                        </td> 
                                        @if(getCustomerStatement() == "true")
                                        <td class="highlight">
                                            <div class="success"></div>
                                            @{{item.balance}}
                                        </td>
                                        @endif
                                        
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                                              
                          </div>
                          <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                              <button type="button" onclick="regForm(this)" class="btn green">@lang('layout.Submit')</button>
                              <a href="{{route('customer.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                          </div>  
                      {!! Form::close() !!}
                  </div>
                
            </div>                  
            <!-- END FORM-->
        </div>
    </div> 

@endsection
@push('scripts')


<script type="text/javascript">
 Vue.component("v-select", VueSelect.VueSelect);

  var member_class = {!! $member_class !!}
  var items = {!!$items!!}
  new Vue({
    el: '#app',
    data: {
      category:member_class,
      selected_class:null,
      items:items,
      selectedAll:false,
      member_class:member_class,

    },

 

    methods:
    {
      changeCategory(e)
      {
        var value=e.event.target.value;
        for(var i=0;i<this.items.length;i++)
        { 
           this.items[i].selected=null;
           if(this.items[i].class_id==value)
           {
              this.items[i].selected=true;
           }
        }
      },
      toggleCheck(index)
      {
        this.items[index].selected=!this.items[index].selected;
      },
     //Select * Records
      selectAll(e)
      {
        
         for(var i=0;i<this.items.length;i++)
        { 
           if(this.selectedAll==true)
           {
             this.items[i].selected=true;
           }
           else
           {
               this.items[i].selected=false;
           }
         
        }
      }
    }
  });

</script>
@endpush