@extends('layouts.site')

@section('content')
<section class="wrapper bg-[#f0f7ff] py-12">
  <div class="container px-4">
    <div class="max-w-[1440px] mx-auto">
      
      <!-- Top header / Welcome card -->
      <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
        <div>
          <span class="text-xs uppercase font-extrabold tracking-widest text-[#e31e24] bg-red-50 px-3 py-1.5 rounded-full">Stajyer Paneli</span>
          <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight mt-3">Hoş Geldiniz, {{ $intern->name }}</h1>
          <p class="text-sm text-slate-500 mt-1">Staj belgelerinizi ve başvuru detaylarınızı buradan yönetebilirsiniz.</p>
        </div>
        <form action="{{ route('intern.logout') }}" method="POST">
          @csrf
          <button type="submit" class="px-5 py-3 rounded-xl bg-slate-100 hover:bg-red-50 text-slate-600 hover:text-[#e31e24] font-bold text-sm transition-all flex items-center gap-2 border border-slate-200/50 hover:border-red-100">
            <i class="uil uil-sign-out-alt text-lg"></i>
            <span>Çıkış Yap</span>
          </button>
        </form>
      </div>

      <!-- Stajyer Çalışma Rehberi Callout -->
      <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl p-6 shadow-xl text-white mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-2xl text-white flex-shrink-0">
            <i class="uil uil-info-circle"></i>
          </div>
          <div>
            <h4 class="font-extrabold text-base tracking-tight text-white">Stajyer Çalışma & Git Workflow Rehberi</h4>
            <p class="text-xs text-blue-100 font-medium mt-1">GitHub reposu oluşturma, günlük commitler ve toplantı kuralları hakkında bilgi edinin.</p>
          </div>
        </div>
        <button onclick="toggleGuideModal(true)" class="px-5 py-3 bg-white text-blue-600 hover:bg-blue-50 font-extrabold text-sm rounded-xl transition-all shadow-md flex items-center gap-2 self-stretch sm:self-auto justify-center">
          <i class="uil uil-book-open"></i>
          <span>Rehberi İncele</span>
        </button>
      </div>

      <!-- Session & Validation Alerts -->
      @if(session('success'))
      <div class="bg-green-50 border border-green-200 text-green-700 px-6 py-4 rounded-3xl mb-8 flex items-center gap-3 shadow-sm">
        <i class="uil uil-check-circle text-2xl flex-shrink-0"></i>
        <span class="font-bold text-sm">{{ session('success') }}</span>
      </div>
      @endif

      @if(session('error'))
      <div class="bg-red-50 border border-red-200 text-[#e31e24] px-6 py-4 rounded-3xl mb-8 flex items-center gap-3 shadow-sm">
        <i class="uil uil-exclamation-octagon text-2xl flex-shrink-0"></i>
        <span class="font-bold text-sm">{{ session('error') }}</span>
      </div>
      @endif

      @if($errors->any())
      <div class="bg-red-50 border border-red-200 text-[#e31e24] px-6 py-4 rounded-3xl mb-8 shadow-sm">
        <div class="flex items-center gap-3 mb-2">
          <i class="uil uil-exclamation-octagon text-2xl flex-shrink-0"></i>
          <span class="font-bold text-sm">Lütfen aşağıdaki hataları düzeltin:</span>
        </div>
        <ul class="list-disc list-inside text-xs font-semibold space-y-1 ml-1">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif

@php
  $status = $intern->status;
  $hasToBeSigned = !empty($intern->to_be_signed_internship_form_path);
  $hasSigned = !empty($intern->signed_internship_form_path);
  
  $step1_state = 'completed';
  
  if (in_array($status, ['reviewed', 'waiting_document', 'accepted']) || $hasToBeSigned || $hasSigned) {
      $step2_state = 'completed';
  } elseif ($status === 'rejected') {
      $step2_state = 'rejected';
  } else {
      $step2_state = 'active';
  }
  
  if ($hasToBeSigned || $hasSigned) {
      $step3_state = 'completed';
  } elseif ($step2_state === 'completed' && $status !== 'rejected') {
      $step3_state = 'active';
  } else {
      $step3_state = 'pending';
  }
  
  if ($hasSigned) {
      $step4_state = 'completed';
  } elseif ($step3_state === 'completed' && !$hasSigned && $status !== 'rejected') {
      $step4_state = 'active';
  } else {
      $step4_state = 'pending';
  }
  
  if ($status === 'accepted' && $hasSigned) {
      $step5_state = 'completed';
  } elseif ($step4_state === 'completed' && $status !== 'rejected') {
      $step5_state = 'active';
  } else {
      $step5_state = 'pending';
  }

  $completedCount = 0;
  if ($step1_state === 'completed') $completedCount++;
  if ($step2_state === 'completed') $completedCount++;
  if ($step3_state === 'completed') $completedCount++;
  if ($step4_state === 'completed') $completedCount++;
  if ($step5_state === 'completed') $completedCount++;
  
  $progressPercent = (($completedCount - 1) / 4) * 100;
  if ($status === 'rejected') {
      $progressPercent = 25;
  }
