@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section', 'Dashboard')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/dashbord.css">
@endsection
@section('content')
    {{-- content --}}
    @php
        $monthArr = [
            1 => 'Jan',
            2 => 'Feb',
            3 => 'Mar',
            4 => 'Apr',
            5 => 'May',
            6 => 'Jun',
            7 => 'Jul',
            8 => 'Aug',
            9 => 'Sep',
            10 => 'Oct',
            11 => 'Nov',
            12 => 'Dec',
        ];
        $monthIndex = (int) date('m');
    @endphp
    <div class="container-fluid">
        <div class="container">
            <div class="dashContainer">
                @if (!Helper::checkRole(['SUPER_ADMIN', 'ORG_ADMIN', 'DIV_MANAGER', 'DEP_MANAGER']))
                    <a href="{{ Helper::checkRole(['REVIEWER', 'GUEST']) ? route('org.item.list.view', ['subdomain' => $subdomain, 'review_overdue' => true]) : route('org.item.review.overdue.view', compact('subdomain')) }}"
                        title="">
                        <div class="dashCard red-card" data-card-id="overdue">
                            <div class="dash-icon-box">
                                <i class="bi bi-calendar-event dash-icon"></i>
                            </div>
                            <div class="dash-text-box">
                                <h1 data-card-count>
                                    <x-pre-loader :uibLoader="['class' => 'pre-loader', 'color' => 'var(--danger)']" />
                                </h1>
                                <h4 class="m-0">Reviews Overdue</h4>
                                {{-- <p>View all</p> --}}
                            </div>
                            <i class="bi bi-calendar-event placeholder-icon"></i>
                        </div>
                    </a>
                @endif
                @foreach ($sections as $key => $section)
                    @if ($section['is_show'])
                        @if ($key == 'item')
                            <div class="dashCard" data-card-id="{{ $key }}"
                                onclick="window.location.href='{{ !empty($section['link']) ? $section['link'] . '?view_list=active' : '#' }}'">
                                <div class="dash-icon-box">
                                    <i class="{{ $section['icon'] }} dash-icon"></i>
                                    {{-- <a href="{{ !empty($section['link']) ? $section['link'] : '#' }}">
                                        <button class="button btn-secondary" style="color: #000; padding-block:0.3em;">View all</button>
                                    </a> --}}
                                </div>
                                <div class="dash-text-box">
                                    <h1 data-card-count>
                                        <x-pre-loader :uibLoader="['class' => 'pre-loader', 'color' => '#fff']" />
                                    </h1>
                                    <h4 class="m-0">{{ $section['title'] }}</h4>
                                    {{-- <p>View all</p> --}}
                                </div>
                                <i class="{{ $section['icon'] }} placeholder-icon"></i>
                            </div>
                        @else
                            <a href="{{ $section['link'] ?? '#' }}" title="">
                                <div class="dashCard" data-card-id="{{ $key }}">
                                    @if ($key == 'itemAll')
                                        <h4 class="m-0 mt-auto">{{ $section['title'] }}</h4>
                                    @else
                                        <div class="dash-icon-box">
                                            <i class="{{ $section['icon'] }} dash-icon"></i>
                                        </div>
                                        <div class="dash-text-box">
                                            <h1 data-card-count>
                                                <x-pre-loader :uibLoader="['class' => 'pre-loader', 'color' => '#fff']" />
                                            </h1>
                                            <h4 class="m-0">{{ $section['title'] }}</h4>
                                            {{-- <p>View all</p> --}}
                                        </div>
                                        <i class="{{ $section['icon'] }} placeholder-icon"></i>
                                    @endif
                                </div>
                            </a>
                        @endif
                    @endif
                @endforeach
                @if (!Helper::checkRole(['SUPER_ADMIN']))
                        <div class="monthchart-container box-wrapper">
                            <p class="monthchart-label">Next 12 months review due dates</p>
                            <br>
                            <table class="monthchart-table">
                                <tr class="chart-raw">
                                    <td colspan="12">
                                        <x-pre-loader :uibLoader="['class' => 'pre-loader']" />
                                    </td>
                                </tr>
                                <tr>
                                    @for ($i = 0; $i < 12; $i++)
                                                        <td>{{ $monthArr[$monthIndex] }}</td>
                                                        @php
                                                            $monthIndex++;
                                                            if ($monthIndex > 12) {
                                                                $monthIndex = 1;
                                                            }
                                                        @endphp
                                    @endfor
                                </tr>
                            </table>
                        </div>
                @endif
            </div>
            <br>
            <br>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "get",
                url: "{{ route('org.get.totalSectionData', compact('subdomain')) }}",
                data: {},
                success: function (response) {
                    const { status, section } = response;

                    if (section && section.overdue && section.overdue.count !== undefined) {
                        console.log('Overdue count:', section.overdue.count);

                        let overdueCard = document.querySelector('[data-card-id="overdue"]');
                        if (overdueCard) {
                            const overdueCount = section.overdue.count;
                            overdueCard.querySelector('[data-card-count]').innerHTML = overdueCount;

                            if (overdueCount == 0) {
                                overdueCard.classList.remove("red-card");
                                overdueCard.classList.add("blue-card");
                            } else {
                                overdueCard.classList.remove("blue-card");
                                overdueCard.classList.add("red-card");
                            }
                        }
                    }

                    Object.keys(section).forEach(key => {
                        if (section[key].count != "-") {
                            let card = document.querySelector(`[data-card-id="${key}"]`);
                            if (card != null) {
                                card.querySelector('[data-card-count]').innerHTML = section[key].count;
                            }
                        }
                    });
                },
                error: function (xhr, status, error) {
                    console.error('AJAX Error:', error);
                }
            });

            @if (!Helper::checkRole(['SUPER_ADMIN']))
                $.ajax({
                    type: "get",
                    url: "{{ route('org.get.next12monthsDueDate', compact('subdomain')) }}",
                    data: {},
                    success: function (response) {
                        const {
                            monthData,
                            totalCount
                        } = response;

                        let html = ``;
                        monthData.forEach(count => {
                            html += `<td style="--total:${totalCount};--value:${count};">
                                                            ${count}
                                                       </td>`;
                        });
                        $(`.chart-raw`).html(html);
                    }
                });
            @endif
        });
    </script>
@endsection