@extends('layouts.admin')

@section('title', 'Notification Delivery Logs')
@section('page-title', 'Delivery Logs')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <a href="{{ route('admin.notifications.index') }}" class="text-decoration-none text-secondary">
            <i class="bi bi-arrow-left"></i> Back to Notifications
        </a>
    </div>
</div>

<div class="row">
    <!-- Notification Details Summary Card -->
    <div class="col-lg-4 mb-4">
        <div class="admin-card">
            <h5 class="fw-bold mb-3">Notification Details</h5>
            <div class="mb-3">
                <span class="text-muted small d-block">Title</span>
                <strong class="text-dark">{{ $notification->title }}</strong>
            </div>
            <div class="mb-3">
                <span class="text-muted small d-block">Description</span>
                <p class="mb-0 text-secondary small text-wrap">{{ $notification->description }}</p>
            </div>
            <div class="mb-3">
                <span class="text-muted small d-block">Category</span>
                <span class="kids-badge badge-info-accent mt-1">{{ $notification->category }}</span>
            </div>
            <div class="mb-3">
                <span class="text-muted small d-block">Target Scope</span>
                <span class="text-uppercase fw-bold small text-primary">{{ $notification->target_type }}</span>
            </div>
            <div>
                <span class="text-muted small d-block">Created At</span>
                <small class="text-secondary">{{ $notification->created_at->format('d M Y - h:i A') }}</small>
            </div>
        </div>
    </div>

    <!-- Recipients Grid Logs -->
    <div class="col-lg-8 mb-4">
        <div class="admin-card">
            <h5 class="fw-bold mb-3">Recipient Delivery Details</h5>
            <div class="table-responsive">
                <table class="table align-middle hover-table mb-0">
                    <thead>
                        <tr class="text-muted small" style="border-bottom: 2px solid var(--border-color);">
                            <th class="py-3">Student</th>
                            <th class="py-3">Parent Details</th>
                            <th class="py-3">Status</th>
                            <th class="py-3">Read Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $log)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td class="py-3">
                                    <strong class="text-dark">{{ $log->student->name }}</strong>
                                    <div class="text-muted small font-monospace">{{ $log->student->roll_number }}</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">{{ $log->student->schoolClass->name }} - {{ $log->student->section->name }}</div>
                                </td>
                                <td class="py-3">
                                    <span class="fw-semibold text-dark">{{ $log->studentParent->name }}</span>
                                    <div class="text-muted small font-monospace"><i class="bi bi-telephone"></i> {{ $log->studentParent->mobile }}</div>
                                </td>
                                <td class="py-3">
                                    <span class="kids-badge {{ $log->status == 'Read' ? 'badge-success-accent' : ($log->status == 'Delivered' ? 'badge-info-accent' : 'badge-warning-accent') }}">
                                        {{ $log->status }}
                                    </span>
                                </td>
                                <td class="py-3 text-secondary small">
                                    {{ $log->read_at ? \Carbon\Carbon::parse($log->read_at)->format('d M Y - h:i A') : '--' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">No recipient logs recorded for this scope.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection