@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-001</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-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">Total Sent</p>
                    </div>
                    <div class="flex-shrink-0">
                        <h5 class="text-primary fs-14 mb-0">
                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> 100%
                        </h5>
                    </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"><span class="counter-value" data-target="12">0</span>,000</h4>
                        <a href="" class="text-decoration-underline">View all</a>
                    </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-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">Delivered</p>
                    </div>
                    <div class="flex-shrink-0">
                        <h5 class="text-success fs-14 mb-0">
                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> 96%
                        </h5>
                    </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"><span class="counter-value" data-target="11.52">0</span>k</h4>
                        <a href="" class="text-decoration-underline">View delivered</a>
                    </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-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">Failed</p>
                    </div>
                    <div class="flex-shrink-0">
                        <h5 class="text-danger fs-14 mb-0">
                            <i class="ri-arrow-right-down-line fs-13 align-middle"></i> 4%
                        </h5>
                    </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"><span class="counter-value" data-target="480">0</span></h4>
                        <a href="" class="text-decoration-underline">View failed</a>
                    </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 class="flex-shrink-0">
                        <h5 class="text-info fs-14 mb-0">
                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> 78%
                        </h5>
                    </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"><span class="counter-value" data-target="8.98">0</span>k</h4>
                        <a href="" class="text-decoration-underline">View opened</a>
                    </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">City Marathon Route Updates</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>
                                    <span class="badge bg-primary">Android</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">2024-06-12 09:00 AM</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>
                                    <span class="badge bg-success">Delivered</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">Important route changes for the upcoming city marathon. Please check your route before departure.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delivery Logs -->
<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')
<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