citrus/resources/views/front/career/partials/guide_modal.blade.php

<!-- Stajyer Rehberi Modal -->
<div id="guideModal" class="fixed inset-0 z-[9999] hidden flex items-center justify-center p-4">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-md transition-opacity duration-300" onclick="toggleGuideModal(false)"></div>
  
  <!-- Modal Content Card -->
  <div class="relative bg-white rounded-3xl w-full max-w-2xl max-h-[85vh] overflow-y-auto shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300 flex flex-col" id="guideModalCard">
    
    <!-- Modal Header -->
    <div class="sticky top-0 bg-white z-10 px-6 py-5 border-b border-slate-100 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-red-50 text-[#e31e24] flex items-center justify-center text-xl">
          <i class="uil uil-book-open"></i>
        </div>
        <div>
          <h3 class="font-bold text-slate-800 text-lg text-white">Stajyer Çalışma & Git Workflow Rehberi</h3>
          <p class="text-xs text-slate-400 font-semibold mt-0.5">Başarılı bir staj süreci için uymanız gereken kurallar</p>
        </div>
      </div>
      <button onclick="toggleGuideModal(false)" class="w-8 h-8 rounded-lg bg-slate-50 hover:bg-slate-100 text-slate-400 hover:text-slate-600 flex items-center justify-center transition-colors">
        <i class="uil uil-times text-xl"></i>
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 md:p-8 space-y-6">
      
      <!-- Bullet 1: GitHub Public Repo -->
      <div class="flex gap-4 items-start">
        <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
          1
        </div>
        <div>
          <h4 class="font-extrabold text-slate-800 text-sm">GitHub Public Repo Oluşturma</h4>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">
            Staj süresince geliştireceğiniz projeler için GitHub üzerinde <strong>public (herkese açık)</strong> bir repository oluşturmanız ve bu repo bağlantısını stajyer panelinize kaydetmeniz gerekmektedir.
          </p>
        </div>
      </div>

      <!-- Bullet 2: Implementation Plan -->
      <div class="flex gap-4 items-start">
        <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
          2
        </div>
        <div>
          <h4 class="font-extrabold text-slate-800 text-sm">İlk Adım: Implementation Plan</h4>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">
            Deponuzu oluşturduktan sonra ilk commit olarak ana dizinde <code>implementation_plan.md</code> adında bir dosya hazırlamalısınız. Bu plan, projenizin mimarisini, hedeflerinizi ve yapacağınız işlerin genel haritasını içermelidir.
          </p>
        </div>
      </div>

      <!-- Bullet 3: Daily Commits & Intern Journal -->
      <div class="flex gap-4 items-start">
        <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
          3
        </div>
        <div>
          <h4 class="font-extrabold text-slate-800 text-sm">Günlük Commit Zorunluluğu (Staj Defteri)</h4>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">
            Projeyi geliştirirken yaptığınız günlük commitler otomatik olarak staj günlüğünüze işlenir ve staj defterinizin içeriğini oluşturur. <strong>Eğer o gün commit gönderilmemişse, o gün çalışılmamış sayılacaktır.</strong>
          </p>
        </div>
      </div>

      <!-- Bullet 4: Daily Standup Meetings -->
      <div class="flex gap-4 items-start">
        <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
          4
        </div>
        <div>
          <h4 class="font-extrabold text-slate-800 text-sm">Daily Standup Toplantıları</h4>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">
            Her iş günü düzenli olarak daily standup (günlük durum değerlendirme) toplantısı yapılacaktır. Toplantılarda dünün özeti, bugünün planları ve karşılaşılan engeller paylaşılır. <strong>Tüm stajyerlerin katılımı zorunludur.</strong>
          </p>
        </div>
      </div>

      <!-- Bullet 5: Git Workflow & Commit Culture -->
      <div class="flex gap-4 items-start">
        <div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
          5
        </div>
        <div>
          <h4 class="font-extrabold text-slate-800 text-sm">Git Workflow & Temiz Kod Kültürü</h4>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">
            Anlamlı commit mesajları yazmaya özen gösterin (örn. <code>feat: add login validation</code>). Kodlarınızı mantıksal parçalara ayırarak commit atın ve Git versiyon kontrol standartlarına uyun.
          </p>
        </div>
      </div>

    </div>

    <!-- Modal Footer -->
    <div class="sticky bottom-0 bg-slate-50 z-10 px-6 py-4 border-t border-slate-100/50 flex items-center justify-end gap-3 rounded-b-3xl">
      <button onclick="toggleGuideModal(false)" class="px-5 py-2.5 bg-slate-850 hover:bg-slate-900 text-white font-extrabold rounded-xl text-xs transition-colors shadow-md shadow-slate-800/10">
        Anladım, Kapat
      </button>
    </div>

  </div>
</div>

<script>
  function toggleGuideModal(show) {
    const modal = document.getElementById('guideModal');
    const card = document.getElementById('guideModalCard');
    if (!modal || !card) return;
    
    if (show) {
      modal.classList.remove('hidden');
      setTimeout(() => {
        card.classList.remove('scale-95', 'opacity-0');
        card.classList.add('scale-100', 'opacity-100');
      }, 10);
    } else {
      card.classList.remove('scale-100', 'opacity-100');
      card.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        modal.classList.add('hidden');
      }, 300);
    }
  }

  // Handle ESC key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      toggleGuideModal(false);
    }
  });
</script>