@extends('guru.layouts.app')

@section('page_title', 'Tambah Materi')
@section('page_description', 'Tambahkan materi baru.')

@section('content')
<div class="section">
  <div class="section-header">
    <h1>Tambah Materi</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item"><a href="{{ route('guru.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item"><a href="{{ route('guru.materi.index') }}">Materi</a></div>
      <div class="breadcrumb-item active">Tambah</div>
    </div>
  </div>

  <div class="section-body">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-lg-10">
        <div class="card">
          <div class="card-header">
            <h4>Form Tambah Materi</h4>
          </div>
          <div class="card-body">
            <form action="{{ route('guru.materi.store') }}" method="POST">
              @csrf

              {{-- Judul Materi --}}
              <div class="form-group">
                <label for="judul">Judul Materi</label>
                <input type="text" name="judul" id="judul" class="form-control" value="{{ old('judul') }}" required>
              </div>

              {{-- Mata Pelajaran --}}
              <div class="form-group">
                <label>Mata Pelajaran</label>
                <input type="text" class="form-control" value="{{ $mapel->nama_mapel }}" readonly>
                <input type="hidden" name="mapel_id" value="{{ $mapel->id }}">
              </div>

              {{-- Materi Utama / Submateri --}}
              <div class="form-group">
                <label for="is_parent_select">Materi Utama?</label>
                <select name="is_parent" id="is_parent_select" class="form-control" required>
                  <option value="1" {{ old('is_parent', 1) == 1 ? 'selected' : '' }}>Ya</option>
                  <option value="0" {{ old('is_parent') == 0 ? 'selected' : '' }}>Tidak</option>
                </select>
              </div>

              {{-- Pilih Materi Induk --}}
              <div class="form-group" id="parent_id_group" style="display: none;">
                <label for="parent_id">Materi Induk (jika submateri)</label>
                <select name="parent_id" class="form-control">
                  <option value="">-- Tidak Ada --</option>
                  @foreach($daftarMateriInduk as $induk)
                    <option value="{{ $induk->id }}" {{ old('parent_id') == $induk->id ? 'selected' : '' }}>
                      {{ $induk->judul }}
                    </option>
                  @endforeach
                </select>
              </div>

              {{-- Pilih Kelas & Tanggal Terbit --}}
              <div class="form-group">
                <label>Pilih Kelas & Tanggal Terbit</label>
                @foreach($kelasList as $kelas)
                  <div class="form-check mb-3 border p-3 rounded">
                    <div class="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        class="custom-control-input"
                        name="kelas_id[]"
                        value="{{ $kelas->id }}"
                        id="kelas_{{ $kelas->id }}"
                        {{ in_array($kelas->id, old('kelas_id', [])) ? 'checked' : '' }}
                      >
                      <label class="custom-control-label font-weight-bold" for="kelas_{{ $kelas->id }}">
                        {{ $kelas->nama_kelas }}{{ $kelas->tingkat }}
                      </label>
                    </div>
                    <input
                      type="date"
                      class="form-control mt-2"
                      name="tanggal_terbit[{{ $kelas->id }}]"
                      value="{{ old("tanggal_terbit.$kelas->id") }}"
                    >
                  </div>
                @endforeach
              </div>

              {{-- Tombol Aksi --}}
              <div class="form-group text-right mt-4">
                <a href="{{ route('guru.materi.index') }}" class="btn btn-secondary mr-2">
                  <i class="fas fa-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn btn-primary">
                  <i class="fas fa-save"></i> Simpan Materi
                </button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
  function toggleParentIdField() {
    const isParent = document.getElementById('is_parent_select').value;
    const parentIdGroup = document.getElementById('parent_id_group');

    if (isParent === '0') {
      parentIdGroup.style.display = 'block';
    } else {
      parentIdGroup.style.display = 'none';
      document.querySelector('select[name="parent_id"]').value = '';
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    toggleParentIdField();
    document.getElementById('is_parent_select').addEventListener('change', toggleParentIdField);
  });
</script>
@endsection