@extends('admin.layout.index')

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

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        /* DataTables horizontal scroll */
        .dataTables_scroll {
            position: relative;
            width: 100% !important;
        }

        .dataTables_scrollHead {
            border-bottom: 2px solid #dee2e6;
            overflow: hidden;
        }

        .dataTables_scrollBody {
            max-height: 600px;
            overflow-y: auto !important;
            overflow-x: auto !important;
        }

        .dataTables_scrollBody thead {
            display: none;
        }

        .dataTables_scrollBody .table {
            margin-top: 0 !important;
            border-top: none !important;
            width: 100% !important;
        }

        .dataTables_wrapper .dataTables_scroll {
            clear: both;
        }

        .dataTables_wrapper {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner,
        .dataTables_scrollHeadInner table {
            width: 100% !important;
        }

        #notificationsTable {
            width: 100% !important;
            table-layout: auto;
        }

        #notificationsTable th,
        #notificationsTable td {
            white-space: nowrap;
        }

        /* Ensure dropdown and calendar stay together */
        .filters-inline {
            display: flex !important;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: nowrap !important;
        }

        /* Responsive styles for mobile */
        @media (max-width: 991px) {
            .dataTables_scrollBody {
                overflow-x: auto !important;
            }

            #notificationsTable th,
            #notificationsTable td {
                white-space: normal;
                padding: 0.5rem;
                font-size: 0.875rem;
            }

            /* Make buttons full width on mobile */
            .col-auto .btn {
                width: 100%;
                margin-top: 0.5rem;
            }

            /* Responsive table wrapper */
            .dataTables_wrapper {
                overflow-x: auto;
            }

            /* Stack DataTables controls on mobile */
            .dataTables_wrapper .row {
                flex-direction: column;
            }

            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                margin-bottom: 1rem;
            }

            /* Keep dropdown and calendar together even on mobile */
            .filters-inline {
                width: 100%;
            }
        }

        @media (min-width: 992px) {
            .table-responsive {
                overflow-x: visible;
            }

            .dataTables_scrollBody {
                overflow-x: visible !important;
            }

            .dataTables_scroll {
                width: 100% !important;
            }

            .dataTables_scrollHeadInner {
                width: 100% !important;
            }
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_info {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_length {
            margin-bottom: 1rem;
        }

        /* Make DataTables search inline with filters */
        .dataTables_wrapper .dataTables_filter {
            float: none !important;
            text-align: left !important;
            margin-bottom: 0 !important;
        }

        /* Hide default DataTables filter location */
        .dataTables_wrapper .row:first-child .dataTables_filter {
            display: none;
        }

        /* Show search in custom container */
        #datatables-search-container .dataTables_filter {
            display: block !important;
        }

        #datatables-search-container .dataTables_filter label {
            margin-bottom: 0;
        }

        #datatables-search-container .dataTables_filter input {
            width: 200px;
            display: inline-block;
        }

        /* Align filters and search in one line on desktop */
        @media (min-width: 768px) {
            .card-header .ms-md-auto {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                flex-wrap: nowrap;
            }
        }
    </style>
@endpush

