@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
    
    <!-- Error Message Display -->
    @if(isset($error))
        <div class="alert alert-warning">
            <i class="fa fa-exclamation-triangle mr-2"></i>
            {{ $error }}
        </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')}} 
            @if(isset($performance) && isset($performance['version']))
                @if($performance['version'] === 'Optimized')
                    <span class="badge badge-success ml-2">{{ __('team.optimized') }}</span>
                @elseif($performance['version'] === 'Standard')
                    <span class="badge badge-info ml-2">{{ __('team.standard_monitoring') }}</span>
                @elseif($performance['version'] === 'Fallback')
                    <span class="badge badge-warning ml-2">{{ __('team.fallback') }}</span>
                @endif
            @endif
        </h5>
        <div class="card-body">
            {!! Form::open(['action' => route('user_team_structure'), '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() !!}

            <!-- Performance Metrics Display -->
            @if(isset($performance) && config('app.debug'))
            <div class="alert alert-info">
                <div class="row">
                    <div class="col-md-4">
                        <i class="fa fa-clock mr-1"></i>
                        <strong>{{ __('team.loading_time') }}</strong> {{ $performance['execution_time'] }}ms
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-memory mr-1"></i>
                        <strong>{{ __('team.memory') }}</strong> {{ $performance['memory_used'] }}
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-users mr-1"></i>
                        <strong>{{ __('team.team_members') }}</strong> {{ $performance['user_count'] }}
                    </div>
                </div>
            </div>
            @endif

            <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>
                
                <!-- Zusätzliche User-Controls -->
                @if(isset($performance) && config('app.debug'))
                <div class="btn-group ml-3" role="group">
                    <button type="button" class="btn btn-info btn-sm" onclick="showPerformanceDetails()">
                        <i class="fa fa-chart-line"></i> {{ __('team.performance_details') }}
                    </button>
                    @if(config('app.debug'))
                        @if(isset($performance['version']) && $performance['version'] === 'Standard')
                        <a href="{{ route('user_team_structure') }}?use_optimized=1" class="btn btn-outline-success btn-sm" title="Optimierte Version testen">
                            <i class="fa fa-rocket"></i> {{ __('team.test_optimized') }}
                        </a>
                        @else
                        <a href="{{ route('user_team_structure') }}" class="btn btn-outline-info btn-sm" title="Standard-Version">
                            <i class="fa fa-undo"></i> {{ __('team.standard_version') }}
                        </a>
                            @if(isset($performance['calculation_type']) && $performance['calculation_type'] === 'Live')
                                <a href="{{ route('user_team_structure') }}?use_optimized=1" class="btn btn-outline-warning btn-sm" title="Live-Berechnung aus">
                                    <i class="fa fa-refresh"></i> Live berechnen aus
                                </a>
                            @else
                                <a href="{{ route('user_team_structure') }}?use_optimized=1&force_live_calculation=1" class="btn btn-outline-success btn-sm" title="Live-Berechnung erzwingen">
                                    <i class="fa fa-refresh"></i> Live berechnen
                                </a>
                            @endif
                        @endif
                    @endif
                </div>
                @endif
              </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>

    <!-- Performance Details Modal -->
    @if(isset($performance))
    <div class="modal fade" id="performanceModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('team.performance_metrics_my_team') }}</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-sm">
                        <tr>
                            <td><strong>{{ __('team.execution_time') }}</strong></td>
                            <td>{{ $performance['execution_time'] }}ms</td>
                        </tr>
                        <tr>
                            <td><strong>Memory-Verbrauch:</strong></td>
                            <td>{{ $performance['memory_used'] }}</td>
                        </tr>
                        <tr>
                            <td><strong>{{ __('team.team_members') }}</strong></td>
                            <td>{{ $performance['user_count'] }}</td>
                        </tr>
                        <tr>
                            <td><strong>Version:</strong></td>
                            <td>{{ $performance['version'] ?? 'Standard' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Features:</strong></td>
                            <td>
                                @if(isset($performance['version']) && $performance['version'] === 'Optimized')
                                    <span class="badge badge-success">TreeCalcBotOptimized</span>
                                @else
                                    <span class="badge badge-info">TreeCalcBot Standard</span>
                                @endif
                                <span class="badge badge-success">{{ __('team.performance_monitoring') }}</span>
                                <span class="badge badge-success">Error Handling</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('team.close') }}</button>
                </div>
            </div>
        </div>
    </div>
    @endif

     <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();
        });

        @if(isset($performance))
        function showPerformanceDetails() {
            $('#performanceModal').modal('show');
        }
        @endif
    </script>
@endsection