@extends('layouts.app')

@section('content')
    @php
        $bg = base64_encode(file_get_contents(public_path('images/print/header-page.png')));
        $logoIvory = base64_encode(file_get_contents(public_path('images/print/print-logo.png')));
        $logoIvory2 = base64_encode(file_get_contents(public_path('images/print/logo.png')));
        $logoIvory3 = base64_encode(file_get_contents(public_path('images/print/logo2.png')));
        $logoIvory4 = base64_encode(file_get_contents(public_path('images/print/footerlogo.png')));
        $line = base64_encode(file_get_contents(public_path('images/print/line.png')));
    @endphp

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <style>
     @import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');



     th{
        text-align: center;
     }
     .nav-pills,.tab-pan {
  font-family: 'Tajawal', sans-serif !important;
  line-height: 32px
}
.two-logo img{
    height: 80px;
}
.time{
    font-size: 20px;
    font-weight: 800;
    line-height: 32px;
    color: #000
}
.time-des{
    color: rgb(0 0 0 / 54%);
    line-height: 22px
}
        .page {
            margin: 0;
            padding: 0;
            /* background-image: url('data:image/jpeg;base64,{{ $bg }}'); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            /* position: relative; */
            /* height: 600px; */
            display: block;
            position: relative;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif !important;
            background: #fff;
            padding: 5px;
        }
.footerimg{
    position: absolute;
    bottom: 0;
    right: 0;

}
.color1.h2{
    text-align: center;
    font-size: 21px;
    /* width: 45%; */
    max-width: 60%;
    line-height: 32px;
    color: #fff;
    position: absolute;
    top: 55px;
    left: 12%;
    z-index: 5;
    text-align: center;
}
        .app-content {
            overflow: auto;
            }

        .img-company{
            height: 92px;
            position: absolute;
            /* top: 40px; */
            left: 40px;
            mix-blend-mode: multiply;
        }
        td{
            text-align: center;
        }

        .logo-ivory{
            height: 92px;
            position: absolute;
            top: 20px;
            left: 40px;
        }

        .img-course {
            width: 45%;
        }
        .title-course,.img-course{
            display: inline-block;
            margin-top: 150px;
            margin-bottom: 100px;
            padding:10px 40px
        }


        .title-course-2 {
            margin-top: 150px;
            vertical-align: top;
        }


        .color1{
            color: #000;
        }
        .title-course h1,.title-course h4{

            font-weight: bold;
            font-size: 36px;
            text-align: center;
            line-height: 70px
        }
        .title-course h4{
            font-size: 24px;
            color: rgb(0 0 0 / 50%);
    line-height: 32px;
    margin-top: 20px;

        }

        .header h2,.header--2{
            /* padding-top: 65px; */
            text-align: center;
            color: #000;
            font-size: 2em;
            font-weight: bolder;
            font-weight: 600;
            font-size: 28px
        }
        th{font-weight: 700}
        .one p{
            background: #fff;
    padding: 20px;
    font-size: 16px;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 0;
    margin: 0 10px;
    border-radius: 10px;
    position: relative;
    z-index: 5;
        }
        .three-part .one:first-child p:last-child::after,.two p:first-child::after {
            position: absolute;
            content: '';
            width: 20px;
            height: 30px;
            background: #767779;
            left: -20px

        }
        .one img{
            height: 40px;
        }
        .three-part{
            display: flex;
            justify-content: center
        }
        .header h2{
            padding-top: 0;
            margin-top: -20px

        }
        h3{
            color: #000;
        }

        .description{
            display: inline-block;
            padding-top: 50px;
            /* padding-right: 50%; */
            width: 45%;

        }
        .header-2{
            /* padding-top: 50px; */
            padding-right: 100px
        }
        .header-2 h2{
            margin-bottom:40px;
        }
        .description-2{

            border-top: 6px solid #939090;
            border-bottom: 6px solid #939090;
            min-height: 200px;
            text-align: justify;
            width: 100%;
            display: inline-block;
            background: white;
            padding: 15px;
            border-left: 1px solid #eee;
            border-right:1px solid #eee;
            /* margin-right: 100px; */
        }

        .img-description{
            float: left;
            padding-left: 5%;
            width: 30%;
            padding-top: 8%
        }

        .question{
            background: #656466;
            border: 1px solid #597689;
            border-radius: 20px;
            color: white;
            padding: 20px;
            text-align: center;
            display: flex;
    justify-content: center;
    align-items: center;
        }
        .response{
            border: 1px solid #656466;
            border-radius: 20px 0 0 20px;
            padding: 10px;
            text-align: center;
            margin: 10px 0;
        }


        .present-anlyse{

        }
        .present-anlyse span{
            padding:5px;
            border-radius: 5px;
        }
        .present-anlyse .text-title{
            background-color: #597689;
            color: #fff;
            padding-left: 30px;
        }
        .present-anlyse .text-value{
            background-color: #eee;
            position: relative;
            left: 15px;
            left: 15px;
    width: 50px;
    display: inline-block;
    font-weight: 600;
    text-align: center
        }
