@extends('layouts.admin')

@section('page_kicker', 'Sessions')
@section('page_title', 'Online sessions')

@section('content')
    <div class="admin-content-card">
        <p class="text-sm leading-relaxed text-slate-600">Starting a session marks the visit active and points you to real-time chat. Voice and video can follow the same channel or deep links later.</p>
        <div class="mt-8 space-y-4">
            @forelse($active as $appt)
                <div class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-slate-100 bg-gradient-to-r from-white to-slate-50/80 p-5 shadow-sm">
                    <div>
                        <p class="font-semibold text-slate-900">{{ $appt->patient->name ?? 'Patient' }}</p>
                        <p class="text-xs text-slate-500">{{ optional($appt->scheduled_at)->format('M j, Y g:i A') }} · {{ $appt->channel ?? 'chat' }}</p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <form method="POST" action="{{ route('aim4wellness.sessions.start', $appt) }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="admin-btn-primary px-4 py-2 text-xs">Start session</button>
                        </form>
                        <form method="POST" action="{{ route('aim4wellness.sessions.end', $appt) }}" onsubmit="return confirm('End this session?');">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="admin-btn-secondary px-4 py-2 text-xs">End session</button>
                        </form>
                        <a href="{{ route('aim4wellness.chat') }}" class="admin-btn-dark px-4 py-2 text-xs">Open chat</a>
                    </div>
                </div>
            @empty
                <p class="text-sm text-slate-500">No active or scheduled sessions.</p>
            @endforelse
        </div>
    </div>
@endsection