@extends('layouts.admin')
@section('title', 'Bulk Broadcasts')
@section('page', 'bulk-broadcasts')
@section('content')
<div class="page-content">
    <div class="page-head bulk-head">
        <div>
            <div class="breadcrumbs"><span><i class="bi bi-house-door me-1"></i> Dashboard</span><i class="bi bi-chevron-right"></i><span>Bulk Broadcasts</span></div>
            <h1 class="page-title">Bulk Broadcasts</h1>
            <p class="page-subtitle">Target patient segments and dispatch SMS & Mail campaigns</p>
        </div>
    </div>

    <section class="card-admin broadcast-studio-head">
        <div class="studio-title-wrap"><div class="studio-icon"><i class="bi bi-send"></i></div><div><h2>Advanced Bulk Broadcast Studio</h2><p>Target specific segments, compose personalized SMS & Mail broadcasts, and track delivery.</p></div></div>
        <div class="studio-tabs">
            <button class="studio-tab active" type="button" data-tab="composer">Campaign Composer & Targeting</button>
            <button class="studio-tab" type="button" data-tab="history">Broadcast History & Delivery Log <span>({{ $history->count() }})</span></button>
        </div>
    </section>

    <form method="POST" action="{{ route('admin.broadcasts.send') }}" id="composerForm">
        @csrf
        <input type="hidden" name="channel" id="channelInput" value="sms">
        <section id="view-composer" class="broadcast-workspace">
            <div class="card-admin audience-panel">
                <div class="broadcast-panel-head"><div class="broadcast-panel-title"><i class="bi bi-funnel"></i> Target Audience Selection</div></div>
                <div class="audience-body">
                    <label class="form-label">PATIENT SEGMENT</label>
                    <select class="form-select" name="segment" required>
                        @foreach($segments as $k=>$label)<option value="{{ $k }}">{{ $label }}</option>@endforeach
                    </select>
                    <div class="audience-filter-grid mt-3">
                        <div><label class="form-label">CLINICAL DISEASE / DIAGNOSIS</label><select class="form-select" name="diagnosis_id"><option value="">All</option>@foreach($diagnoses as $dx)<option value="{{ $dx->id }}">{{ $dx->name }}</option>@endforeach</select></div>
                    </div>
                    <div class="select-all-row mt-3"><label><i class="bi bi-info-circle me-1"></i> <span>The message is sent to every patient in the selected segment.</span></label></div>
                </div>
            </div>

            <div class="card-admin composer-panel">
                <div class="broadcast-panel-head composer-head">
                    <div class="broadcast-panel-title"><i class="bi bi-chat-square-text"></i> Message Composer</div>
                    <div class="channel-switch">
                        <button class="channel-btn active" type="button" data-channel="sms"><i class="bi bi-square"></i> SMS</button>
                        <button class="channel-btn" type="button" data-channel="email"><i class="bi bi-envelope"></i> Mail (Email)</button>
                    </div>
                </div>
                <div class="composer-body">
                    <div class="composer-title-grid">
                        <div><label class="form-label">Broadcast Campaign Title <span>*</span></label><input class="form-control" name="title" required placeholder="e.g. Follow-up Reminder"></div>
                        <div><label class="form-label">Load Template</label><select class="form-select" id="templateSelect"><option value="">-- Choose a template --</option>@foreach($templates as $t)<option value="{{ $t->id }}" data-subject="{{ $t->subject }}" data-body="{{ e($t->body) }}" data-channel="{{ $t->channel }}">{{ $t->name }} ({{ strtoupper($t->channel) }})</option>@endforeach</select></div>
                    </div>
                    <div id="subjectWrap" style="display:none" class="mt-2"><label class="form-label">Email Subject</label><input class="form-control" name="subject" id="subjectInput"></div>
                    <div class="variable-row mt-2"><label>Insert Patient Variables</label>
                        <div>
                            @foreach(['{patient_name}','{doctor_name}','{appointment_date}','{appointment_time}','{service_name}'] as $v)
                                <button class="variable-chip" type="button" data-variable="{{ $v }}">{{ $v }}</button>
                            @endforeach
                        </div>
                    </div>
                    <label class="form-label mt-2">Message <span>*</span></label>
                    <textarea class="form-control" name="message" id="messageInput" rows="5" required></textarea>
                    <div class="mt-3"><button class="btn-primary-teal" type="submit"><i class="bi bi-send me-1"></i> Send Broadcast</button></div>
                </div>
            </div>
        </section>
    </form>

    <section id="view-history" class="card-admin" style="display:none">
        <div class="panel-head"><div class="panel-title"><i class="bi bi-clock-history me-2"></i> Broadcast History</div></div>
        <div class="table-responsive"><table class="table admin-table mb-0"><thead><tr><th>Title</th><th>Channel</th><th>Recipients</th><th>Delivered</th><th>Failed</th><th>Status</th><th>Date</th></tr></thead><tbody>
            @forelse($history as $b)<tr><td>{{ $b->title }}</td><td>{{ strtoupper($b->channel) }}</td><td>{{ $b->recipients_count }}</td><td>{{ $b->delivered_count }}</td><td>{{ $b->failed_count }}</td><td><span class="status-pill {{ $b->status==='completed'?'status-paid':'status-pending' }}">{{ ucfirst($b->status) }}</span></td><td>{{ $b->created_at->format('d M Y, h:i A') }}</td></tr>@empty<tr><td colspan="7" class="text-center text-secondary py-3">No campaigns yet.</td></tr>@endforelse
        </tbody></table></div>
        <div class="panel-head mt-3"><div class="panel-title"><i class="bi bi-phone me-2"></i> SMS Delivery Log</div></div>
        <div class="table-responsive"><table class="table admin-table mb-0"><thead><tr><th>Recipient</th><th>Message</th><th>Gateway</th><th>Status</th><th>When</th></tr></thead><tbody>
            @forelse($logs as $l)<tr><td>{{ $l->recipient }}</td><td><small>{{ \Illuminate\Support\Str::limit($l->message,50) }}</small></td><td>{{ $l->gateway }}</td><td><span class="status-pill {{ $l->status==='sent'?'status-paid':'status-pending' }}">{{ ucfirst($l->status) }}</span></td><td>{{ $l->created_at->format('d M, h:i A') }}</td></tr>@empty<tr><td colspan="5" class="text-center text-secondary py-3">No SMS logs.</td></tr>@endforelse
        </tbody></table></div>
    </section>

    {{-- Template management: quick add --}}
    <section class="card-admin mt-3">
        <div class="panel-head"><div class="panel-title"><i class="bi bi-files me-2"></i> Message Templates</div></div>
        <div class="table-responsive"><table class="table admin-table mb-0"><thead><tr><th>Name</th><th>Channel</th><th>Subject</th><th>Action</th></tr></thead><tbody>
            @forelse($templates as $t)<tr><td>{{ $t->name }}</td><td>{{ strtoupper($t->channel) }}</td><td>{{ $t->subject ?? '—' }}</td><td><form method="POST" action="{{ route('admin.broadcasts.templates.destroy',$t) }}" class="d-inline" onsubmit="return confirm('Remove?')">@csrf @method('DELETE')<button class="action-btn red"><i class="bi bi-trash"></i></button></form></td></tr>@empty<tr><td colspan="4" class="text-center text-secondary py-3">No templates.</td></tr>@endforelse
        </tbody></table></div>
        <form method="POST" action="{{ route('admin.broadcasts.templates.store') }}" class="row g-2 p-3">
            @csrf
            <div class="col-md-3"><input class="form-control" name="name" placeholder="Template name" required></div>
            <div class="col-md-2"><select class="form-select" name="channel"><option value="sms">SMS</option><option value="email">Email</option></select></div>
            <div class="col-md-3"><input class="form-control" name="subject" placeholder="Subject (email)"></div>
            <div class="col-md-3"><input class="form-control" name="body" placeholder="Message body" required></div>
            <div class="col-md-1"><button class="btn-primary-teal w-100">Add</button></div>
        </form>
    </section>