.p{
    text-align: center;
    width: 65%
}
        .table{
            border: 2px solid #343a40;
        }

            .form-check-input:checked[type=radio]{
                accent-color:#343a40 !important;
            }
            table  input[type="checkbox"]::before {
  /* ...existing styles */

  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}


    .apexcharts-legend-text{
        font-family: 'Tajawal', sans-serif !important;
        padding-left: 10px !important;
    padding-right: 2px !important;
    }
    </style>

    @php
        $logoIvory3 ='';
        $imgCourse = $logoIvory;

        $imgPath = public_path($group->img);
        if (file_exists($imgPath) && is_file($imgPath)) {
            $imgCourse = base64_encode(file_get_contents(public_path($group->img)));
        }

        if($group->companies->count()==1){
            $imgPath = public_path($group->companies[0]->logo);
            if (file_exists($imgPath) && is_file($imgPath)) {
                $logoIvory3 = base64_encode(file_get_contents($imgPath));
            }else{

            }
        }
    @endphp

   {{--  <div class="d-flex justify-content-end">
        <a class="btn btn-info align-self-start" href="{{ route('groups.rapport.download',['id'=>$group->id]) }}">
            تحميل
        </a>
    </div>
    <br> --}}

    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">الصفحة الرئيسية</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">نبدة عن البرنامج</button>
          </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-profile-tab2" data-bs-toggle="pill" data-bs-target="#pills-profile2" type="button" role="tab" aria-controls="pills-profile2" aria-selected="false">التفاصيل</button>
          </li>



        <li class="nav-item" role="presentation">
          <button class="nav-link" id="rapport-tab-1" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-1" type="button" role="tab" aria-controls="rapport-tab-1" aria-selected="false">الأهداف العامة للبرنامج
        </button>
        </li>

        @php
            $review = '';
            $section = '';
            $arrSection = [];
        @endphp
        @foreach($globals as $index => $data)
        @if(!in_array($list_titles[$index]['section'],$arrSection) )
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="rapport-tab-2-{{ $index }}" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-2-{{ $index }}" type="button" role="tab" aria-controls="rapport-tab-2-{{ $index }}" aria-selected="false">
                    {{ $list_titles[$index]['section'] }}
            </button>
            </li>
            @endif
            @php
                $review = $list_titles[$index]['review'];
                $section = $list_titles[$index]['section'];
                $arrSection[] = $list_titles[$index]['section'];
            @endphp


        @endforeach
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-3" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-3" type="button" role="tab" aria-controls="rapport-tab-3" aria-selected="false">الحضور والغياب
          </button>
        </li>


        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-3-2" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-3-2" type="button" role="tab" aria-controls="rapport-tab-3-2" aria-selected="false">الحضور والغياب
          </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-4" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-4" type="button" role="tab" aria-controls="rapport-tab-4" aria-selected="false">المستوى التفاعلي العام
          </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-5" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-5" type="button" role="tab" aria-controls="rapport-tab-5" aria-selected="false">تحسين مستوى المشاركين
          </button>
        </li>

        @foreach ($text_responses_names as $key => $name)
            @php
                $displayedQuestions = [];
                $displayedSections = [];
            @endphp
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="rapport-tab-6{{ $key }}" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-6{{ $key }}" type="button" role="tab" aria-controls="rapport-tab-6{{ $key }}" aria-selected="false">
                    @foreach ($text_responses as $item)
                        @if ($item['review'] == $name && !in_array($item['question'], $displayedQuestions))
                            @if (!in_array($item['section'], $displayedSections))
                            - {{$item['section'] }}
                            @endif

                            @php
                        $displayedQuestions[] = $item['question'];
                        $displayedSections[] = $item['section'];
                    @endphp
                        @endif
                    @endforeach
                </button>

            </li>
        @endforeach

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="rapport-tab-8" data-bs-toggle="pill" data-bs-target="#pills-rapport-tab-8" type="button" role="tab" aria-controls="rapport-tab-8" aria-selected="false">صور المجموعة
          </button>
        </li>
      </ul>
      <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <div class="page ">
                <div class="two-logo">
                <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">
                <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
            </div>
                <div class="header d-flex justify-content-between">
                    <div class="title-course w-50 d-flex justify-content-between align-items-center">

                        <img class="line" src="data:image/jpeg;base64,{{ $line }}" alt="">
                        <div>
                        <h1 >{{ $group->name }}</h1>
                        <h4>
                            @php
                                $start_date = \Carbon\Carbon::parse($group->start_date)->locale('ar');
                                $end_date = \Carbon\Carbon::parse($group->end_date)->locale('ar');
                            @endphp

                            {{ $start_date->day }} {{ $start_date->translatedFormat('F Y') }}<br>
                            {{ $end_date->day }} {{ $end_date->translatedFormat('F Y') }}
                        </h4>
                    </div>
                    </div>
                    <img class="img-course" src="data:image/jpeg;base64,{{ $imgCourse }}" alt="">
                </div>
                <img class="footerimg" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>
        </div>
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">

            <div class="page ">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header">





                    <h2>نبذة عن البرنامج التدريبي</h2>
                    <div class='d-flex justify-content-between align-items-center'>
                    <div class="title-course title-course-2 w-50">
                        <h1 >{{ $group->name }}</h1>
                        <h4></h4>
                    </div>
                    <div class="description text-center fw-bolder" >
                        <img src="{{ asset('images/print/arrow.png') }}" width="90" style="margin-bottom:20px">
                        <h3 class="time">وقت الدورة</h3>
                        <h5 class='time-des'>{{ $start_date->day }} {{ $start_date->translatedFormat('F Y') }} – {{ $end_date->day }} {{ $end_date->translatedFormat('F Y') }}</h5>
                        <h5 class='time-des'>من الساعة : {{ $group->start_time }} الى الساعة {{ $group->end_time }}</h5>
                        <h3 class=" time ">عدد الممرشحين</h3>
                        <h5 class='time-des'>{{ $group->participants->count() }}</h5>
                        <h3 class=" time ">اسم المدرب</h3>
                        @foreach ($group->coaches as $coach)
                            <h5 class='time-des'>{{ $coach->my_full_name }}</h5>
                        @endforeach
                        <h3 class=" time">مكان التنقيد</h3>
                        <h5 class='time-des'>
                            {{ optional($group->venue)->name  }} <br>
                            {{ optional($group->venue->hotel)->name }}
                            {{  optional($group->venue->hotel->city)->name . ', ' . optional($group->venue->hotel->city->country)->name }}
                        </h5>
                    </div>
                </div>
                <img class="footerimg" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
                </div>
            </div>


        </div>
        <div class="tab-pane fade" id="pills-profile2" role="tabpanel" aria-labelledby="pills-profile-tab2">

            <div class="page ">
                <div class="two-logo">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">
                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header header-2 text-center pe-0 ps-0">

                    <h2 class="fw-3 header--2" style="    color: #000;">نبذة عن البرنامج التدريبي
                    </h2>
                    <div class="" style="display: inline-block;width:68%;">
                        <p class="description-2 mt-3 mb-0">
                            {{ $group->description }}
                        </p>
                        <img class="w-75" src="{{ asset('images/print/table.png')}}" alt="">
                    </div>
                    <img class="img-description" width="" src="{{ asset('images/print/description.png') }}" alt="">
                </div>
                <img class="footerimg position-relative" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>

        </div>
        <div class="tab-pane fade" id="pills-rapport-tab-1" role="tabpanel" aria-labelledby="rapport-tab-1">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header-2 text-center">

                    <h2 class="fw-3 header--2" style="color: #000;">الأهداف العامة للبرنامج</h2>
                    <div class="" style="display: inline-block;width:80%;">

                        <div class="three-part">
                            @foreach ($group->cource_objective as $key => $goal)

                                @if($key % 3 == 0)
                                    <div class="one">
                                @endif
                                <p>{{ $goal }}</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                @if(($key + 1) % 3 == 0 || $loop->last)
                                    </div>
                                @endif
                            @endforeach
                        </div>



                        {{-- <div class="three-part">
                            @foreach ($group->cource_objective as $key => $goal)
                                <div class="one {{ $key == 1 ? 'two' : '' }}">
                                    <p>{{ $goal }}</p>
                                    <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">

                                </div>
                            @endforeach
                        </div> --}}

                            {{-- <li style=" text-align:justify;">{{ $goal }}</li> --}}
                           {{-- <div class="three-part">
                            <div class="one">
                                <p>تعريف 1الخطر والتأمين</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                <p>تعريف 2الخطر والتأمين</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                <p>تعريف 3الخطر والتأمين</p>

                            </div>
                            <div class="one two">
                                <p>تعريف 4الخطر والتأمين</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                <p>تعريف 5الخطر والتأمين</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                <p>تعريف 6الخطر والتأمين</p>
                            </div>
                            <div class="one">
                                <p>تعريف ال7خطر والتأمين</p>
                                <img class="" width="" src="{{ asset('images/print/connect.png') }}" alt="">
                                <p>تعريف 8الخطر والتأمين</p>
                            </div>
                           </div> --}}


                    {{-- <img class="w-75" src="{{ asset('images/print/table.png') }}" alt=""> --}}
                    </div>
                    {{-- <img class="img-description" width="200" src="{{ asset('images/print/description.png') }}" alt=""> --}}
                </div>
                <img class="footerimg position-relative" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>
        </div>

        @php
    $review = '';
    $section = '';
    $arrSection = [];
