@extends('backend.layouts.app')

@section('content')

<style>
.nl-wrapper { padding: 4px 0; }
.nl-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.nl-page-header h1 { font-size:20px; font-weight:700; color:#1a202c; margin:0; }
.nl-page-header h1 span { background:linear-gradient(135deg,#f05a7e,#f6845a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.nl-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,0.07); overflow:hidden; }
.nl-card-header { padding:16px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
.nl-card-header h5 { font-size:15px; font-weight:700; color:#1a202c; margin:0; }

.nl-table { width:100%; border-collapse:collapse; }
.nl-table thead th { background:#f8fafc; padding:11px 16px; font-size:11px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid #f0f0f0; white-space:nowrap; }
.nl-table tbody tr { border-bottom:1px solid #f7f7f7; transition:background .15s; }
.nl-table tbody tr:hover { background:#fef8f9; }
.nl-table tbody td { padding:14px 16px; font-size:13px; color:#2d3748; vertical-align:middle; }

.nl-thumb { width:56px; height:56px; border-radius:10px; object-fit:cover; }
.nl-thumb-placeholder { width:56px; height:56px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:20px; }

/* Status badges */
.nl-stat { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:50px; font-size:12px; font-weight:700; }
.nl-stat-sent    { background:#ebf8ff; color:#2b6cb0; }
.nl-stat-read    { background:#eaf3de; color:#3b6d11; }
.nl-stat-unread  { background:#faeeda; color:#854f0b; }
.nl-stat-rate    { background:#f1efe8; color:#5f5e5a; }

/* Progress bar */
.nl-progress { height:6px; border-radius:3px; background:#e2e8f0; overflow:hidden; width:100px; margin-top:4px; }
.nl-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#48bb78,#38a169); }

.nl-btn-view { background:#ebf8ff; color:#2b6cb0; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s; }
.nl-btn-view:hover { background:#bee3f8; }
</style>

<div class="nl-wrapper">
<div class="nl-page-header">
    <h1>Sent <span>Notifications</span></h1>
</div>

<div class="nl-card">
    <div class="nl-card-header">
        <h5>Notification History</h5>
    </div>
    <div class="table-responsive">
        <table class="nl-table">
            <thead>
                <tr>
                    <th style="width:40px;">
                        <label class="aiz-checkbox mb-0">
                            <input type="checkbox" class="check-all">
                            <span class="aiz-square-check"></span>
                        </label>
                    </th>
                    <th>{{ translate('Thumbnail') }}</th>
                    <th>{{ translate('Title & Message') }}</th>
                    <th>{{ translate('Sent To') }}</th>
                    <th>{{ translate('Read Status') }}</th>
                    <th>{{ translate('Date') }}</th>
                    <th class="text-right">{{ translate('Action') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($getSendedNotificationList as $key => $value)
                @php
                    $sentCount  = \Illuminate\Support\Facades\DB::table('firebase_notifications')
                        ->where('single_notification_id', $value->id)->count();
                    $readCount  = \Illuminate\Support\Facades\DB::table('firebase_notifications')
                        ->where('single_notification_id', $value->id)->where('is_read', 1)->count();
                    $unreadCount = $sentCount - $readCount;
                    $readPct = $sentCount > 0 ? round(($readCount / $sentCount) * 100) : 0;
                @endphp
                <tr>
                    <td>
                        <label class="aiz-checkbox mb-0">
                            <input type="checkbox" class="check-one" name="userId[]" value="{{ $value->id }}">
                            <span class="aiz-square-check"></span>
                        </label>
                    </td>
                    <td>
                        @if($value->thumbnail_image)
                            <img src="{{ asset('public/assets/img/notification/' . $value->thumbnail_image) }}"
                                 class="nl-thumb" onerror="this.style.display='none'">
                        @else
                            <div class="nl-thumb-placeholder">🔔</div>
                        @endif
                    </td>
                    <td>
                        <div style="font-weight:700;font-size:13px;max-width:220px;">{{ $value->title }}</div>
                        <div style="font-size:12px;color:#718096;margin-top:3px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                            {{ $value->message }}
                        </div>
                    </td>
                    <td>
                        <span class="nl-stat nl-stat-sent">
                            📤 {{ $sentCount }} users
                        </span>
                    </td>
                    <td>
                        @if($sentCount > 0)
                            <div class="d-flex align-items-center gap-10 flex-wrap">
                                <span class="nl-stat nl-stat-read">✅ {{ $readCount }} read</span>
                                @if($unreadCount > 0)
                                    <span class="nl-stat nl-stat-unread">⏳ {{ $unreadCount }} unread</span>
                                @endif
                            </div>
                            <div class="nl-progress mt-2">
                                <div class="nl-progress-fill" style="width:{{ $readPct }}%"></div>
                            </div>
                            <div style="font-size:10px;color:#a0aec0;margin-top:2px;">{{ $readPct }}% read rate</div>
                        @else
                            <span style="font-size:12px;color:#a0aec0;">No data</span>
                        @endif
                    </td>
                    <td style="font-size:12px;color:#718096;white-space:nowrap;">
                        {{ $value->created_at->format('d M Y') }}<br>
                        <span style="font-size:11px;">{{ $value->created_at->format('h:i A') }}</span>
                    </td>
                    <td class="text-right">
                        <button class="nl-btn-view" onclick="displayUserList({{ $value->id }})">
                            👥 View Users
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div style="font-size:48px;margin-bottom:12px;">🔔</div>
                        <p style="color:#718096;">{{ translate('No notifications sent yet') }}</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3">
        {{ $getSendedNotificationList->appends(request()->input())->links() }}
    </div>
</div>
</div>

{{-- User List Modal --}}
<div class="modal fade" id="notificationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="border-radius:16px;overflow:hidden;">
            <div class="modal-header" style="background:linear-gradient(135deg,#f05a7e,#f6845a);border:none;">
                <h5 class="modal-title h6 text-white">👥 Notification Recipients</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0" style="font-size:13px;">
                        <thead style="background:#f8fafc;">
                            <tr>
                                <th style="padding:10px 16px;font-size:11px;color:#718096;text-transform:uppercase;">Name</th>
                                <th style="padding:10px 16px;font-size:11px;color:#718096;text-transform:uppercase;">User Type</th>
                                <th style="padding:10px 16px;font-size:11px;color:#718096;text-transform:uppercase;">Phone</th>
                                <th style="padding:10px 16px;font-size:11px;color:#718096;text-transform:uppercase;">Status</th>
                            </tr>
                        </thead>
                        <tbody id="notificationDetailsBody">
                            <tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    $(document).on("change", ".check-all", function() {
        $('.check-one').prop('checked', this.checked);
    });

    function displayUserList(id) {
        $('#notificationDetailsBody').html('<tr><td colspan="4" class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary"></div> Loading...</td></tr>');
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            url: "{{ route('notification-user-list') }}",
            type: 'POST',
            data: { id: id },
            success: function(response) {
                $('#notificationDetailsBody').html(response.html);
            },
            error: function() {
                $('#notificationDetailsBody').html('<tr><td colspan="4" class="text-center text-danger">Error loading data</td></tr>');
            }
        });
        $('#notificationModal').modal('show');
    }
</script>
@endsection