@extends('statistics.app')

@section('content')
    <style>
        .fa-spinner {
            font-size: 40px;
            color: #f3b91b;
        }
    </style>
    <div class="row g-3 mb-3">
        <div class="col-xxl-6 col-xl-12">
            <div class="card py-3 mb-3">
                <div class="card-body py-3">
                    <h3>{{ $parent->name }} ({{ $parent->getTotalEmployeeCount() }})</h3>

                    <div class="row g-0">
                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.contract_type')</h5>

                            <!-- Set a container for the canvas with fixed height -->
                            <div style="height: 200px;" class="d-flex flex-column justify-content-center align-items-center">
                                <i id="contractTypeLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="employeeContractTypeChart"></canvas>
                            </div>

                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">
                                @for ($i = 0; $i < count($countByContractType['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">{{ $countByContractType['names'][$i] }}
                                        <br>
                                        {{ $countByContractType['counts'][$i] ?? 0 }}
                                    </h6>
                                @endfor
                            </div> --}}
                        </div>

                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.category') </h5>

                            <div style="height: 200px;"
                                class="d-flex flex-column justify-content-center align-items-center">
                                <i id="categoryLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="categoryEmployeeChart"></canvas>
                            </div>


                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">

                                @for ($i = 0; $i < count($countByCategory['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">@lang('employee.' . $countByCategory['names'][$i]) <br>
                                        {{ $countByCategory['counts'][$i] ?? 0 }} </h6>
                                @endfor
                            </div> --}}
                        </div>



                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.grade')</h5>


                            <div style="height: 200px;"
                                class="d-flex flex-column justify-content-center align-items-center">
                                <i id="gradeLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="categoryEmployeeGrade"></canvas>
                            </div>

                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">
                                @for ($i = 0; $i < count($countByGrade['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">@lang('employee.' . $countByGrade['names'][$i]) <br>
                                        {{ $countByGrade['counts'][$i] ?? 0 }} </h6>
                                @endfor
                            </div> --}}
                        </div>

                    </div>

                    <div class="row g-0 mt-3">
                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.gender')</h5>


                            <div style="height: 200px;"
                                class="d-flex flex-column justify-content-center align-items-center">
                                <i id="genderLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="employeeGenderChart"></canvas>
                            </div>

                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">
                                @for ($i = 0; $i < count($countByGender['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">{{ $countByGender['names'][$i] }}
                                        <br>
                                        {{ $countByGender['counts'][$i] ?? 0 }}
                                    </h6>
                                @endfor
                            </div> --}}
                        </div>

                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.languages') </h5>


                            <div style="height: 200px;"
                                class="d-flex flex-column justify-content-center align-items-center">
                                <i id="languageLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="languageChart"></canvas>
                            </div>
                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">

                                @for ($i = 0; $i < count($countByLanguage['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">{{ $countByLanguage['names'][$i] }}
                                        <br>
                                        {{ $countByLanguage['counts'][$i] ?? 0 }}
                                    </h6>
                                @endfor
                            </div> --}}
                        </div>



                        <div class="col-6 col-md-4 border-200 border-bottom border-end pb-3">
                            <h5 class="pb-1 text-800 mx-3">@lang('employee.grade')</h5>

                            <!-- Set a container for the canvas with fixed height -->

                            <div style="height: 200px;"
                                class="d-flex flex-column justify-content-center align-items-center">
                                <i id="qualificationLoading" class="fa-spin fas fa-spinner"></i>

                                <canvas id="qualificationChart"></canvas>
                            </div>

                            {{-- <div class="d-flex align-items-center justify-content-center mt-4">
                                @for ($i = 0; $i < count($countByQualification['names']); $i++)
                                    <h6 class="fs-10 text-700 mb-0 mx-2 text-center">
                                        {{ $countByQualification['names'][$i] }} <br>
                                        {{ $countByQualification['counts'][$i] ?? 0 }} </h6>
                                @endfor
                            </div> --}}
                        </div>

                    </div>
                </div>
                <a href="{{route('entity.all_statistics',$parent->id)}}" class="btn btn-link"><ins>show all statistics</ins></a>

            </div>

        </div>

        <div class="col-xxl-6 col-xl-12">

            <div class="card py-3 mb-3">

                <div class="card-body py-3">
                    <h3>العدد الكلي ({{ $parent->getTotalEmployeeCount() }})</h3>
                    <div class="table-responsive scrollbar ">
                        <table class="table table-hover table-striped overflow-hidden">
                            <thead>
                                <tr>
                                    <th class="text-center" scope="col">الاسم</th>
                                    <th class="text-center" scope="col">عدد الموظفين</th>
                                </tr>
                                @forelse ($entity->children()->get() as $child)
                                    @if ($child->type != 'class')
                                        <tr>
                                            <td class="text-center">
                                                <a href="{{ route('entity.statistics', $child->id) }}">
                                                    {{ $child->name }}
                                                </a>
                                            </td>

                                            <td class="text-center">{{ $child->getTotalEmployeeCount() }}</td>
                                        </tr>
                                    @endif

                                @empty
                                @endforelse
                            </thead>
                            <tbody>

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







    <script src="{{ URL('jquery.min.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        var colors = [
            'rgba(255, 99, 132, 0.6)', // Red
            'rgba(54, 162, 235, 0.6)', // Blue
            'rgba(255, 206, 86, 0.6)', // Yellow
            'rgba(75, 192, 192, 0.6)', // Green
            'rgba(153, 102, 255, 0.6)', // Purple
            'rgba(255, 159, 64, 0.6)' // Orange
        ];

        function loadChart(entityId, canvasId, routeName, loadingId, chartType = 'doughnut') {
            // Show loading spinner
            document.getElementById(loadingId).style.display = 'block';

            $.ajax({
                url: routeName.replace(':entity_id', entityId),
                type: "GET",
                success: function(response) {
                    document.getElementById(loadingId).style.display = 'none'; // Hide loading spinner
                    var ctx = document.getElementById(canvasId).getContext('2d');
                    new Chart(ctx, {
                        type: chartType,
                        data: {
                            labels: response.labels,
                            datasets: [{
                                data: response.counts,
                                backgroundColor: colors.slice(0, response.labels.length)
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.log('Error:', error);
                    document.getElementById(loadingId).innerHTML = 'Error loading chart';
                }
            });
        }

        // Call the function for each chart on page load
        document.addEventListener("DOMContentLoaded", function() {
            var entityId = {{ $entity_id }}; // Assuming entity_id is available in the view

            loadChart(entityId, 'employeeContractTypeChart', "{{ route('contractTypeData', ':entity_id') }}"
                .replace(':entity_id', entityId), 'contractTypeLoading', 'pie');
            loadChart(entityId, 'categoryEmployeeChart', "{{ route('categoryData', ':entity_id') }}".replace(
                ':entity_id', entityId), 'categoryLoading', 'bar');
            loadChart(entityId, 'categoryEmployeeGrade', "{{ route('gradeData', ':entity_id') }}".replace(
                ':entity_id', entityId), 'gradeLoading');
            loadChart(entityId, 'employeeGenderChart', "{{ route('genderData', ':entity_id') }}".replace(
                ':entity_id', entityId), 'genderLoading', 'pie');
            loadChart(entityId, 'languageChart', "{{ route('languageData', ':entity_id') }}".replace(':entity_id',
                entityId), 'languageLoading', 'bar');
            loadChart(entityId, 'qualificationChart', "{{ route('qualificationData', ':entity_id') }}".replace(
                ':entity_id', entityId), 'qualificationLoading');
        });
    </script>
@endsection