@endphp

{{-- @dump($globals)
@dump($list_titles) --}}

@foreach($globals as $index => $data)
    @if(!in_array($list_titles[$index]['section'],$arrSection) )
        <div class="tab-pane fade" id="pills-rapport-tab-2-{{ $index }}" role="tabpanel" aria-labelledby="rapport-tab-2-{{ $index }}">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header">
                    <h2 class="header--2 h2"style='margin-bottom:100px'>قياس مستوى التفاعل بشكل تفصيلي</h2>
                    {{-- <h2 class="mb-3 text-center fw-bolder">{{ $list_titles[$index]['review'] }}</h2> --}}
                </div>

                <div class="charts-content row align-items-center">
                    <div class="row rounded-3 text-center justify-content-center col-4">
                        @php $first = 0; @endphp
                        @foreach($globals as $innerIndex => $innerData)
                            @if($list_titles[$index]['section'] == $list_titles[$innerIndex]['section'])
                                @if ($first==0 || $first==4)
                                <div class="col-md-12 col-lg-12 m2-5 position-relative">
                                    @if ($first==0 )
                                    <h4 class="color1 h2" style=";">{{ $list_titles[$innerIndex]['section'] }}</h4>
                                        <img src="{{ asset('images/print/Picture-section.png') }}" class="w-100 m-auto position-relative mb-2" style='height:250px'>
                                    @endif
                                </div>
                                @endif

                                @php $first ++; @endphp
                            @endif
                        @endforeach
                    </div>
                    <div class="row rounded-3 text-center justify-content-center col-8">
                        @php $first = 0; @endphp
                        @foreach($globals as $innerIndex => $innerData)
                            @if($list_titles[$index]['section'] == $list_titles[$innerIndex]['section'])
                                @if ($first==0 || $first==4)
                                <div class=" col-lg-12 m2-5 position-relative d-none">
                                    @if ($first==0 )
                                    <h4 class="color1 h2" style=";">{{ $list_titles[$innerIndex]['section'] }}</h4>
                                        <img src="{{ asset('images/print/Picture-section.png') }}" class="w-50 m-auto position-relative mb-2" style='height:250px'>
                                    @endif
                                </div>
                                @endif
                                <div class="col-md-6 col-lg-4 mb-2 p-0 mt-2">
                                    <p>{{ $list_titles[$innerIndex]['question'] }}</p>
                                    {{-- <div id="chartdiv55{{ $innerIndex }}" dir="ltr" class="chartdiv" style="width: 90%; height: 250px; margin:0 auto;font-size: 5px;"></div> --}}
                                    {{-- <div id="chartdiv{{ $innerIndex }}" dir="ltr" class="chartdiv p-0" style="width: 100%; height: 150px; margin:0 auto;font-size: 8px;"></div> --}}

                                    <div id="chart-{{$innerIndex+1}}"></div>

                                </div>
                                @php $first ++; @endphp
                            @endif
                        @endforeach
                    </div>
                </div>

                <img class="footerimg position-relative" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>
        </div>
    @endif

    @php
        $review = $list_titles[$index]['review'];
        $arrSection[] = $list_titles[$index]['section'];
    @endphp
