@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.register_new_consultant') }}
            @if(isset($optimized) && $optimized)
                <span class="badge badge-success ml-2">{{ __('team.optimized') }}</span>
            @endif
        </h5>
        <!-- Performance Metrics Display -->
        @if(isset($performance))
        <div class="card-body border-bottom">
            <div class="alert alert-info mb-0">
                <div class="row">
                    <div class="col-md-6">
                        <i class="fa fa-clock mr-1"></i>
                        <strong>{{ __('team.loading_time') }}</strong> {{ $performance['execution_time'] }}ms
                    </div>
                    <div class="col-md-6">
                        <i class="fa fa-user mr-1"></i>
                        <strong>{{ __('team.user_id') }}</strong> {{ $performance['user_id'] }}
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        <div class="row no-gutters row-bordered">
            <div class="col-md-12 p-4">
                <h6 class="mb-4">{{ __('team.link_for_consultant_registration') }}</h6>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-prepend">
                          <button class="btn btn-secondary" type="button" title="Kopiert!" data-clipboard-demo data-clipboard-target="#shop_register_link"><i class="ion ion-ios-copy"></i> {{ __('Copy link') }}</button>
                        </span>
                        <input type="text" class="form-control" name="shop_register_link" value="{{$shop_register_link}}" id="shop_register_link" placeholder="">
                    </div>
                </div>
                <p>{{ __('team.new_consultant_copy1') }}</p>
                
                <!-- Zusätzliche Optimierungs-Info -->
                @if(isset($optimized) && $optimized)
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fa fa-info-circle mr-1"></i>
                        {{ __('team.optimized_performance_features') }}
                        @if(isset($performance))
                            <a href="#" onclick="showPerformanceDetails()" class="ml-2">{{ __('team.show_details') }}</a>
                        @endif
                    </small>
                </div>
                @endif
            </div>
        </div>
    </div><!-- Target -->
    
    <!-- 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_team_overview') }}</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>User ID:</strong></td>
                            <td>{{ $performance['user_id'] }}</td>
                        </tr>
                        <tr>
                            <td><strong>Optimierungen:</strong></td>
                            <td>
                                <span class="badge badge-success">{{ __('team.performance_monitoring') }}</span>
                                <span class="badge badge-success">Error Handling</span>
                                <span class="badge badge-success">{{ __('team.fallback_support') }}</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
    <script>
        $( document ).ready(function() {
            var clipboardDemos = new ClipboardJS('[data-clipboard-demo]');
            clipboardDemos.on('success', function (e) {
                e.clearSelection();
                $(e.trigger).tooltip('enable').tooltip('show');
            });
            clipboardDemos.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });

            $('button[data-clipboard-demo]').on('mouseout', function () {
                $(this).tooltip('disable');
            })
        });
        
        @if(isset($performance))
        function showPerformanceDetails() {
            $('#performanceModal').modal('show');
        }
        @endif
    </script>
@endsection