@extends('layouts.app') @section('content')

<div class="page-content">
    <div class="page-subheading page-subheading-md">
        <ol class="breadcrumb">
            <li><a href="javascript:;">Dashboard</a></li>
            <li class="active"><a href="javascript:;">Advertising Group</a></li>
            <li class="active"><a href="javascript:;">Access</a></li>
        </ol>
    </div>
    <div class="page-heading page-heading-md">
        <h2>Advertising Group Access</h2>
    </div>
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
    <div class="container-fluid-md">
        <div class="row">
            <div class="col-md-12">
                <form id="assignCountryForm" method="POST" action="{{ route('advertising.give_access')}}" class="form-horizontal" role="form">
                     @csrf
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">Add Advertising Access</h4>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">Users</label>
                                <div class="col-sm-8">
                                    <input type="text" name="user_name" class="form-control" id="usersSearch" placeholder="Enter Users Name">
                                     <div id="usersSuggestions" class="list-group"></div>
                                </div>
                            </div>
                             <input type="hidden" name="user_id" id="selecteduserId">
                             <input type="hidden" name="advertising_group_id" value="{{ $adversitinggroupid ?? '' }}">
                             
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                               
                                    <button type="submit" class="btn btn-success" name="save">Submit</button>
                                </div>
                            </div>
                        </div>
                     </div>
                </form>  
            </div>
        </div>
         <div class="panel panel-default">
     <div class="panel-heading">
                <h4 class="panel-title">Advertising Group List</h4>
            </div>
        <div class="panel-body">
            
            <div class="table-responsive">
               <table class="table table-striped display">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Active</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($useraccess as $val)
                    <tr class="odd gradeX">
                        <td>{{ $val->adveristing_name }}</td>
                        <td>{{ $val->user_name }}</td>
                        <td><a href="{{  route('advertising.user_access_delete', ['id' => $val->id]) }}" class="btn btn-danger"><i class="fa fa-trash-o"></i></td>
                    </tr>
                     @endforeach 
                    </tbody>
                </table>
            </div>    
        </div>
    </div>
    </div>
    <script>
 let searchInput = document.getElementById('usersSearch');
let suggestionsDiv = document.getElementById('usersSuggestions');
let selecteduserId = document.getElementById('selecteduserId');


    searchInput.addEventListener('input', function () {
        let query = searchInput.value.trim();

        if (query.length < 2) {
            suggestionsDiv.innerHTML = '';
            return;
        }

        const searchUsersUrl = "{{ route('admin.advertising.search.users') }}";

        fetch(`${searchUsersUrl}?query=${query}`)
            .then(response => response.json())
            .then(users => {
                suggestionsDiv.innerHTML = '';

                users.forEach(user => {
                    let userItem = document.createElement('a');
                    userItem.classList.add('list-group-item', 'list-group-item-action');
                    userItem.textContent = user.name;
                    userItem.dataset.id = user.id;

                    userItem.addEventListener('click', function () {
                        searchInput.value = user.name;
                        selecteduserId.value = user.id;
                        suggestionsDiv.innerHTML = '';
                    });

                    suggestionsDiv.appendChild(userItem);
                });
            });
    });
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('usersSearch');
    const suggestionsDiv = document.getElementById('usersSuggestions');
    const selecteduserId = document.getElementById('selecteduserId');

    if (!searchInput || !suggestionsDiv || !selecteduserId) {
        console.warn('Missing required elements');
        return;
    }

    searchInput.addEventListener('input', function () {
        const query = searchInput.value.trim();
        if (query.length < 2) {
            suggestionsDiv.innerHTML = '';
            return;
        }

        const searchUsersUrl = "{{ route('admin.advertising.search.users') }}";

        fetch(`${searchUsersUrl}?query=${query}`)
            .then(response => response.json())
            .then(users => {
                console.log("Users fetched:", users);
                suggestionsDiv.innerHTML = '';

                users.forEach(user => {
                    let userItem = document.createElement('a');
                    userItem.classList.add('list-group-item', 'list-group-item-action');
                    userItem.textContent = user.name;
                    userItem.dataset.id = user.id;

                    userItem.addEventListener('click', function () {
                        searchInput.value = user.name;
                        selecteduserId.value = user.id;
                        suggestionsDiv.innerHTML = '';
                    });

                    suggestionsDiv.appendChild(userItem);
                });
            });
    });
});
     </script>
    @endsection