@endforeach


        <div class="tab-pane fade " id="pills-rapport-tab-3" role="tabpanel" aria-labelledby="rapport-tab-3">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>

                <div class="header p-3 m-3">
                    <h2>تسجيل الحضور و الغياب</h2>


                    <div class="row present-anlyse my-4">
                        <div class="col col-12 col-md-12 mb-2">
                            <img src="{{ asset('images/print/attend1.png') }}" width="" alt="">
                            {{-- <span class="text-title">
                                عدد الحضور
                            </span> --}}
                            <span class="text-value">{{ $presentTotal[0]['value'] }}</span>
                            <p class='p'> 100 % من احمالي المتدربين</p>

                        </div>
                        <div class="col col-12 col-md-12">
                            <img src="{{ asset('images/print/attend2.png') }}" width='' alt="">
                            {{-- <span class="text-title">
                                عدد الغياب
                            </span> --}}
                            <span class="text-value">{{ $presentTotal[1]['value'] }}</span>
                            <p class='p'>0 % من ا مالي المتدربين</p>
                        </div>
                    </div>
                    <div class="w-75 m-auto">
                    {{-- <div id="chartdiv-present33" dir="ltr" class="chartdiv"  style="font-size: 12px;"></div> --}}
                    <div id="chartdiv-present"  class="chartdiv"  style="font-size: 12px;font-family: 'Cairo';"></div>
                </div>
                </div>
                <img class="footerimg position-relative" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>
        </div>

        <div class="tab-pane fade " id="pills-rapport-tab-3-2" role="tabpanel" aria-labelledby="rapport-tab-3-2">
            <div class="page">
              <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>

                <div class="header p-3 m-3">
                    <h2 style="margin-bottom:40px">تسجيل الحضور و الغياب</h2>

                    <table class="table table-bordered mt-3">
                        <thead style='background:#656466;color:#fff'>

                            <th>#</th>
                            <th>المشترك</th>
                            @foreach ($presentTable as $session)
                                <th>{{ $session['session'] }}</th>
                            @endforeach
                            <th>الالتزام بالحضور</th>
                        </thead>

                        <tbody>
                            @if($presentTable)
                                @foreach ($presentTable[0]['participants'] as $key => $participant)
                                    <tr>
                                        @php
                                            $index = $loop->iteration;
                                        @endphp
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $key }}</td>
                                        @foreach ($presentTable as $session)
                                            <td>
                                                <input type="checkbox" value="" {{ $session['participants'][$key] == 'present' ? 'checked' : '' }} class="form-check-input">
                                            </td>
                                        @endforeach
                                        <td>
                                            {{ round($participantPercentage[$key], 2) }}%</td>
                                        </tr>
                                @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
                <img class="footerimg position-relative" src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
            </div>
        </div>

        <div class="tab-pane fade" id="pills-rapport-tab-4" role="tabpanel" aria-labelledby="rapport-tab-4">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header" style="margin-bottom: 40px">
                    <h2 style="line-height: 40px">قياس مستوى التفاعل<br> بشكل عام</h2>
                </div>

                <div class="charts-content">
                    <div class="row rounded-3 text-center justify-content-between">
                        @php
                            $displayedReviews = [];
                        @endphp
                        @foreach($reviewChartGlobal as $index => $data)

                            @if ( !in_array($list_reviews[$index]['review'], $displayedReviews))
                            {{-- <div class="col col-lg-12 mb-5">
                                <div class="">
                                    <h1 class="color1">{{ $list_reviews[$index]['review'] }}</h1>
                                </div>
                            </div> --}}
                            @endif

                            <div class="col col-lg-5 mb-5">
                                <div class=" ">
                                    <h3 class="color1">{{ $list_reviews[$index]['section']}}</h3>
                                </div>
                                {{-- <div id="chartdiv-general-{{$index}}" dir="ltr" class="chartdiv" style="width: 100%; height: 500px;font-size: 5px;"></div> --}}
                                <div id="chartdiv-general-{{$index}}11" dir="ltr" class="chartdiv" style="width: 100%; height: 300px;font-size:10px;"></div>
                            </div>
                            @php
                                $displayedReviews[] = $list_reviews[$index]['review'];
                            @endphp
                        @endforeach
                    </div>
                </div>

            </div>
            <img class="footerimg " src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">
        </div>

        <div class="tab-pane fade" id="pills-rapport-tab-5" role="tabpanel" aria-labelledby="rapport-tab-5">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header">
                    <h2 style="line-height: 40px">قياس مستوى التحسن <br>لدى المشاركين
                    </h2>
                </div>

                <div id="chartdiv-exam" class="chartdiv" dir="ltr" style="font-size: 15px;"></div>
                {{-- <div id="chartdiv-exam11" class="chartdiv" dir="ltr" style="font-size: 15px;"></div> --}}

                <table class="table table-bordered w-75" style="margin-bottom: 40px">
                    <tr>
                        <th>متوسط الاختبار القبلي</th>
                        <th>% {{ $nbParticipants > 0 ? number_format(($sumBefore / $nbParticipants)*100 / $groupExamBeforeTotal,2) : 0 }}</th>
                    </tr>
                    <tr>
                        <th>متوسط الاختبار البعدي</th>
                        <th>% {{  $nbParticipants >0 ? number_format(($sumAfter / $nbParticipants) * 100 / $groupExamAfterTotal,2) : 0 }}</th>
                    </tr>

                    <tr>
                        <th>معدل الزيادة</th>
                        <th >% {{ $sumAfter>0 ? number_format((($sumAfter-$sumBefore) / $sumAfter)*100,2) : 0}}</th>
                    </tr>
                </table>
                <img class="footerimg " src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">  </div>
        </div>

        @foreach ($text_responses_names as $key => $name)
            <div class="tab-pane fade" id="pills-rapport-tab-6{{ $key }}" role="tabpanel" aria-labelledby="rapport-tab-6{{ $key }}">
                <div class="page">
                    <div class="two-logo d-flex">
                        <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                        <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                    </div>
                    {{-- <div class="header">
                        <h2>{{ $name }}</h2>
                    </div> --}}
                    {{-- design of reviews --}}
                    @php
                        $displayedQuestions = [];
                        $displayedSections = [];
                    @endphp
                    @foreach ($text_responses as $item)

                        @if ($item['review'] == $name && !in_array($item['question'], $displayedQuestions))

                        @if (!in_array($item['section'], $displayedSections))
                            {{-- <h3 class="text-center fw-bold " >{{ $item['section'] }}</h3> --}}
                            <div class="header">
                                <h2>{{$item['section'] }}</h2>
                            </div>
                        @endif


                            <div class="p-5 m-5">
                                <div class="d-flex justify-content-center">
                                    <div class="question w-25">{{ $item['question'] }}</div>
                                    <div class="response w-50" style="text-align: justify;">
                                        <ul>
                                            @foreach ($text_responses as $value)
                                                @if ($item['review'] == $name && $item['question'] == $value['question'])
                                                    <li style="font-weight: 600">{{ $value['response'] }}</li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            @php
                                $displayedQuestions[] = $item['question'];
                                $displayedSections[] = $item['section'];
                            @endphp
                        @endif
                    @endforeach
                    <img class="footerimg " src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">  </div>
                </div>
            </div>
        @endforeach


        {{-- @foreach ($text_responses_names as $key => $name)
        <div class="tab-pane fade" id="pills-rapport-tab-6{{ $key }}" role="tabpanel" aria-labelledby="rapport-tab-6{{ $key }}">

            <div class="page">
                <img class="img-company" src="data:image/jpeg;base64,{{ $imgCompany }}" alt="">
                <div class="header">
                    <h2> {{ $name }}
                    </h2>
                </div>

                @foreach ($text_responses as $key => $item)
                    @if($item['review']==$name /*and $item['question'] not repete */)
                        <div class="p-5 m-5">
                            <div class="d-flex justify-content-center">
                                <div class="question w-25">{{ $item['question'] }} {{ $key }}</div>
                                <div class="response w-50">
                                    @php $index = 0 @endphp
                                    <ol>
                                        @foreach ($text_responses as $key => $value)
                                            @if($item['review']==$name && $item['question']==$value['question'] && $index<3)
                                                <li>{{ $value['response'] }}</li>
                                                @php $index = 0 @endphp
                                            @endif
                                        @endforeach
                                    </ol>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
        @endforeach --}}

        <div class="tab-pane fade" id="pills-rapport-tab-8" role="tabpanel" aria-labelledby="rapport-tab-8">
            <div class="page">
                <div class="two-logo d-flex">
                    <img class="img-company2" src="data:image/jpeg;base64,{{ $logoIvory2 }}" alt="">

                    <img class="img-company" src="data:image/jpeg;base64,{{ $logoIvory3 }}" alt="">
                </div>
                <div class="header">
                    <h2>صور من البرنامج التدريبي
                    </h2>
                </div>

                <style>
                    .br-start{
                        border-bottom:3px solid #656466;
                        border-left:3px solid #656466;

                    }
                    .br-end{
                        border-top:3px solid #656466;
                        border-right:3px solid #656466;
                    }

                </style>

                <div class="row p-5">
                    @if($group->images)
                    @foreach (array_slice($group->images, 0, 4) as $index => $img)
                        <div class="col col-6 p-4 text-center @if($index==0) br-start @endif @if($index==3) br-end @endif"  style="">
                            <img class="w-75 p-4 m-4 h-75" style="object-fit: cover;" src="{{ asset($img) }}">
                        </div>
                    @endforeach
                    @endif
                </div>
                <img class="footerimg " src="data:image/jpeg;base64,{{ $logoIvory4 }}" alt="">  </div>
            </div>

        </div>
      </div>


    {{-- <div id="chartdiv222" dir="ltr"></div> --}}


      <style>

        .chartdiv{
            font-family: 'Cairo'; style="font-size: 5px;"

        }
        .chartdiv> div{
            width: 40%;
        }
        #chartdiv-present,#chartdiv-exam{
            height: 300px;
        }
    </style>

    <!-- Resources -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    {{-- for circle --}}
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    {{-- for present --}}
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>


    <!-- Resources -->
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>


    <!-- Styles -->
