@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') }} {{ __('navigation.overview') }}
            @if (isset($performance) && isset($performance['version']))
                @if ($performance['version'] === 'Optimized')
                    <span class="badge badge-default ml-2">v2</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>

        <!-- Performance Metrics Display -->
        @if (isset($performance) && config('app.debug'))
            <div class="card-body border-bottom">
                <div class="alert alert-info mb-0">
                    <div class="row">
                        <div class="col-md-3">
                            <i class="fa fa-clock mr-1"></i>
                            <strong>{{ __('team.loading_time') }}</strong> {{ $performance['execution_time'] }}ms
                        </div>
                        @if (isset($performance['memory_used']))
                            <div class="col-md-3">
                                <i class="fa fa-memory mr-1"></i>
                                <strong>{{ __('team.memory') }}</strong> {{ $performance['memory_used'] }}
                            </div>
                        @endif
                        @if (isset($performance['user_count']))
                            <div class="col-md-3">
                                <i class="fa fa-users mr-1"></i>
                                <strong>{{ __('team.team_size') }}</strong> {{ $performance['user_count'] }}
                            </div>
                        @endif
                        <div class="col-md-3">
                            <i class="fa fa-cog mr-1"></i>
                            <strong>{{ $performance['version'] }}</strong>
                            @if (isset($performance['calculation_type']))
                                <span
                                    class="badge badge-sm {{ $performance['calculation_type'] === 'Live' ? 'badge-warning' : 'badge-success' }}">
                                    {{ $performance['calculation_type'] }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="card-body p-0">
            {!! Form::open([
                'action' => route('user_team_members_show'),
                'class' => 'form-horizontal',
                'id' => 'form_filter_team_user',
            ]) !!}

            <div class="form-row align-items-center px-4 pb-2 pt-3">
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <select class="custom-select on_change_team" 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-6 col-md-3 col-lg-3 mb-1">
                    <select class="custom-select on_change_team" 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 class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <select class="custom-select on_change_team" name="team_user_filter_active">
                        @foreach ($filter_active as $key => $value)
                            <option value="{{ $key }}" @if (session('team_user_filter_active') == $key) selected @endif>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <select class="custom-select on_change_team" name="team_user_filter_level">
                        @foreach ($filter_levels as $key => $value)
                            <option value="{{ $key }}" @if (session('team_user_filter_level') == $key) selected @endif>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-row align-items-center px-4 pb-3">
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <select class="custom-select on_change_team" name="team_user_filter_next_level">
                        @foreach ($filter_next_level as $key => $value)
                            <option value="{{ $key }}" @if (session('team_user_filter_next_level') == $key) selected @endif>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <!-- Platz für weitere Filter falls nötig -->
                </div>
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <!-- Platz für weitere Filter falls nötig -->
                </div>
                <div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-1">
                    <!-- Platz für weitere Filter falls nötig -->
                </div>
            </div>
            {!! Form::close() !!}

            <!-- Zusätzliche Controls -->
            @if (isset($performance) && config('app.debug'))
                <div class="px-4 pb-2">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-info btn-sm" onclick="showPerformanceDetails()">
                                    <i class="fa fa-chart-line"></i> {{ __('team.performance_details') }}
                                </button>
                                <a href="{{ route('user_team_structure') }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="fa fa-sitemap"></i> {{ __('team.team_structure') }}
                                </a>
                                <a href="{{ route('user_team_add_member') }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fa fa-user-plus"></i> {{ __('team.new_member') }}
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="btn-group" role="group">
                                @if (isset($optimized) && $optimized)
                                    <button type="button" class="btn btn-sm btn-success"
                                        onclick="toggleDataTableMode('optimized')" id="btn-optimized">
                                        <i class="fa fa-rocket"></i> {{ __('team.optimized_action') }}
                                    </button>
                                @endif
                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                    onclick="toggleDataTableMode('standard')" id="btn-standard">
                                    <i class="fa fa-table"></i> {{ __('team.standard_action') }}
                                </button>
                                @if (isset($forceLiveCalculation) && !$forceLiveCalculation)
                                    <button type="button" class="btn btn-sm btn-outline-warning"
                                        onclick="enableLiveCalculation()" id="btn-live">
                                        <i class="fa fa-sync"></i> Live
                                    </button>
                                @else
                                    <button type="button" class="btn btn-sm btn-warning" onclick="disableLiveCalculation()"
                                        id="btn-live">
                                        <i class="fa fa-sync fa-spin"></i> Live
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-style table table-striped table-bordered" id="datatable-team-users">
                    <thead>
                        <tr>
                            <th>{{ __('team.ID') }}</th>
                            <th>{{ __('team.Ebene') }}</th>
                            <th>{{ __('team.Level') }}</th>
                            <th>{{ __('team.KD') }}</th>
                            <th>{{ __('team.KU') }}</th>
                            <th>{{ __('team.TP') }}</th>
                            <th>{{ __('E-Mail') }}</th>
                            <th>{{ __('First name') }}</th>
                            <th>{{ __('Last name') }}</th>
                            <th>{{ __('team.next_level') }}</th>
                            <th>{{ __('tables.account') }}</th>
                            <th>{{ __('team.bis') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Performance Details Modal -->
    @if (isset($performance) && config('app.debug'))
        <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>
                            @if (isset($performance['memory_used']))
                                <tr>
                                    <td><strong>{{ __('team.memory_usage') }}</strong></td>
                                    <td>{{ $performance['memory_used'] }}</td>
                                </tr>
                            @endif
                            @if (isset($performance['user_count']))
                                <tr>
                                    <td><strong>{{ __('team.team_size') }}</strong></td>
                                    <td>{{ $performance['user_count'] }} User</td>
                                </tr>
                            @endif
                            <tr>
                                <td><strong>User ID:</strong></td>
                                <td>{{ $performance['user_id'] }}</td>
                            </tr>
                            <tr>
                                <td><strong>Version:</strong></td>
                                <td>{{ $performance['version'] ?? 'Standard' }}</td>
                            </tr>
                            @if (isset($performance['calculation_type']))
                                <tr>
                                    <td><strong>Berechnungstyp:</strong></td>
                                    <td>
                                        <span
                                            class="badge {{ $performance['calculation_type'] === 'Live' ? 'badge-warning' : 'badge-success' }}">
                                            {{ $performance['calculation_type'] }}
                                        </span>
                                        @if ($performance['calculation_type'] === 'Live')
                                            <small class="text-muted ml-2">Echtzeitberechnung ohne Cache</small>
                                        @else
                                            <small class="text-muted ml-2">{{ __('team.optimized_with_cache') }}</small>
                                        @endif
                                    </td>
                                </tr>
                            @endif
                            <tr>
                                <td><strong>Features:</strong></td>
                                <td>
                                    <span class="badge badge-success">TreeCalcBotOptimized</span>
                                    <span class="badge badge-success">{{ __('team.performance_monitoring') }}</span>
                                    <span class="badge badge-success">Live Calculation</span>
                                    <span class="badge badge-success">Memory Optimization</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

    <script>
        // Global Variables
        var oTable;

        $(document).ready(function() {
            oTable = $('#datatable-team-users').DataTable({
                "processing": true,
                "serverSide": true,
                "stateSave": true,
                "searching": true,
                ajax: {
                    url: getDataTableUrl(),
                    data: function(d) {
                        d.team_user_filter_name = $('input[name=team_user_filter_name]').val();
                        d.team_user_filter_month = $('select[name=team_user_filter_month]').val();
                        d.team_user_filter_year = $('select[name=team_user_filter_year]').val();
                        d.team_user_filter_active = $('select[name=team_user_filter_active]').val();
                        d.team_user_filter_level = $('select[name=team_user_filter_level]').val();
                        d.team_user_filter_next_level = $('select[name=team_user_filter_next_level]')
                            .val();
                        d.force_live_calculation = window.liveModeEnabled || false;
                    }
                },
                "columns": [{
                        data: 'id',
                        name: 'id',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'deep',
                        name: 'deep',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'user_level',
                        name: 'user_level',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'is_qual_kp',
                        name: 'is_qual_kp',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'sales_volume_KP_points',
                        name: 'sales_volume_KP_points',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'sales_volume_total',
                        name: 'sales_volume_total',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'email',
                        name: 'email',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'first_name',
                        name: 'first_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'last_name',
                        name: 'last_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'next_level_qualified',
                        name: 'next_level_qualified',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'active_account',
                        name: 'active_account',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'payment_account_date',
                        name: 'payment_account_date',
                        orderable: false,
                        searchable: false
                    },

                ],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "order": [
                    [1, "asc"]
                ],
                "language": {
                    "url": "/js/datatables-{{ \App::getLocale() }}.json"
                }
            });
            $('select.on_change_team').on('change', function() {
                oTable.draw();
            });

            $('input.on_keyup_team').on('keyup', function() {
                oTable.draw();
            });

            // Filter für neue Felder hinzufügen
            $('select[name=team_user_filter_level]').on('change', function() {
                oTable.draw();
            });

            $('select[name=team_user_filter_next_level]').on('change', function() {
                oTable.draw();
            });
        });

        // Global Variables für DataTable-Mode
        window.dataTableMode = '{{ isset($optimized) && $optimized ? 'optimized' : 'standard' }}';
        window.liveModeEnabled = {{ isset($forceLiveCalculation) && $forceLiveCalculation ? 'true' : 'false' }};

        // DataTable URL basierend auf Modus
        function getDataTableUrl() {
            if (window.dataTableMode === 'optimized') {
                return '{!! route('user_team_members_datatable_optimized') !!}';
            }
            return '{!! route('user_team_members_datatable') !!}';
        }

        // Toggle zwischen Standard und Optimized DataTable
        function toggleDataTableMode(mode) {
            if (mode === window.dataTableMode) return; // Bereits aktiver Modus

            window.dataTableMode = mode;

            // Button-Status aktualisieren
            $('.btn-group button[id^="btn-"]').removeClass('btn-success btn-outline-secondary').addClass(
                'btn-outline-secondary');
            if (mode === 'optimized') {
                $('#btn-optimized').removeClass('btn-outline-secondary').addClass('btn-success');
            } else {
                $('#btn-standard').removeClass('btn-outline-secondary').addClass('btn-success');
            }

            // DataTable neu laden mit neuer URL
            oTable.ajax.url(getDataTableUrl()).load();

            // Status-Message anzeigen
            showMessage('{{ __('team.datatable_mode_switched', ['mode' => '']) }}'.replace(':mode', mode === 'optimized' ?
                '{{ __('team.optimized_action') }}' : '{{ __('team.standard_action') }}'), 'info');
        }

        // Live-Calculation aktivieren
        function enableLiveCalculation() {
            window.liveModeEnabled = true;
            $('#btn-live').removeClass('btn-outline-warning').addClass('btn-warning')
                .html('<i class="fa fa-sync fa-spin"></i> Live');

            // DataTable neu laden mit Live-Parameter
            oTable.ajax.reload();

            showMessage('Live-Berechnung aktiviert - Daten werden in Echtzeit berechnet', 'warning');
        }

        // Live-Calculation deaktivieren
        function disableLiveCalculation() {
            window.liveModeEnabled = false;
            $('#btn-live').removeClass('btn-warning').addClass('btn-outline-warning')
                .html('<i class="fa fa-sync"></i> Live');

            // DataTable neu laden ohne Live-Parameter
            oTable.ajax.reload();

            showMessage('Live-Berechnung deaktiviert - Cache-Daten werden verwendet', 'success');
        }

        // Hilfsfunktion für Status-Messages
        function showMessage(message, type) {
            var alertClass = 'alert-info';
            if (type === 'success') alertClass = 'alert-success';
            if (type === 'warning') alertClass = 'alert-warning';
            if (type === 'error') alertClass = 'alert-danger';

            var messageHtml = '<div class="alert ' + alertClass + ' alert-dismissible fade show" role="alert">' +
                message +
                '<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>' +
                '</div>';

            // Message am Anfang der Card einfügen
            $('.card-body').first().prepend(messageHtml);

            // Nach 5 Sekunden automatisch ausblenden
            setTimeout(function() {
                $('.alert-dismissible').alert('close');
            }, 5000);
        }

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