
<?php $__env->startSection('content'); ?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

<style>
:root {
  --teal-primary: #0d9488;
  --teal-dark:    #0f766e;
  --teal-glow:    rgba(13,148,136,.25);
  --bg:           #edf9f8;
  --card-bg:      #ffffff;
  --text-main:    #0f2a2a;
  --text-muted:   #5f8080;
}

body { background: var(--bg); }

.qr-wrapper {
  max-width: 680px;
  margin: 2.5rem auto;
  padding: 0 1rem 4rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-main);
}

/* ── Hero ── */
.qr-hero {
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #020617 100%);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 3.5rem;
  overflow: hidden;
  margin-bottom: -1.5rem;
  animation: fadeUp .5s ease both;
}
.qr-hero::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -120px; right: -80px;
  pointer-events: none;
}
.qr-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.07);
  bottom: -60px; left: 40px;
  pointer-events: none;
}
.qr-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 1rem;
}
.qr-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  position: relative;
  margin: 0;
}
.qr-hero-sub {
  font-size: .83rem;
  color: rgba(255,255,255,.55);
  margin-top: .5rem;
  position: relative;
  line-height: 1.55;
}

/* ── Card ── */
.qr-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: 0 4px 40px rgba(0,0,0,.07);
  position: relative;
  z-index: 1;
  animation: fadeUp .5s .1s ease both;
}

