@extends('layouts.app')

@section('content')
<div class="container mt-4">
  <h2>Tambah Jadwal Bel</h2>

  <form action="{{ route('jadwal-bel.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="form-group">
      <label for="hari">Hari</label>
      {{-- <select name="hari" class="form-control">
        <option>Senin</option>
        <option>Selasa</option>
        <option>Rabu</option>
        <option>Kamis</option>
        <option>Jumat</option>
        <option>Sabtu</option>
      </select> --}}
      <input class=" form-control" id="tagInput" name="hari" placeholder="Masukkan hari lalu Enter" />
    </div>

    <div class="form-group mt-2">
      <label for="jam">Jam</label>
      <input type="time" name="jam" class="form-control" required>
    </div>

    <div class="form-group">
      <label for="jenis">Keterangan</label>
      <select name="jenis" class="form-control">
        <option value="reguler">Reguler</option>
        <option value="ujian">Ujian</option>
      </select>
    </div>

    <div class="form-group mt-2">
      <label for="keterangan">Keterangan</label>
      <input type="text" name="keterangan" class="form-control">
    </div>

    <div class="form-group mt-2">
      <label for="file_suara">File Suara</label>
      <input type="file" name="file_suara" class="form-control" placeholder="Contoh: bel_masuk.mp3">
    </div>

    <button class="btn btn-primary mt-3">Simpan</button>
    <a href="{{ route('jadwal-bel.index') }}" class="btn btn-secondary mt-3">Kembali</a>
  </form>
</div>
@endsection

@section('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const input = document.querySelector('#tagInput');

    // Cegah error jika input tidak ditemukan
    if (!input) {
      console.warn("Tagify input element not found!");
      return;
    }

    // Inisialisasi Tagify
    const tagify = new Tagify(input, {
      whitelist: ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"],
      dropdown: {
        enabled: 0
      }
    });

    // Saat form akan disubmit, ubah nilai menjadi string "Senin, Selasa"
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', function () {
        const selected = tagify.value.map(item => item.value); // ambil array nilai
        input.value = selected.join(', '); // ubah ke string agar masuk ke DB
      });
    }
  });
</script>
@endsection