@extends('layouts.guru.app')

@section('title', 'Edit Jadwal ' . ucfirst($jenis))

@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;
  }

  .je-wrap * { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }
  .je-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }

  /* ── HEADER ──────────────────────────── */
  .je-header {
    display: flex; align-items: center; gap: 14px;
    animation: slideUp 0.4s ease both;
  }
  .je-back {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--white); border: 1.5px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--dim);
    transition: all 0.2s; flex-shrink: 0;
  }
  .je-back:hover { border-color: var(--sky); color: var(--sky); background: rgba(37,99,235,0.05); }
  .je-back svg { width: 16px; height: 16px; }
  .je-header-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700; color: var(--ink); margin: 0 0 2px;
  }
  .je-header-text p { font-size: 13px; color: var(--dim); margin: 0; }

  /* ── FORM CARD ───────────────────────── */
  .je-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    animation: slideUp 0.4s ease 0.07s both;
  }
  .je-card-head {
    padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .je-card-head--piket    { background: var(--amber); }
  .je-card-head--mengajar { background: #15803d; }
  .je-card-head-left { display: flex; align-items: center; gap: 10px; }
  .je-card-head svg { width: 15px; height: 15px; color: rgba(255,255,255,0.6); }
  .je-card-head-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px; font-weight: 600; color: var(--white);
  }
  .je-card-head-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    padding: 3px 10px; border-radius: 99px;
    text-transform: uppercase;
  }

  /* ── FORM BODY ───────────────────────── */
  .je-form-body { padding: 28px; display: flex; flex-direction: column; gap: 20px; }

  .je-field label {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--dim); margin-bottom: 8px;
  }
  .je-input {
    width: 100%; padding: 11px 16px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 14px; font-weight: 500; color: var(--ink);
    outline: none; background: var(--fog);
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .je-input:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: var(--white);
  }

  /* Time grid */
  .je-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Divider */
  .je-divider { height: 1px; background: var(--line); }

  /* Actions */
  .je-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .je-submit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 10px;
    color: var(--white); font-size: 14px; font-weight: 700;
    cursor: pointer; border: none; font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
  }
  .je-submit svg { width: 15px; height: 15px; }
  .je-submit--piket    { background: var(--amber); }
  .je-submit--piket:hover    { background: #b45309; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,119,6,0.35); }
  .je-submit--mengajar { background: var(--green); }
  .je-submit--mengajar:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.3); }
  .je-cancel {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px;
    background: var(--fog); color: var(--ink);
    font-size: 14px; font-weight: 600;
    text-decoration: none; border: 1.5px solid var(--line); transition: all 0.2s;
  }
  .je-cancel:hover { background: var(--line); }
  .je-cancel svg { width: 15px; height: 15px; }

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

  /* ── RESPONSIVE ──────────────────────── */
  @media (max-width: 600px) {
    .je-form-body { padding: 20px 16px; }
    .je-card-head { padding: 14px 18px; }
    .je-time-grid { grid-template-columns: 1fr; }
    .je-actions { flex-direction: column; }
    .je-submit, .je-cancel { justify-content: center; }
  }