/* ── Back Link ── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .82rem;
  text-decoration: none;
  padding: .45rem .8rem;
  border-radius: 10px;
  transition: background .2s, color .2s;
  margin-bottom: 1.5rem;
}
.btn-back:hover { background: #f0fafa; color: var(--teal-dark); }

/* ── Info Pills (deadline / available) ── */
.info-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; }
.info-pill {
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px; padding: .6rem 1rem;
  font-size: .8rem; font-weight: 500;
}
.info-pill.available { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.info-pill.deadline  { background:#fff1f2; color:#be123c; border:1px solid #fecdd3; }
.info-pill.locked    { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.info-pill .dp-label { font-size:.68rem; opacity:.7; display:block; margin-bottom:1px; }
.info-pill strong    { display:block; font-weight:600; }

/* ── Lampiran Guru ── */
.attachment-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 12px;
}
.attachment-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #0369a1;
}
.attachment-label { font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }
.attachment-link  { font-size:.84rem; font-weight:600; color:#0d9488; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.attachment-link:hover { text-decoration:underline; }

/* ── Flash Messages ── */
.flash { border-radius:14px; padding:1rem 1.2rem; display:flex; gap:10px; align-items:flex-start; font-size:.85rem; margin-bottom:1rem; }
.flash.success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.flash.error   { background:#fff1f2; border:1px solid #fecdd3; color:#be123c; }

/* ── Teacher Note ── */
.teacher-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}
.teacher-note-label { font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#3b82f6; margin-bottom:.4rem; display:flex; align-items:center; gap:5px; }
.teacher-note p { font-size:.85rem; color:#1d4ed8; line-height:1.55; }

/* ── Status Boxes ── */
.status-box {
  border-radius:16px;
  padding:1.2rem 1.4rem;
  margin-bottom:1.5rem;
}
.status-box.submitted  { background:#f0fdf4; border:1px solid #bbf7d0; }
.status-box.late       { background:#fff1f2; border:1px solid #fecdd3; }
.status-box-title {
  font-family:'Syne',sans-serif;
  font-size:.95rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
  margin-bottom:.6rem;
}
.status-box.submitted .status-box-title { color:#15803d; }
.status-box.late      .status-box-title { color:#be123c; }
.status-box p { font-size:.83rem; color:var(--text-muted); line-height:1.55; }
.status-box p strong { color:var(--text-main); }
.submission-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; color:#0d9488; font-weight:500;
  text-decoration:none; margin-top:.6rem;
  word-break:break-all;
}
.submission-link:hover { text-decoration:underline; }

/* ── Form ── */
.form-label { font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem; display:block; }
.form-input {
  width:100%; padding:.8rem 1rem;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem; color:var(--text-main);
  background:#fff;
  transition:border .2s, box-shadow .2s;
  outline:none;
}
.form-input:focus {
  border-color:#0d9488;
  box-shadow:0 0 0 3px rgba(13,148,136,.12);
}
.form-input::placeholder { color:#b0c4c4; }

/* ── Submit Button ── */
.btn-submit {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#0d9488,#0f766e);
  color:#fff; border:none;
  padding:.9rem 2rem;
  border-radius:14px;
  font-family:'Syne',sans-serif;
  font-size:.95rem; font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 20px var(--teal-glow);
  transition:transform .2s, box-shadow .2s;
  margin-top:.5rem;
}
.btn-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px var(--teal-glow);
}

/* ── Divider ── */
.qr-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,#e2e8f0 30%,#e2e8f0 70%,transparent);
  margin:1.5rem 0;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
</style>

<div class="qr-wrapper">

  
  <div class="qr-hero">
    <div class="qr-hero-label">
      <i data-lucide="upload-cloud" style="width:12px;height:12px;"></i>
      Pengumpulan Tugas
    </div>
    <h1 class="qr-hero-title"><?php echo e($task->title); ?></h1>
    <?php if($task->description): ?>
      <p class="qr-hero-sub"><?php echo e($task->description); ?></p>
    <?php endif; ?>
  </div>

  
  <div class="qr-card">

    
    <a href="<?php echo e(route('siswa.modul.show', $task->lesson_id)); ?>" class="btn-back">
      <i data-lucide="arrow-left" style="width:15px;height:15px;"></i>
      Kembali ke Materi
    </a>

    
    <?php $deadlinePassed = $task->deadline && now()->gt($task->deadline); ?>

    <div class="info-row">
      <?php if($task->available_at && now()->lt($task->available_at)): ?>
        <div class="info-pill locked">
          <i data-lucide="lock" style="width:16px;height:16px;flex-shrink:0"></i>
          <div>
            <span class="dp-label">Tersedia mulai</span>
            <strong>
              <?php if(!empty($task->available_at_formatted)): ?>
                <?php echo e($task->available_at_formatted); ?>

              <?php else: ?>
                <?php echo e(\Carbon\Carbon::parse($task->available_at)->translatedFormat('d F Y, H:i')); ?>

              <?php endif; ?>
            </strong>
          </div>
        </div>
      <?php elseif($task->available_at): ?>
        <div class="info-pill available">
          <i data-lucide="calendar-check" style="width:16px;height:16px;flex-shrink:0"></i>
          <div>
            <span class="dp-label">Dibuka sejak</span>
            <strong>
              <?php if(!empty($task->available_at_formatted)): ?>
                <?php echo e($task->available_at_formatted); ?>

              <?php else: ?>
                <?php echo e(\Carbon\Carbon::parse($task->available_at)->translatedFormat('d F Y, H:i')); ?>

              <?php endif; ?>
            </strong>
          </div>
        </div>
      <?php endif; ?>

      <?php if($task->deadline): ?>
        <div class="info-pill deadline">
          <i data-lucide="calendar-x" style="width:16px;height:16px;flex-shrink:0"></i>
          <div>
            <span class="dp-label">Deadline</span>
            <strong>
              <?php if(!empty($task->deadline_formatted)): ?>
                <?php echo e($task->deadline_formatted); ?>

              <?php else: ?>
                <?php echo e(\Carbon\Carbon::parse($task->deadline)->translatedFormat('d F Y, H:i')); ?>

              <?php endif; ?>
            </strong>
          </div>
        </div>
      <?php endif; ?>
    </div>

    
    <?php if($task->attachment_path): ?>
      <div class="attachment-box">
        <div class="attachment-icon">
          <i data-lucide="paperclip" style="width:18px;height:18px;"></i>
        </div>
        <div>
          <div class="attachment-label">Lampiran dari Guru</div>
          <a href="<?php echo e($task->attachment_path); ?>" target="_blank" rel="noopener" class="attachment-link">
            <i data-lucide="external-link" style="width:14px;height:14px;"></i>
            Buka Lampiran
          </a>
        </div>
      </div>
    <?php endif; ?>

    
    <?php if(session('success')): ?>
      <div class="flash success">
        <i data-lucide="check-circle" style="width:18px;height:18px;flex-shrink:0;margin-top:1px"></i>
        <?php echo e(session('success')); ?>

      </div>
    <?php endif; ?>
    <?php if(session('error')): ?>
      <div class="flash error">
        <i data-lucide="x-circle" style="width:18px;height:18px;flex-shrink:0;margin-top:1px"></i>
        <?php echo e(session('error')); ?>

      </div>
    <?php endif; ?>

    
    <?php if($submission && $submission->teacher_note): ?>
      <div class="teacher-note">
        <div class="teacher-note-label">
          <i data-lucide="message-square" style="width:13px;height:13px;"></i>
          Catatan dari Guru
        </div>
        <p><?php echo e($submission->teacher_note); ?></p>
      </div>
    <?php endif; ?>

    <div class="qr-divider"></div>

    
    <?php if($submission && !$task->allow_revision): ?>
      <div class="status-box submitted">
        <div class="status-box-title">
          <i data-lucide="check-circle" style="width:20px;height:20px;"></i>
          Tugas sudah dikumpulkan
        </div>
        <p>Revisi tidak diperbolehkan untuk tugas ini.</p>
        <a href="<?php echo e($submission->submission_link); ?>" target="_blank" class="submission-link">
          <i data-lucide="link" style="width:14px;height:14px;"></i>
          <?php echo e($submission->submission_link); ?>

        </a>
      </div>

    

<?php elseif($deadlinePassed): ?>
  <div class="status-box late">
    <div class="status-box-title">
      <i data-lucide="alert-triangle" style="width:20px;height:20px;"></i>
      Deadline tugas telah berakhir
    </div>

    <?php if($submission): ?>
        <p>Tugas sudah pernah dikumpulkan.</p>
        <a href="<?php echo e($submission->submission_link); ?>" target="_blank" class="submission-link">
            <i data-lucide="link" style="width:14px;height:14px;"></i>
            <?php echo e($submission->submission_link); ?>

        </a>
        <p style="margin-top:.5rem">
            Revisi tidak dapat dilakukan karena deadline sudah lewat.
        </p>
    <?php else: ?>
        <p>Pengumpulan tugas sudah ditutup.</p>
        <p style="margin-top:.5rem">
            Tugas ini tetap dihitung <strong>selesai</strong> untuk progres pembelajaran.
        </p>
    <?php endif; ?>
  </div>

    
    <?php else: ?>
      <form method="POST" action="<?php echo e(route('siswa.task.submit', $task->id)); ?>">
        <?php echo csrf_field(); ?>
        <label class="form-label">Link Tugas</label>
        <input
          type="url"
          name="submission_link"
          required
          value="<?php echo e($submission->submission_link ?? ''); ?>"
          placeholder="https://drive.google.com/..."
          class="form-input"
        >
        <button type="submit" class="btn-submit">
          <i data-lucide="send" style="width:18px;height:18px;"></i>
          <?php echo e($submission ? 'Kirim Ulang Tugas' : 'Kirim Tugas'); ?>

        </button>
      </form>
    <?php endif; ?>

  </div>
</div>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('siswa.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/gacf7692/public_html/siswa.smkn8medan.sch.id/resources/views/siswa/task/show.blade.php ENDPATH**/ ?>