@endphp

      <!-- Staj Bitirme Belgeleri & Transkript Showcase Card -->
      @if($intern->certificate_code && ($intern->notebook_approved || $intern->status === 'accepted'))
      <div class="bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 rounded-3xl p-6 md:p-8 shadow-2xl text-white mb-8 relative overflow-hidden border border-slate-700/50">
        <!-- Glow accents -->
        <div class="absolute -right-20 -top-20 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute -left-20 -bottom-20 w-80 h-80 bg-emerald-500/20 rounded-full blur-3xl pointer-events-none"></div>

        <div class="relative z-10 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
          <div class="space-y-3 max-w-2xl">
            <div class="flex flex-wrap items-center gap-2">
              <span class="px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 text-xs font-extrabold uppercase tracking-wider flex items-center gap-1.5">
                <i class="uil uil-shield-check text-sm"></i> Resmi Onaylı Staj Belgesi
              </span>
              @if($intern->notebook_supervisor_signed)
              <span class="px-3 py-1 rounded-full bg-blue-500/20 border border-blue-400/40 text-blue-300 text-xs font-extrabold uppercase tracking-wider">
                Sorumlu Onayladı: {{ $intern->notebook_supervisor_name ?: 'Alperen Trunç' }}
              </span>
              @endif
              @if($intern->notebook_approved)
              <span class="px-3 py-1 rounded-full bg-purple-500/20 border border-purple-400/40 text-purple-300 text-xs font-extrabold uppercase tracking-wider">
                Defter Genel Onaylı
              </span>
              @endif
            </div>

            <h2 class="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
              Staj Bitirme Sertifikası & Akademik Transkriptiniz Hazır!
            </h2>
            <p class="text-sm text-slate-300 leading-relaxed">
              Trunçgil Teknoloji bünyesinde başarıyla tamamladığınız staj dönemi için resmi staj bitirme sertifikanız, detaylı akademik performans transkriptiniz ve onaylı staj defteriniz sistemde aktif edilmiştir.
            </p>
            <div class="text-xs text-slate-400 font-mono flex items-center gap-2">
              <span>Doğrulama No:</span>
              <strong class="text-emerald-400 bg-slate-800/90 px-3 py-1 rounded-lg border border-slate-700 font-bold tracking-wider">{{ $intern->certificate_code }}</strong>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="flex flex-col sm:flex-row lg:flex-col gap-2.5 w-full lg:w-auto flex-shrink-0">
            <a href="{{ route('internship.verify', $intern->certificate_code) }}" target="_blank" class="px-6 py-3.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white font-extrabold text-sm rounded-2xl transition-all shadow-lg shadow-emerald-500/20 flex items-center justify-center gap-2 text-center">
              <i class="uil uil-award text-lg"></i>
              <span>Sertifika & Transkripti Aç</span>
            </a>

            <div class="grid grid-cols-2 gap-2">
              <a href="{{ route('intern.print-journal') }}?size=a4" target="_blank" class="px-3.5 py-2.5 bg-white/10 hover:bg-white/20 text-white font-bold text-xs rounded-xl transition-all flex items-center justify-center gap-1.5 border border-white/10 text-center">
                <i class="uil uil-print"></i> A4 Defter
              </a>
              <a href="{{ route('intern.print-journal') }}?size=a5" target="_blank" class="px-3.5 py-2.5 bg-white/10 hover:bg-white/20 text-white font-bold text-xs rounded-xl transition-all flex items-center justify-center gap-1.5 border border-white/10 text-center">
                <i class="uil uil-print"></i> A5 Defter
              </a>
            </div>

            @if($intern->github_repo)
            <a href="{{ route('intern.download-journal') }}" class="px-4 py-2.5 bg-blue-600/80 hover:bg-blue-600 text-white font-bold text-xs rounded-xl transition-all flex items-center justify-center gap-1.5 border border-blue-500/30 text-center">
              <i class="uil uil-arrow-down-tray"></i> Günlüğü İndir (.md)
            </a>
            @endif
          </div>
        </div>
      </div>
      @endif

      <!-- Stage Timeline Card -->
      <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50 mb-8">
        <h3 class="font-bold text-slate-800 text-lg mb-6 pb-2 border-b border-slate-100 flex items-center gap-2">
          <i class="uil uil-chart-growth text-blue-600 text-xl"></i>
          <span>Staj Süreci İlerleme Durumu</span>
        </h3>
        
        <!-- Desktop Timeline (Horizontal) -->
        <div class="hidden md:block relative my-6">
          <!-- Background Line -->
          <div class="absolute top-6 left-8 right-8 h-1 bg-slate-100 rounded-full -z-10">
            <div class="h-full bg-blue-600 rounded-full transition-all duration-500" style="width: {{ $progressPercent }}%;"></div>
          </div>
          
          <div class="flex justify-between items-start">
            <!-- Step 1 -->
            <div class="flex flex-col items-center text-center w-1/5 px-2">
              <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl shadow-lg shadow-blue-500/20 z-10 border-4 border-white">
                <i class="uil uil-clipboard-notes"></i>
              </div>
              <span class="text-xs font-extrabold text-slate-800 mt-3">Başvuru Alındı</span>
              <span class="text-[10px] text-slate-400 font-semibold mt-1">Staj başvurunuz sisteme ulaştı.</span>
            </div>

            <!-- Step 2 -->
            <div class="flex flex-col items-center text-center w-1/5 px-2">
              @if($step2_state === 'completed')
                <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl shadow-lg shadow-blue-500/20 z-10 border-4 border-white">
                  <i class="uil uil-search-alt"></i>
                </div>
              @elseif($step2_state === 'rejected')
                <div class="w-12 h-12 rounded-full bg-red-600 text-white flex items-center justify-center text-xl shadow-lg shadow-red-500/20 z-10 border-4 border-white">
                  <i class="uil uil-multiply"></i>
                </div>
              @elseif($step2_state === 'active')
                <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl z-10 border-4 border-white ring-2 ring-blue-500 animate-pulse">
                  <i class="uil uil-search-alt"></i>
                </div>
              @else
                <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-xl z-10 border-4 border-white">
                  <i class="uil uil-search-alt"></i>
                </div>
              @endif
              <span class="text-xs font-extrabold @if($step2_state === 'active') text-blue-600 @elseif($step2_state === 'rejected') text-red-600 @else text-slate-800 @endif mt-3">Ön Değerlendirme</span>
              @if($step2_state === 'rejected')
                <span class="text-[10px] text-red-500 font-semibold mt-1">Başvurunuz olumsuz sonuçlandı.</span>
              @else
                <span class="text-[10px] text-slate-400 font-semibold mt-1">Evrak ve kriterler inceleniyor.</span>
              @endif
            </div>

            <!-- Step 3 -->
            <div class="flex flex-col items-center text-center w-1/5 px-2">
              @if($step3_state === 'completed')
                <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl shadow-lg shadow-blue-500/20 z-10 border-4 border-white">
                  <i class="uil uil-file-upload-alt"></i>
                </div>
              @elseif($step3_state === 'active')
                <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl z-10 border-4 border-white ring-2 ring-blue-500 animate-pulse">
                  <i class="uil uil-file-upload-alt"></i>
                </div>
              @else
                <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-xl z-10 border-4 border-white">
                  <i class="uil uil-file-upload-alt"></i>
                </div>
              @endif
              <span class="text-xs font-extrabold @if($step3_state === 'active') text-blue-600 @else text-slate-800 @endif mt-3">Staj Formu Yükleme</span>
              <span class="text-[10px] text-slate-400 font-semibold mt-1">İmzalanacak staj formunu yükleyin.</span>
            </div>

            <!-- Step 4 -->
            <div class="flex flex-col items-center text-center w-1/5 px-2">
              @if($step4_state === 'completed')
                <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl shadow-lg shadow-blue-500/20 z-10 border-4 border-white">
                  <i class="uil uil-file-check-alt"></i>
                </div>
              @elseif($step4_state === 'active')
                <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl z-10 border-4 border-white ring-2 ring-blue-500 animate-pulse">
                  <i class="uil uil-file-check-alt"></i>
                </div>
              @else
                <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-xl z-10 border-4 border-white">
                  <i class="uil uil-file-check-alt"></i>
                </div>
              @endif
              <span class="text-xs font-extrabold @if($step4_state === 'active') text-blue-600 @else text-slate-800 @endif mt-3">İmzalı Form Onayı</span>
              <span class="text-[10px] text-slate-400 font-semibold mt-1">İmzalanmış formunuz hazırlanıyor.</span>
            </div>

            <!-- Step 5 -->
            <div class="flex flex-col items-center text-center w-1/5 px-2">
              @if($step5_state === 'completed')
                <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl shadow-lg shadow-blue-500/20 z-10 border-4 border-white">
                  <i class="uil uil-rocket"></i>
                </div>
              @elseif($step5_state === 'active')
                <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl z-10 border-4 border-white ring-2 ring-blue-500 animate-pulse">
                  <i class="uil uil-rocket"></i>
                </div>
              @else
                <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-xl z-10 border-4 border-white">
                  <i class="uil uil-rocket"></i>
                </div>
              @endif
              <span class="text-xs font-extrabold @if($step5_state === 'active') text-blue-600 @else text-slate-800 @endif mt-3">Oryantasyon & Başlangıç</span>
              <span class="text-[10px] text-slate-400 font-semibold mt-1">Staj süreci ve eğitimler başlar.</span>
            </div>
          </div>
        </div>

        <!-- Mobile Timeline (Vertical) -->
        <div class="md:hidden space-y-6 pl-4 relative before:content-[''] before:absolute before:left-[21px] before:top-2 before:bottom-2 before:w-1 before:bg-slate-100">
          <!-- Step 1 -->
          <div class="flex gap-4 items-start relative">
            <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-blue-500/10">
              <i class="uil uil-clipboard-notes"></i>
            </div>
            <div>
              <h4 class="text-sm font-extrabold text-slate-800">Başvuru Alındı</h4>
              <p class="text-xs text-slate-400 mt-0.5">Staj başvurunuz sisteme ulaştı.</p>
            </div>
          </div>

          <!-- Step 2 -->
          <div class="flex gap-4 items-start relative">
            @if($step2_state === 'completed')
              <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-blue-500/10">
                <i class="uil uil-search-alt"></i>
              </div>
            @elseif($step2_state === 'rejected')
              <div class="w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-red-500/10">
                <i class="uil uil-multiply"></i>
              </div>
            @elseif($step2_state === 'active')
              <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-sm z-10 border border-blue-500 animate-pulse">
                <i class="uil uil-search-alt"></i>
              </div>
            @else
              <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-sm z-10">
                <i class="uil uil-search-alt"></i>
              </div>
            @endif
            <div>
              <h4 class="text-sm font-extrabold @if($step2_state === 'active') text-blue-600 @elseif($step2_state === 'rejected') text-red-600 @else text-slate-800 @endif">Ön Değerlendirme</h4>
              @if($step2_state === 'rejected')
                <p class="text-xs text-red-500 mt-0.5">Başvurunuz olumsuz sonuçlandı.</p>
              @else
                <p class="text-xs text-slate-400 mt-0.5">Evrak ve kriterler inceleniyor.</p>
              @endif
            </div>
          </div>

          <!-- Step 3 -->
          <div class="flex gap-4 items-start relative">
            @if($step3_state === 'completed')
              <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-blue-500/10">
                <i class="uil uil-file-upload-alt"></i>
              </div>
            @elseif($step3_state === 'active')
              <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-sm z-10 border border-blue-500 animate-pulse">
                <i class="uil uil-file-upload-alt"></i>
              </div>
            @else
              <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-sm z-10">
                <i class="uil uil-file-upload-alt"></i>
              </div>
            @endif
            <div>
              <h4 class="text-sm font-extrabold @if($step3_state === 'active') text-blue-600 @else text-slate-800 @endif">Staj Formu Yükleme</h4>
              <p class="text-xs text-slate-400 mt-0.5">İmzalanacak staj formunu yükleyin.</p>
            </div>
          </div>

          <!-- Step 4 -->
          <div class="flex gap-4 items-start relative">
            @if($step4_state === 'completed')
              <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-blue-500/10">
                <i class="uil uil-file-check-alt"></i>
              </div>
            @elseif($step4_state === 'active')
              <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-sm z-10 border border-blue-500 animate-pulse">
                <i class="uil uil-file-check-alt"></i>
              </div>
            @else
              <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-sm z-10">
                <i class="uil uil-file-check-alt"></i>
              </div>
            @endif
            <div>
              <h4 class="text-sm font-extrabold @if($step4_state === 'active') text-blue-600 @else text-slate-800 @endif">İmzalı Form Onayı</h4>
              <p class="text-xs text-slate-400 mt-0.5">İmzalanmış formunuz hazırlanıyor.</p>
            </div>
          </div>

          <!-- Step 5 -->
          <div class="flex gap-4 items-start relative">
            @if($step5_state === 'completed')
              <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm z-10 shadow-md shadow-blue-500/10">
                <i class="uil uil-rocket"></i>
              </div>
            @elseif($step5_state === 'active')
              <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-sm z-10 border border-blue-500 animate-pulse">
                <i class="uil uil-rocket"></i>
              </div>
            @else
              <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center text-sm z-10">
                <i class="uil uil-rocket"></i>
              </div>
            @endif
            <div>
              <h4 class="text-sm font-extrabold @if($step5_state === 'active') text-blue-600 @else text-slate-800 @endif">Oryantasyon & Başlangıç</h4>
              <p class="text-xs text-slate-400 mt-0.5">Staj süreci ve eğitimler başlar.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Application Info & Document Download Grid -->
      <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
        
        <!-- Sidebar stats / statuses / tabs -->
        <div class="md:col-span-4 space-y-6">
          <div class="bg-white rounded-3xl p-4 shadow-xl border border-slate-100/50">
            <h3 class="font-bold text-slate-800 text-base mb-4 px-3 pb-2 border-b border-slate-100">Menü</h3>
            
            <div class="space-y-1" role="tablist">
              <!-- Menu Item 1: Kişisel Bilgileriniz -->
              <button type="button" role="tab" aria-selected="true" data-tab-target="personal-info" class="tab-btn active w-full flex items-center gap-4 p-3 rounded-2xl text-left transition-all border border-transparent">
                <div class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl flex-shrink-0 tab-icon">
                  <i class="uil uil-user"></i>
                </div>
                <div class="flex-grow">
                  <span class="block text-sm font-extrabold text-slate-800">Kişisel Bilgiler</span>
                  <span class="block text-xs text-slate-400 font-semibold mt-0.5">Başvuru detaylarınız</span>
                </div>
              </button>

              <!-- Menu Item 2: Belgeleriniz -->
              <button type="button" role="tab" aria-selected="false" data-tab-target="documents" class="tab-btn w-full flex items-center gap-4 p-3 rounded-2xl text-left transition-all border border-transparent">
                <div class="w-10 h-10 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center text-xl flex-shrink-0 tab-icon">
                  <i class="uil uil-file-alt"></i>
                </div>
                <div class="flex-grow">
                  <span class="block text-sm font-extrabold text-slate-800">Belgeleriniz</span>
                  <span class="block text-xs text-slate-400 font-semibold mt-0.5">CV ve staj formları</span>
                </div>
              </button>

              <!-- Menu Item 3: Staj Defteri -->
              <button type="button" role="tab" aria-selected="false" data-tab-target="journal" class="tab-btn w-full flex items-center gap-4 p-3 rounded-2xl text-left transition-all border border-transparent">
                <div class="w-10 h-10 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center text-xl flex-shrink-0 tab-icon">
                  <i class="uil uil-book-open"></i>
                </div>
                <div class="flex-grow">
                  <span class="block text-sm font-extrabold text-slate-800">Staj Defteri Doldur</span>
                  <span class="block text-xs text-slate-400 font-semibold mt-0.5">Günlük çalışma defteri</span>
                </div>
              </button>

              <!-- Menu Item 4: Blog Yazıları -->
              @php
                $approvedBlogsCount = isset($blogs) ? $blogs->where('status', 'published')->count() : 0;
              @endphp
              <button type="button" role="tab" aria-selected="false" data-tab-target="blogs" class="tab-btn w-full flex items-center gap-4 p-3 rounded-2xl text-left transition-all border border-transparent">
                <div class="w-10 h-10 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center text-xl flex-shrink-0 tab-icon">
                  <i class="uil uil-newspaper"></i>
                </div>
                <div class="flex-grow">
                  <div class="flex items-center justify-between">
                    <span class="block text-sm font-extrabold text-slate-800">Blog Yazıları</span>
                    <span class="text-[10px] font-extrabold px-2 py-0.5 rounded-full @if($approvedBlogsCount >= 3) bg-green-100 text-green-700 @else bg-blue-100 text-blue-700 @endif">{{ $approvedBlogsCount }}/3</span>
                  </div>
                  <span class="block text-xs text-slate-400 font-semibold mt-0.5">Sitede yayınlanacak bloglar</span>
                </div>
              </button>

              <!-- Menu Item 5: Sertifika & Transkript -->
              <button type="button" role="tab" aria-selected="false" data-tab-target="transcript" class="tab-btn w-full flex items-center gap-4 p-3 rounded-2xl text-left transition-all border border-transparent">
                <div class="w-10 h-10 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center text-xl flex-shrink-0 tab-icon">
                  <i class="uil uil-award"></i>
                </div>
                <div class="flex-grow">
                  <div class="flex items-center justify-between">
                    <span class="block text-sm font-extrabold text-slate-800">Sertifika & Transkript</span>
                    @if($intern->certificate_code && ($intern->notebook_approved || $intern->status === 'accepted'))
                      <span class="text-[10px] font-extrabold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700">Hazır</span>
                    @endif
                  </div>
                  <span class="block text-xs text-slate-400 font-semibold mt-0.5">Akademik rapor & onay</span>
                </div>
              </button>
            </div>
          </div>
        </div>

        <!-- Content Panels -->
        <div class="md:col-span-8">
          
          <!-- Panel 1: Kişisel Bilgileriniz -->
          <div id="personal-info-panel" class="tab-panel space-y-6">
            <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50">
              <h3 class="font-bold text-slate-800 text-lg mb-6 pb-2 border-b border-slate-100">Kişisel Bilgileriniz</h3>
              
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">E-posta</span>
                  <span class="text-sm font-bold text-slate-700 block mt-1.5">{{ $intern->email }}</span>
                </div>
                
                @if($intern->phone)
                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">Telefon</span>
                  <span class="text-sm font-bold text-slate-700 block mt-1.5">{{ $intern->phone }}</span>
                </div>
                @endif

                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">Staj Durumu</span>
                  <div class="mt-2">
                    <span class="inline-flex px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider
                      @if($intern->status === 'accepted') bg-green-50 text-green-700 border border-green-200
                      @elseif($intern->status === 'rejected') bg-red-50 text-red-700 border border-red-200
                      @elseif($intern->status === 'reviewed') bg-blue-50 text-blue-700 border border-blue-200
                      @elseif($intern->status === 'waiting_document') bg-amber-50 text-amber-700 border border-amber-200
                      @else bg-slate-50 text-slate-500 border border-slate-200 @endif">
                      @if($intern->status === 'accepted') Kabul Edildi
                      @elseif($intern->status === 'rejected') Reddedildi
                      @elseif($intern->status === 'reviewed') İncelendi
                      @elseif($intern->status === 'waiting_document') Belge Bekleniyor
                      @else Beklemede @endif
                    </span>
                  </div>
                </div>

                @if($intern->internship_total_days)
                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">Toplam Süre</span>
                  <span class="text-sm font-bold text-blue-600 block mt-1.5">{{ $intern->internship_total_days }} İş Günü <span class="text-xs text-slate-400 font-normal">(Haftada 5 Gün)</span></span>
                </div>
                @endif

                @if($intern->internship_start_date)
                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">Staj Başlangıç Tarihi</span>
                  <span class="text-sm font-bold text-slate-700 block mt-1.5">{{ \Carbon\Carbon::parse($intern->internship_start_date)->format('d.m.Y') }}</span>
                </div>
                @endif

                @if($intern->internship_end_date)
                <div>
                  <span class="text-xs text-slate-400 font-extrabold uppercase tracking-wider block">Staj Bitiş Tarihi</span>
                  <span class="text-sm font-bold text-slate-700 block mt-1.5">{{ \Carbon\Carbon::parse($intern->internship_end_date)->format('d.m.Y') }}</span>
                </div>
                @endif
              </div>
            </div>
          </div>

          <!-- Panel 2: Belgeleriniz -->
          <div id="documents-panel" class="tab-panel hidden space-y-6">
            <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50">
              <h3 class="font-bold text-slate-800 text-lg mb-6 pb-2 border-b border-slate-100">Belgeleriniz</h3>

              <div class="space-y-6">
                
                <!-- CV Card -->
                <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:border-slate-200 transition-all">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-red-50 text-[#e31e24] flex items-center justify-center text-2xl flex-shrink-0">
                      <i class="uil uil-file-alt"></i>
                    </div>
                    <div>
                      <h4 class="font-bold text-slate-800 text-base">Özgeçmiş (CV)</h4>
                      <p class="text-xs text-slate-400 mt-0.5">Başvuru sırasında yüklemiş olduğunuz özgeçmiş belgeniz.</p>
                    </div>
                  </div>
                  @if($intern->cv_path)
                  <a href="{{ Storage::disk('public')->url($intern->cv_path) }}" target="_blank" class="w-full sm:w-auto px-5 py-2.5 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-md">
                    <i class="uil uil-arrow-down-tray"></i>
                    <span>İndir</span>
                  </a>
                  @else
                  <span class="text-xs text-slate-400 italic">Yüklenmemiş</span>
                  @endif
                </div>

                <!-- Intern Upload: To Be Signed Form Card -->
                <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 hover:border-slate-200 transition-all">
                  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
                    <div class="flex items-center gap-4">
                      <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl flex-shrink-0">
                        <i class="uil uil-file-upload-alt"></i>
                      </div>
                      <div>
                        <h4 class="font-bold text-slate-800 text-base">İmzalanacak Staj Formu</h4>
                        @if($intern->to_be_signed_internship_form_path)
                          @if($intern->signed_internship_form_path)
                          <p class="text-xs text-green-600 font-semibold mt-0.5">Staj formunuz imzalandı ve onaylandı.</p>
                          @else
                          <p class="text-xs text-green-600 font-semibold mt-0.5">Staj formunuz başarıyla yüklendi. İmza işlemleri için hazır.</p>
                          @endif
                        @else
                        <p class="text-xs text-slate-400 mt-0.5">İmzalanmasını istediğiniz staj formunu buradan yükleyebilirsiniz.</p>
                        @endif
                      </div>
                    </div>
                    
                    <div class="flex items-center gap-2 w-full sm:w-auto">
                      @if($intern->to_be_signed_internship_form_path)
                      <a href="{{ Storage::disk('public')->url($intern->to_be_signed_internship_form_path) }}" target="_blank" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl text-xs transition-all flex items-center justify-center gap-1.5 shadow-sm">
                        <i class="uil uil-arrow-down-tray"></i>
                        <span>Görüntüle</span>
                      </a>
                      @endif
                    </div>
                  </div>

                  <div id="upload-form-wrapper" class="mt-4 border-t border-slate-100 pt-4">
                    <form action="{{ route('intern.upload-form') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                      @csrf

                      <!-- Company Legal Info Copy Box -->
                      <div class="bg-slate-50 border border-slate-200/60 rounded-2xl p-5 text-sm text-slate-600">
                        <div class="flex items-center gap-2 mb-3">
                          <i class="uil uil-info-circle text-blue-600 text-lg flex-shrink-0"></i>
                          <h5 class="font-extrabold text-slate-800 text-sm tracking-tight">Şirket Legal Bilgilerimiz</h5>
                        </div>
                        <p class="text-xs text-slate-400 mb-4 leading-normal">
                          Lütfen staj formunuzu doldururken şirketimize ait aşağıdaki resmi bilgileri kullanın. Sağdaki kopyalama butonlarını kullanarak bilgileri kolayca kopyalayabilirsiniz.
                        </p>
                        
                        <div class="space-y-2.5">
                          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-white px-3 py-2 rounded-xl border border-slate-100/80">
                            <span class="text-xs text-slate-400 font-bold sm:w-1/4">Şirket Unvanı</span>
                            <div class="flex items-center justify-between sm:w-3/4 w-full gap-2">
                              <span id="legal-title" class="text-xs font-bold text-slate-700 select-all break-all">TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ</span>
                              <button type="button" onclick="copyToClipboard('legal-title', this)" class="text-slate-400 hover:text-blue-600 transition-colors p-1 flex-shrink-0" title="Kopyala">
                                <i class="uil uil-copy text-sm"></i>
                              </button>
                            </div>
                          </div>

                          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-white px-3 py-2 rounded-xl border border-slate-100/80">
                            <span class="text-xs text-slate-400 font-bold sm:w-1/4">Adres</span>
                            <div class="flex items-center justify-between sm:w-3/4 w-full gap-2">
                              <span id="legal-address" class="text-xs font-bold text-slate-700 select-all break-all">Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep</span>
                              <button type="button" onclick="copyToClipboard('legal-address', this)" class="text-slate-400 hover:text-blue-600 transition-colors p-1 flex-shrink-0" title="Kopyala">
                                <i class="uil uil-copy text-sm"></i>
                              </button>
                            </div>
                          </div>

                          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-white px-3 py-2 rounded-xl border border-slate-100/80">
                            <span class="text-xs text-slate-400 font-bold sm:w-1/4">Vergi Dairesi & No</span>
                            <div class="flex items-center justify-between sm:w-3/4 w-full gap-2">
                              <span id="legal-tax" class="text-xs font-bold text-slate-700 select-all break-all">Şahinbey V.D. / 8591492435</span>
                              <button type="button" onclick="copyToClipboard('legal-tax', this)" class="text-slate-400 hover:text-blue-600 transition-colors p-1 flex-shrink-0" title="Kopyala">
                                <i class="uil uil-copy text-sm"></i>
                              </button>
                            </div>
                          </div>

                          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-white px-3 py-2 rounded-xl border border-slate-100/80">
                            <span class="text-xs text-slate-400 font-bold sm:w-1/4">MERSİS No</span>
                            <div class="flex items-center justify-between sm:w-3/4 w-full gap-2">
                              <span id="legal-mersis" class="text-xs font-bold text-slate-700 select-all break-all">0859149243500001</span>
                              <button type="button" onclick="copyToClipboard('legal-mersis', this)" class="text-slate-400 hover:text-blue-600 transition-colors p-1 flex-shrink-0" title="Kopyala">
                                <i class="uil uil-copy text-sm"></i>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <div>
                            <label for="internship_start_date" class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-1.5">Staj Başlangıç Tarihi</label>
                            <input type="date" name="internship_start_date" id="internship_start_date" onchange="calculateEndDateFrontend()" oninput="calculateEndDateFrontend()" required value="{{ $intern->internship_start_date }}" @if(!in_array($intern->status, ['pending', 'waiting_document', 'reviewed'])) disabled @endif class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none text-sm font-semibold text-slate-700 bg-white transition-all disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed" />
                          </div>
                          <div>
                            <label for="internship_total_days" class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-1.5">Staj Süresi (İş Günü)</label>
                            <input type="number" name="internship_total_days" id="internship_total_days" onchange="calculateEndDateFrontend()" oninput="calculateEndDateFrontend()" min="1" required value="{{ $intern->internship_total_days }}" placeholder="Örn: 20" @if(!in_array($intern->status, ['pending', 'waiting_document', 'reviewed'])) disabled @endif class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none text-sm font-semibold text-slate-700 bg-white transition-all disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed" />
                          </div>
                        </div>
                        <div>
                          <label for="internship_end_date" class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-1.5">Staj Bitiş Tarihi (Otomatik)</label>
                          <input type="date" name="internship_end_date" id="internship_end_date" readonly class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-slate-500 cursor-not-allowed focus:outline-none text-sm font-semibold transition-all" value="{{ $intern->internship_end_date }}" />
                        </div>
                      </div>

                      @if(in_array($intern->status, ['pending', 'waiting_document', 'reviewed']))
                      <div class="relative border-2 border-dashed border-slate-200 hover:border-blue-400 rounded-2xl p-6 transition-all bg-white flex flex-col items-center justify-center text-center cursor-pointer group">
                        <input type="file" name="internship_form" id="internship_form" accept=".pdf,.docx,.jpg,.png,.jpeg" onchange="handleFileSelected(this)" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
                        <i class="uil uil-cloud-upload text-4xl text-slate-400 group-hover:text-blue-500 transition-colors mb-2"></i>
                        <p class="text-sm font-bold text-slate-700">Dosya Seçin veya Sürükleyin</p>
                        <p class="text-xs text-slate-400 mt-1">PDF, DOCX, JPG veya PNG (Maks. 50MB)</p>
                        <p id="selected-file-name" class="text-xs font-bold text-blue-600 mt-3"></p>
                      </div>

                      <div class="flex justify-end">
                        <button type="submit" id="submit-upload-btn" disabled class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-sm transition-all flex items-center gap-2 opacity-50 cursor-not-allowed">
                          <i class="uil uil-check"></i>
                          <span>Dosyayı Kaydet</span>
                        </button>
                      </div>
                      @else
                      <div class="p-4 bg-slate-50 border border-slate-100 rounded-2xl text-center text-xs text-slate-500 font-semibold">
                        <i class="uil uil-lock-alt text-base mr-1"></i> Başvurunuz kabul veya ret durumunda olduğu için staj formunuzu ve tarihlerinizi güncelleyemezsiniz.
                      </div>
                      @endif
                    </form>
                  </div>
                </div>

                <!-- Signed Internship Form Card -->
                <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:border-slate-200 transition-all">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl @if($intern->signed_internship_form_path) bg-green-50 text-green-600 @else bg-amber-50 text-amber-600 @endif flex items-center justify-center text-2xl flex-shrink-0">
                      <i class="uil uil-file-check-alt"></i>
                    </div>
                    <div class="flex-grow">
                      <h4 class="font-bold text-slate-800 text-base">İmzalı Staj Formu</h4>
                      @if($intern->signed_internship_form_path)
                      <p class="text-xs text-slate-400 mt-0.5">Şirketimiz tarafından imzalanmış ve onaylanmış staj belgeniz.</p>
                      @else
                      <p class="text-xs text-amber-600/90 font-medium mt-0.5">Belgeniz imza aşamasındadır. Yöneticilerimiz tarafından onaylandığında buradan indirebilirsiniz.</p>
                      @endif
                    </div>
                  </div>
                  
                  @if($intern->signed_internship_form_path)
                  <a href="{{ Storage::disk('public')->url($intern->signed_internship_form_path) }}" target="_blank" class="w-full sm:w-auto px-5 py-2.5 bg-[#e31e24] hover:bg-[#c4191f] text-white font-bold rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-md shadow-red-500/10">
                    <i class="uil uil-arrow-down-tray"></i>
                    <span>İndir</span>
                  </a>
                  @else
                  <button disabled class="w-full sm:w-auto px-5 py-2.5 bg-slate-100 text-slate-400 font-bold rounded-xl text-sm cursor-not-allowed flex items-center justify-center gap-2 border border-slate-200/50">
                    <i class="uil uil-hourglass"></i>
                    <span>Bekleniyor</span>
                  </button>
                  @endif
                </div>

                @if($intern->certificate_code && ($intern->notebook_approved || $intern->status === 'accepted'))
                <!-- Certificate & Transcript Document Card -->
                <div class="p-5 rounded-2xl border border-emerald-200 bg-gradient-to-r from-emerald-50/70 to-teal-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:border-emerald-300 transition-all">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-emerald-600 text-white flex items-center justify-center text-2xl flex-shrink-0 shadow-md shadow-emerald-600/20">
                      <i class="uil uil-award"></i>
                    </div>
                    <div>
                      <div class="flex items-center gap-2">
                        <h4 class="font-bold text-slate-800 text-base">Staj Bitirme Sertifikası & Akademik Transkript</h4>
                        <span class="px-2 py-0.5 rounded-md bg-emerald-100 text-emerald-800 text-[10px] font-extrabold uppercase">Onaylı</span>
                      </div>
                      <p class="text-xs text-slate-500 mt-0.5">Dijital imzalı staj sertifikanız, akademik transkriptiniz ve performans değerlendirme raporunuz.</p>
                      <span class="text-[11px] font-mono text-emerald-700 font-bold mt-1 block">Kod: {{ $intern->certificate_code }}</span>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 w-full sm:w-auto">
                    <a href="{{ route('internship.verify', $intern->certificate_code) }}" target="_blank" class="w-full sm:w-auto px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-md shadow-emerald-600/10">
                      <i class="uil uil-external-link-alt"></i>
                      <span>Görüntüle / Doğrula</span>
                    </a>
                  </div>
                </div>

                <!-- Approved Notebook Card -->
                <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:border-slate-200 transition-all">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl flex-shrink-0">
                      <i class="uil uil-book-alt"></i>
                    </div>
                    <div>
                      <h4 class="font-bold text-slate-800 text-base">Onaylı Staj Defteri Raporu</h4>
                      <p class="text-xs text-slate-400 mt-0.5">Sorumlu ve birim imzalarıyla onaylanmış günlük staj defteri çıktısı.</p>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 w-full sm:w-auto">
                    <a href="{{ route('intern.print-journal') }}?size=a4" target="_blank" class="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-xs transition-all flex items-center justify-center gap-1.5 shadow-sm">
                      <i class="uil uil-print"></i>
                      <span>A4 Yazdır</span>
                    </a>
                    <a href="{{ route('intern.print-journal') }}?size=a5" target="_blank" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl text-xs transition-all flex items-center justify-center gap-1.5 shadow-sm">
                      <i class="uil uil-print"></i>
                      <span>A5 Yazdır</span>
                    </a>
                  </div>
                </div>
                @endif

                @if($intern->github_repo)
                <!-- Markdown Journal Download Card -->
                <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:border-slate-200 transition-all">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center text-2xl flex-shrink-0">
                      <i class="uil uil-file-download-alt"></i>
                    </div>
                    <div>
                      <h4 class="font-bold text-slate-800 text-base">Staj Günlüğü Markdown Dosyası (.md)</h4>
                      <p class="text-xs text-slate-400 mt-0.5">GitHub deponuzdaki commitler ve günlük defter kayıtlarınızla derlenmiş markdown çıktısı.</p>
                    </div>
                  </div>
                  <a href="{{ route('intern.download-journal') }}" class="w-full sm:w-auto px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl text-sm transition-all flex items-center justify-center gap-2 shadow-sm">
                    <i class="uil uil-arrow-down-tray"></i>
                    <span>İndir (.md)</span>
                  </a>
                </div>
                @endif

              </div>
            </div>
          </div>

          <!-- Panel 3: Staj Defteri -->
          <div id="journal-panel" class="tab-panel hidden space-y-6">
            <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50">
              
              <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 pb-4 border-b border-slate-100">
                <div>
                  <h3 class="font-bold text-slate-800 text-lg">Staj Defteri Modülü</h3>
                  <p class="text-xs text-slate-400 mt-0.5">Her staj günü için yaptığınız çalışmaları yazıp kaydedin. Dilerseniz GitHub commitlerini tek tıkla çekebilirsiniz.</p>
                </div>
                <div class="flex gap-2 w-full sm:w-auto">
                  <button type="button" onclick="openPrintModal()" class="w-full sm:w-auto px-4 py-2.5 bg-green-600 hover:bg-green-700 text-white font-bold rounded-xl text-xs transition-all flex items-center justify-center gap-2 shadow-md shadow-green-500/10">
                    <i class="uil uil-print text-sm"></i>
                    <span>Defteri Yazdır / İndir</span>
                  </button>
                </div>
              </div>

              <!-- GitHub Repository URL Configuration -->
              <div class="p-5 rounded-2xl border border-slate-100 bg-slate-50/50 mb-6">
                <form action="{{ route('intern.save-github') }}" method="POST" class="space-y-4">
                  @csrf
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label for="github_repo" class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2">GitHub Public Depo URL'si</label>
                      <input type="url" name="github_repo" id="github_repo" placeholder="https://github.com/kullaniciadi/depo-adi" value="{{ $intern->github_repo }}" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none text-sm font-semibold text-slate-700 bg-white transition-all" />
                    </div>
                    <div>
                      <label for="github_username" class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2">GitHub Kullanıcı Adınız (Opsiyonel)</label>
                      <input type="text" name="github_username" id="github_username" placeholder="GitHub kullanıcı adınız (örn: Emresatil)" value="{{ $intern->github_username }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none text-sm font-semibold text-slate-700 bg-white transition-all" />
                    </div>
                  </div>
                  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pt-2 border-t border-slate-100">
                    <span class="text-xs text-slate-400 leading-normal max-w-xl">
                      <i class="uil uil-info-circle text-blue-600 text-sm"></i> Deponuzun <strong>public</strong> olması gerekir. Birden fazla kişi aynı projede çalışıyorsa, kendi commitlerinizi süzmek için kullanıcı adınızı yazmanız önerilir.
                    </span>
                    <button type="submit" class="px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-sm transition-all shadow-md shadow-blue-500/10 flex-shrink-0 w-full sm:w-auto">
                      Bilgileri Kaydet
                    </button>
                  </div>
                </form>
              </div>

              @if(empty($intern->internship_start_date) || empty($intern->internship_total_days))
              <div class="p-6 rounded-2xl border border-amber-100 bg-amber-50 text-amber-800 text-sm font-medium text-center">
                  Staj başlangıç tarihi veya staj gün sayısı girilmemiş. Lütfen staj evraklarınızı yükleyip başlangıç tarihlerinizi tanımlayın.
              </div>
              @else
              <!-- Main Workspace Grid -->
              <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                  
                  <!-- Left: Days List Navigation -->
                  <div class="lg:col-span-4 space-y-2 max-h-[500px] overflow-y-auto pr-2 no-scrollbar">
                      @foreach($days as $idx => $d)
                          @php
                              $dayNum = $d['day_number'];
                              $dayDate = $d['date'];
                              $dayDateFormatted = $d['formatted_date'];
                              $hasSaved = isset($savedEntries[$dayNum]) && trim($savedEntries[$dayNum]->content) !== '';
                              $isApproved = isset($savedEntries[$dayNum]) && $savedEntries[$dayNum]->supervisor_approved;
                          @endphp
                          <button type="button" 
                                  onclick="selectNotebookDay({{ $idx }})" 
                                  id="btn-day-{{ $idx }}"
                                  data-day-num="{{ $dayNum }}"
                                  data-date="{{ $dayDate }}"
                                  data-formatted-date="{{ $dayDateFormatted }}"
                                  data-saved-content="{{ $savedEntries[$dayNum]->content ?? '' }}"
                                  data-approved="{{ $isApproved ? '1' : '0' }}"
                                  class="notebook-day-btn w-full flex items-center justify-between p-3 rounded-2xl border text-left transition-all @if($idx === 0) border-blue-200 bg-blue-50/50 @else border-slate-100 bg-white hover:bg-slate-50 @endif">
                              <div>
                                  <span class="block text-xs font-extrabold @if($idx === 0) text-blue-700 @else text-slate-800 @endif">{{ $dayNum }}. Gün</span>
                                  <span class="block text-[10px] text-slate-400 mt-0.5">{{ $dayDateFormatted }}</span>
                              </div>
                              <span id="badge-day-{{ $idx }}" class="inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase 
                                  @if($isApproved) bg-green-500 text-white border border-green-600
                                  @elseif($hasSaved) bg-amber-50 text-amber-700 border border-amber-200
                                  @else bg-slate-50 text-slate-400 border border-slate-200 @endif">
                                  @if($isApproved) ONAYLANDI
                                  @elseif($hasSaved) DOLU
                                  @else BOŞ @endif
                              </span>
                          </button>
                      @endforeach
                  </div>

                  <!-- Right: Workspace Editor -->
                  <div class="lg:col-span-8 space-y-4">
                      <div class="bg-white border border-slate-100 rounded-2xl p-5 shadow-sm">
                          <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
                              <div class="flex items-center">
                                  <span id="editor-day-title" class="text-sm font-extrabold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">1. Gün</span>
                                  <span id="editor-day-date" class="text-xs font-semibold text-slate-400 ml-2"></span>
                                  <span id="editor-day-status" class="ml-2"></span>
                              </div>
                              
                              <div class="flex items-center gap-2">
                                  @if($intern->github_repo)
                                  <button type="button" onclick="fillFromGithub()" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-900 text-white font-extrabold rounded-lg text-[10px] transition-all flex items-center gap-1.5 shadow-sm">
                                      <i class="uil uil-github text-xs"></i>
                                      <span>Git Commitlerini Çek</span>
                                  </button>
                                  @endif

                                  <button type="button" onclick="printActiveDay()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white font-extrabold rounded-lg text-[10px] transition-all flex items-center gap-1.5 shadow-sm">
                                      <i class="uil uil-print text-xs"></i>
                                      <span>Yazdır</span>
                                  </button>
                              </div>
                          </div>

                          <div class="space-y-4">
                              <div id="future-warning" class="hidden p-4 bg-amber-50/50 border border-amber-200 rounded-2xl text-xs text-amber-700 font-semibold leading-relaxed">
                                  <i class="uil uil-exclamation-triangle text-sm mr-1"></i> Bu staj günü henüz gerçekleşmediği için staj günlüğü yazılamaz veya düzenlenemez.
                              </div>

                              <div id="editor-wrapper">
                                  <label class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2">Günlük Çalışma Raporu</label>
                                  <div id="quill-editor-container" class="rounded-xl border border-slate-200 overflow-hidden">
                                      <div id="editor-content-quill" style="height: 250px;"></div>
                                  </div>
                              </div>

                              <div id="git-commits-fallback-container" class="hidden p-4 bg-slate-50 border border-slate-200/60 rounded-2xl text-xs space-y-3">
                                  <div class="flex justify-between items-center pb-2 border-b border-slate-200">
                                      <span class="font-extrabold text-slate-700 flex items-center gap-1.5">
                                          <i class="uil uil-info-circle text-blue-600 text-sm"></i>
                                          <span>Seçilen güne ait otomatik commit bulunamadı. Son 10 commit'iniz:</span>
                                      </span>
                                      <button type="button" onclick="hideFallbackCommits()" class="text-slate-400 hover:text-slate-600 font-extrabold">Kapat</button>
                                  </div>
                                  <div id="git-commits-fallback-list" class="space-y-2 max-h-[150px] overflow-y-auto pr-1 no-scrollbar">
                                      <!-- items dynamically populated -->
                                  </div>
                              </div>

                              <div class="flex justify-between items-center">
                                  <div id="save-status" class="text-xs font-semibold text-slate-400"></div>
                                  <button type="button" id="save-btn" onclick="saveActiveDay()" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-xs transition-all shadow-md shadow-blue-500/10">
                                      Deftere Kaydet
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>

              </div>
              @endif

            </div>
          </div>

          <!-- Panel 4: Blog Yazıları -->
          <div id="blogs-panel" class="tab-panel hidden space-y-6">
            <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50">
              
              <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pb-6 border-b border-slate-100">
                <div>
                  <h3 class="font-bold text-slate-800 text-lg flex items-center gap-2">
                    <i class="uil uil-newspaper text-blue-600"></i>
                    <span>Staj Blog Yazıları (Min. 3 Adet)</span>
                  </h3>
                  <p class="text-xs text-slate-400 mt-1">
                    Staj süresince en az 3 blog yazısı kaleme almalısınız. Onaylanan yazılar web sitemizin blog bölümünde yayınlanacaktır.
                  </p>
                </div>
                <button type="button" onclick="openBlogModal()" class="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-xs transition-all shadow-md shadow-blue-500/10 flex items-center gap-2">
                  <i class="uil uil-plus text-base"></i>
                  <span>Yeni Blog Yazısı Ekle</span>
                </button>
              </div>

              <!-- Progress Bar -->
              @php
                $userBlogs = ($blogs ?? collect())->sortByDesc('created_at');
                $publishedBlogs = $userBlogs->where('status', 'published');
                $publishedCount = $publishedBlogs->count();
                $progressPercent = min(100, round(($publishedCount / 3) * 100));
              @endphp
              <div class="mt-6 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl border border-blue-100">
                <div class="flex justify-between items-center mb-2">
                  <span class="text-xs font-extrabold text-blue-900">Blog Görev Tamamlama Oranı</span>
                  <span class="text-xs font-black text-blue-700">{{ $publishedCount }} / 3 Yayınlandı (%{{ $progressPercent }})</span>
                </div>
                <div class="w-full bg-blue-200/60 rounded-full h-2.5 overflow-hidden">
                  <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-500" style="width: {{ $progressPercent }}%"></div>
                </div>
              </div>

              <!-- 3 Mandatory Category Cards -->
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                @php
                  $expBlog = $userBlogs->where('intern_category', 'experience')->first();
                  $techBlog = $userBlogs->where('intern_category', 'technical_challenge')->first();
                  $prodBlog = $userBlogs->where('intern_category', 'product_showcase')->first();
                @endphp

                <!-- Category 1 -->
                <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col justify-between">
                  <div>
                    <div class="flex justify-between items-center mb-2">
                      <span class="text-[10px] uppercase font-extrabold tracking-wider text-slate-400">1. Konu</span>
                      @if($expBlog && $expBlog->status === 'published')
                        <span class="px-2 py-0.5 bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold rounded-lg">Yayınlandı ✓</span>
                      @elseif($expBlog && $expBlog->status === 'pending')
                        <span class="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 text-[10px] font-bold rounded-lg">Onay Bekliyor</span>
                      @elseif($expBlog && $expBlog->status === 'rejected')
                        <span class="px-2 py-0.5 bg-red-50 text-red-700 border border-red-200 text-[10px] font-bold rounded-lg">Revize İstendi</span>
                      @elseif($expBlog && $expBlog->status === 'draft')
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 text-[10px] font-bold rounded-lg">Taslak</span>
                      @else
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-400 border border-slate-200 text-[10px] font-bold rounded-lg">Bekliyor</span>
                      @endif
                    </div>
                    <h4 class="text-xs font-extrabold text-slate-800">Staj Tecrübesi & Adaptasyon</h4>
                    <p class="text-[11px] text-slate-400 mt-1">Staj süreci, şirket kültürü ve ilk izlenimlerinizi anlatan yazı.</p>
                  </div>
                </div>

                <!-- Category 2 -->
                <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col justify-between">
                  <div>
                    <div class="flex justify-between items-center mb-2">
                      <span class="text-[10px] uppercase font-extrabold tracking-wider text-slate-400">2. Konu</span>
                      @if($techBlog && $techBlog->status === 'published')
                        <span class="px-2 py-0.5 bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold rounded-lg">Yayınlandı ✓</span>
                      @elseif($techBlog && $techBlog->status === 'pending')
                        <span class="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 text-[10px] font-bold rounded-lg">Onay Bekliyor</span>
                      @elseif($techBlog && $techBlog->status === 'rejected')
                        <span class="px-2 py-0.5 bg-red-50 text-red-700 border border-red-200 text-[10px] font-bold rounded-lg">Revize İstendi</span>
                      @elseif($techBlog && $techBlog->status === 'draft')
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 text-[10px] font-bold rounded-lg">Taslak</span>
                      @else
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-400 border border-slate-200 text-[10px] font-bold rounded-lg">Bekliyor</span>
                      @endif
                    </div>
                    <h4 class="text-xs font-extrabold text-slate-800">Teknik Zorluklar & Çözümler</h4>
                    <p class="text-[11px] text-slate-400 mt-1">Gelişim sürecinde karşılaştığınız teknik engeller ve çözüm yöntemleri.</p>
                  </div>
                </div>

                <!-- Category 3 -->
                <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50 flex flex-col justify-between">
                  <div>
                    <div class="flex justify-between items-center mb-2">
                      <span class="text-[10px] uppercase font-extrabold tracking-wider text-slate-400">3. Konu</span>
                      @if($prodBlog && $prodBlog->status === 'published')
                        <span class="px-2 py-0.5 bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold rounded-lg">Yayınlandı ✓</span>
                      @elseif($prodBlog && $prodBlog->status === 'pending')
                        <span class="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 text-[10px] font-bold rounded-lg">Onay Bekliyor</span>
                      @elseif($prodBlog && $prodBlog->status === 'rejected')
                        <span class="px-2 py-0.5 bg-red-50 text-red-700 border border-red-200 text-[10px] font-bold rounded-lg">Revize İstendi</span>
                      @elseif($prodBlog && $prodBlog->status === 'draft')
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 text-[10px] font-bold rounded-lg">Taslak</span>
                      @else
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-400 border border-slate-200 text-[10px] font-bold rounded-lg">Bekliyor</span>
                      @endif
                    </div>
                    <h4 class="text-xs font-extrabold text-slate-800">Ürün / Proje Tanıtımı (Showcase)</h4>
                    <p class="text-[11px] text-slate-400 mt-1">Geliştirdiğiniz nihai ürünün amacı, mimarisi ve canlı demo anlatımı.</p>
                  </div>
                </div>
              </div>

              <!-- Blog List Table -->
              <div class="mt-8">
                <h4 class="text-sm font-extrabold text-slate-800 mb-4">Gönderilen Blog Yazılarınız</h4>

                @if($userBlogs->isEmpty())
                  <div class="text-center py-10 border-2 border-dashed border-slate-100 rounded-2xl">
                    <i class="uil uil-file-edit-alt text-4xl text-slate-300"></i>
                    <p class="text-xs text-slate-500 font-bold mt-2">Henüz bir blog yazısı eklemediniz.</p>
                    <button type="button" onclick="openBlogModal()" class="mt-3 text-xs font-extrabold text-blue-600 hover:text-blue-800">
                      + İlk Blog Yazısını Ekle
                    </button>
                  </div>
                @else
                  <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                      <thead>
                        <tr class="border-b border-slate-100 text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">
                          <th class="py-3 px-3">Görsel</th>
                          <th class="py-3 px-3">Başlık & Konu</th>
                          <th class="py-3 px-3">Durum</th>
                          <th class="py-3 px-3">Yönetici Notu</th>
                          <th class="py-3 px-3 text-right">İşlemler</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-slate-100 text-xs">
                        @foreach($userBlogs as $blogItem)
                          <tr>
                            <td class="py-3 px-3">
                              @if($blogItem->featured_image)
                                <img src="{{ asset('storage/' . $blogItem->featured_image) }}" class="w-12 h-12 object-cover rounded-xl border border-slate-100" />
                              @else
                                <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400">
                                  <i class="uil uil-image text-xl"></i>
                                </div>
                              @endif
                            </td>
                            <td class="py-3 px-3">
                              <span class="font-bold text-slate-800 block text-sm">{{ $blogItem->title }}</span>
                              <span class="text-[10px] font-bold text-slate-400 block mt-0.5">
                                @if($blogItem->intern_category === 'experience') 1. Staj Tecrübesi
                                @elseif($blogItem->intern_category === 'technical_challenge') 2. Teknik Zorluklar
                                @elseif($blogItem->intern_category === 'product_showcase') 3. Ürün Tanıtımı
                                @else {{ $blogItem->intern_category }} @endif
                              </span>
                            </td>
                            <td class="py-3 px-3">
                              @if($blogItem->status === 'published')
                                <span class="px-2.5 py-1 bg-green-50 text-green-700 border border-green-200 font-extrabold rounded-full text-[11px] inline-flex items-center gap-1">
                                  <i class="uil uil-check-circle text-sm"></i> Sitede Yayınlandı
                                </span>
                              @elseif($blogItem->status === 'pending')
                                <span class="px-2.5 py-1 bg-amber-50 text-amber-700 border border-amber-200 font-extrabold rounded-full text-[11px] inline-flex items-center gap-1">
                                  <i class="uil uil-clock text-sm"></i> Onay Bekliyor
                                </span>
                              @elseif($blogItem->status === 'rejected')
                                <span class="px-2.5 py-1 bg-red-50 text-red-700 border border-red-200 font-extrabold rounded-full text-[11px] inline-flex items-center gap-1">
                                  <i class="uil uil-exclamation-triangle text-sm"></i> Revize İstendi
                                </span>
                              @else
                                <span class="px-2.5 py-1 bg-slate-100 text-slate-600 border border-slate-200 font-extrabold rounded-full text-[11px] inline-flex items-center gap-1">
                                  <i class="uil uil-edit text-sm"></i> Taslak
                                </span>
                              @endif
                            </td>
                            <td class="py-3 px-3">
                              @if($blogItem->admin_feedback)
                                <div class="p-2 bg-red-50 border border-red-100 rounded-xl text-red-700 text-[11px] font-semibold max-w-xs">
                                  <strong>Geribildirim:</strong> {{ $blogItem->admin_feedback }}
                                </div>
                              @else
                                <span class="text-slate-300">-</span>
                              @endif
                            </td>
                            <td class="py-3 px-3 text-right">
                              <div class="flex items-center justify-end gap-2">
                                @if($blogItem->status === 'published')
                                  <a href="{{ route('blog.show', $blogItem->slug) }}" target="_blank" class="px-3 py-1.5 bg-green-50 text-green-700 hover:bg-green-100 font-bold rounded-lg text-xs transition-all flex items-center gap-1">
                                    <i class="uil uil-external-link-alt"></i> Sitede Gör
                                  </a>
                                @else
                                  <button type="button" onclick='editBlogItem({{ json_encode($blogItem) }})' class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 font-bold rounded-lg text-xs transition-all flex items-center gap-1">
                                    <i class="uil uil-pen"></i> Düzenle
                                  </button>
                                  <form action="{{ route('intern.blog.delete', $blogItem->id) }}" method="POST" onsubmit="return confirm('Bu blog yazısını silmek istediğinize emin misiniz?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="px-2.5 py-1.5 bg-slate-100 text-red-600 hover:bg-red-50 font-bold rounded-lg text-xs transition-all">
                                      <i class="uil uil-trash-alt"></i>
                                    </button>
                                  </form>
                                @endif
                              </div>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @endif
              </div>

            </div>
          </div>

          <!-- Panel 5: Sertifika & Akademik Transkript -->
          <div id="transcript-panel" class="tab-panel hidden space-y-6">
            <div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50">
              
              <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 pb-4 border-b border-slate-100">
                <div>
                  <h3 class="font-bold text-slate-800 text-lg flex items-center gap-2">
                    <i class="uil uil-award text-emerald-600 text-xl"></i>
                    <span>Staj Bitirme Sertifikası & Akademik Transkript</span>
                  </h3>
                  <p class="text-xs text-slate-400 mt-0.5">Trunçgil Teknoloji staj programı kapsamında elde ettiğiniz kazanımlar, teknik değerlendirme ve resmi transkriptiniz.</p>
                </div>
                @if($intern->certificate_code)
                <a href="{{ route('internship.verify', $intern->certificate_code) }}" target="_blank" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-xs rounded-xl transition-all shadow-md shadow-emerald-600/20 flex items-center justify-center gap-1.5 whitespace-nowrap">
                  <i class="uil uil-external-link-alt"></i>
                  <span>Doğrulama Sayfasını Aç</span>
                </a>
                @endif
              </div>

              <!-- Official Verification Status Header -->
              <div class="bg-gradient-to-r from-slate-900 to-indigo-950 text-white rounded-2xl p-6 mb-6 shadow-md relative overflow-hidden">
                <div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                  <div>
                    <div class="flex flex-wrap items-center gap-2 mb-2">
                      <span class="px-3 py-1 bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 text-[10px] font-extrabold uppercase rounded-full tracking-wider flex items-center gap-1">
                        <i class="uil uil-check-circle"></i> Onaylı Belge
                      </span>
                      @if($intern->notebook_supervisor_signed)
                      <span class="px-3 py-1 bg-blue-500/20 border border-blue-400/30 text-blue-300 text-[10px] font-extrabold uppercase rounded-full tracking-wider">
                        Sorumlu: {{ $intern->notebook_supervisor_name ?: 'Alperen Trunç' }}
                      </span>
                      @endif
                    </div>
                    <h4 class="text-lg font-extrabold text-white">{{ $intern->name }}</h4>
                    <p class="text-xs text-slate-300 mt-0.5">{{ \Carbon\Carbon::parse($intern->internship_start_date)->format('d.m.Y') }} - {{ \Carbon\Carbon::parse($intern->internship_end_date)->format('d.m.Y') }} ({{ $intern->internship_total_days }} İş Günü)</p>
                  </div>

                  <div class="flex flex-col items-start md:items-end">
                    <span class="text-[10px] text-slate-400 font-extrabold uppercase tracking-wider block">Güvenli Doğrulama Kodu</span>
                    <span class="text-sm font-mono font-extrabold text-emerald-400 bg-slate-800/90 px-3 py-1 rounded-lg border border-slate-700 mt-1">{{ $intern->certificate_code }}</span>
                  </div>
                </div>
              </div>

              <!-- Quick Export Buttons Bar -->
              <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100 flex flex-wrap gap-2.5 items-center justify-between mb-6">
                <div class="text-xs font-bold text-slate-600 flex items-center gap-1.5">
                  <i class="uil uil-print text-base text-blue-600"></i>
                  <span>Hızlı Belge ve Rapor Çıktıları:</span>
                </div>
                <div class="flex flex-wrap gap-2">
                  <a href="{{ route('intern.print-journal') }}?size=a4" target="_blank" class="px-3 py-1.5 bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 font-bold text-xs rounded-xl transition-all flex items-center gap-1">
                    <i class="uil uil-print"></i> A4 Defter
                  </a>
                  <a href="{{ route('intern.print-journal') }}?size=a5" target="_blank" class="px-3 py-1.5 bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 font-bold text-xs rounded-xl transition-all flex items-center gap-1">
                    <i class="uil uil-print"></i> A5 Defter
                  </a>
                  @if($intern->github_repo)
                  <a href="{{ route('intern.download-journal') }}" class="px-3 py-1.5 bg-purple-50 hover:bg-purple-100 text-purple-700 border border-purple-200 font-bold text-xs rounded-xl transition-all flex items-center gap-1">
                    <i class="uil uil-arrow-down-tray"></i> Markdown (.md)
                  </a>
                  @endif
                </div>
              </div>

              <!-- Rendered Transcript Markdown Content -->
              <div class="transcript-markdown-wrapper p-6 md:p-8 rounded-2xl bg-white border border-slate-200/80 shadow-inner">
                <div class="prose max-w-none text-slate-700 leading-relaxed">
                  {!! new \Illuminate\Support\HtmlString(\Illuminate\Support\Str::markdown($intern->transcript_markdown ?? '')) !!}
                </div>
              </div>

            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