<style>
#chartdiv222 {
  width: 100%;
  height: 300px;
}

</style>



{{-- new charts --}}

<script>
    var pieData = @json($globals);

    var pieOptions = {
        chart: {
            type: 'pie',
            width: '100%',
            height: 300
        },
        series: [],
        labels: [],
        colors: [],
        stroke: {
            show: true,
            colors: ['transparent']
        },
        fill: {
            gradient: {
                shade: 'light',
                type: 'vertical',
                shadeIntensity: 0.5,
                gradientToColors: ['#36A2EB', '#36A2EB'],
                inverseColors: false,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 50]
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: '100%'
                },
            }
        }],
        labels: {
            style: {
                fontSize: '12px',
                colors: ['#fff']
            }
        },
        legend: {
            position: 'bottom',
            fontSize: '10px',
            fontFamily: 'Tajawal'
        }
    };

    for (var i = 0; i < pieData.length; i++) {
        var chartId = "chart-" + (i + 1);
        var options = Object.assign({}, pieOptions);

        var sortedData = pieData[i];

        options.series = sortedData.map(item => item.percent);
        options.labels = sortedData.map(item => item.type);

        options.colors = ['#ffc609', '#a5a5a5', '#f37825', '#549ada']; // Use colors in the same order

        var pieChart = new ApexCharts(document.querySelector("#" + chartId), options);
        pieChart.render();
    }
</script>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv222", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.legend = new am4charts.Legend();

