@extends('layouts.app')

@section('title', 'Kirim Pesan - SIAKAD')
@section('page-title', 'Kirim Pesan Baru')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Buat Pesan</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.pesan.store') }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Tipe Penerima</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="receiver_type_option" id="individual" value="individual" checked>
                            <label class="btn btn-outline-primary" for="individual">
                                <i class="bi bi-person me-1"></i>Pribadi
                            </label>

                            <input type="radio" class="btn-check" name="receiver_type_option" id="broadcast_dosen" value="dosen">
                            <label class="btn btn-outline-success" for="broadcast_dosen">
                                <i class="bi bi-people me-1"></i>Semua Dosen
                            </label>

                            <input type="radio" class="btn-check" name="receiver_type_option" id="broadcast_mahasiswa" value="mahasiswa">
                            <label class="btn btn-outline-warning" for="broadcast_mahasiswa">
                                <i class="bi bi-mortarboard me-1"></i>Semua Mhs
                            </label>
                        </div>
                    </div>

                    <div class="mb-3" id="receiverSelect">
                        <label for="receiver_id" class="form-label">Pilih Penerima</label>
                        <select name="receiver_id" id="receiver_id" class="form-select">
                            <option value="">-- Pilih User --</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->role }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="subject" class="form-label">Subjek</label>
                        <input type="text" class="form-control @error('subject') is-invalid @enderror"
                               id="subject" name="subject" value="{{ old('subject') }}" required>
                        @error('subject')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Isi Pesan</label>
                        <textarea class="form-control @error('content') is-invalid @enderror"
                                  id="content" name="content" rows="6" required>{{ old('content') }}</textarea>
                        @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send me-1"></i>Kirim Pesan
                        </button>
                        <a href="{{ route('admin.pesan.index') }}" class="btn btn-secondary">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Petunjuk</h5>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li><strong>Pribadi:</strong> Kirim ke satu user tertentu</li>
                    <li><strong>Semua Dosen:</strong> Broadcast ke seluruh dosen aktif</li>
                    <li><strong>Semua Mhs:</strong> Broadcast ke seluruh mahasiswa aktif</li>
                </ul>
                <hr>
                <small class="text-muted">
                    Pesan broadcast akan dikirim ke semua recipient secara individual.
                </small>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="receiver_type_option"]');
    const receiverSelect = document.getElementById('receiverSelect');
    const receiverId = document.getElementById('receiver_id');

    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'individual') {
                receiverSelect.style.display = 'block';
                receiverId.required = true;
            } else {
                receiverSelect.style.display = 'none';
                receiverId.required = false;
            }
        });
    });
});
</script>
@endpush
@endsection