</section>

<!-- Print Choice Modal -->
<div id="print-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300" id="print-modal-card">
    <div class="flex justify-between items-start mb-6">
      <div>
        <h3 class="text-lg font-bold text-slate-800">Staj Defteri Yazdır / İndir</h3>
        <p class="text-xs text-slate-400 mt-1">Lütfen yazdırmak istediğiniz staj defterinin sayfa boyutunu seçin.</p>
      </div>
      <button onclick="closePrintModal()" class="text-slate-400 hover:text-slate-600">
        <i class="uil uil-multiply text-xl"></i>
      </button>
    </div>
    
    <div class="grid grid-cols-2 gap-4 mb-6">
      <a href="{{ route('intern.print-journal') }}?size=a4" target="_blank" onclick="closePrintModal()" class="flex flex-col items-center justify-center p-5 rounded-2xl border border-slate-100 bg-slate-50/50 hover:border-blue-300 hover:bg-blue-50/20 transition-all group text-center">
        <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl mb-3 group-hover:bg-blue-600 group-hover:text-white transition-all">
          <i class="uil uil-file-alt"></i>
        </div>
        <span class="block text-sm font-extrabold text-slate-800">A4 Boyutu</span>
        <span class="block text-[10px] text-slate-400 mt-0.5">Dikey (210 x 297 mm)</span>
      </a>

      <a href="{{ route('intern.print-journal') }}?size=a5" target="_blank" onclick="closePrintModal()" class="flex flex-col items-center justify-center p-5 rounded-2xl border border-slate-100 bg-slate-50/50 hover:border-blue-300 hover:bg-blue-50/20 transition-all group text-center">
        <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl mb-3 group-hover:bg-blue-600 group-hover:text-white transition-all">
          <i class="uil uil-file"></i>
        </div>
        <span class="block text-sm font-extrabold text-slate-800">A5 Boyutu</span>
        <span class="block text-[10px] text-slate-400 mt-0.5">Dikey (148 x 210 mm)</span>
      </a>
    </div>

    <div class="p-4 bg-blue-50 border border-blue-100 rounded-2xl text-xs text-blue-700 font-semibold leading-relaxed">
      <i class="uil uil-info-circle text-sm mr-1"></i> Açılan önizleme sayfasında <strong>CTRL + P</strong> tuşlarına basarak "Hedef: PDF Olarak Kaydet" seçeneği ile staj defterinizi bilgisayarınıza indirebilirsiniz.
    </div>
  </div>
