citrus/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php

<x-filament-widgets::widget>
    <x-filament::section class="fi-wi-intern-gantt-chart">
        <x-slot name="heading">
            <div class="flex items-center justify-between">
                <span class="text-lg font-bold tracking-tight text-gray-950 dark:text-white">
                    Stajyer Gantt Şeması ve Takvimi
                </span>
                <span class="text-xs px-2.5 py-1 bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400 rounded-full font-semibold">
                    Stajı Onaylananlar
                </span>
            </div>
        </x-slot>

        @if(count($interns) === 0)
            <div class="flex flex-col items-center justify-center p-8 text-center bg-gray-50 dark:bg-gray-900/40 rounded-xl border border-dashed border-gray-200 dark:border-gray-800">
                <div class="p-3 bg-gray-100 dark:bg-gray-800 rounded-full mb-3 text-gray-400">
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
                    </svg>
                </div>
                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">
                    Tarihleri belirlenmiş onaylı stajyer bulunamadı.
                </p>
            </div>
        @else
            <div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900">
                <div class="min-w-[900px] flex flex-col">
                    <!-- Header Row -->
                    <div class="flex bg-gray-50 dark:bg-gray-800/40 border-b border-gray-200 dark:border-gray-800 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                        <!-- Left Panel: Intern Info Title -->
                        <div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex items-center bg-gray-50 dark:bg-gray-800/50">
                            Stajyer Bilgisi
                        </div>
                        <!-- Right Panel: Months Timeline (Absolute layout to prevent flexbox squishing) -->
                        <div class="flex-1 relative h-12">
                            @foreach($months as $month)
                                <div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-200 dark:border-gray-800 last:border-r-0 flex items-center justify-center text-xs font-semibold text-gray-600 dark:text-gray-400 px-1 truncate">
                                    {{ $month['name'] }}
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Body Rows -->
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        @foreach($interns as $intern)
                            <div class="flex hover:bg-gray-50/30 dark:hover:bg-gray-800/10 transition-colors">
                                <!-- Left Panel: Intern Info -->
                                <div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex flex-col justify-center bg-gray-50/10 dark:bg-gray-800/5">
                                    <span class="font-bold text-sm text-gray-900 dark:text-white truncate">
                                        {{ $intern['name'] }}
                                    </span>
                                    <span class="text-[10px] text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-1">
                                        <svg class="w-3.5 h-3.5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
                                        </svg>
                                        {{ $intern['total_days'] }} Gün Staj
                                    </span>
                                </div>

                                <!-- Right Panel: Timeline Gantt Bar Area -->
                                <div class="flex-1 relative min-h-[72px] overflow-hidden">
                                    <!-- Background Grid Lines -->
                                    @foreach($months as $month)
                                        <div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-100 dark:border-gray-800/40 last:border-r-0 pointer-events-none"></div>
                                    @endforeach

                                    <!-- Today Line -->
                                    @if($todayPercent !== null)
                                        <div style="left: {{ $todayPercent }}%" class="absolute inset-y-0 w-px border-l border-dashed border-rose-500 z-10 pointer-events-none"></div>
                                    @endif

                                    <!-- Gantt Bar Pill -->
                                    <div 
                                        style="left: {{ $intern['left'] }}%; width: {{ $intern['width'] }}%;" 
                                        class="absolute top-1/2 -translate-y-1/2 h-9 rounded-full shadow-sm border {{ $intern['color']['bg'] }} {{ $intern['color']['gradient'] }} bg-gradient-to-r {{ $intern['color']['text'] }} {{ $intern['color']['border'] }} flex items-center justify-between px-4 text-xs font-bold transition-all duration-200 hover:scale-[1.01] hover:shadow-md cursor-pointer z-20 group/bar"
                                        x-data="{ open: false }"
                                        @mouseenter="open = true"
                                        @mouseleave="open = false"
                                    >
                                        <!-- Intern Name / Start Date inside the bar -->
                                        <span class="truncate pr-1">
                                            {{ $intern['start_date'] }}
                                        </span>
                                        <span class="text-[10px] opacity-95 shrink-0 bg-white/25 dark:bg-black/25 px-1.5 py-0.5 rounded-full font-semibold">
                                            {{ $intern['end_date'] }}
                                        </span>

                                        <!-- Interactive Glassmorphic Tooltip -->
                                        <div 
                                            x-show="open" 
                                            x-transition:enter="transition ease-out duration-150"
                                            x-transition:enter-start="opacity-0 translate-y-1"
                                            x-transition:enter-end="opacity-100 translate-y-0"
                                            x-transition:leave="transition ease-in duration-100"
                                            x-transition:leave-start="opacity-100 translate-y-0"
                                            x-transition:leave-end="opacity-0 translate-y-1"
                                            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2.5 w-64 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3.5 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
                                            style="display: none;"
                                        >
                                            <div class="font-bold text-sm text-white border-b border-gray-800 pb-1.5 mb-2 flex justify-between items-center">
                                                <span class="truncate pr-2">{{ $intern['name'] }}</span>
                                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold border border-emerald-500/30 shrink-0">
                                                    {{ $intern['total_days'] }} Gün
                                                </span>
                                            </div>
                                            <div class="space-y-1.5 text-gray-400">
                                                <div class="flex justify-between">
                                                    <span>Staj Başlangıç:</span>
                                                    <span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
                                                </div>
                                                <div class="flex justify-between">
                                                    <span>Staj Bitiş:</span>
                                                    <span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            
            @if($todayPercent !== null)
                <div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
                    <span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
                    <span>Kesikli kırmızı çizgi bugünün tarihini göstermektedir.</span>
                </div>
            @endif
        @endif
    </x-filament::section>
</x-filament-widgets::widget>