@extends('layouts.guru.app')

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

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

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

  /* ── HEADER ──────────────────────────── */
  .jc-header {
    display: flex; align-items: center; gap: 14px;
    animation: slideUp 0.4s ease both;
  }
  .jc-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;
  }
  .jc-back:hover { border-color: var(--sky); color: var(--sky); background: rgba(37,99,235,0.05); }
  .jc-back svg { width: 16px; height: 16px; }
  .jc-header-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700; color: var(--ink); margin: 0 0 2px;
  }
  .jc-header-text p { font-size: 13px; color: var(--dim); margin: 0; }

  /* ── TYPE SELECTOR ───────────────────── */
  .jc-type-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px; padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    animation: slideUp 0.4s ease 0.06s both;
  }
  .jc-type-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--dim); margin-bottom: 10px; display: block;
  }

  /* Segmented control */
  .jc-type-tabs {
    display: flex; border: 1.5px solid var(--line);
    border-radius: 10px; overflow: hidden; background: var(--fog);
  }
  .jc-tab {
    flex: 1; padding: 10px 16px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: none; background: transparent;
    color: var(--dim); transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
    border-right: 1.5px solid var(--line);
  }
  .jc-tab:last-child { border-right: none; }
  .jc-tab svg { width: 15px; height: 15px; }
  .jc-tab.active--piket    { background: var(--navy); color: var(--white); }
  .jc-tab.active--mengajar { background: var(--green); color: var(--white); }
  .jc-tab:hover:not(.active--piket):not(.active--mengajar) { background: var(--line); color: var(--ink); }

  /* ── FORM CARD ───────────────────────── */
  .jc-form-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.12s both;
  }
  .jc-form-card.hidden { display: none; }

  .jc-form-head {
    background: var(--navy);
    padding: 16px 28px;
    display: flex; align-items: center; gap: 10px;
  }
  .jc-form-head--amber { background: var(--amber); }
  .jc-form-head--green { background: #15803d; }
  .jc-form-head svg { width: 15px; height: 15px; color: rgba(255,255,255,0.6); }
  .jc-form-head-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px; font-weight: 600; color: var(--white);
  }
  .jc-form-head-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-left: auto; }

  .jc-form-body { padding: 28px; display: flex; flex-direction: column; gap: 20px; }

  /* ── FIELD ───────────────────────────── */
  .jc-field label {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--dim); margin-bottom: 8px;
  }
  .jc-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;
  }
  .jc-input:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: var(--white);
  }

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

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

  /* Actions */
  .jc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .jc-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;
  }
  .jc-submit svg { width: 15px; height: 15px; }
  .jc-submit--piket    { background: var(--amber); }
  .jc-submit--piket:hover    { background: #b45309; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,119,6,0.35); }
  .jc-submit--mengajar { background: var(--green); }
  .jc-submit--mengajar:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.3); }
  .jc-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;
  }
  .jc-cancel:hover { background: var(--line); }
  .jc-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) {
    .jc-form-body { padding: 20px 16px; }
    .jc-time-grid { grid-template-columns: 1fr; }
    .jc-actions { flex-direction: column; }
    .jc-submit, .jc-cancel { justify-content: center; }
  }
</style>
@endpush

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

  {{-- ══ HEADER ═══════════════════════════════════ --}}
  <div class="jc-header">
    <a href="{{ route('guru.jadwal.index') }}" class="jc-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="jc-header-text">
      <h1>Buat Jadwal Baru</h1>
      <p>Kelola jadwal piket dan mengajar dengan rapi</p>
    </div>
  </div>

  {{-- ══ TYPE SELECTOR ════════════════════════════ --}}
  <div class="jc-type-card">
    <span class="jc-type-label">Pilih Jenis Jadwal</span>
    <div class="jc-type-tabs">
      <button type="button" class="jc-tab" id="tab-piket" onclick="switchTab('piket')">
        <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>
        Jadwal Piket
      </button>
      <button type="button" class="jc-tab" id="tab-mengajar" onclick="switchTab('mengajar')">
        <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 Mengajar
      </button>
    </div>
  </div>

  {{-- ══ FORM PIKET ════════════════════════════════ --}}
  <div class="jc-form-card hidden" id="form-piket-card">
    <div class="jc-form-head jc-form-head--amber">
      <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="jc-form-head-title">Form Jadwal Piket</div>
      <div class="jc-form-head-sub">Atur jadwal piket harian</div>
    </div>
    <form action="{{ route('guru.jadwal.storePiket') }}" method="POST">
      @csrf
      <div class="jc-form-body">

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

        <div class="jc-time-grid">
          <div class="jc-field">
            <label>Jam Mulai</label>
            <input type="time" name="jam_mulai" class="jc-input" required>
          </div>
          <div class="jc-field">
            <label>Jam Selesai</label>
            <input type="time" name="jam_selesai" class="jc-input" required>
          </div>
        </div>

        <div class="jc-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="jc-input" style="resize:vertical;height:auto"></textarea>
        </div>

        <div class="jc-divider"></div>
        <div class="jc-actions">
          <button type="submit" class="jc-submit jc-submit--piket">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Simpan Jadwal Piket
          </button>
          <a href="{{ route('guru.jadwal.index') }}" class="jc-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>
  </div>

  {{-- ══ FORM MENGAJAR ═════════════════════════════ --}}
  <div class="jc-form-card hidden" id="form-mengajar-card">
    <div class="jc-form-head jc-form-head--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 class="jc-form-head-title">Form Jadwal Mengajar</div>
      <div class="jc-form-head-sub">Atur jadwal pembelajaran</div>
    </div>
    <form action="{{ route('guru.jadwal.storeMengajar') }}" method="POST">
      @csrf
      <div class="jc-form-body">

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

        <div class="jc-time-grid">
          <div class="jc-field">
            <label>Jam Mulai</label>
            <input type="time" name="jam_mulai" class="jc-input" required>
          </div>
          <div class="jc-field">
            <label>Jam Selesai</label>
            <input type="time" name="jam_selesai" class="jc-input" required>
          </div>
        </div>

        <div class="jc-field">
          <label>Mata Pelajaran</label>
          <input type="text" name="mata_pelajaran"
                 placeholder="Contoh: Matematika"
                 class="jc-input" required>
        </div>

        <div class="jc-field">
          <label>Kelas</label>
          <select name="id_kelas" class="jc-input" required>
            <option value="">— Pilih Kelas —</option>
            @foreach($kelas as $id => $nama)
              <option value="{{ $id }}">{{ $nama }}</option>
            @endforeach
          </select>
        </div>

        <div class="jc-divider"></div>
        <div class="jc-actions">
          <button type="submit" class="jc-submit jc-submit--mengajar">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Simpan Jadwal Mengajar
          </button>
          <a href="{{ route('guru.jadwal.index') }}" class="jc-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>
  </div>

</div>

@push('scripts')
<script>
function switchTab(type) {
  const tabs = document.querySelectorAll('.jc-tab');
  tabs.forEach(t => t.classList.remove('active--piket', 'active--mengajar'));

  document.getElementById('form-piket-card').classList.add('hidden');
  document.getElementById('form-mengajar-card').classList.add('hidden');

  document.getElementById('tab-' + type).classList.add('active--' + type);
  document.getElementById('form-' + type + '-card').classList.remove('hidden');
}
</script>
@endpush
@endsection