@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => 'active',
            ],
        ])


        <div class="row">
            <div class="col-xl-12 mb-4 col-lg-5 col-12">


                @if (date('a') == 'am')
                    @if (app()->getLocale() == 'ar')
                        صباح الخير يا {{ auth()->user()->name }}
                    @else
                        Good morning, {{ auth()->user()->name }}
                    @endif
                @else
                    @if (app()->getLocale() == 'ar')
                        مساء الخير يا {{ auth()->user()->name }}
                    @else
                        Good evening, {{ auth()->user()->name }}
                    @endif
                @endif
                😍


            </div>

            <div class="row mb-4 g-4">

                <div class="col-lg-8">

                    <div class="row">
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-primary">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-primary"><i
                                                    class="ti ti-currency-dollar ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">JOD {{ $counts['total_orders'] }}</h4>
                                    </div>

                                    <p class="mb-1">المبيعات</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-warning">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-warning"><i
                                                    class="ti ti-currency-dollar ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">JOD {{ $counts['month_orders'] }}</h4>
                                    </div>
                                    <p class="mb-1">المبيعات في الشهر</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-danger">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-danger"><i
                                                    class="ti ti-subscript ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">{{ $counts['subscribes_count'] }}</h4>
                                    </div>
                                    <p class="mb-1">الاشتراكات</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-info">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-info"><i
                                                    class="ti ti-school ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">{{ $counts['students_count'] }}</h4>
                                    </div>
                                    <p class="mb-1">الطلاب</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-danger">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-danger"><i
                                                    class="ti ti-users ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">{{ $counts['teachers_count'] }}</h4>
                                    </div>
                                    <p class="mb-1">المدرسين</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card card-border-shadow-info">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-2 pb-1">
                                        <div class="avatar me-2">
                                            <span class="avatar-initial rounded bg-label-info"><i
                                                    class="ti ti-book ti-md"></i></span>
                                        </div>
                                        <h4 class="ms-1 mb-0">{{ $counts['courses_count'] }}</h4>
                                    </div>
                                    <p class="mb-1">الدورات</p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 mb-4 col-md-3 col-4">
                    <div class="card">
                      <div class="card-header pb-0">
                        <h5 class="card-title mb-0">{{ $sales_chart['sales'] }}</h5>
                        <small class="text-muted">المبيعات اخر شهر</small>
                      </div>
                      <div class="card-body">
                        <div id="expensesChart"></div>
                        <div class="mt-md-2 text-center mt-lg-3 mt-3">
                          <small class="text-muted mt-3">{{ $sales_chart['message'] }}</small>
                        </div>
                      </div>
                    </div>
                  </div>

            </div>




            <div class="row mb-4">
                <div class="col-12 col-xl-8">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="card-title m-0 me-2">اكثر الدورات اشتراك</h5>

                        </div>
                        <div class="card-body row g-3">
                            @if($course_chart['count'] > 0)

                            <div class="col-md-6 p-3">
                                <div id="horizontalBarChart"></div>
                            </div>
                            <div class="col-md-6 d-flex justify-content-around align-items-center">
                                <div>
                                    @for ($i = 0; $i < $course_chart['count']; $i++)
                                        <div class="d-flex align-items-baseline">
                                            <span class="text-{{ $course_chart['colors'][$i] }} me-2"><i
                                                    class="ti ti-circle-filled fs-6"></i></span>
                                            <div>
                                                <p class="mb-2">{{ $course_chart['top_courses'][$i]->title }}</p>
                                                <h5>{{ number_format(($course_chart['top_courses'][$i]->subscribes_count / $course_chart['total_subscribes']) * 100, 2) }}%
                                                </h5>
                                            </div>
                                        </div>
                                    @endfor
                                </div>
                            </div>
                            @else
                            <div class="text-center">
                                <img width="300" height="300"  src="{{ asset('assets/img/empty_data.svg') }}" alt="">
                            </div>
                            @endif

                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-4 col-md-6">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div class="card-title mb-0">
                                <h5 class="m-0 me-2">Top Instructors</h5>
                            </div>

                        </div>
                        <div class="table-responsive">
                            <table class="table table-borderless border-top">
                                <thead class="border-bottom">
                                    <tr>
                                        <th>المدرسين</th>
                                        <th class="text-end">الدورات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($teacher_data as $teacher)

                                        <tr>
                                            <td class="pt-2">
                                                <div class="d-flex justify-content-start align-items-center mt-lg-4">
                                                    <div class="avatar me-3 avatar-sm">
                                                        <img src="{{ $teacher->image ? asset($teacher->image) : asset('default-images/user.png') }}"
                                                            alt="Avatar" class="rounded-circle" />
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-0">{{ $teacher->name }}</h6>
                                                        <small
                                                            class="text-truncate text-muted">{{ $teacher->teacherDetail?->subject ? $teacher->teacherDetail?->subject : '' }}</small>
                                                    </div>


                                    <tr>
                                        <td class="pt-2">
                                            <div class="d-flex justify-content-start align-items-center mt-lg-4">
                                                <div class="avatar me-3 avatar-sm">
                                                    <img src="{{ $teacher->image? asset($teacher->image) :  asset('default-images/user.png') }}" alt="Avatar"
                                                        class="rounded-circle" />

                                                </div>
                                            </td>
                                            <td class="text-end pt-2">
                                                <div class="user-progress mt-lg-4">
                                                    <p class="mb-0 fw-medium">{{ $teacher->courses_count }}</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

            <!--/ Website Analytics -->

            <!-- Line Area Chart -->
            <div class="row mb-4">

                <div class="col-6 col-md-6 mb-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h4 id="sales_data">احصائيات المبيعات {{ date('Y') }}</h4>

                            <div class="col-md-4 mb-4">
                                <select name="sales_year" id="year" class="form-control select2 year">
                                    <option value="">اختر السنة</option>
                                    @php
                                        $year = date('Y');
                                    @endphp
                                    @for ($i = 0; $i < 5; $i++)
                                        <option value="{{ $year - $i }}" @selected(request('sales_year') == $year - $i)>
                                            {{ $year - $i }}</option>
                                    @endfor
                                </select>

                            </div>

                        </div>
                        <div class="card-body">
                            <div id="lineAreaChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-6 mb-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h4 id="all_data">الاحصائيات لسنة {{ date('Y') }}</h4>

                            <div class="col-md-4 mb-4">
                                <select name="data_year" id="data_year" class="form-control select2 year">
                                    <option value="">اختر السنة</option>
                                    @php
                                        $year = date('Y');
                                    @endphp
                                    @for ($i = 0; $i < 5; $i++)
                                        <option value="{{ $year - $i }}" @selected(request('data_year') == $year - $i)>
                                            {{ $year - $i }}</option>
                                    @endfor
                                </select>

                            </div>
                        </div>
                        <div class="card-body">
                            <div id="lineAreaChart1"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Line Area Chart -->


        </div>

    </div>
@endsection

@section('script')


    @include('home_charts.course_chart')
    <script>
        $(function() {
            $('.select2').select2();

            if("{{ request('sales_year') }}"){
                console.log("{{ request('sales_year') }}")
                $('#sales_data').html(`احصائيات المبيعات {{ request('sales_year') }}`);
            }
            if("{{ request('data_year') }}"){
                console.log("{{ request('data_year') }}")

                $('#all_data').html(`الاحصائيات لسنة {{ request('data_year') }}`);
            }



            $('#year').on('change', function() {
                var selectedYear = $(this).val();
                if (selectedYear) {
                    // Reload page with the selected year as a query parameter
                    window.location.href = '?sales_year=' + selectedYear;

                }
            });
            $('#data_year').on('change', function() {
                var selectedYear = $(this).val();
                if (selectedYear) {
                    // Reload page with the selected year as a query parameter
                    window.location.href = '?data_year=' + selectedYear;
                }
            });
        })
    </script>


    <script>
        // Line Area Chart
        // --------------------------------------------------------------------

    </script>
@endsection