@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Campaigns</h1>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Properties</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($campaigns as $campaign)
                <tr>
                    <td>{{ $campaign->name }}</td>
                    <td>{{ $campaign->properties->count() }}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="showPublishModal({{ $campaign->id }})">Publish</button>
                        <a href="{{ route('admin.campaigns.edit', $campaign->id) }}" class="btn btn-sm btn-secondary">Edit</a>
                        <form action="{{ route('admin.campaigns.destroy', $campaign->id) }}" method="POST" class="d-inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Publish Modal -->
<div class="modal fade" id="publishModal" tabindex="-1" aria-labelledby="publishModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="publishModalLabel">Publish Campaign</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="selectedCampaignId">
                <div class="mb-3">
                    <input type="text" id="userSearchInput" class="form-control" placeholder="Search users by name or email...">
                </div>
                <div id="userList" class="list-group">
                    <!-- Users will be dynamically loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="publishButton" onclick="publishCampaign()">Publish</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let selectedUsers = [];

    function showPublishModal(campaignId) {
        // Set campaign ID in the modal
        document.getElementById('selectedCampaignId').value = campaignId;
        selectedUsers = []; // Reset selected users
        document.getElementById('userList').innerHTML = ''; // Clear user list
        document.getElementById('userSearchInput').value = ''; // Clear search input

        // Show the modal
        const publishModal = new bootstrap.Modal(document.getElementById('publishModal'));
        publishModal.show();
    }

    document.getElementById('userSearchInput').addEventListener('input', function () {
        const query = this.value;

        if (query.length > 1) {
            fetch(`/api/users/search?query=${query}`)
                .then(response => response.json())
                .then(data => {
                    const userList = document.getElementById('userList');
                    userList.innerHTML = '';

                    data.forEach(user => {
                        const userItem = document.createElement('button');
                        userItem.classList.add('list-group-item', 'list-group-item-action');
                        userItem.textContent = `${user.name} (${user.email})`;
                        userItem.onclick = () => toggleUserSelection(user.id);
                        userList.appendChild(userItem);
                    });
                });
        }
    });

    function toggleUserSelection(userId) {
        if (selectedUsers.includes(userId)) {
            selectedUsers = selectedUsers.filter(id => id !== userId);
        } else {
            selectedUsers.push(userId);
        }
    }

    function publishCampaign() {
        const campaignId = document.getElementById('selectedCampaignId').value;

        fetch(`/admin/campaigns/${campaignId}/publish`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ users: selectedUsers })
        })
        .then(response => {
            if (response.ok) {
                alert('Campaign published successfully!');
                location.reload();
            } else {
                alert('Failed to publish the campaign.');
            }
        });
    }
</script>
@endpush