</style>
@endpush

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

  {{-- ══ HEADER ═══════════════════════════════════ --}}
  <div class="je-header">
    <a href="{{ route('guru.jadwal.index') }}" class="je-back">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
    </a>
    <div class="je-header-text">
      <h1>Edit Jadwal {{ ucfirst($jenis) }}</h1>
      <p>Perbarui data jadwal {{ $jenis == 'piket' ? 'piket' : 'mengajar' }} Anda</p>
    </div>
  </div>

  {{-- ══ FORM ══════════════════════════════════════ --}}
  <div class="je-card">

    {{-- ── PIKET ─────────────────────────────────── --}}
    @if($jenis == 'piket')
    <div class="je-card-head je-card-head--piket">
      <div class="je-card-head-left">
        <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 class="je-card-head-title">Edit Jadwal Piket</div>
      </div>
      <div class="je-card-head-badge">ID #{{ $jadwal->id_piket }}</div>
    </div>

    <form action="{{ route('guru.jadwal.updatePiket', $jadwal->id_piket) }}" method="POST">
      @csrf @method('PUT')
      <div class="je-form-body">

        <div class="je-field">
          <label>Hari</label>
          <select name="hari" class="je-input" required>
            <option value="">— Pilih Hari —</option>
            @foreach(['Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'] as $h)
              <option {{ $jadwal->hari == $h ? 'selected' : '' }}>{{ $h }}</option>
            @endforeach
          </select>
        </div>

        <div class="je-time-grid">
          <div class="je-field">
            <label>Jam Mulai</label>
            <input type="time" name="jam_mulai" value="{{ $jadwal->jam_mulai }}" class="je-input" required>
          </div>
          <div class="je-field">
            <label>Jam Selesai</label>
            <input type="time" name="jam_selesai" value="{{ $jadwal->jam_selesai }}" class="je-input" required>
          </div>
        </div>

        <div class="je-field">
          <label>Keterangan <span style="font-weight:400;font-size:10px;text-transform:none;letter-spacing:0;">(opsional)</span></label>
          <textarea name="keterangan" rows="3"
                    placeholder="Contoh: Piket gerbang utama"
                    class="je-input" style="resize:vertical;height:auto">{{ $jadwal->keterangan }}</textarea>
        </div>

        <div class="je-divider"></div>
        <div class="je-actions">
          <button type="submit" class="je-submit je-submit--piket">
            <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>
            Simpan Perubahan
          </button>
          <a href="{{ route('guru.jadwal.index') }}" class="je-cancel">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            Batal
          </a>
        </div>

      </div>
    </form>
    @endif

    {{-- ── MENGAJAR ───────────────────────────────── --}}
    @if($jenis == 'mengajar')
    <div class="je-card-head je-card-head--mengajar">
      <div class="je-card-head-left">
        <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 class="je-card-head-title">Edit Jadwal Mengajar</div>
      </div>
      <div class="je-card-head-badge">ID #{{ $jadwal->id_jadwal }}</div>
    </div>

    <form action="{{ route('guru.jadwal.updateMengajar', $jadwal->id_jadwal) }}" method="POST">
      @csrf @method('PUT')
      <div class="je-form-body">

        <div class="je-field">
          <label>Hari</label>
          <select name="hari" class="je-input" required>
            <option value="">— Pilih Hari —</option>
            @foreach(['Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'] as $h)
              <option {{ $jadwal->hari == $h ? 'selected' : '' }}>{{ $h }}</option>
            @endforeach
          </select>
        </div>

        <div class="je-time-grid">
          <div class="je-field">
            <label>Jam Mulai</label>
            <input type="time" name="jam_mulai" value="{{ $jadwal->jam_mulai }}" class="je-input" required>
          </div>
          <div class="je-field">
            <label>Jam Selesai</label>
            <input type="time" name="jam_selesai" value="{{ $jadwal->jam_selesai }}" class="je-input" required>
          </div>
        </div>

        <div class="je-field">
          <label>Mata Pelajaran</label>
          <input type="text" name="mata_pelajaran"
                 value="{{ $jadwal->mata_pelajaran }}"
                 placeholder="Contoh: Matematika"
                 class="je-input" required>
        </div>

        <div class="je-field">
          <label>Kelas</label>
          <select name="id_kelas" class="je-input" required>
            <option value="">— Pilih Kelas —</option>
            @foreach($kelasList as $id_kelas => $nama_kelas)
              <option value="{{ $id_kelas }}" {{ $jadwal->id_kelas == $id_kelas ? 'selected' : '' }}>
                {{ $nama_kelas }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="je-divider"></div>
        <div class="je-actions">
          <button type="submit" class="je-submit je-submit--mengajar">
            <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>
            Simpan Perubahan
          </button>
          <a href="{{ route('guru.jadwal.index') }}" class="je-cancel">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            Batal
          </a>
        </div>

      </div>
    </form>
    @endif

  </div>

</div>
@endsection