</div>

@push('scripts')
<script>
(function(){
    // tabs
    document.querySelectorAll('.studio-tab').forEach(t=>t.addEventListener('click',()=>{
        document.querySelectorAll('.studio-tab').forEach(x=>x.classList.remove('active'));t.classList.add('active');
        document.getElementById('view-composer').style.display=t.dataset.tab==='composer'?'':'none';
        document.getElementById('view-history').style.display=t.dataset.tab==='history'?'':'none';
    }));
    // channel switch
    const chInput=document.getElementById('channelInput');
    document.querySelectorAll('.channel-btn').forEach(b=>b.addEventListener('click',()=>{
        document.querySelectorAll('.channel-btn').forEach(x=>x.classList.remove('active'));b.classList.add('active');
        chInput.value=b.dataset.channel;document.getElementById('subjectWrap').style.display=b.dataset.channel==='email'?'':'none';
    }));
    // variable chips
    document.querySelectorAll('.variable-chip').forEach(c=>c.addEventListener('click',()=>{
        const m=document.getElementById('messageInput');m.value+=c.dataset.variable;m.focus();
    }));
    // template load
    document.getElementById('templateSelect').addEventListener('change',function(){
        const o=this.selectedOptions[0];if(!o.value)return;
        document.getElementById('messageInput').value=o.dataset.body||'';document.getElementById('subjectInput').value=o.dataset.subject||'';
        document.querySelectorAll('.channel-btn').forEach(b=>{if(b.dataset.channel===o.dataset.channel)b.click();});
    });
})();
</script>
@endpush
@endsection