</div>

<!-- Author Selection Modal -->
<div id="author-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300" id="author-modal-card">
    <div class="flex justify-between items-start mb-4">
      <div>
        <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
          <i class="uil uil-users-alt text-blue-600"></i>
          <span>GitHub Yazar Seçimi</span>
        </h3>
        <p class="text-xs text-slate-400 mt-1">Bu günün commitlerinde birden fazla yazar tespit edildi. Hangisi sizsiniz?</p>
      </div>
      <button onclick="closeAuthorModal()" class="text-slate-400 hover:text-slate-600">
        <i class="uil uil-multiply text-xl"></i>
      </button>
    </div>
    
    <div id="author-list-container" class="space-y-2 mb-4 max-h-[220px] overflow-y-auto pr-1 no-scrollbar">
      <!-- Dynamically populated author options -->
    </div>
    
    <div class="flex items-center gap-2 mb-5 bg-slate-50 p-3 rounded-xl border border-slate-200/60">
      <input type="checkbox" id="save-selected-author-pref" class="rounded text-blue-600 focus:ring-blue-500 w-4 h-4" checked />
      <label for="save-selected-author-pref" class="text-xs text-slate-600 font-bold select-none cursor-pointer">
        Seçtiğim kullanıcı adını profilime kaydet ve varsayılan yap
      </label>
    </div>

    <div class="flex justify-end gap-2">
      <button type="button" onclick="closeAuthorModal()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold rounded-xl text-xs transition-all">İptal</button>
    </div>
  </div>
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>


  let quill = null;

  // Tab Switch Logic
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize Quill editor if container exists
    const editorElement = document.getElementById('editor-content-quill');
    if (editorElement) {
      quill = new Quill('#editor-content-quill', {
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['clean']                                         // remove formatting button
          ]
        }
      });
    }

    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabPanels = document.querySelectorAll('.tab-panel');

    tabButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Deactivate active tab
        tabButtons.forEach(btn => {
          btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
          btn.classList.add('bg-transparent', 'border-transparent', 'text-slate-600');
          btn.querySelector('.tab-icon').classList.remove('bg-blue-600', 'text-white');
          btn.querySelector('.tab-icon').classList.add('bg-slate-50', 'text-slate-500');
          btn.setAttribute('aria-selected', 'false');
        });

        // Hide active panels
        tabPanels.forEach(panel => {
          panel.classList.add('hidden');
        });

        // Activate clicked tab
        button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
        button.classList.remove('bg-transparent', 'border-transparent', 'text-slate-600');
        button.querySelector('.tab-icon').classList.add('bg-blue-600', 'text-white');
        button.querySelector('.tab-icon').classList.remove('bg-slate-50', 'text-slate-500');
        button.setAttribute('aria-selected', 'true');

        // Show targets panel
        const targetId = button.getAttribute('data-tab-target');
        const targetPanel = document.getElementById(targetId + '-panel');
        if (targetPanel) {
          targetPanel.classList.remove('hidden');
        }
      });
    });

    // Handle initial state of date logic
    calculateEndDateFrontend();
    
    // Select first day of the notebook workspace on load if exists
    if (document.getElementById('btn-day-0')) {
      selectNotebookDay(0);
    }
  });

  const githubRepoUrl = @json($intern->github_repo);
  let githubUsername = @json($intern->github_username);
  let activeDayIdx = 0;

  let activeCommitsToProcess = [];
  let activeCommitsDateVal = '';

  function openAuthorModal(uniqueAuthors) {
    const modal = document.getElementById('author-modal');
    const card = document.getElementById('author-modal-card');
    const container = document.getElementById('author-list-container');
    if (!modal || !card || !container) return;

    container.innerHTML = '';
    
    // 1. Add "Hepsi" (All commits) option
    const allBtn = document.createElement('button');
    allBtn.type = 'button';
    allBtn.className = "w-full p-3 rounded-xl border border-slate-200 hover:border-blue-400 hover:bg-blue-50/20 text-left transition-all font-extrabold text-xs text-slate-700 flex items-center justify-between";
    allBtn.innerHTML = `
      <span>Tüm Commitler (Filtreleme Yapma)</span>
      <i class="uil uil-angle-right text-base text-slate-400"></i>
    `;
    allBtn.addEventListener('click', () => {
      insertCommitsForAuthor(null);
    });
    container.appendChild(allBtn);

    // 2. Add each unique author option
    uniqueAuthors.forEach(author => {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = "w-full p-3 rounded-xl border border-slate-200 hover:border-blue-400 hover:bg-blue-50/20 text-left transition-all font-extrabold text-xs text-slate-700 flex items-center justify-between mt-2";
      btn.innerHTML = `
        <span>${author}</span>
        <i class="uil uil-angle-right text-base text-slate-400"></i>
      `;
      btn.addEventListener('click', () => {
        insertCommitsForAuthor(author);
      });
      container.appendChild(btn);
    });

    modal.classList.remove('hidden');
    setTimeout(() => {
      card.classList.remove('scale-95', 'opacity-0');
      card.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  function closeAuthorModal() {
    const modal = document.getElementById('author-modal');
    const card = document.getElementById('author-modal-card');
    if (!modal || !card) return;
    
    card.classList.remove('scale-100', 'opacity-100');
    card.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
      modal.classList.add('hidden');
    }, 300);
  }

  function insertCommitsForAuthor(author) {
    closeAuthorModal();
    
    const savePref = document.getElementById('save-selected-author-pref');
    if (author && savePref && savePref.checked) {
      saveGithubUsernamePreference(author);
    }

    let dayCommits = activeCommitsToProcess;
    if (author) {
      dayCommits = activeCommitsToProcess.filter(item => {
        const commitAuthorName = item.commit.author.name;
        const commitAuthorLogin = item.author ? item.author.login : null;
        return (commitAuthorLogin && commitAuthorLogin.toLowerCase() === author.toLowerCase()) ||
               (commitAuthorName && commitAuthorName.toLowerCase() === author.toLowerCase());
      });
    }

    renderCommitsToEditor(dayCommits);
  }

  function saveGithubUsernamePreference(username) {
    if (!githubRepoUrl) return;

    fetch("{{ route('intern.save-github') }}", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-TOKEN": "{{ csrf_token() }}"
      },
      body: JSON.stringify({
        github_repo: githubRepoUrl,
        github_username: username
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        githubUsername = username;
        const usernameInput = document.getElementById('github_username');
        if (usernameInput) {
          usernameInput.value = username;
        }
      }
    })
    .catch(err => {
      console.warn("Kullanıcı adı tercihi kaydedilemedi.", err);
    });
  }

  function renderCommitsToEditor(commitsList) {
    if (!quill) return;
    if (commitsList.length === 0) {
      alert("Bu yazar için seçilen güne ait commit bulunamadı.");
      return;
    }

    let commitHtml = "<ul>";
    const sorted = [...commitsList].reverse();
    sorted.forEach(c => {
      const msg = c.commit.message;
      const sha = c.sha.substring(0, 7);
      const authorDate = new Date(c.commit.author.date);
      const time = authorDate.toLocaleTimeString('tr-TR', { timeZone: 'Europe/Istanbul', hour: '2-digit', minute: '2-digit' });
      commitHtml += `<li><strong>[${time}]</strong> (<em>${sha}</em>) ${msg}</li>`;
    });
    commitHtml += "</ul>";

    const currentHtml = quill.root.innerHTML.trim();
    const headerHtml = "<p><strong>Git Commit Mesajları:</strong></p>";
    
    let newHtml = "";
    if (currentHtml !== "" && currentHtml !== "<p><br></p>") {
      newHtml = currentHtml + "<br><br>" + headerHtml + commitHtml;
    } else {
      newHtml = headerHtml + commitHtml;
    }

    quill.setContents([]);
    quill.clipboard.dangerouslyPasteHTML(newHtml);
  }

  function hideFallbackCommits() {
    const container = document.getElementById('git-commits-fallback-container');
    if (container) {
      container.classList.add('hidden');
    }
  }

  function formatDateToIstanbul(d) {
    try {
      const formatter = new Intl.DateTimeFormat('en-US', {
        timeZone: 'Europe/Istanbul',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
      const parts = formatter.formatToParts(d);
      const year = parts.find(p => p.type === 'year').value;
      const month = parts.find(p => p.type === 'month').value;
      const day = parts.find(p => p.type === 'day').value;
      return `${year}-${month}-${day}`;
    } catch (e) {
      return d.toISOString().split('T')[0];
    }
  }

  function updateEditorStatusBadge(isApproved, hasSaved) {
    const statusSpan = document.getElementById('editor-day-status');
    if (!statusSpan) return;
    
    if (isApproved) {
      statusSpan.textContent = 'ONAYLANDI';
      statusSpan.className = 'inline-flex px-2 py-0.5 rounded-full text-[10px] font-extrabold uppercase bg-green-500 text-white border border-green-600 ml-2';
    } else if (hasSaved) {
      statusSpan.textContent = 'ONAY BEKLİYOR';
      statusSpan.className = 'inline-flex px-2 py-0.5 rounded-full text-[10px] font-extrabold uppercase bg-amber-50 text-amber-700 border border-amber-200 ml-2';
    } else {
      statusSpan.textContent = '';
      statusSpan.className = 'hidden';
    }
  }

  function printActiveDay() {
    const btn = document.getElementById(`btn-day-${activeDayIdx}`);
    if (!btn) return;
    const dayNum = btn.getAttribute('data-day-num');
    window.open(`{{ route('intern.print-journal') }}?size=a4&day=${dayNum}`, '_blank');
  }

  function appendCommitToQuill(sha, time, msg) {
    if (!quill) return;
    const escapedMsg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    const commitHtml = `<li><strong>[${time}]</strong> (<em>${sha}</em>) ${escapedMsg}</li>`;
    
    const currentHtml = quill.root.innerHTML.trim();
    const hasHeader = currentHtml.includes("Git Commit Mesajları:");
    const headerHtml = hasHeader ? "" : "<p><strong>Git Commit Mesajları:</strong></p>";
    
    let newHtml = "";
    if (currentHtml !== "" && currentHtml !== "<p><br></p>") {
      newHtml = currentHtml + "<br><br>" + headerHtml + "<ul>" + commitHtml + "</ul>";
    } else {
      newHtml = headerHtml + "<ul>" + commitHtml + "</ul>";
    }
    
    quill.setContents([]);
    quill.clipboard.dangerouslyPasteHTML(newHtml);
  }

  function selectNotebookDay(idx) {
    const oldBtn = document.getElementById(`btn-day-${activeDayIdx}`);
    if (oldBtn) {
      oldBtn.classList.remove('border-blue-200', 'bg-blue-50/50');
      oldBtn.classList.add('border-slate-100', 'bg-white');
      const oldTitle = oldBtn.querySelector('span.text-xs');
      if (oldTitle) {
          oldTitle.classList.remove('text-blue-700');
          oldTitle.classList.add('text-slate-800');
      }
    }

    activeDayIdx = idx;
    const newBtn = document.getElementById(`btn-day-${idx}`);
    if (newBtn) {
      newBtn.classList.add('border-blue-200', 'bg-blue-50/50');
      newBtn.classList.remove('border-slate-100', 'bg-white');
      const newTitle = newBtn.querySelector('span.text-xs');
      if (newTitle) {
          newTitle.classList.add('text-blue-700');
          newTitle.classList.remove('text-slate-800');
      }

      const dayNum = newBtn.getAttribute('data-day-num');
      const dateVal = newBtn.getAttribute('data-date');
      const dateFormatted = newBtn.getAttribute('data-formatted-date');
      const savedContent = newBtn.getAttribute('data-saved-content');
      const isApproved = newBtn.getAttribute('data-approved') === '1';

      const editorDayTitle = document.getElementById('editor-day-title');
      if (editorDayTitle) editorDayTitle.textContent = `${dayNum}. Gün`;
      const editorDayDate = document.getElementById('editor-day-date');
      if (editorDayDate) editorDayDate.textContent = dateFormatted;
      
      if (quill) {
        quill.setContents([]);
        if (savedContent) {
            quill.clipboard.dangerouslyPasteHTML(savedContent);
        }
      }
      const saveStatus = document.getElementById('save-status');
      if (saveStatus) saveStatus.textContent = '';
      hideFallbackCommits();
      
      const hasSaved = savedContent && savedContent.trim() !== '' && savedContent !== '<p><br></p>';
      updateEditorStatusBadge(isApproved, hasSaved);

      // Future validation
      if (dateVal) {
        const dateParts = dateVal.split('-');
        const selectedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
        const today = new Date();
        today.setHours(0,0,0,0);
        
        const isFuture = selectedDate > today;
        const warningBlock = document.getElementById('future-warning');
        const saveBtn = document.getElementById('save-btn');
        const gitBtn = document.querySelector('button[onclick="fillFromGithub()"]');

        if (isFuture) {
            if (warningBlock) warningBlock.classList.remove('hidden');
            if (quill) quill.enable(false);
            if (saveBtn) {
              saveBtn.disabled = true;
              saveBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }
            if (gitBtn) {
                gitBtn.disabled = true;
                gitBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }
        } else {
            if (warningBlock) warningBlock.classList.add('hidden');
            if (quill) quill.enable(true);
            if (saveBtn) {
              saveBtn.disabled = false;
              saveBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
            if (gitBtn) {
                gitBtn.disabled = false;
                gitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
        }
      }
    }
  }

  function fillFromGithub() {
    const btn = document.getElementById(`btn-day-${activeDayIdx}`);
    if (!btn) return;

    const dateVal = btn.getAttribute('data-date');
    const formattedDate = btn.getAttribute('data-formatted-date');

    if (!githubRepoUrl) {
      alert("Lütfen önce GitHub depo URL'nizi kaydedin.");
      return;
    }

    let repoClean = githubRepoUrl.replace(/https?:\/\/(www\.)?github\.com\//i, '');
    repoClean = repoClean.replace(/\/$/, '');
    const parts = repoClean.split('/');
    if (parts.length < 2) {
      alert("Geçersiz GitHub URL'si.");
      return;
    }

    const owner = parts[0];
    const repo = parts[1].replace(/\.git$/i, '');
    let branch = '';
    
    // Parse branch if /tree/{branch} or /commits/{branch} is used
    if (parts.length >= 4 && (parts[2] === 'tree' || parts[2] === 'commits')) {
      branch = parts.slice(3).join('/');
    }

    const gitBtn = document.querySelector('button[onclick="fillFromGithub()"]');
    const originalContent = gitBtn.innerHTML;
    gitBtn.disabled = true;
    gitBtn.innerHTML = `<i class="uil uil-spinner text-xs animate-spin"></i> <span>Çekiliyor...</span>`;

    hideFallbackCommits();

    fetch(`https://api.github.com/repos/${owner}/${repo}/commits?per_page=100${branch ? `&sha=${branch}` : ''}`)
      .then(response => {
        if (!response.ok) {
          if (response.status === 404) {
            throw new Error("Depo bulunamadı veya herkese açık (public) değil.");
          } else if (response.status === 403) {
            throw new Error("GitHub API istek limitine ulaşıldı. Lütfen daha sonra tekrar deneyin.");
          } else {
            throw new Error(`GitHub API Hatası (Kod: ${response.status})`);
          }
        }
        return response.json();
      })
      .then(commits => {
        if (!Array.isArray(commits)) {
          throw new Error("Geçersiz API yanıtı.");
        }

        // Filter commits by the selected date
        const dayCommits = commits.filter(item => {
          const dateStr = item.commit.author.date;
          if (!dateStr) return false;
          const d = new Date(dateStr);
          const dateOnly = formatDateToIstanbul(d);
          return dateOnly === dateVal;
        });

        if (dayCommits.length === 0) {
          // No commits found for this date. Show fallback list of latest 10 commits.
          const fallbackContainer = document.getElementById('git-commits-fallback-container');
          const fallbackList = document.getElementById('git-commits-fallback-list');
          
          if (fallbackContainer && fallbackList) {
            fallbackList.innerHTML = '';
            
            const latestCommits = commits.slice(0, 10);
            if (latestCommits.length === 0) {
              fallbackList.innerHTML = `<p class="text-slate-400 italic">Depoda hiç commit bulunamadı.</p>`;
            } else {
              latestCommits.forEach(c => {
                const msg = c.commit.message;
                const sha = c.sha.substring(0, 7);
                const authorDate = new Date(c.commit.author.date);
                const time = authorDate.toLocaleTimeString('tr-TR', { timeZone: 'Europe/Istanbul', hour: '2-digit', minute: '2-digit' });
                const commitDateOnly = formatDateToIstanbul(authorDate);
                // format date to d.m.Y
                const [cy, cm, cd] = commitDateOnly.split('-');
                const formattedCommitDate = `${cd}.${cm}.${cy}`;

                const row = document.createElement('div');
                row.className = "flex items-center justify-between gap-3 p-2 hover:bg-slate-100 rounded-lg border border-slate-100 transition-colors";
                
                const infoDiv = document.createElement('div');
                infoDiv.className = "flex-grow min-w-0";
                
                const timeSpan = document.createElement('span');
                timeSpan.className = "font-bold text-slate-700 select-all";
                timeSpan.textContent = `[${formattedCommitDate} ${time}] `;
                
                const shaSpan = document.createElement('span');
                shaSpan.className = "text-slate-500 font-semibold select-all";
                shaSpan.textContent = `(${sha}) `;
                
                const msgSpan = document.createElement('span');
                msgSpan.className = "text-slate-600 truncate block sm:inline-block max-w-full font-medium ml-1";
                msgSpan.textContent = msg;
                
                infoDiv.appendChild(timeSpan);
                infoDiv.appendChild(shaSpan);
                infoDiv.appendChild(msgSpan);
                
                const addBtn = document.createElement('button');
                addBtn.type = 'button';
                addBtn.className = "px-2 py-1 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white font-extrabold rounded transition-all flex-shrink-0 text-[10px]";
                addBtn.textContent = "Ekle";
                addBtn.addEventListener('click', () => {
                  appendCommitToQuill(sha, `${formattedCommitDate} ${time}`, msg);
                });
                
                row.appendChild(infoDiv);
                row.appendChild(addBtn);
                fallbackList.appendChild(row);
              });
            }
            fallbackContainer.classList.remove('hidden');
            alert(`Bu staj gününe (${formattedDate}) ait otomatik GitHub commit'i bulunamadı. Son 10 commit'iniz aşağıda listelenmiştir, rapora eklemek istediklerinizi seçebilirsiniz.`);
          } else {
            alert(`Bu staj gününe (${formattedDate}) ait GitHub commit'i bulunamadı. Lütfen commit attığınızdan ve tarihin doğru olduğundan emin olun.`);
          }
          return;
        }

        // Store these commits in memory for processing
        activeCommitsToProcess = dayCommits;
        activeCommitsDateVal = dateVal;

        // Get unique authors
        const authorsSet = new Set();
        dayCommits.forEach(item => {
          const login = item.author ? item.author.login : null;
          const name = item.commit.author.name;
          if (login) authorsSet.add(login);
          if (name) authorsSet.add(name);
        });
        const uniqueAuthors = Array.from(authorsSet);

        // If there are multiple authors
        if (uniqueAuthors.length > 1) {
          // If we have a saved githubUsername that matches one of the unique authors
          const matchedAuthor = uniqueAuthors.find(a => githubUsername && a.toLowerCase() === githubUsername.toLowerCase());
          if (matchedAuthor) {
            // Automatically filter and insert without modal
            insertCommitsForAuthor(matchedAuthor);
          } else {
            // Show modal to choose
            openAuthorModal(uniqueAuthors);
          }
        } else {
          // Only 1 author, insert directly
          renderCommitsToEditor(dayCommits);
        }
      })
      .catch(err => {
        alert("Commitler çekilirken hata oluştu: " + err.message);
      })
      .finally(() => {
        gitBtn.disabled = false;
        gitBtn.innerHTML = originalContent;
      });
  }

  function saveActiveDay() {
    const btn = document.getElementById(`btn-day-${activeDayIdx}`);
    if (!btn || !quill) return;

    const dayNum = btn.getAttribute('data-day-num');
    const dateVal = btn.getAttribute('data-date');
    let contentVal = quill.root.innerHTML;
    if (contentVal === '<p><br></p>') {
        contentVal = '';
    }
    const statusText = document.getElementById('save-status');
    if (statusText) {
      statusText.textContent = "Kaydediliyor...";
      statusText.className = "text-xs font-semibold text-slate-400 animate-pulse";
    }

    fetch("{{ route('intern.save-journal') }}", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-TOKEN": "{{ csrf_token() }}"
      },
      body: JSON.stringify({
        day_number: dayNum,
        date: dateVal,
        content: contentVal
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        if (statusText) {
          statusText.textContent = "Başarıyla kaydedildi.";
          statusText.className = "text-xs font-semibold text-green-600";
        }

        btn.setAttribute('data-saved-content', contentVal);
        btn.setAttribute('data-approved', '0');

        const badge = document.getElementById(`badge-day-${activeDayIdx}`);
        const hasContent = contentVal.trim() !== '' && contentVal !== '<p><br></p>';
        if (badge) {
          if (hasContent) {
            badge.textContent = 'DOLU';
            badge.className = "inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase bg-amber-50 text-amber-700 border border-amber-200";
          } else {
            badge.textContent = 'BOŞ';
            badge.className = "inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase bg-slate-50 text-slate-400 border border-slate-200";
          }
        }
        
        updateEditorStatusBadge(false, hasContent);
      } else {
        if (statusText) {
          statusText.textContent = data.message || "Kaydedilemedi.";
          statusText.className = "text-xs font-semibold text-red-600";
        }
      }
    })
    .catch(err => {
      console.error(err);
      if (statusText) {
        statusText.textContent = "Bağlantı hatası oluştu.";
        statusText.className = "text-xs font-semibold text-red-600";
      }
    });
  }

  function openPrintModal() {
    const modal = document.getElementById('print-modal');
    const card = document.getElementById('print-modal-card');
    if (!modal || !card) return;
    modal.classList.remove('hidden');
    setTimeout(() => {
      card.classList.remove('scale-95', 'opacity-0');
      card.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  function closePrintModal() {
    const modal = document.getElementById('print-modal');
    const card = document.getElementById('print-modal-card');
    if (!modal || !card) return;
    card.classList.remove('scale-100', 'opacity-100');
    card.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
      modal.classList.add('hidden');
    }, 300);
  }

  function handleFileSelected(input) {
    const fileNameElement = document.getElementById('selected-file-name');
    const submitBtn = document.getElementById('submit-upload-btn');
    if (input.files && input.files.length > 0) {
      const file = input.files[0];
      const fileSizeMB = file.size / (1024 * 1024);
      if (fileSizeMB > 50) {
        alert('Dosya boyutu 50MB\'ı aşamaz.');
        input.value = '';
        if (fileNameElement) fileNameElement.textContent = '';
        if (submitBtn) {
          submitBtn.disabled = true;
          submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }
        return;
      }
      if (fileNameElement) fileNameElement.textContent = 'Seçilen dosya: ' + file.name + ' (' + fileSizeMB.toFixed(2) + ' MB)';
      if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
      }
    } else {
      if (fileNameElement) fileNameElement.textContent = '';
      if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
      }
    }
  }

  function isTurkeyHoliday(dateObj) {
    const yyyy = dateObj.getFullYear();
    const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
    const dd = String(dateObj.getDate()).padStart(2, '0');
    const ymd = `${yyyy}-${mm}-${dd}`;
    const md = `${mm}-${dd}`;

    const fixedHolidays = [
      '01-01', '04-23', '05-01', '05-19', '07-15', '08-30', '10-29'
    ];

    if (fixedHolidays.includes(md)) {
      return true;
    }

    const variableHolidays = [
      '2024-04-09', '2024-04-10', '2024-04-11', '2024-04-12',
      '2024-06-15', '2024-06-16', '2024-06-17', '2024-06-18', '2024-06-19',
      '2025-03-29', '2025-03-30', '2025-03-31', '2025-04-01',
      '2025-06-05', '2025-06-06', '2025-06-07', '2025-06-08', '2025-06-09',
      '2026-03-19', '2026-03-20', '2026-03-21', '2026-03-22',
      '2026-05-26', '2026-05-27', '2026-05-28', '2026-05-29', '2026-05-30',
      '2027-03-08', '2027-03-09', '2027-03-10', '2027-03-11',
      '2027-05-15', '2027-05-16', '2027-05-17', '2027-05-18', '2027-05-19',
      '2028-02-26', '2028-02-27', '2028-02-28', '2028-02-29',
      '2028-05-04', '2028-05-05', '2028-05-06', '2028-05-07', '2028-05-08',
      '2029-02-14', '2029-02-15', '2029-02-16', '2029-02-17',
      '2029-04-23', '2029-04-24', '2029-04-25', '2029-04-26', '2029-04-27',
      '2030-02-03', '2030-02-04', '2030-02-05', '2030-02-06',
      '2030-04-12', '2030-04-13', '2030-04-14', '2030-04-15', '2030-04-16'
    ];

    return variableHolidays.includes(ymd);
  }

  function calculateEndDateFrontend() {
    const startDateEl = document.getElementById('internship_start_date');
    const totalDaysEl = document.getElementById('internship_total_days');
    const endDateInput = document.getElementById('internship_end_date');
    
    if (!startDateEl || !totalDaysEl || !endDateInput) return;
    
    const startDateVal = startDateEl.value;
    const totalDaysVal = totalDaysEl.value;
    
    if (!startDateVal || !totalDaysVal || totalDaysVal <= 0) {
      return;
    }
    
    let date = new Date(startDateVal);
    let daysToAdd = parseInt(totalDaysVal);
    let count = 0;
    let endDate = new Date(startDateVal);
    
    while (count < daysToAdd) {
      const dayOfWeek = date.getDay();
      if (dayOfWeek === 6 || dayOfWeek === 0 || isTurkeyHoliday(date)) { // 6 = Saturday, 0 = Sunday
        date.setDate(date.getDate() + 1);
        continue;
      }
      endDate = new Date(date);
      date.setDate(date.getDate() + 1);
      count++;
    }
    
    // Format to YYYY-MM-DD
    const yyyy = endDate.getFullYear();
    const mm = String(endDate.getMonth() + 1).padStart(2, '0');
    const dd = String(endDate.getDate()).padStart(2, '0');
    endDateInput.value = `${yyyy}-${mm}-${dd}`;
  }

  function copyToClipboard(elementId, btn) {
    const text = document.getElementById(elementId).textContent;
    navigator.clipboard.writeText(text).then(() => {
      const icon = btn.querySelector('i');
      const originalClass = icon.className;
      icon.className = 'uil uil-check text-green-500';
      setTimeout(() => {
        icon.className = originalClass;
      }, 2000);
    });
  }
  let blogQuill = null;

  document.addEventListener('DOMContentLoaded', function () {
    if (document.getElementById('blog-quill-editor')) {
      blogQuill = new Quill('#blog-quill-editor', {
        theme: 'snow',
        placeholder: 'Blog yazınızı buraya detaylı bir şekilde yazın...',
        modules: {
          toolbar: [
            [{ 'header': [1, 2, 3, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['link', 'clean']
          ]
        }
      });
    }
  });

  function updateCharCounter(inputId, counterId, maxLen) {
    const input = document.getElementById(inputId);
    const counter = document.getElementById(counterId);
    if (!input || !counter) return;
    const len = input.value.length;
    counter.textContent = `${len} / ${maxLen}`;
    if (len > maxLen) {
      counter.className = 'text-[11px] font-extrabold text-red-600';
    } else if (len >= maxLen * 0.85) {
      counter.className = 'text-[11px] font-extrabold text-amber-600';
    } else {
      counter.className = 'text-[11px] font-extrabold text-slate-400';
    }
  }

  function openBlogModal() {
    document.getElementById('modal_blog_id').value = '';
    document.getElementById('modal_blog_title').value = '';
    document.getElementById('modal_intern_category').value = 'experience';
    document.getElementById('modal_blog_excerpt').value = '';
    document.getElementById('modal_meta_title').value = '';
    document.getElementById('modal_meta_description').value = '';
    updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60);
    updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160);
    if (blogQuill) blogQuill.setContents([]);
    document.getElementById('blog-modal-title').querySelector('span').textContent = 'Yeni Blog Yazısı Ekle';

    const modal = document.getElementById('blog-modal');
    const card = document.getElementById('blog-modal-card');
    modal.classList.remove('hidden');
    setTimeout(() => {
      card.classList.remove('scale-95', 'opacity-0');
      card.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  function editBlogItem(blogItem) {
    document.getElementById('modal_blog_id').value = blogItem.id;
    document.getElementById('modal_blog_title').value = blogItem.title;
    document.getElementById('modal_intern_category').value = blogItem.intern_category || 'experience';
    document.getElementById('modal_blog_excerpt').value = blogItem.excerpt || '';
    document.getElementById('modal_meta_title').value = blogItem.meta_title || '';
    document.getElementById('modal_meta_description').value = blogItem.meta_description || '';
    updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60);
    updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160);
    if (blogQuill && blogItem.content) {
      blogQuill.setContents([]);
      blogQuill.clipboard.dangerouslyPasteHTML(blogItem.content);
    }
    document.getElementById('blog-modal-title').querySelector('span').textContent = 'Blog Yazısını Düzenle';

    const modal = document.getElementById('blog-modal');
    const card = document.getElementById('blog-modal-card');
    modal.classList.remove('hidden');
    setTimeout(() => {
      card.classList.remove('scale-95', 'opacity-0');
      card.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  function closeBlogModal() {
    const modal = document.getElementById('blog-modal');
    const card = document.getElementById('blog-modal-card');
    card.classList.remove('scale-100', 'opacity-100');
    card.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
      modal.classList.add('hidden');
    }, 300);
  }

  function submitBlogForm(actionType) {
    const title = document.getElementById('modal_blog_title').value.trim();
    if (!title) {
      alert('Lütfen blog başlığını giriniz.');
      return;
    }

    const htmlContent = blogQuill ? blogQuill.root.innerHTML.trim() : '';
    if (!htmlContent || htmlContent === '<p><br></p>') {
      alert('Lütfen blog içeriğini giriniz.');
      return;
    }

    document.getElementById('modal_action_type').value = actionType;
    document.getElementById('modal_blog_content').value = htmlContent;
    document.getElementById('blog-form').submit();
  }
</script>
<style>
  .shadow-xl {
    box-shadow: 0 1rem 3rem rgba(30, 41, 59, 0.04) !important;
  }
  .tab-btn {
    transition: all 0.2s ease-in-out;
  }
  .tab-btn:hover:not(.active) {
    background-color: #f8fafc;
  }
  .tab-btn.active {
    background-color: #eff6ff;
    border-color: #dbeafe;
    color: #1e40af !important;
  }
  .tab-btn.active span.text-slate-800 {
    color: #1e40af !important;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .transcript-markdown-wrapper table {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
  }
  .transcript-markdown-wrapper th {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    text-align: left;
  }
  .transcript-markdown-wrapper td {
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
  }
  .transcript-markdown-wrapper h3 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
  }
  .transcript-markdown-wrapper h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }
  .transcript-markdown-wrapper blockquote {
    border-left: 4px solid #f97316;
    padding-left: 1rem;
    font-style: italic;
    color: #475569;
    background: #fff7ed;
    padding: 12px;
    border-radius: 0 12px 12px 0;
    margin: 1rem 0;
  }

  /* Prevent theme red text color on link buttons hover */
  a.btn-doc-emerald, .btn-doc-emerald {
    color: #ffffff !important;
  }
  a.btn-doc-emerald:hover, a.btn-doc-emerald:focus, .btn-doc-emerald:hover {
    color: #ffffff !important;
    background-color: #047857 !important;
    text-decoration: none !important;
  }
  a.btn-doc-blue, .btn-doc-blue {
    color: #1d4ed8 !important;
  }
  a.btn-doc-blue:hover, a.btn-doc-blue:focus, .btn-doc-blue:hover {
    color: #1e40af !important;
    background-color: #dbeafe !important;
    text-decoration: none !important;
  }
  a.btn-doc-slate, .btn-doc-slate {
    color: #475569 !important;
  }
  a.btn-doc-slate:hover, a.btn-doc-slate:focus, .btn-doc-slate:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
    text-decoration: none !important;
  }
  a.btn-doc-purple, .btn-doc-purple {
    color: #ffffff !important;
  }
  a.btn-doc-purple:hover, a.btn-doc-purple:focus, .btn-doc-purple:hover {
    color: #ffffff !important;
    background-color: #7e22ce !important;
    text-decoration: none !important;
  }
</style>
@endpush

<!-- Blog Creation/Edit Modal -->
<div id="blog-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-white rounded-3xl p-6 md:p-8 max-w-3xl w-full shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300 max-h-[90vh] overflow-y-auto" id="blog-modal-card">
    <div class="flex justify-between items-start mb-6">
      <div>
        <h3 class="text-xl font-extrabold text-slate-800 flex items-center gap-2" id="blog-modal-title">
          <i class="uil uil-pen text-blue-600"></i>
          <span>Yeni Blog Yazısı Ekle</span>
        </h3>
        <p class="text-xs text-slate-400 mt-1">Yazınız yöneticiniz tarafından onaylandıktan sonra web sitesinde yayınlanacaktır.</p>
      </div>
      <button type="button" onclick="closeBlogModal()" class="text-slate-400 hover:text-slate-600">
        <i class="uil uil-multiply text-2xl"></i>
      </button>
    </div>

    <form id="blog-form" action="{{ route('intern.blog.save') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="blog_id" id="modal_blog_id" value="" />
      <input type="hidden" name="action_type" id="modal_action_type" value="submit" />
      <input type="hidden" name="content" id="modal_blog_content" value="" />

      <div class="space-y-5">
        <div>
          <label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Blog Başlığı *</label>
          <input type="text" name="title" id="modal_blog_title" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-sm font-bold text-slate-800" placeholder="Örn: Uzaktan Staj Deneyimim ve Karşılaştığım Zorluklar" />
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Staj Konu Kategorisi *</label>
            <select name="intern_category" id="modal_intern_category" required class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-sm font-bold text-slate-800">
              <option value="experience">1. Staj Tecrübesi & Adaptasyon</option>
              <option value="technical_challenge">2. Teknik Zorluklar & Çözümler</option>
              <option value="product_showcase">3. Ürün / Proje Tanıtımı (Showcase)</option>
            </select>
          </div>

          <div>
            <label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Kapak Görseli</label>
            <input type="file" name="featured_image" id="modal_featured_image" accept="image/*" class="w-full text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
          </div>
        </div>

        <div>
          <label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Kısa Özet (Excerpt)</label>
          <textarea name="excerpt" id="modal_blog_excerpt" rows="2" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-700" placeholder="Yazınızın liste sayfalarında görünecek kısa özeti..."></textarea>
        </div>

        <!-- SEO Meta Title & Meta Description Fields with Character Counter -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-slate-50/80 rounded-2xl border border-slate-100">
          <div>
            <div class="flex justify-between items-center mb-1.5">
              <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wider">SEO Meta Başlık</label>
              <span id="modal_meta_title_counter" class="text-[11px] font-extrabold text-slate-400">0 / 60</span>
            </div>
            <input type="text" name="meta_title" id="modal_meta_title" maxlength="60" oninput="updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60)" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-800 bg-white" placeholder="Max. 60 karakter" />
            <p class="text-[10px] text-slate-400 mt-1 font-semibold">Boş bırakılırsa blog başlığı kullanılır.</p>
          </div>

          <div>
            <div class="flex justify-between items-center mb-1.5">
              <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wider">SEO Meta Açıklama</label>
              <span id="modal_meta_description_counter" class="text-[11px] font-extrabold text-slate-400">0 / 160</span>
            </div>
            <textarea name="meta_description" id="modal_meta_description" rows="2" maxlength="160" oninput="updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160)" class="w-full px-3.5 py-2 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-700 bg-white" placeholder="Max. 160 karakter"></textarea>
            <p class="text-[10px] text-slate-400 mt-1 font-semibold">Boş bırakılırsa kısa özet kullanılır.</p>
          </div>
        </div>

        <div>
          <label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Blog İçeriği *</label>
          <div id="blog-quill-editor-container" class="rounded-xl border border-slate-200 overflow-hidden">
            <div id="blog-quill-editor" style="height: 250px;"></div>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row justify-end gap-3 mt-8 pt-4 border-t border-slate-100">
        <button type="button" onclick="submitBlogForm('draft')" class="px-5 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-extrabold text-xs transition-all">
          Taslak Olarak Kaydet
        </button>
        <button type="button" onclick="submitBlogForm('submit')" class="px-6 py-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-xs transition-all shadow-md shadow-blue-500/10 flex items-center justify-center gap-2">
          <i class="uil uil-arrow-right text-base"></i>
          <span>Onaya Gönder</span>
        </button>
      </div>
    </form>
  </div>
</div>

@include('front.career.partials.guide_modal')
@endsection