Changes to holidays and the overlap between this year and the previous year

resources/views/attendance/show.blade.php

@@ -4,8 +4,10 @@ use Morilog\Jalali\Jalalian;
 use Carbon\Carbon;
 
 $monthlyTotals = [];
+$currentJalaliYear = Jalalian::now()->getYear();
+$monthLabels = [];
 
-foreach ($data as $month => $attendances) {
+foreach ($data as $monthKey => $attendances) {
     $tsec = 0;
 
     foreach ($attendances as $attendance) {
@@ -18,9 +20,27 @@ foreach ($data as $month => $attendances) {
     $hours = floor($tsec / 3600);
     $minutes = floor(($tsec % 3600) / 60);
 
-    $monthlyTotals[$month] = sprintf('%02d:%02d', $hours, $minutes);
+    $monthlyTotals[$monthKey] = sprintf('%02d:%02d', $hours, $minutes);
+
+    if (preg_match('/^(\d{4})-(\d{2})$/', (string) $monthKey, $m)) {
+        try {
+            $j = new Jalalian((int) $m[1], (int) $m[2], 1);
+            $name = $j->format('%B');
+            $monthLabels[$monthKey] = ((int) $m[1] === (int) $currentJalaliYear)
+                ? $name
+                : $name . ' ' . $m[1];
+        } catch (\Throwable $e) {
+            $monthLabels[$monthKey] = $monthKey;
+        }
+    } else {
+        $monthLabels[$monthKey] = $monthKey;
+    }
 }
 
+$monthKeys = array_keys($data);
+$recentMonthKeys = array_slice($monthKeys, 0, 3);
+$olderMonthKeys = array_slice($monthKeys, 3);
+
 ?>
 @extends('app')
 
@@ -32,13 +52,27 @@ foreach ($data as $month => $attendances) {
             </div>
         @else
             <div class="ui-month-tabs" style="margin-top: 5rem;">
-                @foreach(array_keys($data) as $month)
-                    <button type="button" class="tablinks" onclick="openCity(event, '{{ $month }}')">{{ $month }}</button>
+                @foreach($recentMonthKeys as $monthKey)
+                    <button type="button" class="tablinks"
+                            onclick="openCity(event, 'm-{{ $monthKey }}')">{{ $monthLabels[$monthKey] ?? $monthKey }}</button>
                 @endforeach
+                @if(!empty($olderMonthKeys))
+                    <div class="ui-month-more">
+                        <button type="button" class="tablinks ui-month-more-btn" onclick="toggleMonthMore(event)">⋯</button>
+                        <div id="month-more-menu" class="ui-month-more-menu hidden">
+                            @foreach($olderMonthKeys as $monthKey)
+                                <button type="button" class="tablinks ui-month-more-item"
+                                        onclick="openCity(event, 'm-{{ $monthKey }}'); closeMonthMore();">
+                                    {{ $monthLabels[$monthKey] ?? $monthKey }}
+                                </button>
+                            @endforeach
+                        </div>
+                    </div>
+                @endif
             </div>
 
-            @foreach($data as $month => $records)
-                <div id="{{ $month }}" class="tabcontent ui-attendance-card">
+            @foreach($data as $monthKey => $records)
+                <div id="m-{{ $monthKey }}" class="tabcontent ui-attendance-card">
                     <table class="ui-attendance-table">
                         <thead>
                         <tr>
@@ -52,7 +86,7 @@ foreach ($data as $month => $attendances) {
                         <tbody>
                         @foreach($records as $row)
                             <tr>
-                                <td>{{ \App\Support\JalaliHelper::format($row->entered_at, 'm/d') }}</td>
+                                <td>{{ \App\Support\JalaliHelper::format($row->entered_at, 'Y/m/d') }}</td>
                                 <td>{{ \App\Support\JalaliHelper::format($row->entered_at, '%A') }}</td>
                                 <td>{{ Carbon::parse($row->entered_at)->format('H:i') ?? '-' }}</td>
                                 <td>{{ $row->exited_at ? Carbon::parse($row->exited_at)->format('H:i') : '-' }}</td>
@@ -61,7 +95,7 @@ foreach ($data as $month => $attendances) {
                         @endforeach
                         <tr>
                             <td colspan="5" class="table-summary">
-                                مجموع کارکرد این ماه: {{ $monthlyTotals[$month] }}
+                                مجموع کارکرد این ماه: {{ $monthlyTotals[$monthKey] }}
                             </td>
                         </tr>
                         </tbody>
@@ -78,13 +112,24 @@ foreach ($data as $month => $attendances) {
 
             const panel = document.getElementById(Month);
             if (panel) panel.style.display = 'block';
-
-            if (evt.currentTarget) evt.currentTarget.classList.add('active');
+            if (evt && evt.currentTarget) evt.currentTarget.classList.add('active');
         }
 
-        document.addEventListener('DOMContentLoaded', function () {
-            const firstTab = document.querySelector('.tablinks');
-            if (firstTab) firstTab.click();
+        function toggleMonthMore(evt) {
+            if (evt) evt.stopPropagation();
+            const menu = document.getElementById('month-more-menu');
+            if (menu) menu.classList.toggle('hidden');
+        }
+
+        function closeMonthMore() {
+            const menu = document.getElementById('month-more-menu');
+            if (menu) menu.classList.add('hidden');
+        }
+
+        document.addEventListener('click', closeMonthMore);
+        document.addEventListener('DOMContentLoaded', () => {
+            const first = document.querySelector('.ui-month-tabs > .tablinks');
+            if (first) first.click();
         });
     </script>
 @endsection