@extends('admin.layouts.master')

@section('title')
    Get Started | Admin Panel
@endsection

@section('content')
<div class="row mt-4 d-flex justify-content-center">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">

            {{-- Display success message --}}
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            {{-- Display error message --}}
            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <ul class="nav nav-tabs d-flex justify-content-center" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="fuji-tab" data-bs-toggle="tab" data-bs-target="#fuji-tab-pane"
                        type="button" role="tab" aria-controls="fuji-tab-pane" aria-selected="true">Where Did You Hear Fuji</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="learning-tab" data-bs-toggle="tab" data-bs-target="#learning-tab-pane"
                        type="button" role="tab" aria-controls="learning-tab-pane" aria-selected="false">Why Are You Learning</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="goal-tab" data-bs-toggle="tab" data-bs-target="#goal-tab-pane"
                        type="button" role="tab" aria-controls="goal-tab-pane" aria-selected="false">Daily Learning Goals</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="language-tab" data-bs-toggle="tab" data-bs-target="#language-tab-pane"
                        type="button" role="tab" aria-controls="language-tab-pane" aria-selected="false">Language List</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="level-tab" data-bs-toggle="tab" data-bs-target="#level-tab-pane"
                        type="button" role="tab" aria-controls="level-tab-pane" aria-selected="false">Course Goal</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="study-tab" data-bs-toggle="tab" data-bs-target="#study-tab-pane"
                        type="button" role="tab" aria-controls="study-tab-pane" aria-selected="false">Study Daily Time</button>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                {{-- Where Did You Hear Fuji --}}
                <div class="tab-pane fade" id="fuji-tab-pane" role="tabpanel" aria-labelledby="fuji-tab">
                    @include('admin.pages.getstart.partials._fuji', ['records' => $recordsWhereDidYouHearFuji])
                </div>

                {{-- Why Are You Learning --}}
                <div class="tab-pane fade" id="learning-tab-pane" role="tabpanel" aria-labelledby="learning-tab">
                    @include('admin.pages.getstart.partials._learning', ['records' => $recordsWhyAreYouLearning])
                </div>

                {{-- Daily Learning Goals --}}
                <div class="tab-pane fade" id="goal-tab-pane" role="tabpanel" aria-labelledby="goal-tab">
                    @include('admin.pages.getstart.partials._goals', ['records' => $recordsDailyLearningGoal])
                </div>

                {{-- Language List --}}
                <div class="tab-pane fade" id="language-tab-pane" role="tabpanel" aria-labelledby="language-tab">
                    @include('admin.pages.getstart.partials._language', ['records' => $recordsLanguageList])
                </div>

                {{-- Total Level --}}
                <div class="tab-pane fade" id="level-tab-pane" role="tabpanel" aria-labelledby="level-tab">
                    @include('admin.pages.getstart.partials._level', ['records' => $recordsCourseGoalManage])
                </div>

                {{-- Study Daily Time --}}
                <div class="tab-pane fade" id="study-tab-pane" role="tabpanel" aria-labelledby="study-tab">
                    @include('admin.pages.getstart.partials._studytime', ['records' => $recordsStudyDailyTime])
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Get the tab from the URL query parameter
    let tab = new URLSearchParams(window.location.search).get('tab');
    
    // Check if a tab is specified
    if (tab) {
        // Find the corresponding tab button
        let targetTabButton = document.querySelector(`#${tab}`);
        let targetTabPane = document.querySelector(`#${tab}-pane`);

        if (targetTabButton && targetTabPane) {
            // Remove 'active' class from all tab buttons and panes
            document.querySelectorAll('.nav-link').forEach(button => button.classList.remove('active'));
            document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('show', 'active'));

            // Activate the target tab and pane
            targetTabButton.classList.add('active');
            targetTabPane.classList.add('show', 'active');
        }
    } else {
        // If no tab is specified, default to the first tab (fuji-tab)
        let defaultTabButton = document.querySelector('#fuji-tab');
        let defaultTabPane = document.querySelector('#fuji-tab-pane');
        
        if (defaultTabButton && defaultTabPane) {
            defaultTabButton.classList.add('active');
            defaultTabPane.classList.add('show', 'active');
        }
    }
  });
</script>