@extends('admin.layout.index')

@section('title', 'Notification Details')

@section('content')
    <div class="row mb-3">
        <div class="col-12 d-flex align-items-center justify-content-between">
            <div>
                <h4 class="mb-0">NOTIFICATION ID: #NTF-{{ str_pad($notification->id, 3, '0', STR_PAD_LEFT) }}</h4>
            </div>
            <div>
                <a href="{{ route('admin.notifications.index') }}" class="btn btn-light">
                    <i class="ri-arrow-left-line me-1"></i> Back to Notifications
                </a>
            </div>
        </div>
    </div>

    <!-- Delivery Stats -->
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Sent</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                {{ number_format($notification->total_sent) }}
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                <i class="ri-send-plane-line text-primary"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Delivered</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                @if ($notification->total_delivered >= 1000)
                                    {{ number_format($notification->total_delivered / 1000, 2) }}k
                                @else
                                    {{ number_format($notification->total_delivered) }}
                                @endif
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                <i class="ri-checkbox-circle-line text-success"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Failed</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                {{ number_format($notification->total_failed) }}
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                <i class="ri-close-circle-line text-danger"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Opened</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                @php
                                    $totalOpened = $notification->logs()->whereNotNull('opened_at')->count();
                                @endphp
                                @if ($totalOpened >= 1000)
                                    {{ number_format($totalOpened / 1000, 2) }}k
                                @else
                                    {{ number_format($totalOpened) }}
                                @endif
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-info-subtle rounded fs-3">
                                <i class="ri-eye-line text-info"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>

    <!-- Notification Information -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Notification Information</h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="d-flex align-items-start gap-3 p-3 border rounded">
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-primary-subtle rounded fs-4">
                                        <i class="ri-notification-line text-primary"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <label class="form-label text-muted mb-1">Title</label>
                                    <h6 class="mb-0 fw-semibold">{{ $notification->title }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex align-items-start gap-3 p-3 border rounded">
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-4">
                                        <i class="ri-group-line text-info"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <label class="form-label text-muted mb-1">Audience</label>
                                    <div>
                                        @php
                                            $badgeClass = match ($notification->target_os) {
                                                'android' => 'bg-success',
                                                'ios' => 'bg-info',
                                                'all' => 'bg-primary',
                                                default => 'bg-secondary',
                                            };
                                        @endphp
                                        <span
                                            class="badge {{ $badgeClass }}">{{ ucfirst($notification->target_os) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex align-items-start gap-3 p-3 border rounded">
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-warning-subtle rounded fs-4">
                                        <i class="ri-time-line text-warning"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <label class="form-label text-muted mb-1">Scheduled Time</label>
                                    <h6 class="mb-0">
                                        {{ $notification->scheduled_at ? $notification->scheduled_at->format('Y-m-d h:i A') : $notification->created_at->format('Y-m-d h:i A') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex align-items-start gap-3 p-3 border rounded">
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-4">
                                        <i class="ri-checkbox-circle-line text-success"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <label class="form-label text-muted mb-1">Status</label>
                                    <div>
                                        @php
                                            $statusBadge = match ($notification->status) {
                                                'delivered' => 'bg-success',
                                                'scheduled' => 'bg-warning',
                                                'processing' => 'bg-info',
                                                'failed' => 'bg-danger',
                                                'pending' => 'bg-secondary',
                                                default => 'bg-secondary',
                                            };
                                        @endphp
                                        <span
                                            class="badge {{ $statusBadge }}">{{ ucfirst($notification->status) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex align-items-start gap-3 p-3 border rounded">
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-secondary-subtle rounded fs-4">
                                        <i class="ri-message-line text-secondary"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <label class="form-label text-muted mb-2">Message</label>
                                    <p class="mb-0">{{ $notification->message }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Delivery Logs Section - Commented for future use --}}
    {{-- <div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">Delivery Logs</h5>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm" style="width:140px;">
                        <option>All Status</option>
                        <option>Delivered</option>
                        <option>Failed</option>
                        <option>Pending</option>
                    </select>
                    <button class="btn btn-danger btn-sm" id="deleteSelectedBtn" style="display:none;">
                        <i class="ri-delete-bin-line me-1"></i> Delete Selected
                    </button>
                    <button class="btn btn-soft-primary btn-sm">
                        <i class="ri-download-line me-1"></i> Export CSV
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-middle nowrap" id="deliveryLogsTable">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </div>
                                </th>
                                <th>User ID</th>
                                <th>Device</th>
                                <th>OS Version</th>
                                <th>Status</th>
                                <th>Delivered At</th>
                                <th>Opened At</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="1">
                                    </div>
                                </td>
                                <td>USR-1024</td>
                                <td>Samsung Galaxy S21</td>
                                <td>Android 12</td>
                                <td><span class="badge bg-success">Delivered</span></td>
                                <td>2024-06-12 09:00:15</td>
                                <td>2024-06-12 09:02:34</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="2">
                                    </div>
                                </td>
                                <td>USR-1042</td>
                                <td>Google Pixel 6</td>
                                <td>Android 13</td>
                                <td><span class="badge bg-success">Delivered</span></td>
                                <td>2024-06-12 09:00:22</td>
                                <td>2024-06-12 09:05:12</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="3">
                                    </div>
                                </td>
                                <td>USR-1089</td>
                                <td>OnePlus 9</td>
                                <td>Android 11</td>
                                <td><span class="badge bg-danger">Failed</span></td>
                                <td>-</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="4">
                                    </div>
                                </td>
                                <td>USR-1123</td>
                                <td>Xiaomi Mi 11</td>
                                <td>Android 12</td>
                                <td><span class="badge bg-success">Delivered</span></td>
                                <td>2024-06-12 09:00:45</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="5">
                                    </div>
                                </td>
                                <td>USR-1156</td>
                                <td>Samsung Galaxy A52</td>
                                <td>Android 12</td>
                                <td><span class="badge bg-success">Delivered</span></td>
                                <td>2024-06-12 09:01:02</td>
                                <td>2024-06-12 09:03:18</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div> --}}
@endsection

@push('custom-script')
    {{-- Scripts for delivery logs - Commented for future use --}}
    {{-- <script>
        $(document).ready(function() {
            $('#deliveryLogsTable').DataTable({
                responsive: true,
                lengthChange: false,
                pageLength: 10,
                order: [
                    [5, 'desc']
                ],
                columnDefs: [{
                    orderable: false,
                    targets: 0
                }]
            });

            // Select All checkbox
            $('#selectAll').on('change', function() {
                $('.row-checkbox').prop('checked', this.checked);
                toggleDeleteButton();
            });

            // Individual checkbox change
            $(document).on('change', '.row-checkbox', function() {
                var totalCheckboxes = $('.row-checkbox').length;
                var checkedCheckboxes = $('.row-checkbox:checked').length;
                $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
                toggleDeleteButton();
            });

            // Toggle delete button visibility
            function toggleDeleteButton() {
                var checkedCount = $('.row-checkbox:checked').length;
                if (checkedCount > 0) {
                    $('#deleteSelectedBtn').show();
                } else {
                    $('#deleteSelectedBtn').hide();
                }
            }

            // Delete selected button click
            $('#deleteSelectedBtn').on('click', function() {
                var selectedIds = [];
                $('.row-checkbox:checked').each(function() {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length > 0) {
                    if (confirm('Are you sure you want to delete ' + selectedIds.length +
                            ' selected log(s)?')) {
                        // Delete functionality would go here
                        console.log('Deleting logs:', selectedIds);
                        // For now, just remove the rows
                        $('.row-checkbox:checked').closest('tr').fadeOut(300, function() {
                            $(this).remove();
                            toggleDeleteButton();
                        });
                    }
                }
            });
        });
    </script> --}}
@endpush