@extends('layouts.guru.app')

@section('title', 'Jadwal Saya')

@push('styles')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

  :root {
    --navy:  #0f1f3d;
    --sky:   #2563eb;
    --gold:  #c9a24a;
    --gold2: #e2bb6a;
    --ink:   #1e293b;
    --dim:   #64748b;
    --fog:   #f1f5f9;
    --line:  #e2e8f0;
    --white: #ffffff;
    --green: #16a34a;
    --red:   #dc2626;
    --amber: #d97706;
    --blue:  #2563eb;
  }

  .jd-wrap * { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }
  .jd-wrap { display: flex; flex-direction: column; gap: 28px; }

  /* ── HERO ─────────────────────────────── */
  .jd-hero {
    position: relative;
    background: var(--navy);
    border-radius: 20px;
    padding: 32px 40px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    animation: slideUp 0.4s ease both;
  }
  .jd-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 55% 80% at 85% 50%, rgba(37,99,235,0.18) 0%, transparent 65%),
      radial-gradient(ellipse 40% 60% at 12% 20%, rgba(201,162,74,0.1) 0%, transparent 60%);
    pointer-events: none;
  }
  .jd-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
  .jd-hero-left { position: relative; z-index: 1; }
  .jd-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(201,162,74,0.15);
    border: 1px solid rgba(201,162,74,0.3);
    border-radius: 99px;
    padding: 4px 14px;
    font-size: 10px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold2);
    margin-bottom: 12px;
  }
  .jd-hero-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: inline-block; }
  .jd-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 3.5vw, 30px);
    font-weight: 700; color: var(--white);
    line-height: 1.2; margin: 0 0 6px;
  }
  .jd-hero p { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 300; margin: 0; }
  .jd-hero-btn {
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    background: var(--gold); color: var(--navy);
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    text-decoration: none; transition: all 0.2s;
  }
  .jd-hero-btn:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,162,74,0.35); }
  .jd-hero-btn svg { width: 15px; height: 15px; }

  /* ── SECTION ─────────────────────────── */
  .jd-section {
    display: flex; flex-direction: column; gap: 16px;
    animation: slideUp 0.4s ease both;
  }
  .jd-section:nth-child(2) { animation-delay: 0.07s; }
  .jd-section:nth-child(3) { animation-delay: 0.13s; }

  .jd-section-head {
    display: flex; align-items: center; gap: 14px;
  }
  .jd-section-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .jd-section-icon svg { width: 20px; height: 20px; }
  .jd-section-icon--blue  { background: #dbeafe; color: var(--blue); }
  .jd-section-icon--green { background: #dcfce7; color: var(--green); }

  .jd-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 2px;
  }
  .jd-section-sub { font-size: 12px; color: var(--dim); }

  /* ── CARD GRID ───────────────────────── */
  .jd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* ── JADWAL CARD ─────────────────────── */
  .jd-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
    position: relative;
  }
  .jd-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
  }
  .jd-card--blue::before  { background: var(--blue); }
  .jd-card--green::before { background: var(--green); }
  .jd-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.1); }

  .jd-card-head {
    padding: 18px 20px 14px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .jd-card-day-badge {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
  }
  .jd-card--blue  .jd-card-day-badge { background: var(--navy); color: var(--gold); }
  .jd-card--green .jd-card-day-badge { background: var(--navy); color: var(--gold); }

  .jd-card-day { font-size: 15px; font-weight: 700; color: var(--ink); }
  .jd-card-type {
    font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; margin-top: 2px;
  }
  .jd-card--blue  .jd-card-type { color: var(--blue); }
  .jd-card--green .jd-card-type { color: var(--green); }

  .jd-card-body { padding: 14px 20px; flex: 1; display: flex; flex-direction: column; gap: 9px; }

  .jd-info-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink);
  }
  .jd-info-row svg { width: 14px; height: 14px; color: var(--dim); flex-shrink: 0; }
  .jd-info-row span { font-family: 'Courier New', monospace; }

  .jd-info-chip {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 9px;
    font-size: 12px; font-weight: 600;
    background: var(--fog); border: 1px solid var(--line);
    color: var(--ink);
  }
  .jd-info-chip svg { width: 13px; height: 13px; color: var(--dim); flex-shrink: 0; }

  .jd-kelas-badge {
    display: inline-flex; padding: 4px 12px; border-radius: 99px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.2);
    color: var(--blue);
  }

  .jd-card-ket {
    font-size: 12px; color: var(--dim);
    background: var(--fog); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 10px; line-height: 1.5;
  }

  .jd-card-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    display: flex; gap: 8px;
    background: var(--fog);
  }
  .jd-act-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    text-decoration: none; border: none;
    font-family: 'DM Sans', sans-serif; transition: all 0.2s;
  }
  .jd-act-btn svg { width: 13px; height: 13px; }
  .jd-act-btn--edit  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
  .jd-act-btn--edit:hover  { background: #fcd34d; }
  .jd-act-btn--del   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
  .jd-act-btn--del:hover   { background: #fca5a5; }

  /* ── EMPTY STATE ─────────────────────── */
  .jd-empty {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 48px 24px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .jd-empty-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--fog);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
  }
  .jd-empty-icon svg { width: 26px; height: 26px; color: var(--dim); }
  .jd-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .jd-empty-sub   { font-size: 13px; color: var(--dim); }

  /* ── ANIMATION ───────────────────────── */
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── RESPONSIVE ──────────────────────── */
  @media (max-width: 1100px) {
    .jd-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    .jd-grid { grid-template-columns: 1fr; }
    .jd-hero { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
    .jd-hero-btn { width: 100%; justify-content: center; }
  }
</style>
@endpush

@section('content')
<div class="jd-wrap">

  {{-- ══ HERO ══════════════════════════════════ --}}
  <div class="jd-hero">
    <div class="jd-hero-left">
      <div class="jd-hero-eyebrow"><i></i> Manajemen Jadwal</div>
      <h1>Jadwal Saya</h1>
      <p>Kelola jadwal piket dan mengajar Anda</p>
    </div>
    <a href="{{ route('guru.jadwal.create') }}" class="jd-hero-btn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Buat Jadwal
    </a>
  </div>

  {{-- ══ JADWAL PIKET ═════════════════════════ --}}
  <div class="jd-section">
    <div class="jd-section-head">
      <div class="jd-section-icon jd-section-icon--blue">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      </div>
      <div>
        <div class="jd-section-title">Jadwal Piket</div>
        <div class="jd-section-sub">Daftar jadwal piket Anda</div>
      </div>
    </div>

    @if($jadwalPiket->isEmpty())
    <div class="jd-empty">
      <div class="jd-empty-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="9" y1="15" x2="9.01" y2="15"/></svg>
      </div>
      <div class="jd-empty-title">Tidak ada jadwal piket</div>
      <div class="jd-empty-sub">Anda belum memiliki jadwal piket yang terdaftar</div>
    </div>
    @else
    <div class="jd-grid">
      @foreach($jadwalPiket as $piket)
      <div class="jd-card jd-card--blue">
        <div class="jd-card-head">
          <div class="jd-card-day-badge">{{ strtoupper(substr($piket->hari, 0, 2)) }}</div>
          <div>
            <div class="jd-card-day">{{ $piket->hari }}</div>
            <div class="jd-card-type">Jadwal Piket</div>
          </div>
        </div>
        <div class="jd-card-body">
          <div class="jd-info-row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span>{{ $piket->jam_mulai }}</span>
            <span style="color:var(--dim);font-family:sans-serif;">—</span>
            <span>{{ $piket->jam_selesai }}</span>
          </div>
          @if($piket->keterangan)
          <div class="jd-card-ket">{{ $piket->keterangan }}</div>
          @endif
        </div>
        <div class="jd-card-actions">
          <a href="{{ route('guru.jadwal.editPiket', $piket->id_piket) }}" class="jd-act-btn jd-act-btn--edit">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
            Edit
          </a>
          <form action="{{ route('guru.jadwal.destroyPiket', $piket->id_piket) }}" method="POST"
                onsubmit="return confirm('Yakin ingin menghapus jadwal ini?')" style="flex:1;margin:0">
            @csrf @method('DELETE')
            <button type="submit" class="jd-act-btn jd-act-btn--del" style="width:100%">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
              Hapus
            </button>
          </form>
        </div>
      </div>
      @endforeach
    </div>
    @endif
  </div>

  {{-- ══ JADWAL MENGAJAR ══════════════════════ --}}
  <div class="jd-section">
    <div class="jd-section-head">
      <div class="jd-section-icon jd-section-icon--green">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
      </div>
      <div>
        <div class="jd-section-title">Jadwal Mengajar</div>
        <div class="jd-section-sub">Daftar jadwal mengajar Anda</div>
      </div>
    </div>

    @if($jadwalMengajar->isEmpty())
    <div class="jd-empty">
      <div class="jd-empty-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
      </div>
      <div class="jd-empty-title">Tidak ada jadwal mengajar</div>
      <div class="jd-empty-sub">Anda belum memiliki jadwal mengajar yang terdaftar</div>
    </div>
    @else
    <div class="jd-grid">
      @foreach($jadwalMengajar as $jadwal)
      <div class="jd-card jd-card--green">
        <div class="jd-card-head">
          <div class="jd-card-day-badge">{{ strtoupper(substr($jadwal->hari, 0, 2)) }}</div>
          <div>
            <div class="jd-card-day">{{ $jadwal->hari }}</div>
            <div class="jd-card-type">Jadwal Mengajar</div>
          </div>
        </div>
        <div class="jd-card-body">
          <div class="jd-info-row">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span>{{ $jadwal->jam_mulai }}</span>
            <span style="color:var(--dim);font-family:sans-serif;">—</span>
            <span>{{ $jadwal->jam_selesai }}</span>
          </div>
          <div class="jd-info-chip">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
            {{ $jadwal->mata_pelajaran }}
          </div>
          <div style="display:flex;align-items:center;gap:7px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" style="color:var(--dim);flex-shrink:0"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <span class="jd-kelas-badge">{{ $jadwal->kelas->nama_kelas ?? '-' }}</span>
          </div>
        </div>
        <div class="jd-card-actions">
          <a href="{{ route('guru.jadwal.editMengajar', $jadwal->id_jadwal) }}" class="jd-act-btn jd-act-btn--edit">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
            Edit
          </a>
          <form action="{{ route('guru.jadwal.destroyMengajar', $jadwal->id_jadwal) }}" method="POST"
                onsubmit="return confirm('Yakin ingin menghapus jadwal ini?')" style="flex:1;margin:0">
            @csrf @method('DELETE')
            <button type="submit" class="jd-act-btn jd-act-btn--del" style="width:100%">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
              Hapus
            </button>
          </form>
        </div>
      </div>
      @endforeach
    </div>
    @endif
  </div>

</div>
@endsection