@extends('layouts.app')
@section('title', 'Compose Message')
@section('page_title', 'Send Message')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('communication.index') }}">Communication</a></li><li class="breadcrumb-item active">Compose</li>
@endsection

@section('content')
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card"><div class="card-body">
                <form method="POST" action="{{ route('communication.send') }}">
                    @csrf
                    @if($errors->any())<div class="alert alert-danger small">{{ $errors->first() }}</div>@endif

                    <label class="form-label">Channel</label>
                    <div class="d-flex gap-2 mb-3">
                        @foreach(App\Models\CommunicationLog::CHANNELS as $val => $label)
                            <input type="radio" class="btn-check" name="channel" id="ch{{ $val }}" value="{{ $val }}" @checked(old('channel', request('channel','sms'))===$val)>
                            <label class="btn btn-outline-primary" for="ch{{ $val }}">
                                <i class="bi bi-{{ ['sms'=>'chat-text','whatsapp'=>'whatsapp','email'=>'envelope'][$val] }} me-1"></i>{{ $label }}
                            </label>
                        @endforeach
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Audience</label>
                        <select name="audience" id="audience" class="form-select">
                            @php $aud = old('audience', request('audience','all_parents')); @endphp
                            <option value="all_parents" @selected($aud==='all_parents')>All Parents</option>
                            <option value="class_parents" @selected($aud==='class_parents')>Parents of a Class</option>
                            <option value="defaulters" @selected($aud==='defaulters')>Fee Defaulters</option>
                            <option value="all_staff" @selected($aud==='all_staff')>All Staff</option>
                            <option value="custom" @selected($aud==='custom')>Custom (numbers / emails)</option>
                        </select>
                    </div>

                    <div class="mb-3 d-none" id="classWrap">
                        <label class="form-label">Class</label>
                        <select name="class_id" class="form-select">
                            <option value="">— Select class —</option>
                            @foreach($classes as $c)<option value="{{ $c->id }}" @selected(old('class_id')==$c->id)>{{ $c->name }}</option>@endforeach
                        </select>
                    </div>

                    <div class="mb-3 d-none" id="customWrap">
                        <label class="form-label">Recipients</label>
                        <textarea name="custom" rows="2" class="form-control" placeholder="Comma or newline separated numbers / emails">{{ old('custom', request('to')) }}</textarea>
                    </div>

                    <div class="mb-3 d-none" id="subjectWrap">
                        <label class="form-label">Subject</label>
                        <input type="text" name="subject" value="{{ old('subject') }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea name="body" rows="5" class="form-control" maxlength="2000" required>{{ old('body') }}</textarea>
                    </div>

                    <button class="btn btn-primary"><i class="bi bi-send me-1"></i>Send Message</button>
                    <a href="{{ route('communication.index') }}" class="btn btn-light border">Cancel</a>
                </form>
            </div></div>
        </div>
        <div class="col-lg-4">
            <div class="card"><div class="card-body">
                <h6><i class="bi bi-info-circle me-1"></i>How it works</h6>
                <ul class="small text-muted ps-3 mb-0">
                    <li>SMS & WhatsApp are logged as sent (connect a gateway to deliver live).</li>
                    <li>Email is delivered through the configured mailer.</li>
                    <li>Recipients without a phone/email for the chosen channel are skipped.</li>
                    <li>Every message is recorded in the communication log.</li>
                </ul>
            </div></div>
        </div>
    </div>

    @push('scripts')
    <script>
        function toggle(){
            const aud=document.getElementById('audience').value;
            const ch=document.querySelector('input[name=channel]:checked').value;
            document.getElementById('classWrap').classList.toggle('d-none', aud!=='class_parents');
            document.getElementById('customWrap').classList.toggle('d-none', aud!=='custom');
            document.getElementById('subjectWrap').classList.toggle('d-none', ch!=='email');
        }
        document.getElementById('audience').addEventListener('change', toggle);
        document.querySelectorAll('input[name=channel]').forEach(r=>r.addEventListener('change', toggle));
        toggle();
    </script>
    @endpush
@endsection
