@extends('layouts.app')

@section('title', 'Notifications Queue - Admin Panel')
@section('page_title', 'Notifications Queue')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Notifications Queue</h5>
                <a href="{{ route('notifications.create') }}" class="btn btn-primary btn-sm">
                    <i class="feather icon-plus"></i> Schedule Notification
                </a>
            </div>
            <div class="card-body">
                <!-- Filter form -->
                <form method="GET" action="{{ route('notifications.index') }}" class="mb-4">
                    <div class="row align-items-end">
                        <div class="col-md-3 mb-2">
                            <label class="font-weight-bold">Start Date</label>
                            <input type="date" class="form-control" name="start_date" id="start_date" value="{{ request('start_date') }}">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="font-weight-bold">End Date</label>
                            <input type="date" class="form-control" name="end_date" id="end_date" value="{{ request('end_date') }}">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label class="font-weight-bold">Target Type</label>
                            <select class="form-control" name="rel_type" id="rel_type">
                                <option value="all_types" {{ request('rel_type') == 'all_types' ? 'selected' : '' }}>All Targets</option>
                                <option value="all" {{ request('rel_type') == 'all' ? 'selected' : '' }}>All Users</option>
                                <option value="user" {{ request('rel_type') == 'user' ? 'selected' : '' }}>User</option>
                                <option value="version" {{ request('rel_type') == 'version' ? 'selected' : '' }}>Version</option>
                            </select>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label class="font-weight-bold">Search</label>
                            <input type="text" class="form-control" name="search" id="search" value="{{ request('search') }}" placeholder="Title/Message...">
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="submit" class="btn btn-primary btn-block"><i class="feather icon-filter"></i> Filter</button>
                        </div>
                    </div>
                </form>

                <div class="table-responsive" id="queue-table-container">
                    @include('notifications.queue-table')
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Duplicate Notification Modal -->
<div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="duplicateModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="duplicateModalLabel"><i class="feather icon-copy"></i> Duplicate Notification</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="duplicateForm" method="POST" action="{{ route('notifications.duplicate') }}">
                @csrf
                <input type="hidden" name="notification_id" id="notification_id">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="modal_schedule_time" class="font-weight-bold">New Schedule Date & Time</label>
                        <input type="datetime-local" class="form-control" id="modal_schedule_time" name="schedule_time" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Duplicate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Clicks Modal -->
<div class="modal fade" id="clicksModal" tabindex="-1" role="dialog" aria-labelledby="clicksModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clicksModalLabel"><i class="feather icon-users"></i> Users Who Clicked</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="clicksTable">
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>Name</th>
                                <th>Clicked At</th>
                            </tr>
                        </thead>
                        <tbody id="clickers-list">
                            <!-- Clickers will be loaded here via Ajax -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Trigger duplicate modal
        $(document).on('click', '.duplicate-btn', function() {
            var id = $(this).data('id');
            $('#notification_id').val(id);
            
            // Set current time in modal schedule input
            var now = new Date();
            var year = now.getFullYear();
            var month = String(now.getMonth() + 1).padStart(2, '0');
            var day = String(now.getDate()).padStart(2, '0');
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            var currentDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
            $('#modal_schedule_time').val(currentDateTime);

            $('#duplicateModal').modal('show');
        });

        // Trigger view clicks modal
        $(document).on('click', '.view-clicks-btn', function() {
            var id = $(this).data('id');
            $('#clickers-list').html('<tr><td colspan="3" class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></td></tr>');
            $('#clicksModal').modal('show');

            $.ajax({
                url: '{{ route("notifications.clicks") }}',
                type: 'GET',
                data: {
                    notification_id: id
                },
                success: function(response) {
                    if (response.success && response.data.length > 0) {
                        var html = '';
                        response.data.forEach(function(click) {
                            html += `<tr>
                                <td>${click.user_id}</td>
                                <td>${click.user_name}</td>
                                <td>${click.clicked_at}</td>
                            </tr>`;
                        });
                        $('#clickers-list').html(html);
                    } else {
                        $('#clickers-list').html('<tr><td colspan="3" class="text-center">No clicks recorded yet.</td></tr>');
                    }
                },
                error: function() {
                    $('#clickers-list').html('<tr><td colspan="3" class="text-center text-danger">Failed to load clicks data.</td></tr>');
                }
            });
        });
    });
</script>
@endsection