@section('content')
    <div class="row g-3 align-items-center mb-3">
        <div class="col-12 col-md">
            <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-12 col-md-auto">
            <button class="btn btn-primary w-100 w-md-auto" 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>
                    <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" id="total-sent">{{ $stats['total_sent'] }}</span>
                            </h4>
                        </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>
                    <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" id="android-delivery">{{ $stats['android_delivery'] }}</span>%
                            </h4>
                        </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>
                    <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" id="ios-delivery">{{ $stats['ios_delivery'] }}</span>%
                            </h4>
                        </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 flex-column flex-md-row align-items-start align-items-md-center gap-2">
            <h5 class="mb-0">Delivery Stats & Logs</h5>
            <div class="ms-md-auto d-flex flex-column flex-md-row align-items-center gap-2 w-100 w-md-auto">
                <!-- Bulk Actions Button (Hidden by default) -->
                <div id="bulk-actions-container" class="d-none w-100 w-md-auto">
                    <button class="btn btn-danger btn-sm w-100 w-md-auto" id="bulk-delete-btn">
                        <i class="ri-delete-bin-line"></i> Delete Selected (<span id="selected-count">0</span>)
                    </button>
                </div>
                <!-- Dropdown and Calendar in one line -->
                <div class="d-flex align-items-center gap-2 filters-inline" style="flex-wrap: nowrap;">
                    <select class="form-select form-select-sm" id="os-filter" style="width:140px; flex-shrink: 0;">
                        <option value="all">All OS</option>
                        <option value="android">Android</option>
                        <option value="ios">iOS</option>
                    </select>
                    <input type="date" class="form-control form-control-sm" id="date-filter"
                        style="width:160px; flex-shrink: 0;">
                </div>
                <!-- DataTables search will be moved here via JS -->
                <div id="datatables-search-container" class="w-100 w-md-auto"></div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle table-nowrap mb-0" id="notificationsTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;">
                                <input type="checkbox" class="form-check-input" id="selectAllCheckbox">
                            </th>
                            <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>
                </table>
            </div>
        </div>
    </div>

    <!-- Bulk Delete Confirmation Modal -->
    <div class="modal fade" id="bulkDeleteModal" 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">Delete Multiple Notifications?</h4>
                        <p class="text-muted mb-4">You are about to delete <strong id="bulk-delete-count">0</strong>
                            notification(s). This action cannot be undone.</p>
                        <div class="hstack gap-2 justify-content-center">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-danger" id="confirmBulkDeleteBtn">
                                <span class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true"></span>
                                Yes, Delete!
                            </button>
                        </div>
                    </div>
                </div>
            </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">
                <form id="announcementForm">
                    @csrf
                    <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 <span class="text-danger">*</span></label>
                                <select class="form-select" name="target_os" required>
                                    <option value="all">All Users</option>
                                    <option value="android">Android</option>
                                    <option value="ios">iOS</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Schedule <span class="text-danger">*</span></label>
                                <select class="form-select" id="schedule-type" name="schedule_type" required>
                                    <option value="send_now">Send now</option>
                                    <option value="schedule">Schedule</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input class="form-control" name="title" id="titleInput" maxlength="100"
                                    placeholder="Announcement title" required>
                                <small class="text-muted" id="titleCount">0/100</small>
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Message <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="message" id="messageInput" rows="4" maxlength="200"
                                    placeholder="Message body" required></textarea>
                                <small class="text-muted" id="messageCount">0/200</small>
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6 d-none" id="date-time">
                                <label class="form-label">Date &amp; Time</label>
                                <input type="datetime-local" class="form-control" name="scheduled_at" id="scheduled_at"
                                    min="{{ now()->format('Y-m-d\TH:i') }}">
                                <div class="invalid-feedback"></div>
                                <small class="text-muted">Please select a future date and time</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="sendBtn">
                            <span class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                            Send
                        </button>
                    </div>
                </form>
            </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-4">You are about to delete a notification?</h4>
                        <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" id="confirmDeleteBtn">
                                <span class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true"></span>
                                Yes, Delete!
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const titleInput = document.getElementById("titleInput");
            const messageInput = document.getElementById("messageInput");
            const titleCount = document.getElementById("titleCount");
            const messageCount = document.getElementById("messageCount");

            // Title Counter (100 chars)
            titleInput.addEventListener("input", function() {
                let len = titleInput.value.length;
                titleCount.textContent = `${len}/100`;
                titleCount.style.color = (len >= 100) ? "red" : "";
            });

            // Message Counter (200 chars)
            messageInput.addEventListener("input", function() {
                let len = messageInput.value.length;
                messageCount.textContent = `${len}/200`;
                messageCount.style.color = (len >= 200) ? "red" : "";
            });
        });

        let notificationsTable;
        let deleteNotificationId = null;
        let selectedNotifications = [];

        $(document).ready(function() {
            // Initialize Yajra DataTable
            notificationsTable = $('#notificationsTable').DataTable({
                processing: true,
                serverSide: true,
                sort: false,
                searching: true,
                scrollX: true,
                autoWidth: false,
                responsive: true,
                ajax: {
                    url: '{{ route('admin.notifications.data') }}',
                    data: function(d) {
                        d.os = $('#os-filter').val();
                        d.date = $('#date-filter').val();
                    }
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'os',
                        name: 'target_os'
                    },
                    {
                        data: 'scheduled',
                        name: 'scheduled_at',
                        orderable: true
                    },
                    {
                        data: 'sent',
                        name: 'total_sent',
                        orderable: true
                    },
                    {
                        data: 'delivered',
                        name: 'total_delivered',
                        orderable: true
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: true
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-end'
                    }
                ],
                order: [
                    [3, 'desc']
                ], // Sort by scheduled date (adjusted index)
                responsive: true,
                lengthChange: false,
                pageLength: 10,
                drawCallback: function() {
                    updateCheckboxStates();
                },
                initComplete: function() {
                    // Move DataTables search to custom container in header
                    moveSearchToHeader();
                }
            });

            // Function to move search to header
            function moveSearchToHeader() {
                const searchContainer = $('#datatables-search-container');
                const originalSearch = $('.dataTables_wrapper .dataTables_filter').first();

                if (originalSearch.length && searchContainer.length) {
                    // Clone the search filter
                    const clonedSearch = originalSearch.clone();
                    searchContainer.html(clonedSearch);

                    // Hide original and show cloned one
                    originalSearch.hide();

                    // Re-bind search functionality to cloned search
                    searchContainer.find('input[type="search"]').on('keyup', function() {
                        notificationsTable.search(this.value).draw();
                    });
                }
            }

            // Move search on table redraw/reload
            notificationsTable.on('draw.dt', function() {
                setTimeout(moveSearchToHeader, 100);
            });

            // Select All Checkbox Handler
            $('#selectAllCheckbox').on('change', function() {
                const isChecked = $(this).is(':checked');

                $('.notification-checkbox:visible').each(function() {
                    const notificationId = parseInt($(this).data('id'));
                    $(this).prop('checked', isChecked);

                    if (isChecked) {
                        if (!selectedNotifications.includes(notificationId)) {
                            selectedNotifications.push(notificationId);
                        }
                    } else {
                        selectedNotifications = selectedNotifications.filter(id => id !==
                            notificationId);
                    }
                });

                updateBulkActionsUI();
            });

            // Individual Checkbox Handler
            $(document).on('change', '.notification-checkbox', function() {
                const notificationId = parseInt($(this).data('id'));

                if ($(this).is(':checked')) {
                    if (!selectedNotifications.includes(notificationId)) {
                        selectedNotifications.push(notificationId);
                    }
                } else {
                    selectedNotifications = selectedNotifications.filter(id => id !== notificationId);
                    $('#selectAllCheckbox').prop('checked', false);
                }

                updateBulkActionsUI();
            });

            // Bulk Delete Button
            $('#bulk-delete-btn').on('click', function() {
                if (selectedNotifications.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Selection',
                        text: 'Please select at least one notification to delete.',
                    });
                    return;
                }

                $('#bulk-delete-count').text(selectedNotifications.length);
                $('#bulkDeleteModal').modal('show');
            });

            // Confirm Bulk Delete
            $('#confirmBulkDeleteBtn').on('click', function() {
                if (selectedNotifications.length === 0) return;

                const btn = $(this);
                const spinner = btn.find('.spinner-border');

                btn.prop('disabled', true);
                spinner.removeClass('d-none');

                $.ajax({
                    url: '{{ route('admin.notifications.bulk-delete') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: selectedNotifications
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });

                            $('#bulkDeleteModal').modal('hide');

                            // Clear selection
                            selectedNotifications = [];
                            $('#selectAllCheckbox').prop('checked', false);
                            updateBulkActionsUI();

                            // Reload DataTable
                            notificationsTable.ajax.reload();

                            // Refresh stats
                            refreshStats();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: xhr.responseJSON?.message ||
                                'Failed to delete notifications.',
                        });
                    },
                    complete: function() {
                        btn.prop('disabled', false);
                        spinner.addClass('d-none');
                    }
                });
            });

            // Update checkbox states after table redraw
            function updateCheckboxStates() {
                $('.notification-checkbox').each(function() {
                    const notificationId = parseInt($(this).data('id'));
                    if (selectedNotifications.includes(notificationId)) {
                        $(this).prop('checked', true);
                    }
                });
            }

            // Update Bulk Actions UI
            function updateBulkActionsUI() {
                const count = selectedNotifications.length;
                $('#selected-count').text(count);

                if (count > 0) {
                    $('#bulk-actions-container').removeClass('d-none');
                } else {
                    $('#bulk-actions-container').addClass('d-none');
                    $('#selectAllCheckbox').prop('checked', false);
                }
            }

            // Schedule type change handler
            document.getElementById('schedule-type').addEventListener('change', function() {
                const dateTime = document.getElementById('date-time');
                const scheduledAtInput = dateTime.querySelector('input');

                if (this.value === 'schedule') {
                    dateTime.classList.remove('d-none');
                    scheduledAtInput.required = true;
                } else {
                    dateTime.classList.add('d-none');
                    scheduledAtInput.required = false;
                }
            });

            // Announcement form submission
            $('#announcementForm').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const submitBtn = $('#sendBtn');
                const spinner = submitBtn.find('.spinner-border');

                form.find('.is-invalid').removeClass('is-invalid');
                form.find('.invalid-feedback').text('');

                submitBtn.prop('disabled', true);
                spinner.removeClass('d-none');

                $.ajax({
                    url: '{{ route('admin.notifications.store') }}',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });

                            $('#announcementModal').modal('hide');
                            form[0].reset();
                            $('#date-time').addClass('d-none');
                            notificationsTable.ajax.reload();
                            refreshStats();
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                const input = form.find(`[name="${field}"]`);
                                input.addClass('is-invalid');
                                input.siblings('.invalid-feedback').text(messages[0]);
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please check the form and try again.',
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message ||
                                    'Something went wrong. Please try again.',
                            });
                        }
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false);
                        spinner.addClass('d-none');
                    }
                });
            });

            // Delete notification button click
            $(document).on('click', '.delete-notification', function() {
                deleteNotificationId = $(this).data('id');
            });

            // Confirm delete
            $('#confirmDeleteBtn').on('click', function() {
                if (!deleteNotificationId) return;

                const btn = $(this);
                const spinner = btn.find('.spinner-border');

                btn.prop('disabled', true);
                spinner.removeClass('d-none');

                $.ajax({
                    url: '{{ route('admin.notifications.destroy', ':id') }}'.replace(':id',
                        deleteNotificationId),
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });

                            $('#deleteNotificationModal').modal('hide');

                            // Remove from selected array if present
                            selectedNotifications = selectedNotifications.filter(id => id !==
                                deleteNotificationId);
                            updateBulkActionsUI();

                            notificationsTable.ajax.reload();
                            refreshStats();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: xhr.responseJSON?.message ||
                                'Failed to delete notification.',
                        });
                    },
                    complete: function() {
                        btn.prop('disabled', false);
                        spinner.addClass('d-none');
                        deleteNotificationId = null;
                    }
                });
            });

            // OS Filter
            $('#os-filter').on('change', function() {
                notificationsTable.ajax.reload();
            });

            // Date Filter
            $('#date-filter').on('change', function() {
                notificationsTable.ajax.reload();
            });

            // Refresh stats
            refreshStats();

            function refreshStats() {
                $.ajax({
                    url: '{{ route('admin.notifications.stats') }}',
                    method: 'GET',
                    success: function(response) {
                        $('#total-sent').text(response.total_sent);
                        $('#android-delivery').text(response.android_delivery);
                        $('#ios-delivery').text(response.ios_delivery);
                    }
                });
            }
        });
    </script>
@endpush