@extends('admin.layout.main')
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
@endpush
@section('content')
    <div class="page-content">
        <div class="dashTabs">
            <ul class="nav nav-tabs d-flex align-items-center" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                        type="button" role="tab" aria-controls="home" aria-selected="true" data-chart-type="players">
                        <div class="col">
                            <div class="card radius-10 bg-gradient-cosmic">
                                <div class="card-body">
                                    <div class="d-flex align-items-center card_box">
                                        <div class="me-auto">
                                            <p class="mb-0 text-white">Total Players</p>
                                            <h4 class="my-1 text-white">{{ $data['players'] }}</h4>
                                            <p class="mb-0 font-13 text-white">All Registered Players</p>
                                        </div>
                                        <div>
                                            <img src="{{ url('/') }}/assets/images/main-page/total-mama.png"
                                                alt="Users">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button"
                        role="tab" aria-controls="profile" aria-selected="false" data-chart-type="courts">
                        <div class="col">
                            <div class="card radius-10 bg-gradient-ibiza">
                                <div class="card-body">
                                    <div class="d-flex align-items-center card_box">
                                        <div class="me-auto">
                                            <p class="mb-0 text-white">Total Courts/Clubs</p>
                                            <h4 class="my-1 text-white">{{ $data['courtsAndClubs'] }}</h4>
                                            <p class="mb-0 font-13 text-white">All Active Locations</p>
                                        </div>
                                        <div>
                                            <img src="{{ url('/') }}/assets/images/main-page/team.png" alt="convos">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
                        role="tab" aria-controls="contact" aria-selected="false" data-chart-type="bookings">
                        <div class="col">
                            <div class="card radius-10 bg-gradient-ohhappiness">
                                <div class="card-body">
                                    <div class="d-flex align-items-center card_box">
                                        <div class="me-auto">
                                            <p class="mb-0 text-white">Current Bookings</p>
                                            <h4 class="my-1 text-white">{{ $data['bookings'] }}</h4>
                                            <p class="mb-0 font-13 text-white">Live Active Bookings</p>
                                        </div>
                                        <div>
                                            <img src="{{ url('/') }}/assets/images/main-page/product-icon.png"
                                                alt="events">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="support-tab" data-bs-toggle="tab" data-bs-target="#support" type="button"
                        role="tab" aria-controls="contact" aria-selected="false" data-chart-type="revenue">
                        <div class="col">
                            <div class="card radius-10 bg-gradient-kyoto">
                                <div class="card-body">
                                    <div class="d-flex align-items-center card_box">
                                        <div class="me-auto">
                                            <p class="mb-0 text-white">Total Revenue</p>
                                            <h4 class="my-1 text-white">{{ '$' . $data['revenue'] }}</h4>
                                            <p class="mb-0 font-13 text-white">Total Revenue Generated</p>
                                        </div>
                                        <div>
                                            <img src="{{ url('/') }}/assets/images/main-page/suitcase.png"
                                                alt="tickets">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </button>
                </li>
            </ul>
        </div>

        <!-- Time period dropdown -->
        <div class="d-flex justify-content-end align-items-center mb-3">
            <select class="form-select w-auto" id="globalTimeframe">
                <option value="weekly">Weekly</option>
                <option value="monthly" selected>Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
        </div>

        <!-- Charts -->
        <div class="row">
            <div class="col-12 col-lg-12">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card radius-10">
                            <div class="card-body">
                                <div class="chart-container-9">
                                    <canvas id="chart1"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card radius-10">
                            <div class="card-body">
                                <div class="chart-container-9">
                                    <canvas id="chart2"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div class="card radius-10">
                            <div class="card-body">
                                <div class="chart-container-9">
                                    <canvas id="chart3"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="support" role="tabpanel" aria-labelledby="support-tab">
                        <div class="card radius-10">
                            <div class="card-body">
                                <div class="chart-container-9">
                                    <canvas id="chart4"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity modals -->
        <div class="card radius-10">
            <div class="card-header d-flex align-items-center">
                <h6 class="mb-0">Recent Activity</h6>
            </div>
            <div class="card-body">
                <!-- Tabs -->
                <ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#players"
                            data-tab-type="players">Recent Players</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#courtsTab"
                            data-tab-type="courts">Court/Clubs</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#bookingsTab"
                            data-tab-type="bookings">Bookings</a></li>
                    @if (Auth::user()->user_type == 'super admin')
                        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pendingTab"
                                data-tab-type="support">Support Tickets</a></li>
                    @endif
                </ul>

                <div class="tab-content py-3">
                    <!-- Recent Players -->
                    <div class="tab-pane fade show active" id="players">
                        @include('components.players.table', [
                            'tableId' => 'dashboard_players_table',
                            'fromDashboard' => true,
                        ])
                    </div>

                    <!-- Court/Clubs -->
                    <div class="tab-pane fade" id="courtsTab">
                        @include('components.courts.table', [
                            'tableId' => 'dashboard_courts_table',
                            'fromDashboard' => true,
                        ])
                    </div>

                    <!-- Bookings -->
                    <div class="tab-pane fade" id="bookingsTab">
                        @include('components.bookings.table', [
                            'tableId' => 'dashboard_bookings_table',
                            'fromDashboard' => true,
                        ])
                    </div>

                    @if (Auth::user()->user_type == 'super admin')
                        <div class="tab-pane fade" id="pendingTab">
                            @include('components.support-tickets.table', [
                                'tableId' => 'dashboard_pending_table',
                                'fromDashboard' => true,
                            ])
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Include all modals -->
    @include('components.players.modals')
    @include('components.courts.modals')
    @include('components.bookings.modals')
    @include('components.support-tickets.modals')
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Index Notification
        function info_noti() {
            Lobibox.notify('default', {
                pauseDelayOnHover: true,
                continueDelayOnInactiveTab: false,
                size: 'mini',
                position: 'top right',
                icon: 'bx bx-info-circle',
                msg: 'Welcome to PBLinks Admin Dashboard'
            });
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Global table management
        const tableManager = {
            initialized: {},
            initFunctions: {},

            registerTable: function(tableId, initFunction) {
                this.initFunctions[tableId] = initFunction;
            },

            initializeTable: function(tableId) {
                if (!this.initialized[tableId] && this.initFunctions[tableId]) {
                    this.initFunctions[tableId]();
                    this.initialized[tableId] = true;
                    console.log(`Initialized table: ${tableId}`);
                }
            },

            // Initialize first tab immediately, others on demand
            initializeFirstTab: function() {
                const firstTab = document.querySelector('#dashboardTabs .nav-link.active');
                if (firstTab) {
                    const tabType = firstTab.getAttribute('data-tab-type');
                    const tableId = this.getTableIdByTabType(tabType);
                    if (tableId) {
                        this.initializeTable(tableId);
                    }
                }
            },

            getTableIdByTabType: function(tabType) {
                const tableMap = {
                    'players': 'dashboard_players_table',
                    'courts': 'dashboard_courts_table',
                    'bookings': 'dashboard_bookings_table',
                    'support': 'dashboard_pending_table'
                };
                return tableMap[tabType];
            }
        };

        // Tab change handler
        $('#dashboardTabs').on('shown.bs.tab', function(e) {
            const tabType = e.target.getAttribute('data-tab-type');
            const tableId = tableManager.getTableIdByTabType(tabType);

            if (tableId) {
                // Small delay to ensure tab transition is complete
                setTimeout(() => {
                    tableManager.initializeTable(tableId);
                }, 100);
            }
        });

        // Initialize first tab on page load
        $(document).ready(function() {
            tableManager.initializeFirstTab();
        });
    </script>

    <!-- Include component scripts - they will register but not initialize immediately -->
    @include('components.players.scripts', [
        'tableId' => 'dashboard_players_table',
        'ajaxUrl' => route('players.index'),
        'fromDashboard' => true,
    ])

    @include('components.courts.scripts', [
        'tableId' => 'dashboard_courts_table',
        'ajaxUrl' => route('courts.index'),
        'fromDashboard' => true,
    ])

    @include('components.bookings.scripts', [
        'tableId' => 'dashboard_bookings_table',
        'ajaxUrl' => route('reservations.index'),
        'fromDashboard' => true,
    ])

    @include('components.support-tickets.scripts', [
        'tableId' => 'dashboard_pending_table',
        'ajaxUrl' => route('support-tickets.index'),
        'fromDashboard' => true,
    ])

    <script>
        const initialChartData = @json($data['initialChartData']);
        const chartDataUrl = "{{ route('dashboard.chart-data') }}";
    </script>
    <script src="{{ url('/') }}/assets/js/index3.js"></script>
@endpush