@extends('admin.layouts.index')
@section('title', 'Halaman Admin SI PeSSUT')
@section('judul', 'Data  Variable')
@section('konten')
<div class="container-widget animated fadeInRight">
    @include('admin.layouts.message')
    <div class="row">
        <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-title"> Data  Variable </div>
                        <div class="panel-body table-responsive">
                            <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
                                <thead>
                                        <tr>
                                            <th data-toogle="true">Sub Name</th>
                                                <th data-hide="phone">Title</th>
                                                <th data-hide="phone">Unit</th>
                                                <th data-hide="phone,tablet" >Note</th>
                                                <th data-hide="phone,tablet">Def</th>
                                                <th data-hide="phone,tablet">Vertical</th>
                                                <th data-hide="all">Graph</th>

                                             </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        {{-- <td>{{ Helper::dataContent() }}</td> --}}
                                    </tr>
                                </tbody>
                                <tfoot>
                                        <tr>
                                            <td colspan="7">
                                                <nav aria-label="Page navigation example">
                                                    <ul class="pagination pull-right"></ul>
                                                </nav>
                                            </td>
                                        </tr>
                                    </tfoot>
                            </table>

                         </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-title">Sinkronisasi</div>
                        <div class="panel-body">
                            {!! Form::open(
                                ['route' => ['admin.data-dinamis.dynamic.syncronisasi'],       
                                    'role'  => 'form',
                                    'method'=> 'post',
                                    'class'  => 'form-horizontal']) !!}
                                    
                                <div class="form-group{{ $errors->has('sub_id') ? ' has-error' : '' }}">
                                    {{ Form::label('subyek', null, ['class' => 'col-lg-12 control-label']) }}
                                    <div class="col-lg-12">
                                        <select name="sub_id" id="subject" class="form-control" data-live-search="true" placeholder="Pilih Subyek...">
                                            <option disabled>Pilih Subyek...</option>
                                            @foreach ( $subject as $key => $attr )
                                            <optgroup label="{{ $key }}">
                                                @foreach ( $attr as $sub => $values )
                                                <option data-pid="{{ $sub }}" value="{{ $sub }}">{{ $values }}</option>
                                                @endforeach
                                            </optgroup>
                                            @endforeach
                                        </select>
                                        @if($errors->has('sub_id'))
                                            <span class="help-block">
                                                <strong>{{ $errors->first('sub_id') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    {{ Form::label('Indikator', null, ['class' => 'col-lg-12 control-label']) }}
                                    <div class="col-lg-12">
                                        <select class="form-control" name="var_id" id="variable">
                                            <option disable>Indikator</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-10">
                                        {!! Form::submit('Sinkronisasi Data', ['class' => 'btn btn-primary']) !!}
                                    </div>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
        </div>
    </div>
</div>

@push('style')
<script type="text/javascript">
    jQuery(document).on('change','#subject', function(e){
		var id = jQuery(this).find('optgroup').children(":selected").attr("data-pid");
		
		jQuery.ajax({
			type	 : 'get',
			url		 : "{{ route('admin.data-dinamis.dynamic.variable') }}",
			data	 : {id:id},
			typeData : 'json',
			success:function(data)
			{
				console.log(data)
				jQuery('.listData').remove();
				var tablaDatos = jQuery('#variable');
				
					jQuery(data).each(function(key,value){
					    tablaDatos.append("<option class='listData' data-pid='"+value.var_id+"' value='"+value.var_id+"'>"+value.title+"</option>");
					});
				
			}
		})
	})
	
</script>
@endpush
@endsection