From 13f8f09524fbb0e19ea8b5c1b4e638c38c77f165 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Wed, 1 Jul 2026 17:46:57 +0300
Subject: [PATCH] refactor: move tab logic and implement Quill editor and
 GitHub commit integration in scratch_test.js

---
 .../front/career/intern_dashboard.blade.php   |  35 --
 scratch_test.js                               | 383 ++++++++++++++++++
 2 files changed, 383 insertions(+), 35 deletions(-)
 create mode 100644 scratch_test.js

diff --git a/resources/views/front/career/intern_dashboard.blade.php b/resources/views/front/career/intern_dashboard.blade.php
index dc57a8a..2ddef13 100644
--- a/resources/views/front/career/intern_dashboard.blade.php
+++ b/resources/views/front/career/intern_dashboard.blade.php
@@ -799,42 +799,7 @@
 <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
-  // Tab Switch Logic
-  document.addEventListener('DOMContentLoaded', function() {
-    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');
-        }
-      });
-    });
 
   let quill;
 
diff --git a/scratch_test.js b/scratch_test.js
new file mode 100644
index 0000000..576f3fc
--- /dev/null
+++ b/scratch_test.js
@@ -0,0 +1,383 @@
+
+  // Tab Switch Logic
+  document.addEventListener('DOMContentLoaded', function() {
+    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');
+        }
+      });
+    });
+
+  let quill;
+
+  // Tab Switch Logic
+  document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Quill editor
+    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();
+    
+    // Fetch Github commits in memory if repo is set
+    fetchAllCommitsInMemory();
+    
+    // Select first day of the notebook workspace on load
+    selectNotebookDay(0);
+  });
+
+  const githubRepoUrl = "dummy";
+  let allGithubCommits = {};
+  let activeDayIdx = 0;
+
+  function fetchAllCommitsInMemory() {
+    if (!githubRepoUrl) return;
+
+    let repoClean = githubRepoUrl.replace(/https?:\/\/(www\.)?github\.com\//i, '');
+    repoClean = repoClean.replace(/\/$/, '');
+    const parts = repoClean.split('/');
+    if (parts.length < 2) return;
+
+    const owner = parts[0];
+    const repo = parts[1].replace(/\.git$/i, '');
+
+    fetch(`https://api.github.com/repos/${owner}/${repo}/commits?per_page=100`)
+      .then(response => {
+        if (!response.ok) throw new Error('API Error');
+        return response.json();
+      })
+      .then(commits => {
+        if (!Array.isArray(commits)) return;
+        commits.forEach(item => {
+          const dateStr = item.commit.author.date;
+          if (dateStr) {
+            const dateOnly = dateStr.substring(0, 10);
+            if (!allGithubCommits[dateOnly]) {
+              allGithubCommits[dateOnly] = [];
+            }
+            allGithubCommits[dateOnly].push(item);
+          }
+        });
+      })
+      .catch(err => {
+        console.warn('Commits could not be pre-loaded in memory.', err);
+      });
+  }
+
+  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');
+
+      document.getElementById('editor-day-title').textContent = `${dayNum}. Gün`;
+      document.getElementById('editor-day-date').textContent = dateFormatted;
+      
+      quill.root.innerHTML = savedContent || '';
+      document.getElementById('save-status').textContent = '';
+
+      // Future validation
+      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) {
+          warningBlock.classList.remove('hidden');
+          quill.enable(false);
+          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 {
+          warningBlock.classList.add('hidden');
+          quill.enable(true);
+          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 dayCommits = allGithubCommits[dateVal] || [];
+
+    if (dayCommits.length === 0) {
+      alert("Bu staj gününe ait GitHub commit'i bulunamadı. Lütfen commit attığınızdan ve tarihin doğru olduğundan emin olun.");
+      return;
+    }
+
+    let commitHtml = "<ul>";
+    const sorted = [...dayCommits].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', { hour: '2-digit', minute: '2-digit' });
+      commitHtml += `<li><strong>[${time}]</strong> (<em>${sha}</em>) ${msg}</li>`;
+    });
+    commitHtml += "</ul>";
+
+    const currentHtml = quill.root.innerHTML.trim();
+    if (currentHtml !== "" && currentHtml !== "<p><br></p>") {
+      if (confirm("Mevcut rapor içeriğinizin sonuna bu günün commitlerini eklemek ister misiniz? (Hayır derseniz mevcut içerik silinip commitler yazılır.)")) {
+        quill.root.innerHTML = currentHtml + "<br><br>" + commitHtml;
+      } else {
+        quill.root.innerHTML = commitHtml;
+      }
+    } else {
+      quill.root.innerHTML = commitHtml;
+    }
+  }
+
+  function saveActiveDay() {
+    const btn = document.getElementById(`btn-day-${activeDayIdx}`);
+    if (!btn) 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');
+
+    statusText.textContent = "Kaydediliyor...";
+    statusText.className = "text-xs font-semibold text-slate-400 animate-pulse";
+
+    fetch(""dummy"", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-TOKEN": ""dummy""
+      },
+      body: JSON.stringify({
+        day_number: dayNum,
+        date: dateVal,
+        content: contentVal
+      })
+    })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        statusText.textContent = "Başarıyla kaydedildi.";
+        statusText.className = "text-xs font-semibold text-green-600";
+
+        btn.setAttribute('data-saved-content', contentVal);
+
+        const badge = document.getElementById(`badge-day-${activeDayIdx}`);
+        if (badge) {
+          if (contentVal.trim() !== '') {
+            badge.textContent = 'DOLU';
+            badge.className = "inline-flex px-2 py-0.5 rounded-lg text-[9px] font-extrabold uppercase bg-green-50 text-green-700 border border-green-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";
+          }
+        }
+      } else {
+        statusText.textContent = data.message || "Kaydedilemedi.";
+        statusText.className = "text-xs font-semibold text-red-600";
+      }
+    })
+    .catch(err => {
+      console.error(err);
+      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');
+    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');
+    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 = '';
+        fileNameElement.textContent = '';
+        submitBtn.disabled = true;
+        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
+        return;
+      }
+      fileNameElement.textContent = 'Seçilen dosya: ' + file.name + ' (' + fileSizeMB.toFixed(2) + ' MB)';
+      submitBtn.disabled = false;
+      submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+    } else {
+      fileNameElement.textContent = '';
+      submitBtn.disabled = true;
+      submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
+    }
+  }
+
+  function calculateEndDateFrontend() {
+    const startDateVal = document.getElementById('internship_start_date').value;
+    const totalDaysVal = document.getElementById('internship_total_days').value;
+    const endDateInput = document.getElementById('internship_end_date');
+    
+    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) { // 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);
+    });
+  }