@use('Illuminate\Support\Facades\Storage')
<x-layout.app title="Edit Jadwal Notifikasi" activeMenu="jadwal-notifikasi.index" :withError="true">
    <div class="container my-5">
        <x-breadcrumb title="Edit Jadwal Notifikasi" :breadcrumbs="[
            ['label' => 'Dashboard', 'url' => url('/')],
            ['label' => 'Jadwal Notifikasi', 'url' => route('jadwal-notifikasi.index')],
            ['label' => 'Edit Jadwal'],
        ]" />

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bx bx-edit me-2 text-primary"></i>Edit Jadwal: {{ $jadwalNotifikasi->nama }}
                </h5>
            </div>
            <div class="card-body">
                <x-error-list />

                <form action="{{ route('jadwal-notifikasi.update', $jadwalNotifikasi) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row g-4">
                        {{-- Nama Jadwal --}}
                        <div class="col-md-6">
                            <label for="nama" class="form-label fw-semibold">
                                Nama Jadwal <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="nama" id="nama"
                                class="form-control @error('nama') is-invalid @enderror"
                                value="{{ old('nama', $jadwalNotifikasi->nama) }}"
                                required>
                            @error('nama')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Template --}}
                        <div class="col-md-6">
                            <label for="template_id" class="form-label fw-semibold">
                                Template Pesan <span class="text-danger">*</span>
                            </label>
                            <select name="template_id" id="template_id"
                                class="form-select @error('template_id') is-invalid @enderror" required>
                                <option value="">-- Pilih Template --</option>
                                @foreach ($templates as $tmpl)
                                    <option value="{{ $tmpl->id }}"
                                        data-pesan="{{ $tmpl->pesan }}"
                                        {{ old('template_id', $jadwalNotifikasi->template_id) == $tmpl->id ? 'selected' : '' }}>
                                        {{ $tmpl->judul }} - {{ Str::limit($tmpl->pesan, 50) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('template_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Preview Pesan --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold">Preview Pesan</label>
                            <textarea id="previewPesan" class="form-control bg-light" rows="3" readonly></textarea>
                        </div>

                        {{-- Foto (opsional) --}}
                        <div class="col-12">
                            <label for="foto" class="form-label fw-semibold">
                                Foto <span class="text-muted fw-normal">(opsional)</span>
                            </label>

                            @if ($jadwalNotifikasi->foto)
                                <div class="mb-2" id="fotoLamaWrapper">
                                    <p class="form-text mb-1">Foto saat ini:</p>
                                    <img src="{{ Storage::disk('uploads')->url($jadwalNotifikasi->foto) }}"
                                        alt="Foto jadwal" class="img-thumbnail" style="max-height:150px;">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" name="hapus_foto" id="hapus_foto" value="1">
                                        <label class="form-check-label text-danger" for="hapus_foto">Hapus foto ini</label>
                                    </div>
                                </div>
                            @endif

                            <input type="file" name="foto" id="foto"
                                class="form-control @error('foto') is-invalid @enderror"
                                accept="image/*">
                            @error('foto')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Maks. 5 MB. Upload foto baru untuk mengganti foto yang ada.</div>
                            <div id="previewFoto" class="mt-2 d-none">
                                <img src="" alt="Preview foto baru" class="img-thumbnail" style="max-height:150px;">
                            </div>
                        </div>

                        <div class="col-12"><hr></div>

                        {{-- Tipe Target --}}
                        <div class="col-md-4">
                            <label for="tipe" class="form-label fw-semibold">
                                Tipe Target <span class="text-danger">*</span>
                            </label>
                            <select name="tipe" id="tipe"
                                class="form-select @error('tipe') is-invalid @enderror" required>
                                <option value="kelas" {{ old('tipe', $jadwalNotifikasi->tipe) === 'kelas' ? 'selected' : '' }}>Per Kelas</option>
                                <option value="jenjang" {{ old('tipe', $jadwalNotifikasi->tipe) === 'jenjang' ? 'selected' : '' }}>Per Jenjang</option>
                            </select>
                            @error('tipe')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Pilih Kelas --}}
                        <div class="col-md-8" id="wrapperKelas">
                            <label for="kode_target_kelas" class="form-label fw-semibold">
                                Pilih Kelas <span class="text-danger">*</span>
                            </label>
                            <select name="kode_target" id="kode_target_kelas" class="form-select">
                                <option value="">-- Pilih Kelas --</option>
                                @foreach ($kelasList as $kls)
                                    <option value="{{ $kls->kodekelas }}"
                                        {{ old('kode_target', $jadwalNotifikasi->kode_target) == $kls->kodekelas ? 'selected' : '' }}>
                                        {{ $kls->namakelas }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Pilih Jenjang --}}
                        <div class="col-md-8" id="wrapperJenjang">
                            <label for="kode_target_jenjang" class="form-label fw-semibold">
                                Pilih Jenjang <span class="text-danger">*</span>
                            </label>
                            <select name="kode_target" id="kode_target_jenjang" class="form-select">
                                <option value="">-- Pilih Jenjang --</option>
                                @foreach ($jenjangList as $jnj)
                                    <option value="{{ $jnj->kodejenjang }}"
                                        {{ old('kode_target', $jadwalNotifikasi->kode_target) == $jnj->kodejenjang ? 'selected' : '' }}>
                                        {{ $jnj->namajenjang }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12"><hr></div>

                        {{-- Frekuensi --}}
                        <div class="col-md-4">
                            <label for="frekuensi" class="form-label fw-semibold">
                                Frekuensi <span class="text-danger">*</span>
                            </label>
                            <select name="frekuensi" id="frekuensi"
                                class="form-select @error('frekuensi') is-invalid @enderror" required>
                                <option value="harian" {{ old('frekuensi', $jadwalNotifikasi->frekuensi) === 'harian' ? 'selected' : '' }}>Harian</option>
                                <option value="mingguan" {{ old('frekuensi', $jadwalNotifikasi->frekuensi) === 'mingguan' ? 'selected' : '' }}>Mingguan</option>
                                <option value="bulanan" {{ old('frekuensi', $jadwalNotifikasi->frekuensi) === 'bulanan' ? 'selected' : '' }}>Bulanan</option>
                            </select>
                            @error('frekuensi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Jam --}}
                        <div class="col-md-4">
                            <label for="jam" class="form-label fw-semibold">
                                Jam Pengiriman <span class="text-danger">*</span>
                            </label>
                            <input type="time" name="jam" id="jam"
                                class="form-control @error('jam') is-invalid @enderror"
                                value="{{ old('jam', substr($jadwalNotifikasi->jam, 0, 5)) }}" required>
                            @error('jam')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Hari Minggu --}}
                        <div class="col-md-4" id="wrapperHari">
                            <label for="hari_minggu" class="form-label fw-semibold">Hari</label>
                            <select name="hari_minggu" id="hari_minggu" class="form-select">
                                <option value="">-- Pilih Hari --</option>
                                @foreach (['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'] as $idx => $hari)
                                    <option value="{{ $idx }}"
                                        {{ old('hari_minggu', $jadwalNotifikasi->hari_minggu) == $idx ? 'selected' : '' }}>
                                        {{ $hari }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Tanggal --}}
                        <div class="col-md-4" id="wrapperTanggal">
                            <label for="tanggal" class="form-label fw-semibold">Tanggal</label>
                            <input type="number" name="tanggal" id="tanggal"
                                class="form-control @error('tanggal') is-invalid @enderror"
                                min="1" max="31"
                                value="{{ old('tanggal', $jadwalNotifikasi->tanggal) }}">
                        </div>

                        {{-- Status Aktif --}}
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="aktif" id="aktif" value="1"
                                    {{ old('aktif', $jadwalNotifikasi->aktif) ? 'checked' : '' }}>
                                <label class="form-check-label" for="aktif">Jadwal Aktif</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bx bx-save me-1"></i>Simpan Perubahan
                                </button>
                                <a href="{{ route('jadwal-notifikasi.index') }}" class="btn btn-secondary">
                                    Batal
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const tipeSelect      = document.getElementById('tipe');
            const frekuensiSelect = document.getElementById('frekuensi');
            const templateSelect  = document.getElementById('template_id');
            const preview         = document.getElementById('previewPesan');
            const fotoInput       = document.getElementById('foto');
            const previewFoto     = document.getElementById('previewFoto');

            fotoInput.addEventListener('change', function () {
                const file = this.files[0];
                if (file) {
                    previewFoto.querySelector('img').src = URL.createObjectURL(file);
                    previewFoto.classList.remove('d-none');
                } else {
                    previewFoto.classList.add('d-none');
                }
            });

            function toggleTarget() {
                const val = tipeSelect.value;
                document.getElementById('wrapperKelas').style.display   = val === 'kelas' ? '' : 'none';
                document.getElementById('wrapperJenjang').style.display = val === 'jenjang' ? '' : 'none';
                document.getElementById('kode_target_kelas').required   = val === 'kelas';
                document.getElementById('kode_target_jenjang').required = val === 'jenjang';
                document.getElementById('kode_target_kelas').disabled   = val !== 'kelas';
                document.getElementById('kode_target_jenjang').disabled = val !== 'jenjang';
            }

            function toggleFrekuensi() {
                const val = frekuensiSelect.value;
                document.getElementById('wrapperHari').style.display    = val === 'mingguan' ? '' : 'none';
                document.getElementById('wrapperTanggal').style.display = val === 'bulanan' ? '' : 'none';
            }

            tipeSelect.addEventListener('change', toggleTarget);
            frekuensiSelect.addEventListener('change', toggleFrekuensi);
            templateSelect.addEventListener('change', function () {
                preview.value = this.options[this.selectedIndex].dataset.pesan || '';
            });

            toggleTarget();
            toggleFrekuensi();
            if (templateSelect.value) {
                preview.value = templateSelect.options[templateSelect.selectedIndex].dataset.pesan || '';
            }
        })();
    </script>
</x-layout.app>