@extends('admin.layout.index')

@section('title', 'Push Notifications')

@section('content')
<div class="row g-3 align-items-center mb-3">
    <div class="col">
        <h4 class="mb-0">Push Notification Management</h4>
        <p class="text-muted mb-0">Send global announcements and view delivery stats.</p>
    </div>
    <div class="col-auto">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#announcementModal">Send Global
            Announcement</button>
    </div>
</div>

<div class="row g-3 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 class="flex-shrink-0">
                        <h5 class="text-success fs-14 mb-0">
                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +4.2%
                        </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.43">0</span>k</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-notification-3-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">Android Delivery</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> +1.8%
                        </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="96">0</span>%</h4>
                        <a href="" class="text-decoration-underline">View Android logs</a>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-android-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">iOS Delivery</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> +1.1%
                        </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="93">0</span>%</h4>
                        <a href="" class="text-decoration-underline">View iOS logs</a>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-info-subtle rounded fs-3">
                            <i class="ri-apple-line text-info"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header d-flex align-items-center">
        <h5 class="mb-0">Delivery Stats & Logs</h5>
        <div class="ms-auto d-flex gap-2">
            <select class="form-select form-select-sm" style="width:140px;">
                <option>All OS</option>
                <option>Android</option>
                <option>iOS</option>
            </select>
            <input type="date" class="form-control form-control-sm" style="width:160px;">
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table align-middle nowrap" id="notificationsTable">
                <thead class="table-light">
                    <tr>
                        <th>Title</th>
                        <th>OS</th>
                        <th>Scheduled</th>
                        <th>Sent</th>
                        <th>Delivered</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>City Marathon Route Updates</td>
                        <td>Android</td>
                        <td>2024-06-12 09:00</td>
                        <td>12,000</td>
                        <td>11,520</td>
                        <td><span class="badge bg-success">Delivered</span></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.notifications.detail', ['id' => 1]) }}" class="btn btn-soft-primary btn-sm">
                                    <i class="ri-eye-line"></i>
                                </a>
                                <button class="btn btn-soft-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteNotificationModal">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Weather advisory: Heavy rain</td>
                        <td>iOS</td>
                        <td>2024-06-11 18:00</td>
                        <td>8,000</td>
                        <td>7,420</td>
                        <td><span class="badge bg-success">Delivered</span></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.notifications.detail', ['id' => 2]) }}" class="btn btn-soft-primary btn-sm">
                                    <i class="ri-eye-line"></i>
                                </a>
                                <button class="btn btn-soft-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteNotificationModal">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>System maintenance window</td>
                        <td>All</td>
                        <td>2024-06-10 22:00</td>
                        <td>20,500</td>
                        <td>19,040</td>
                        <td><span class="badge bg-warning">Scheduled</span></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.notifications.detail', ['id' => 3]) }}" class="btn btn-soft-primary btn-sm">
                                    <i class="ri-eye-line"></i>
                                </a>
                                <button class="btn btn-soft-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteNotificationModal">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Announcement Modal -->
<div class="modal fade" id="announcementModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Global Announcement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Audience</label>
                        <select class="form-select">
                            <option>All Users</option>
                            <option>Android</option>
                            <option>iOS</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Schedule</label>
                        <select class="form-select">
                            <option>Send now</option>
                            <option>Schedule</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Title</label>
                        <input class="form-control" placeholder="Announcement title">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" rows="4" placeholder="Message body"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Date &amp; Time (if scheduled)</label>
                        <input type="datetime-local" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Notification Modal -->
<div class="modal fade" id="deleteNotificationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <div class="mt-3">
                    <div class="avatar-md mx-auto mb-4">
                        <span class="avatar-title bg-danger-subtle text-danger fs-2 rounded-circle">
                            <i class="ri-delete-bin-6-line"></i>
                        </span>
                    </div>
                    <h4 class="mb-2">You are about to delete a notification?</h4>
                    <p class="text-muted mb-4">Deleting your notification will remove all of your information from our database.</p>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger">Yes, Delete It!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-script')
<script>
    $(document).ready(function () {
        $('#notificationsTable').DataTable({
            responsive: true,
            lengthChange: false,
            pageLength: 5
        });
    });
</script>
@endpush