@extends("admin.admin_app")

@section("content")		
<!-- Page Header -->                
<div class="content bg-gray-lighter">                    
    <div class="row items-push">                        
        <div class="col-sm-7">                            
            <h1 class="breadcrumb push-10-t"> 
                Sub Users of <span class="text-primary">{{ $parentsstr ?? 'User' }}</span>
            </h1>                        
        </div> 
        <div class="col-sm-5 text-right hidden-xs">                            
            <ol class="breadcrumb push-10-t">      
                @if(Auth::user()->usertype==='Admin')                          
                <li><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                @else
                <li><a href="{{ url('profile') }}">Dashboard</a></li>
                @endif
                <li><a class="link-effect" href="{{ url('admin/users') }}">Users</a></li>    
                <li class="active">Sub Users</li>                 
            </ol>                        
        </div>                    
    </div>                
</div>                
<!-- END Page Header --> 				 

<!-- Page Content -->                
<div class="content">                    
    <div class="block">                        
        <div class="block-header"> 
            <h3 class="block-title">Sub Users List</h3>
            <div class="block-options">                                                       
                <a class="btn btn-success btn-sm" href="{{ url('admin/users/addSubuser/' . $parentUser->id) }}">
                    <i class="fa fa-plus"></i> Add Sub User
                </a>                        
            </div>                        
        </div>                        
        <div class="block-content">  
            @if(Session::has('flash_message'))                                
                <div class="alert alert-success">                                
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>       
                    {{ Session::get('flash_message') }}                                
                </div>                            
            @endif   

            <!-- Search & Page Size Form -->
            <form method="GET" action="{{ url('admin/users/subusers/'.$parentUser->id) }}" style="margin-bottom: 20px;">
                <div style="display:flex;justify-content:space-between;width:100%;">
                    <!-- Page Size Selector -->
                    <select name="perPage" class="form-select p-2" style="max-width: 150px;" onchange="this.form.submit()">
                        <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
                    </select>

                    <div style="display:flex; position:relative;">
                        <input type="text" id="emailSearch" name="search" value="{{ $search ?? '' }}" 
                               placeholder="Search by email" class="form-control" style="max-width: 250px;" autocomplete="off">
                        <button type="submit" class="btn btn-primary">Search</button>
                           <!-- Suggestions dropdown -->
                        <ul id="suggestionsList" style="position:absolute; top:38px; left:0; right:0; background:white; border:1px solid #ccc; list-style:none; padding:0; margin:0; z-index:1000; display:none;"></ul>
                 
                    </div>
                </div>
            </form>

            <!-- Table -->
            <table id="usersTable" class="table table-hover table-header-bg">                                
                <thead>                                    
                    <tr>                                    
                        <th>#</th>						                
                        <th>User Type</th>	
                        <th>Company</th>					                
                        <th>Email</th>						                										
                        <th>Registered On</th> 																                
                        <th>Status</th>                                         
                        <th class="text-center" style="width: 15%;">Actions</th>                                    
                    </tr>                                
                </thead>                                
                <tbody>                                     
                    @forelse($allusers as $i => $user)                                    
                        <tr>                                        
                            <td>{{ ($page - 1) * $perPage + $i + 1 }}</td>						                
                            <td>{{ $user->usertype }}
                                @if($user->is_subuser == 1)
                                    <span class="badge badge-info">subUser</span>
                                @endif
                            </td>
                            <td>{{ $user->company }}</td>						                
                            <td>{{ $user->email }}</td>						                										
                            <td>{{ $user->created_at }}</td>										
                            <td>
                                @if($user->status == '0')                                            
                                    <a href="{{ url('admin/users/status_user/'.$user->id.'/1') }}" data-toggle="tooltip" title="Activate">
                                        <span class="label label-danger">Inactive</span>
                                    </a>
                                @else                                            
                                    <a href="{{ url('admin/users/status_user/'.$user->id.'/0') }}" data-toggle="tooltip" title="Deactivate">
                                        <span class="label label-success">Active</span>
                                    </a> 
                                @endif										
                            </td>                                        
                            <td class="text-center">                                            
                                <div class="btn-group">                                                
                                    <a href="{{ url('admin/users/adduser/'.$user->id) }}" class="btn btn-xs btn-default" data-toggle="tooltip" title="Edit">
                                        <i class="fa fa-pencil"></i>
                                    </a>   
                                    <a href="{{ url('admin/users/delete/'.$user->id) }}" class="btn btn-xs btn-default" data-toggle="tooltip" title="Delete" onclick="return confirm('Are you sure? You will not be able to recover this user?')">
                                        <i class="fa fa-times"></i>
                                    </a> 
                                    <a href="{{ url('admin/users/subusers/'.$user->id) }}" class="btn btn-xs btn-default" data-toggle="tooltip">
                                        <i class="fa fa-eye"></i>
                                    </a> 
                                </div>                                            
                            </td>                                                                            
                        </tr>  
                    @empty
                 
                    @endforelse                                                                    
                </tbody>                            
            </table>                        

        </div>                    
    </div>                    

    <!-- Manual Pagination -->
    @php
        $totalPages = ceil($total / $perPage);
        $startPage = max($page - 2, 1);
        $endPage = min($page + 2, $totalPages);
    @endphp

    @if ($totalPages > 1)
    <div class="d-flex justify-content-center align-items-center mt-3">
        <ul class="pagination mb-0 mx-2">
            <li>
                <a href="{{ $page > 1 ? url('admin/users/subusers/'.$parentUser->id.'?page='.($page-1).'&perPage='.$perPage.'&search='.$search) : '#' }}"
                   class="btn btn-primary mx-2 {{ $page <= 1 ? 'disabled' : '' }}">
                   Previous
                </a>
            </li>

            @if($startPage > 1)
                <li class="page-item">
                    <a class="page-link" href="{{ url('admin/users/subusers/'.$parentUser->id.'?page=1&perPage='.$perPage.'&search='.$search) }}">1</a>
                </li>
                @if($startPage > 2)
                    <li class="page-item disabled"><span class="page-link">…</span></li>
                @endif
            @endif

            @for ($i = $startPage; $i <= $endPage; $i++)
                <li class="page-item {{ $i == $page ? 'active' : '' }}">
                    <a class="page-link" href="{{ url('admin/users/subusers/'.$parentUser->id.'?page='.$i.'&perPage='.$perPage.'&search='.$search) }}">{{ $i }}</a>
                </li>
            @endfor

            @if($endPage < $totalPages)
                @if($endPage < $totalPages - 1)
                    <li class="page-item disabled"><span class="page-link">…</span></li>
                @endif
                <li class="page-item">
                    <a class="page-link" href="{{ url('admin/users/subusers/'.$parentUser->id.'?page='.$totalPages.'&perPage='.$perPage.'&search='.$search) }}">{{ $totalPages }}</a>
                </li>
            @endif

            <li>
                <a href="{{ $page < $totalPages ? url('admin/users/subusers/'.$parentUser->id.'?page='.($page+1).'&perPage='.$perPage.'&search='.$search) : '#' }}"
                   class="btn btn-primary mx-2 {{ $page >= $totalPages ? 'disabled' : '' }}">
                   Next
                </a>
            </li>
        </ul>
    </div>
    @endif
     <script>