chart.legend.maxHeight = 100;
chart.legend.scrollable = true;

chart.data = [
  {
    country: "Lithuania",
    litres: 1
  },
  {
    country: "Czech Republic",
    litres: 301.9
  },
  {
    country: "Ireland",
    litres: 201.1
  },
  {
    country: "Germany",
    litres: 165.8
  },
  {
    country: "Australia",
    litres: 139.9
  },
  {
    country: "Austria",
    litres: 128.3
  },
  {
    country: "UK",
    litres: 99
  },
  {
    country: "Belgium",
    litres: 60
  },
  {
    country: "The Netherlands",
    litres: 50
  }
];

chart.innerRadius = 100;

var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.category = "country";

}); // end am4core.ready()
</script>

<!-- HTML -->


    <!-- Chart code -->

    <script>
        am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartdiv-exam11", am4charts.XYChart3D);

        var data = @json($resultExam);
        // Add data
        chart.data = data;

        // Create axes
        let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.labels.template.rotation = 270;
        categoryAxis.renderer.labels.template.hideOversized = false;
        categoryAxis.renderer.minGridDistance = 20;
        categoryAxis.renderer.labels.template.horizontalCenter = "right";
        categoryAxis.renderer.labels.template.verticalCenter = "middle";
        categoryAxis.tooltip.label.rotation = 270;
        categoryAxis.tooltip.label.horizontalCenter = "right";
        categoryAxis.tooltip.label.verticalCenter = "middle";

        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.title.text = "النسبة";
        valueAxis.title.fontWeight = "bold";

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries3D());
        series.dataFields.valueY = "value";
        series.dataFields.categoryX = "country";
        series.name = "value";
        series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = .8;

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;
        columnTemplate.stroke = am4core.color("#FFFFFF");

        columnTemplate.adapter.add("fill", function(fill, target) {
          return chart.colors.getIndex(target.dataItem.index);
        })

        columnTemplate.adapter.add("stroke", function(stroke, target) {
          return chart.colors.getIndex(target.dataItem.index);
        })

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.lineX.strokeOpacity = 0;
        chart.cursor.lineY.strokeOpacity = 0;

        }); // end am4core.ready()
        </script>


<script>
    am5.ready(function() {


    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("chartdiv-exam");


    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
      am5themes_Animated.new(root)
    ]);


    // Create chart
    // https://www.amcharts.com/docs/v5/charts/xy-chart/
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
      panX: false,
      panY: false,
      paddingLeft: 30,
      paddingRight: 30,
      wheelX: "panX",
      wheelY: "zoomX",
      layout: root.verticalLayout,
      fontFamily: "Cairo"
    }));


    // Add legend
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var legend = chart.children.push(
      am5.Legend.new(root, {
        centerX: am5.p50,
        x: am5.p50
      })
    );


    var data = @json($resultExam);

    /* var data = [{
      "year": "2021",
      "قبل": 2.5,
      "بعد": 2.5,
    }] */


    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var xRenderer = am5xy.AxisRendererX.new(root, {
      cellStartLocation: 0.1,
      cellEndLocation: 0.9,
      minorGridEnabled: true
    })

    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
      categoryField: "year",
      renderer: xRenderer,
      tooltip: am5.Tooltip.new(root, {})
    }));

    xRenderer.grid.template.setAll({
      location: 1
    })

    xAxis.data.setAll(data);

    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
      renderer: am5xy.AxisRendererY.new(root, {
        strokeOpacity: 0.1
      })
    }));


    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    function makeSeries(name, fieldName) {
      var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: name,
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: fieldName,
        categoryXField: "year"
      }));

      series.columns.template.setAll({
        tooltipText: "{name}, {categoryX}:{valueY}",
        width: am5.percent(90),
        tooltipY: 0,
        strokeOpacity: 0
      });

      series.data.setAll(data);

      // Make stuff animate on load
      // https://www.amcharts.com/docs/v5/concepts/animations/
      series.appear();

      series.bullets.push(function () {
        return am5.Bullet.new(root, {
          locationY: 0,
          sprite: am5.Label.new(root, {
            text: "{valueY}",
            fill: root.interfaceColors.get("alternativeText"),
            centerY: 0,
            centerX: am5.p50,
            populateText: true
          })
        });
      });

      legend.data.push(series);
    }

    makeSeries("قبل", "قبل");
    makeSeries("بعد", "بعد");


    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    chart.appear(1000, 100);

    }); // end am5.ready()
</script>

@foreach($globals as $index => $data)
<script>
    am5.ready(function() {
        /* ------ chart reviews ------ */

        // Create root and chart
        var root{{$index}} = am5.Root.new("chartdiv{{$index}}");

        root{{$index}}.setThemes([
            am5themes_Animated.new(root{{$index}})
        ]);

        var chart{{$index}} = root{{$index}}.container.children.push(
            am5percent.PieChart.new(root{{$index}}, {
                layout: root{{$index}}.verticalLayout,
                x: am5.percent(50),
                centerX: am5.percent(50),
                paddingLeft: 30,
                paddingRight: 0,
            })
        );

        // Create series
        var series{{$index}} = chart{{$index}}.series.push(
            am5percent.PieSeries.new(root{{$index}}, {
                valueField: "percent",
                categoryField: "type",
                fillField: "color",
            })
        );

        // Create Legend
        var legend{{$index}} = chart{{$index}}.children.push(
            am5.Legend.new(root{{$index}}, {
                position: "right",
                layout: root{{$index}}.verticalLayout,
            })
        );

        // Connect the legend with the series
        legend{{$index}}.data.setAll(series{{$index}}.slices.values);

        // Set up click events
        series{{$index}}.slices.template.events.on("click", function(event) {
            console.log(event.target.dataItem.dataContext);
            if (event.target.dataItem.dataContext.id !== undefined) {
                selected{{$index}} = event.target.dataItem.dataContext.id;
            } else {
                selected{{$index}} = undefined;
            }
            series{{$index}}.data.setAll(generateChartData{{$index}}());
        });

        // Define data
        var selected{{$index}};
        var types{{$index}} = @json($data);
        series{{$index}}.data.setAll(generateChartData{{$index}}());

        series{{$index}}.appear(1000, 100);

        function generateChartData{{$index}}() {
            var chartData{{$index}} = [];
            for (var i = 0; i < types{{$index}}.length; i++) {
                if (i == selected{{$index}}) {
                    for (var x = 0; x < types{{$index}}[i].subs.length; x++) {
                        chartData{{$index}}.push({
                            type: types{{$index}}[i].subs[x].type,
                            percent: types{{$index}}[i].subs[x].percent,
                            color: types{{$index}}[i].color,
                            pulled: true,
                            sliceSettings: {
                                active: true,
                            },
                        });
                    }
                } else {
                    chartData{{$index}}.push({
                        type: types{{$index}}[i].type,
                        percent: types{{$index}}[i].percent,
                        color: getChartColor(i),
                        id: i,
                    });
                }
            }
            return chartData{{$index}};
        }

        function getChartColor(index) {
            var colors = ['#ffc609', '#a5a5a5', '#f37825', '#549ada'];
            return colors[index % colors.length];
        }
    });
