@extends('layouts.main_dashboard.app')

@section('styles')

@endsection

@section('title',  __('dashboard.Compare Student Groups')
@section('page_heading',  __('dashboard.Compare Student Groups'))

@section('breadcrumb')
@if (auth()->user()->type == 'admin')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('admin.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-500 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('admin.statistics.compare-activity-tracking') }}" class="text-muted text-hover-primary">{{ __('dashboard.Compare Student Groups') }}</a>
    </li>
@endif
@endsection

@section('actions')
    <a href="{{ route('admin.statistics.compare-activity-tracking') }}" class="btn btn-flex btn-outline btn-color-gray-700 btn-active-color-primary bg-body h-40px fs-7 fw-bold">{{ __('dashboard.View Statistics') }}</a>
@endsection

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-fluid">
            <div class="row g-7">
                <div class="col-xl-12">
                    <div class="card card-flush h-lg-100" id="kt_contacts_main">
                        <div class="card-header pt-7" id="kt_chat_contacts_header">
                            <div class="text-lg font-black text-zinc-900 dark:text-white">
                                <i class="ki-outline ki-chart-bar fs-1 me-2"></i>
                                <h2>{{ __('dashboard.Compare Student Groups') }}</h2>
                            </div>
                        </div>
                        <div class="card-body pt-5">

                            <!-- Form to compare student groups -->
                            <form action="{{ route('admin.statistics.compare-activity-tracking') }}" method="GET" class="mb-4">
                                <div class="row">
                                    <!-- Group 1 -->
                                    <div class="col-md-6">
                                        <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                                            <div class="card-header bg-light">
                                                <h4 class="fw-bold">{{ __('dashboard.Group 1') }}</h4>
                                            </div>
                                            <div class="p-6">
                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Stage') }}</label>
                                                    <select name="group1_stage" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select Stage') }}</option>
                                                        @foreach($stages as $stage)
                                                            <option value="{{ $stage->id }}" {{ request('group1_stage') == $stage->id ? 'selected' : '' }}>{{ $stage->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Grade') }}</label>
                                                    <select name="group1_grade" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select Grade') }}</option>
                                                        @foreach($grades as $grade)
                                                            <option value="{{ $grade->id }}" {{ request('group1_grade') == $grade->id ? 'selected' : '' }}>{{ $grade->stage->name . ' - ' . $grade->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select School Class') }}</label>
                                                    <select name="group1_school_class" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select School Class') }}</option>
                                                        @foreach($schoolClasses as $schoolClass)
                                                            <option value="{{ $schoolClass->id }}" {{ request('group1_school_class') == $schoolClass->id ? 'selected' : '' }}>{{ $schoolClass->grade->name . ' - ' . $schoolClass->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Period') }}</label>
                                                    <select name="group1_period" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="week" {{ request('group1_period') == 'week' ? 'selected' : '' }}>{{ __('Last Week') }}</option>
                                                        <option value="month" {{ request('group1_period') == 'month' ? 'selected' : '' }}>{{ __('Last Month') }}</option>
                                                        <option value="custom" {{ request('group1_period') == 'custom' ? 'selected' : '' }}>{{ __('Custom Period') }}</option>
                                                    </select>
                                                </div>

                                                <div class="row">
                                                    <div class="col">
                                                        <label class="form-label">{{ __('Start Date') }}</label>
                                                        <input type="date" name="group1_start_date" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" value="{{ request('group1_start_date') }}">
                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">{{ __('End Date') }}</label>
                                                        <input type="date" name="group1_end_date" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" value="{{ request('group1_end_date') }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Group 2 -->
                                    <div class="col-md-6">
                                        <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                                            <div class="card-header bg-light">
                                                <h4 class="fw-bold">{{ __('dashboard.Group 2') }}</h4>
                                            </div>
                                            <div class="p-6">
                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Stage') }}</label>
                                                    <select name="group2_stage" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select Stage') }}</option>
                                                        @foreach($stages as $stage)
                                                            <option value="{{ $stage->id }}" {{ request('group2_stage') == $stage->id ? 'selected' : '' }}>{{ $stage->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Grade') }}</label>
                                                    <select name="group2_grade" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select Grade') }}</option>
                                                        @foreach($grades as $grade)
                                                            <option value="{{ $grade->id }}" {{ request('group2_grade') == $grade->id ? 'selected' : '' }}>{{ $grade->stage->name . ' - ' . $grade->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select School Class') }}</label>
                                                    <select name="group2_school_class" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="">{{ __('Select School Class') }}</option>
                                                        @foreach($schoolClasses as $schoolClass)
                                                            <option value="{{ $schoolClass->id }}" {{ request('group2_school_class') == $schoolClass->id ? 'selected' : '' }}>{{ $schoolClass->grade->name . ' - ' . $schoolClass->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="form-label">{{ __('Select Period') }}</label>
                                                    <select name="group2_period" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                                        <option value="week" {{ request('group2_period') == 'week' ? 'selected' : '' }}>{{ __('Last Week') }}</option>
                                                        <option value="month" {{ request('group2_period') == 'month' ? 'selected' : '' }}>{{ __('Last Month') }}</option>
                                                        <option value="custom" {{ request('group2_period') == 'custom' ? 'selected' : '' }}>{{ __('Custom Period') }}</option>
                                                    </select>
                                                </div>

                                                <div class="row">
                                                    <div class="col">
                                                        <label class="form-label">{{ __('Start Date') }}</label>
                                                        <input type="date" name="group2_start_date" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" value="{{ request('group2_start_date') }}">
                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">{{ __('End Date') }}</label>
                                                        <input type="date" name="group2_end_date" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" value="{{ request('group2_end_date') }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary mt-4">{{ __('Compare') }}</button>
                            </form>

                            <h3>{{ __('dashboard.Comparison Results') }}</h3>

                            <!-- عرض نتائج المقارنة -->
                            <div class="row">
                                <!-- شارت دائري لـ Group 1 و Group 2 جنب بعض -->
                                <div class="col-md-6">
                                    <div id="pie_chart_group1" style="width: 100%; height: 400px;"></div>
                                </div>

                                <div class="col-md-6">
                                    <div id="pie_chart_group2" style="width: 100%; height: 400px;"></div>
                                </div>

                                <!-- الشارت العمودي أسفل الشارتات الدائرية -->
                                <div class="col-md-12 mt-4">
                                    <div id="comparison_chart" style="width: 100%; height: 500px;"></div>
                                </div>

                                <!-- جدول النتائج -->
                                <div class="col-md-12 mt-4">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Event') }}</th>
                                                <th>{{ __('Group 1 Time (Seconds)') }}</th>
                                                <th>{{ __('Group 2 Time (Seconds)') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($comparison['group1']['data'] as $eventData)
                                                @php
                                                    $group2Event = $comparison['group2']['data']->firstWhere('event', $eventData['event']) ?? ['total_time' => 0];
                                                @endphp
                                                <tr>
                                                    <td>{{ $eventData['event'] ? $eventData['event'] : __('dashboard.Unknown events') }}</td>
                                                    <td>{{ number_format($eventData['total_time'], 2, '.', ',') }}</td>
                                                    <td>{{ number_format($group2Event['total_time'], 2, '.', ',') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>{{ __('Total Time for All Events') }}</th>
                                                <th>{{ number_format($comparison['group1']['total_time'], 2, '.', ',') }}</th>
                                                <th>{{ number_format($comparison['group2']['total_time'], 2, '.', ',') }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawComparisonChart);
        google.charts.setOnLoadCallback(drawPieChartGroup1);
        google.charts.setOnLoadCallback(drawPieChartGroup2);

        // رسم الشارت العمودي
        function drawComparisonChart() {
            var data = google.visualization.arrayToDataTable([
                ['Event', 'Group 1 Time (Seconds)', 'Group 2 Time (Seconds)'],
                @foreach($comparison['group1']['data'] as $eventData)
                    @php
                        $group2Event = $comparison['group2']['data']->firstWhere('event', $eventData['event']) ?? ['total_time' => 0];
                    @endphp
                    ['{{ $eventData['event'] ? $eventData['event'] : __('dashboard.Unknown events') }}', 
                     {{ $eventData['total_time'] }},
                     {{ $group2Event['total_time'] }}],
                @endforeach
            ]);

            var options = {
                title: '{{ __("dashboard.Compare Student Groups") }}',
                hAxis: {title: '{{ __("Event") }}', minValue: 0},
                vAxis: {title: '{{ __("Total Time Spent (Seconds)") }}'},
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '50%' },  
                colors: ['#1E90FF', '#FF6347'],  
                isStacked: false  
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('comparison_chart'));

            chart.draw(data, options);
        }

        // رسم الشارت الدائري لـ Group 1
        function drawPieChartGroup1() {
            var data = google.visualization.arrayToDataTable([
                ['Event', 'Total Time (Seconds)'],
                @foreach($comparison['group1']['data'] as $eventData)
                    ['{{ $eventData['event'] ? $eventData['event'] : __('dashboard.Unknown events') }}', 
                     {{ $eventData['total_time'] }}],
                @endforeach
            ]);

            var options = {
                title: '{{ __("dashboard.Group 1 Event Distribution") }}',
                pieHole: 0.4,
                colors: ['#1E90FF', '#FF6347', '#32CD32', '#FFD700']
            };

            var chart = new google.visualization.PieChart(document.getElementById('pie_chart_group1'));

            chart.draw(data, options);
        }

        // رسم الشارت الدائري لـ Group 2
        function drawPieChartGroup2() {
            var data = google.visualization.arrayToDataTable([
                ['Event', 'Total Time (Seconds)'],
                @foreach($comparison['group2']['data'] as $eventData)
                    ['{{ $eventData['event'] ? $eventData['event'] : __('dashboard.Unknown events') }}', 
                     {{ $eventData['total_time'] }}],
                @endforeach
            ]);

            var options = {
                title: '{{ __("dashboard.Group 2 Event Distribution") }}',
                pieHole: 0.4,
                colors: ['#1E90FF', '#FF6347', '#32CD32', '#FFD700']
            };

            var chart = new google.visualization.PieChart(document.getElementById('pie_chart_group2'));

            chart.draw(data, options);
        }
    </script>
@endsection