@extends('layouts.app')

@section('title', $campaign->name)

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">{{ $campaign->name }}</h1>
        <p class="page-subtitle">
            <span class="badge badge-{{ $campaign->status_color }}">{{ $campaign->status_label }}</span>
            · {{ number_format($campaign->total_recipients) }} penerima
            · Dibuat {{ $campaign->created_at->locale('id')->diffForHumans() }}
        </p>
    </div>
    <div class="page-actions">
        <a href="{{ route('broadcast.index') }}" class="btn btn-secondary">Kembali</a>
        @if(in_array($campaign->status, ['draft','scheduled']))
        <form method="POST" action="{{ route('broadcast.send', $campaign) }}">
            @csrf
            <button type="submit" class="btn btn-primary"
                    onclick="return confirm('Kirim ke {{ $campaign->total_recipients }} penerima sekarang?')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                Kirim Sekarang
            </button>
        </form>
        @endif
        @if($campaign->status === 'running')
        <form method="POST" action="{{ route('broadcast.cancel', $campaign) }}">
            @csrf
            <button type="submit" class="btn btn-danger btn-sm">Batalkan</button>
        </form>
        @endif
    </div>
</div>

{{-- Summary --}}
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:1rem;">
    <div class="stat-card">
        <div><div class="stat-value">{{ $campaign->total_recipients }}</div><div class="stat-label">Total Penerima</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value" style="color:var(--success);">{{ $campaign->sent_count }}</div><div class="stat-label">Terkirim</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value" style="color:var(--danger);">{{ $campaign->failed_count }}</div><div class="stat-label">Gagal</div></div>
    </div>
    <div class="stat-card">
        <div>
            <div class="stat-value">{{ $campaign->success_rate }}%</div>
            <div class="stat-label">Success Rate</div>
            @if($campaign->total_recipients > 0)
            <div style="height:4px;background:var(--gray-200);border-radius:2px;margin-top:.5rem;overflow:hidden;">
                <div style="height:100%;background:var(--success);width:{{ $campaign->success_rate }}%;border-radius:2px;"></div>
            </div>
            @endif
        </div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start;">

    {{-- Recipients table --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Daftar Penerima</span>
            <span style="font-size:.8125rem;color:var(--gray-500);">{{ $recipients->total() }} total</span>
        </div>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Nama / Nomor</th>
                        <th>Status</th>
                        <th>Waktu Kirim</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($recipients as $r)
                    <tr>
                        <td>
                            <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);">{{ $r->name ?? $r->wa_number }}</div>
                            <div class="text-small text-muted">{{ $r->wa_number }}</div>
                        </td>
                        <td>
                            @php
                            $colors = ['pending'=>'gray','sent'=>'blue','delivered'=>'green','failed'=>'red'];
                            @endphp
                            <span class="badge badge-{{ $colors[$r->status] ?? 'gray' }}">{{ ucfirst($r->status) }}</span>
                        </td>
                        <td class="text-small text-muted">
                            {{ $r->sent_at ? $r->sent_at->locale('id')->isoFormat('D MMM, HH:mm') : '—' }}
                        </td>
                        <td class="text-small text-muted">
                            {{ $r->error_message ? Str::limit($r->error_message, 40) : '—' }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($recipients->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">{{ $recipients->firstItem() }}–{{ $recipients->lastItem() }} dari {{ $recipients->total() }}</div>
            <div class="pagination">
                @if(!$recipients->onFirstPage())<a class="page-link" href="{{ $recipients->previousPageUrl() }}">‹</a>@endif
                @foreach($recipients->getUrlRange(max(1,$recipients->currentPage()-2),min($recipients->lastPage(),$recipients->currentPage()+2)) as $p => $url)
                <a class="page-link {{ $p===$recipients->currentPage()?'active':'' }}" href="{{ $url }}">{{ $p }}</a>
                @endforeach
                @if($recipients->hasMorePages())<a class="page-link" href="{{ $recipients->nextPageUrl() }}">›</a>@endif
            </div>
        </div>
        @endif
    </div>

    {{-- Campaign info --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Detail Kampanye</span></div>
        <div class="card-body" style="display:flex;flex-direction:column;gap:.875rem;">
            <div>
                <div class="text-small text-muted">Status</div>
                <span class="badge badge-{{ $campaign->status_color }}" style="margin-top:.25rem;">{{ $campaign->status_label }}</span>
            </div>
            <div>
                <div class="text-small text-muted">Dibuat oleh</div>
                <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $campaign->createdBy?->name ?? '—' }}</div>
            </div>
            @if($campaign->scheduled_at)
            <div>
                <div class="text-small text-muted">Dijadwalkan</div>
                <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $campaign->scheduled_at->locale('id')->isoFormat('D MMM YYYY, HH:mm') }}</div>
            </div>
            @endif
            @if($campaign->started_at)
            <div>
                <div class="text-small text-muted">Dimulai</div>
                <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $campaign->started_at->locale('id')->isoFormat('D MMM YYYY, HH:mm') }}</div>
            </div>
            @endif
            @if($campaign->completed_at)
            <div>
                <div class="text-small text-muted">Selesai</div>
                <div style="font-size:.875rem;color:var(--gray-800);margin-top:.25rem;">{{ $campaign->completed_at->locale('id')->isoFormat('D MMM YYYY, HH:mm') }}</div>
            </div>
            @endif
            <div style="padding-top:.875rem;border-top:1px solid var(--gray-100);">
                <div class="text-small text-muted" style="margin-bottom:.5rem;">Isi Pesan</div>
                <div style="font-size:.8125rem;color:var(--gray-700);background:var(--gray-50);border-radius:var(--radius);padding:.75rem;line-height:1.6;white-space:pre-wrap;">{{ $campaign->message }}</div>
            </div>
        </div>
    </div>
</div>

@endsection