</script>

    <script>
        am4core.ready(function() {
        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        var chart{{$index}} = am4core.create("chartdiv55{{$index}}", am4charts.PieChart3D);
        chart{{$index}}.hiddenState.properties.opacity = 0; // this creates initial fade-in

        chart{{$index}}.data =  @json($data);

        chart{{$index}}.innerRadius = am4core.percent(40);
        chart{{$index}}.depth = 120;

        //new

        chart{{$index}}.legend = new am4charts.Legend();

        chart{{$index}}.legend.maxHeight = 100;
        chart{{$index}}.legend.scrollable = true;

        // chart{{$index}}.legend = new am4charts.Legend();
        // var legend{{$index}} = new am4charts.Legend();

        // legend.maxHeight = 100;
        // chart{{$index}}.legend.scrollable = true;

        // legend{{$index}}.paddingTop = 4; // Add padding to the top of the legend
        // legend{{$index}}.paddingLeft = 5; // Add padding to the top of the legend
        // legend{{$index}}.paddingRight = 5; // Add padding to the top of the legend
        // chart{{$index}}.legend = legend{{$index}};

        var series{{$index}} = chart{{$index}}.series.push(new am4charts.PieSeries3D());
        series{{$index}}.dataFields.value = "percent";
        series{{$index}}.dataFields.depthValue = "percent";
        series{{$index}}.dataFields.category = "type";
        series{{$index}}.slices.template.cornerRadius = 5;
        series{{$index}}.colors.step = 4;
        // series{{$index}}.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series{{$index}}.columns.template.fillOpacity = .8;


        var columnTemplate{{$index}} = series{{$index}}.columns.template;
        columnTemplate{{$index}}.strokeWidth = 2;
        columnTemplate{{$index}}.strokeOpacity = 1;
        columnTemplate{{$index}}.stroke = am4core.color("#FFFFFF");

        columnTemplate{{$index}}.adapter.add("fill", function(fill, target) {
            return chart{{$index}}.colors.getIndex(target.dataItem.index);
        });

        columnTemplate{{$index}}.adapter.add("stroke", function(stroke, target) {
            return chart{{$index}}.colors.getIndex(target.dataItem.index);
        });

        chart{{$index}}.cursor = new am4charts.XYCursor();
        chart{{$index}}.cursor.lineX.strokeOpacity = 0;
        chart{{$index}}.cursor.lineY.strokeOpacity = 0;


        }); // end am4core.ready()
        </script>

    @endforeach


{{-- @dump($presentTotal) --}}

    <!-- Chart code -->

    <script>
        am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartdiv-present33", am4charts.XYChart3D);

        var data = @json($presentTotal);
        // Add data
        chart.data = data;

        // Create axes
        let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.labels.template.rotation = 270;
        categoryAxis.renderer.labels.template.hideOversized = false;
        categoryAxis.renderer.minGridDistance = 20;
        categoryAxis.renderer.labels.template.horizontalCenter = "right";
        categoryAxis.renderer.labels.template.verticalCenter = "middle";
        categoryAxis.tooltip.label.rotation = 270;
        categoryAxis.tooltip.label.horizontalCenter = "right";
        categoryAxis.tooltip.label.verticalCenter = "middle";

        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.title.text = "العدد";
        valueAxis.title.fontWeight = "bold";

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries3D());
        series.dataFields.valueY = "value";
        series.dataFields.categoryX = "country";
        series.name = "value";
        series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = .8;

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;
        columnTemplate.stroke = am4core.color("#FFFFFF");

        columnTemplate.adapter.add("fill", function(fill, target) {
          return chart.colors.getIndex(target.dataItem.index);
        })

        columnTemplate.adapter.add("stroke", function(stroke, target) {
          return chart.colors.getIndex(target.dataItem.index);
        })

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.lineX.strokeOpacity = 0;
        chart.cursor.lineY.strokeOpacity = 0;

        }); // end am4core.ready()
        </script>

