@extends('layouts.layout-2')

@section('content')

    @if ($errors->any())
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.my_team') }}
    </h4>
    <div class="card">
        <h5 class="card-header">
            {{__('team.business')}} {{__('team.structure')}} 
        </h5>
        <div class="card-body">
            {!! Form::open(['action' => route('user_team_structure_old'), 'class' => 'form-horizontal', 'id'=>'form_filter_business_user']) !!}

            <div class="form-row align-items-center px-0 pb-2 pt-0">
                 <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                     <select class="custom-select on_change_select_filter" name="team_user_filter_month">
                        @foreach($filter_months as $key=>$value)
                            <option value="{{$key}}" @if(session('team_user_filter_month') == $key) selected @endif>{{$value}}</option>
                        @endforeach
                    </select> 
                </div>
                <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                    <select class="custom-select on_change_select_filter" name="team_user_filter_year">
                        @foreach($filter_years as $key=>$value)
                            <option value="{{$value}}" @if(session('team_user_filter_year') == $value) selected @endif>{{$value}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            {!! Form::close() !!}

            <hr class="container-m-nx border-light mt-0">
            <div>
              <div id="nestable-menu" class="mb-4">
                <button type="button" class="btn btn-default btn-sm" data-action="expand-all">{{ __('team.expand_all') }}</button>
                <button type="button" class="btn btn-default btn-sm" data-action="collapse-all">{{ __('team.collapse_all') }}</button>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <h6 class="">
                    {{ __('team.your_sponsor') }}
                  </h6>
                  <div class="dd" id="">
                    {!! $TreeCalcBot->makeSponsorHtml() !!}
                  </div>
                  <hr>
                </div>
              </div>
              
              <div class="row">
                <div class="col-md-12">
                    <h6 class="">
                       {{ __('team.your_team') }}
                      </h6>
                  <div class="dd" id="nestable2">
                    {!! $TreeCalcBot->makeHtmlTree() !!}
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
     <link rel="stylesheet" href="/vendor/libs/nestable/nestable.css">
      <script src="/vendor/libs/nestable/jquery-nestable.js?v=1"></script>
      <script>
        $( document ).ready(function() {
            function updateOutput(e) {
                //var list   = e.length ? e : $(e.target);
                //var output = list.data('output');
              };
            
              $('#nestable2').nestable().on('change', updateOutput);
              // output initial serialised data
              //updateOutput($('#nestable2').data('output', $('#nestable2-output')));
            
              $('#nestable-menu').on('click', function(e) {
                var target = $(e.target);
                var action = target.data('action');
            
                if (action === 'expand-all') {
                  $('.dd').nestable('expandAll');
                }
                if (action === 'collapse-all') {
                  $('.dd').nestable('collapseAll');
                }
              });
            
        });
        $('.on_change_select_filter').on('change', function(){
            $('#form_filter_business_user').submit();
        });
    </script>
@endsection