@extends('layouts.app')

@section('title', 'Log Notifikasi')
@section('subtitle', 'Riwayat pengiriman reminder dan notifikasi')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <span class="text-sm font-medium text-secondary-700">Reminder Log</span>
    </li>
@endsection

@section('content')
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-emerald-500">
        <p class="text-2xl font-bold text-emerald-600">{{ $stats['total_sent'] ?? 0 }}</p>
        <p class="text-xs text-secondary-500">Terkirim</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-rose-500">
        <p class="text-2xl font-bold text-rose-600">{{ $stats['total_failed'] ?? 0 }}</p>
        <p class="text-xs text-secondary-500">Gagal</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-primary-500">
        <p class="text-2xl font-bold text-primary-600">{{ $stats['sent_today'] ?? 0 }}</p>
        <p class="text-xs text-secondary-500">Hari Ini</p>
    </div>
    <div class="glass-card rounded-xl p-4 text-center border-l-4 border-amber-500">
        <p class="text-2xl font-bold text-amber-600">{{ $logs->where('status', 'pending')->count() }}</p>
        <p class="text-xs text-secondary-500">Pending</p>
    </div>
</div>

<!-- Filters -->
<div class="glass-card rounded-2xl p-4 mb-6">
    <form action="{{ route('reminders.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
        <div class="flex items-center space-x-2">
            <span class="text-sm text-secondary-500">Status:</span>
            <select name="status" class="px-3 py-1.5 bg-white border border-secondary-200 rounded-lg text-sm">
                <option value="">Semua</option>
                <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Terkirim</option>
                <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Gagal</option>
                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            </select>
        </div>
        <div class="flex items-center space-x-2">
            <span class="text-sm text-secondary-500">Channel:</span>
            <select name="channel" class="px-3 py-1.5 bg-white border border-secondary-200 rounded-lg text-sm">
                <option value="">Semua</option>
                <option value="email" {{ request('channel') == 'email' ? 'selected' : '' }}>Email</option>
                <option value="telegram" {{ request('channel') == 'telegram' ? 'selected' : '' }}>Telegram</option>
            </select>
        </div>
        <button type="submit" class="px-4 py-1.5 bg-primary-500 text-white rounded-lg text-sm hover:bg-primary-600">Filter</button>
    </form>
</div>

<!-- Table -->
<div class="glass-card rounded-2xl overflow-hidden">
    <table class="w-full">
        <thead class="bg-secondary-50/50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Waktu</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Tipe</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Pegawai</th>
                <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase">Channel</th>
                <th class="px-6 py-4 text-center text-xs font-semibold text-secondary-500 uppercase">Status</th>
                <th class="px-6 py-4 text-right text-xs font-semibold text-secondary-500 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
            @forelse($logs as $log)
                <tr class="hover:bg-white/60 transition-colors">
                    <td class="px-6 py-4 text-sm text-secondary-700">
                        {{ $log->created_at->format('d M Y H:i') }}
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 rounded-lg text-xs font-medium bg-{{ strpos($log->reminder_type, '7') !== false ? 'amber' : (strpos($log->reminder_type, '1') !== false ? 'rose' : 'primary') }}-100 text-{{ strpos($log->reminder_type, '7') !== false ? 'amber' : (strpos($log->reminder_type, '1') !== false ? 'rose' : 'primary') }}-700">
                            {{ $log->getTypeLabelAttribute() }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-medium text-secondary-800">{{ $log->employee->name ?? 'Unknown' }}</p>
                        @if($log->employeeAccessDetail)
                            <p class="text-xs text-secondary-500">{{ $log->employeeAccessDetail->accessCatalog->name ?? '' }}</p>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2 py-1 rounded-lg text-xs font-medium {{ $log->channel === 'email' ? 'bg-blue-100 text-blue-700' : ($log->channel === 'telegram' ? 'bg-sky-100 text-sky-700' : 'bg-purple-100 text-purple-700') }}">
                            <i class="fa {{ $log->channel === 'email' ? 'fa-envelope' : ($log->channel === 'telegram' ? 'fa-telegram' : 'fa-whatsapp') }} mr-1"></i>
                            {{ ucfirst($log->channel) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        @if($log->status === 'sent')
                          <span class="inline-flex items-center gap-2 px-2 py-1 rounded-full bg-emerald-50">
                                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                                <span class="text-emerald-700 text-xs font-medium">Terkirim</span>
                            </span>

                        @elseif($log->status === 'failed')
                            <span class="w-2.5 h-2.5 rounded-full bg-rose-400 inline-block"></span>
                        @else
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block animate-pulse"></span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        @if($log->status === 'failed')
                            <form action="{{ route('reminders.resend', $log) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="p-2 text-primary-600 hover:bg-primary-50 rounded-lg" title="Kirim Ulang">
                                    <i class="fas fa-redo"></i>
                                </button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-secondary-400">
                        <i class="fas fa-inbox text-3xl mb-2"></i>
                        <p>Belum ada log notifikasi</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if($logs->hasPages())
        <div class="px-6 py-4 border-t border-secondary-100">
            {{ $logs->links() }}
        </div>
    @endif
</div>
@endsection