(function() {
    const input = document.getElementById("emailSearch");
    const suggestionsList = document.getElementById("suggestionsList");

    if (!input) return; // safety check

    input.addEventListener("input", function() {
        const term = this.value.trim();
        if (term.length < 2) {
            suggestionsList.style.display = "none";
            return;
        }

        fetch("{{ url('email-suggestions') }}?term=" + encodeURIComponent(term))
            .then(res => res.json())
            .then(data => {
                suggestionsList.innerHTML = "";
                if (data.length === 0) {
                    suggestionsList.style.display = "none";
                    return;
                }
                data.forEach(email => {
                    const li = document.createElement("li");
                    li.textContent = email;
                    li.style.padding = "5px 10px";
                    li.style.cursor = "pointer";
                    li.addEventListener("click", function() {
                        input.value = email;
                        suggestionsList.style.display = "none";
                    });
                    suggestionsList.appendChild(li);
                });
                suggestionsList.style.display = "block";
            })
            .catch(err => {
                console.error("Fetch error:", err);
                suggestionsList.style.display = "none";
            });
    });

    // Close suggestions on outside click
    document.addEventListener("click", function(e) {
        if (!input.contains(e.target) && !suggestionsList.contains(e.target)) {
            suggestionsList.style.display = "none";
        }
    });
})();


document.addEventListener("DOMContentLoaded", function() {
    // Initialize DataTable **only for sorting**
    $('#usersTable').DataTable({
        paging: false,      // disable pagination
        searching: false,   // disable search
        info: false,        // disable info text
        ordering: true,     // enable column sorting
        order: [],          // no initial order
     
    });
});
</script>
</div>

@push('scripts')

@endpush

@endsection