<script>

    am5.ready(function() {

        /* ------ chart present ------ */

        var root = am5.Root.new("chartdiv-present");

        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
            am5themes_Animated.new(root)
        ]);

        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX: true,
            paddingLeft: 30,
            paddingRight: 30,
            fontFamily: "Cairo"
        }));

        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
        cursor.lineY.set("visible", false);


        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xRenderer = am5xy.AxisRendererX.new(root, {
        minGridDistance: 30,
        minorGridEnabled: true
        });

        xRenderer.labels.template.setAll({
        rotation: 0,
        centerX: am5.p50,
        paddingLeft: 50
        });

        xRenderer.grid.template.setAll({
        location: 1
        })

        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        maxDeviation: 0.3,
        categoryField: "country",
        renderer: xRenderer,
        tooltip: am5.Tooltip.new(root, {})
        }));

        var yRenderer = am5xy.AxisRendererY.new(root, {
        strokeOpacity: 0.1
        })

        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        maxDeviation: 0.3,
        renderer: yRenderer
        }));

        // Create series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "Series 1",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value",
        sequencedInterpolation: true,
        categoryXField: "country",
        tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
        })
        }));



        // series.set("tooltipText", "[#888 fontVariant: ");

        series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
        series.columns.template.adapters.add("fill", function (fill, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
        });

        series.columns.template.adapters.add("stroke", function (stroke, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
        });


        // Set data

        var data = @json($presentTotal);

        xAxis.data.setAll(data);
        series.data.setAll(data);


        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000);
        chart.appear(1000, 100);

    }); // end am5.ready()
</script>


@foreach($reviewChartGlobal as $index => $data)
{{-- 3d --}}

<script>
    am4core.ready(function() {
        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance with a unique identifier
        var chart{{$index}} = am4core.create("chartdiv-general-{{ $index }}", am4charts.XYChart3D);

        // Add data to the current chart
        chart{{$index}}.data = @json($data);

        // Create axes for the current chart
        let categoryAxis{{$index}} = chart{{$index}}.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis{{$index}}.dataFields.category = "country";
        categoryAxis{{$index}}.renderer.labels.template.rotation = 270;
        categoryAxis{{$index}}.renderer.labels.template.hideOversized = false;
        categoryAxis{{$index}}.renderer.minGridDistance = 20;
        categoryAxis{{$index}}.renderer.labels.template.horizontalCenter = "right";
        categoryAxis{{$index}}.renderer.labels.template.verticalCenter = "middle";
        categoryAxis{{$index}}.tooltip.label.rotation = 270;
        categoryAxis{{$index}}.tooltip.label.horizontalCenter = "right";
        categoryAxis{{$index}}.tooltip.label.verticalCenter = "middle";

        let valueAxis{{$index}} = chart{{$index}}.yAxes.push(new am4charts.ValueAxis());
        valueAxis{{$index}}.title.text = "العدد";
        valueAxis{{$index}}.title.fontWeight = "bold";

        // Create series for the current chart
        var series{{$index}} = chart{{$index}}.series.push(new am4charts.ColumnSeries3D());
        series{{$index}}.dataFields.valueY = "value";
        series{{$index}}.dataFields.categoryX = "country";
        series{{$index}}.name = "value";
        series{{$index}}.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series{{$index}}.columns.template.fillOpacity = .8;

        var columnTemplate{{$index}} = series{{$index}}.columns.template;
        columnTemplate{{$index}}.strokeWidth = 2;
        columnTemplate{{$index}}.strokeOpacity = 1;
        columnTemplate{{$index}}.stroke = am4core.color("#FFFFFF");

        columnTemplate{{$index}}.adapter.add("fill", function(fill, target) {
            return chart{{$index}}.colors.getIndex(target.dataItem.index);
        });

        columnTemplate{{$index}}.adapter.add("stroke", function(stroke, target) {
            return chart{{$index}}.colors.getIndex(target.dataItem.index);
        });

        chart{{$index}}.cursor = new am4charts.XYCursor();
        chart{{$index}}.cursor.lineX.strokeOpacity = 0;
        chart{{$index}}.cursor.lineY.strokeOpacity = 0;

    }); // end am4core.ready()
</script>



    <script>

        function getChartColor3(index) {
            var colors = ['#66a3bd', '#a498c4', '#60bc9b', '#5b9bd5'];
            return colors[index % colors.length];
        }


        am5.ready(function() {

            /* ------ chart present ------ */

            var root = am5.Root.new("chartdiv-general-{{ $index }}11");

            // Set themes
            // https://www.amcharts.com/docs/v5/concepts/themes/
            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            // Create chart
            // https://www.amcharts.com/docs/v5/charts/xy-chart/
            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true,
                paddingLeft: 60,
                paddingRight: 60,
                fontFamily: "Cairo"
            }));

            // Add cursor
            // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
            var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
            cursor.lineY.set("visible", false);


            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer = am5xy.AxisRendererX.new(root, {
            minGridDistance: 30,
            minorGridEnabled: true
            });

            xRenderer.labels.template.setAll({
            rotation: 0,
            centerX: am5.p50,
            paddingLeft: 50
            });

            xRenderer.grid.template.setAll({
            location: 1
            })

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
            maxDeviation: 0.3,
            categoryField: "country",
            renderer: xRenderer,
            tooltip: am5.Tooltip.new(root, {})
            }));

            var yRenderer = am5xy.AxisRendererY.new(root, {
            strokeOpacity: 0.1
            })

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
            maxDeviation: 0.3,
            renderer: yRenderer
            }));

            // Create series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
            name: "Series 1",
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            sequencedInterpolation: true,
            categoryXField: "country",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{valueY}"
            })
            }));

            series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
            series.columns.template.adapters.add("fill", function (fill, target) {
            // return chart.get("colors").getIndex(series.columns.indexOf(target));
            return getChartColor3(series.columns.indexOf(target));
            });

            series.columns.template.adapters.add("stroke", function (stroke, target) {
            // return chart.get("colors").getIndex(series.columns.indexOf(target));
            return getChartColor3(series.columns.indexOf(target));
            });


            // Set data

            var data = @json($data);
            /* var data = [{
            country: "الحضور",
            value: 20
            }, {
            country: "الغياب",
            value: 0
            }]; */

            xAxis.data.setAll(data);
            series.data.setAll(data);


            // Make stuff animate on load
            // https://www.amcharts.com/docs/v5/concepts/animations/
            series.appear(1000);
            chart.appear(1000, 100);

        }); // end am5.ready()
    </script>
    @endforeach



@endsection