@extends('layouts.admin')
@section('title', $schedule->title)

@section('content')
    <a href="{{ route('admin.schedules.index') }}" class="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink mb-4">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        Kembali
    </a>

    <div class="grid md:grid-cols-3 gap-5">
        <div class="md:col-span-2 bg-white rounded-xl border border-line p-6 md:p-8">
            <div class="text-xl font-semibold">{{ $schedule->title }}</div>
            <div class="text-sm text-muted mt-1">{{ $schedule->summary }}</div>
            @if ($schedule->description)
                <p class="text-sm text-slate-600 mt-4">{{ $schedule->description }}</p>
            @endif

            <div class="grid grid-cols-2 gap-3 mt-6">
                @php
                    $facts = [
                        ['Status', $schedule->is_active ? 'Aktif' : 'Nonaktif'],
                        ['Pengulangan', $schedule->is_recurring ? ucfirst($schedule->recurrence_type) : 'Sekali jalan'],
                        ['Nada alarm', $schedule->alarmSound?->name ?? 'Default'],
                        ['Alarm berikutnya', $schedule->next_trigger_at?->format('d M Y, H:i') ?? '—'],
                        ['Terakhir bunyi', $schedule->last_triggered_at?->format('d M Y, H:i') ?? '—'],
                    ];
                @endphp
                @foreach ($facts as [$k, $v])
                    <div class="rounded-lg border border-line px-4 py-3">
                        <div class="text-xs text-muted">{{ $k }}</div>
                        <div class="text-sm font-medium mt-0.5">{{ $v }}</div>
                    </div>
                @endforeach
            </div>

            @if ($schedule->alarmSound?->sound_url)
                <div class="mt-5">
                    <div class="text-xs text-muted mb-1.5">Preview audio</div>
                    <audio controls preload="none" class="h-9 w-full"><source src="{{ $schedule->alarmSound->sound_url }}"></audio>
                </div>
            @endif
        </div>

        <div class="bg-white rounded-xl border border-line p-6">
            <h3 class="font-semibold text-sm mb-4">Peserta ({{ $schedule->participants->count() }})</h3>
            <div class="space-y-3">
                @foreach ($schedule->participants as $p)
                    <div class="flex items-center gap-3">
                        <span class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-semibold"
                              style="background:{{ $p->avatar_color ?? '#4F46E5' }}">
                            {{ strtoupper(mb_substr($p->name,0,1)) }}
                        </span>
                        <div>
                            <div class="text-sm font-medium">{{ $p->name }}</div>
                            @if ($p->pivot->is_owner)<div class="text-xs text-accent">Pemilik</div>@endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection