@extends('siswa.layout')
@section('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">

  {{-- ════════ HERO ════════ --}}
  <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">{{ $task->title }}</h1>
    <!--@if($task->description)-->
    <!--  <p class="qr-hero-sub">{{ $task->description }}</p>-->
    <!--@endif-->
  </div>

  {{-- ════════ CARD ════════ --}}
  <div class="qr-card">

    {{-- ── BACK LINK ── --}}
    <a href="{{ 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>
    
    @if($task->description)
<div class="mt-3 mb-6 p-4 rounded-xl bg-slate-50 border border-slate-200 text-sm text-slate-600 leading-relaxed">
    {{ $task->description }}
</div>
@endif

    {{-- ── INFO PILLS ── --}}
    @php $deadlinePassed = $task->deadline && now()->gt($task->deadline); @endphp

    <div class="info-row">
      @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>
              @if(!empty($task->available_at_formatted))
                {{ $task->available_at_formatted }}
              @else
                {{ \Carbon\Carbon::parse($task->available_at)->translatedFormat('d F Y, H:i') }}
              @endif
            </strong>
          </div>
        </div>
      @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>
              @if(!empty($task->available_at_formatted))
                {{ $task->available_at_formatted }}
              @else
                {{ \Carbon\Carbon::parse($task->available_at)->translatedFormat('d F Y, H:i') }}
              @endif
            </strong>
          </div>
        </div>
      @endif

      @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>
              @if(!empty($task->deadline_formatted))
                {{ $task->deadline_formatted }}
              @else
                {{ \Carbon\Carbon::parse($task->deadline)->translatedFormat('d F Y, H:i') }}
              @endif
            </strong>
          </div>
        </div>
      @endif
    </div>

    {{-- ── LAMPIRAN GURU ── --}}
    @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="{{ $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>
    @endif

    {{-- ── FLASH MESSAGES ── --}}
    @if(session('success'))
      <div class="flash success">
        <i data-lucide="check-circle" style="width:18px;height:18px;flex-shrink:0;margin-top:1px"></i>
        {{ session('success') }}
      </div>
    @endif
    @if(session('error'))
      <div class="flash error">
        <i data-lucide="x-circle" style="width:18px;height:18px;flex-shrink:0;margin-top:1px"></i>
        {{ session('error') }}
      </div>
    @endif

    {{-- ── CATATAN GURU ── --}}
    @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>{{ $submission->teacher_note }}</p>
      </div>
    @endif

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

    {{-- ── SUDAH SUBMIT & TIDAK BOLEH REVISI ── --}}
    @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="{{ $submission->submission_link }}" target="_blank" class="submission-link">
          <i data-lucide="link" style="width:14px;height:14px;"></i>
          {{ $submission->submission_link }}
        </a>
      </div>

    {{-- ── DEADLINE LEWAT & BELUM SUBMIT ── --}}
{{-- ── DEADLINE LEWAT (SEMUA KONDISI) ── --}}
@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>

    @if($submission)
        <p>Tugas sudah pernah dikumpulkan.</p>
        <a href="{{ $submission->submission_link }}" target="_blank" class="submission-link">
            <i data-lucide="link" style="width:14px;height:14px;"></i>
            {{ $submission->submission_link }}
        </a>
        <p style="margin-top:.5rem">
            Revisi tidak dapat dilakukan karena deadline sudah lewat.
        </p>
    @else
        <p>Pengumpulan tugas sudah ditutup.</p>
        <p style="margin-top:.5rem">
            Tugas ini tetap dihitung <strong>selesai</strong> untuk progres pembelajaran.
        </p>
    @endif
  </div>

    {{-- ── FORM SUBMIT ── --}}
    @else
      <form method="POST" action="{{ route('siswa.task.submit', $task->id) }}">
        @csrf
        <label class="form-label">Link Tugas</label>
        <input
          type="url"
          name="submission_link"
          required
          value="{{ $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>
          {{ $submission ? 'Kirim Ulang Tugas' : 'Kirim Tugas' }}
        </button>
      </form>
    @endif

  </div>{{-- /qr-card --}}
</div>{{-- /qr-wrapper --}}

@endsection