@extends("admin.admin_app")
@section("content")

<!-- Page Header -->                
<div class="content bg-gray-lighter">                    
    <div class="row items-push">                        
        <div class="col-sm-5">                            
            <h1 class="page-heading">
                @if(Auth::user()->usertype!="Admin") Sub @endif Users  
            </h1>                        
        </div> 
        <div class="col-sm-2"> 
            <a href="{{ URL::to('admin/userexportcsv') }}">
                <button class="btn btn-success">Export</button>
            </a>
        </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>
                @endif
                @if(Auth::user()->usertype!=='Admin')
                    <li><a href="{{ url('profile') }}">Dashboard</a></li>
                @endif                              
                <li><a class="link-effect" href="">Users</a></li>                     
            </ol>                        
        </div>                    
    </div>                
</div>                

<!-- Page Content -->                
<div class="content">                    
    <!-- Dynamic Table Full -->                    
    <div class="block">                        
        <div class="block-header">                                                        
            <a class="pull-right btn btn-success push-5-r push-10" href="{{URL::to('admin/users/adduser')}}">
                <i class="fa fa-plus"></i> Add User
            </a>                        
        </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') }}" class="d-flex align-items-center gap-2 mb-3" style='margin-bottom: 20px;'>
                <div style='display:flex;justify-content:space-between;width:100%;'>
                    <!-- Page Size Selector -->
                    <select name="perPage" class="form-select p-4" 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>

            <!-- Users Table -->
             <div class="table-responsive">  
            <table id='usersTable' class="table table-hover table-header-bg py-3 ">                                
                <thead>                                    
                    <tr>                                    
                        <th>S no.</th>						                
                        <th >User Type</th>						            
                        <th >Company</th>    
                        <th >Email</th>						                										    
                        <th >Register On</th> 																                
                        <th>Status</th>                                         
                        <th class="text-center" style="width: 10%;">Actions</th>                                    
                    </tr>                                
                </thead>                                
                <tbody>                                     
                    @foreach($allusers as $i => $users)                                    
                    <tr>                                                
                        <td>{{ ($page - 1) * $perPage + $i + 1 }}</td>
                        <td >{{ $users->usertype }} 
                            @if($users->is_subuser == 1)
                                <span class="badge badge-info">subUser</span>
                            @endif
                        </td>	
                        <td >{{ $users->company}}</td>						                
                        <td >{{ $users->email}}</td>						                										
                        <td >{{ $users->created_at}}</td>										
                        <td>
                            @if($users->status=='0')                                            
                                <a href="{{URL::to('admin/users/status_user/'.$users->id.'/1')}}" data-toggle="tooltip" title="Active?">
                                    <span class="label label-danger">Inactive</span>
                                </a>
                            @else                                            
                                <a href="{{URL::to('admin/users/status_user/'.$users->id.'/0')}}" data-toggle="tooltip" title="Inactive?">
                                    <span class="label label-success">Active</span>
                                </a> 
                            @endif										
                        </td>                                        
                        <td class="text-center">                                            
                            <div class="btn-group">                                                
                                <a href="{{ url('admin/users/adduser/'.$users->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/'.$users->id) }}" class="btn btn-xs btn-default"  data-toggle="tooltip" title="Remove" onclick="return confirm('Are you sure? You will not be able to recover this.')">
                                    <i class="fa fa-times"></i>
                                </a> 
                                <a href="{{ url('admin/users/subusers/'.$users->id) }}" class="btn btn-xs btn-default"  data-toggle="tooltip">
                                    <i class="fa fa-eye"></i>
                                </a> 
                            </div>                                                
                        </td>                                                                            
                    </tr>                                   
                    @endforeach                                                                    
                </tbody>                            
            </table>    
</div>                    
        </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?page='.($page-1).'&perPage='.$perPage) : '#' }}"
                   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?page=1'.'&perPage='.$perPage) }}">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?page='.$i.'&perPage='.$perPage) }}">{{ $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?page='.$totalPages.'&perPage='.$perPage) }}">{{ $totalPages }}</a>
                </li>
            @endif

            <li>
                <a href="{{ $page < $totalPages ? url('admin/users?page='.($page+1).'&perPage='.$perPage) : '#' }}"
                   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
        columnDefs: [
            { orderable: false, targets: -1 } // disable sorting on Actions column
        ]
    });
});
</script>

</div>
@push('scripts')
<script>
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
        columnDefs: [
            { orderable: false, targets: -1 } // disable sorting on Actions column
        ]
    });
});
</script>
@endpush

@endsection