@extends('guru.layouts.app')

@section('page_title', isset($materi) ? 'Edit Materi' : 'Tambah Materi')
@section('page_description', isset($materi) ? 'Edit materi yang sudah ada.' : 'Tambahkan materi baru.')

@section('content')
<section class="section">
  {{-- Breadcrumb --}}
  <div class="section-header">
    <h1>{{ isset($materi) ? 'Edit Materi' : '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">{{ isset($materi) ? 'Edit' : '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>{{ isset($materi) ? 'Edit Materi' : 'Tambah Materi' }}</h4>
          </div>

          <div class="card-body">
            <form action="{{ isset($materi) ? route('guru.materi.update', $materi->id) : route('guru.materi.store') }}" method="POST">
              @csrf
              @if(isset($materi))
                @method('PUT')
              @endif

              {{-- Pilih Mapel --}}
              <div class="form-group">
                <label for="mapel_id">Pilih Mata Pelajaran</label>
                <select name="mapel_id" id="mapel_id" class="form-control" required>
                  <option value="">-- Pilih Mapel --</option>
                  @foreach($daftarMapel as $mapel)
                    <option value="{{ $mapel->id }}" {{ old('mapel_id', $materi->mapel_id ?? '') == $mapel->id ? 'selected' : '' }}>
                      {{ $mapel->nama_mapel }}
                    </option>
                  @endforeach
                </select>
              </div>

              {{-- 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', $materi->judul ?? '') }}" required>
              </div>

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

              {{-- Parent ID --}}
              <div class="form-group" id="parent_id_group" style="display: none;">
                <label for="parent_id">Pilih 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', $materi->parent_id ?? '') == $induk->id ? 'selected' : '' }}>
                      {{ $induk->judul }}
                    </option>
                  @endforeach
                </select>
              </div>

              {{-- Pilih Kelas & Tanggal Terbit --}}
              <div class="form-group">
                <label for="kelas_id">Pilih Kelas & Tanggal Terbit</label>
                @foreach($kelasList as $kelas)
                  @php
                    $pivot = isset($materi) ? $materi->kelas->firstWhere('id', $kelas->id)?->pivot : null;
                    $tanggalTerbit = old("tanggal_terbit.$kelas->id", $pivot?->tanggal_terbit ?? '');
                    $checked = in_array($kelas->id, old('kelas_id', isset($materi) ? $materi->kelas->pluck('id')->toArray() : []));
                  @endphp

                  <div class="form-check mb-3 border rounded p-3">
                    <div class="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        class="custom-control-input"
                        id="kelas_{{ $kelas->id }}"
                        name="kelas_id[]"
                        value="{{ $kelas->id }}"
                        {{ $checked ? 'checked' : '' }}>
                      <label class="custom-control-label font-weight-bold" for="kelas_{{ $kelas->id }}">
                        {{ $kelas->nama_kelas }}{{ $kelas->tingkat }}
                      </label>
                    </div>
                    <div class="mt-2">
                      <input type="date" class="form-control" name="tanggal_terbit[{{ $kelas->id }}]" value="{{ $tanggalTerbit }}">
                    </div>
                  </div>
                @endforeach
              </div>
            </div>

            <div class="card-footer text-right">
              <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> {{ isset($materi) ? 'Update Materi' : 'Simpan Materi' }}
              </button>
            </div>

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

@section('scripts')
<script>
  function toggleParentIdField() {
    const isParent = document.getElementById('is_parent_select').value;
    const parentIdGroup = document.getElementById('parent_id_group');
    parentIdGroup.style.display = (isParent == '0') ? 'block' : 'none';
  }

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