@extends('adminlte::page')

@section('title', 'Broadcast WhatsApp')

@section('content_header')
    <h1>Broadcast WhatsApp</h1>
@stop

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="fab fa-whatsapp"></i> Kirim Pesan Masal</h3>
            </div>
            
            <form action="{{ route('broadcast.send') }}" method="POST">
                @csrf
                <div class="card-body">
                    
                    {{-- Tampilkan Alert Sukses --}}
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <h5><i class="icon fas fa-check"></i> Berhasil!</h5>
                            {{ session('success') }}
                        </div>
                    @endif

                    {{-- Tampilkan Error Validasi --}}
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="form-group">
                        <label>Target Penerima</label>
                        <select name="target" id="targetSelect" class="form-control" onchange="toggleKelas()">
                            <option value="semua">Semua Siswa Aktif</option>
                            <option value="kelas_tertentu">Kelas Tertentu</option>
                            <option value="menunggak">Siswa Menunggak SPP</option>
                        </select>
                    </div>

                    {{-- Dropdown Kelas (Hanya muncul jika Target = Kelas Tertentu) --}}
                    <div class="form-group" id="kelasContainer" style="display: none;">
                        <label>Pilih Kelas</label>
                        <select name="kelas_id" class="form-control">
                            <option value="">-- Pilih Kelas --</option>
                            @foreach($kelases as $kelas)
                                <option value="{{ $kelas->id }}">{{ $kelas->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Isi Pesan</label>
                        <textarea name="pesan" class="form-control" rows="5" placeholder="Assalamualaikum, diberitahukan bahwa..." required></textarea>
                        <small class="text-muted">Pesan akan dikirim ke nomor WhatsApp Wali Murid.</small>
                    </div>
                </div>

                <div class="card-footer text-right">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane mr-1"></i> Kirim Pesan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Script Sederhana untuk Show/Hide Dropdown Kelas --}}
<script>
    function toggleKelas() {
        var target = document.getElementById('targetSelect').value;
        var kelasDiv = document.getElementById('kelasContainer');
        
        if (target === 'kelas_tertentu') {
            kelasDiv.style.display = 'block';
        } else {
            kelasDiv.style.display = 'none';
        }
    }
</script>
@stop