@extends('adminlte::page')

@section('title', 'Users')

@section('content_header')
    <h1></h1>
    <!-- Add Create User Button -->
    
@endsection

@section('content')
    <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between">
            <h1 class="card-title" style="width:80%"> Users</h1>
       <a href="{{ route('users.create') }}" class="btn btn-primary">Create User</a>
        </div>
          <div class="card-body">
                  <input type="text" id="searchInput" class="form-control" placeholder="Search..." style="width: 250px;float:right;margin-bottom:10px">
    <table class="table table-bordered" id="UsersTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
               
                <th>Status</th>
                <th>Phone Number</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr class="searchable">
                    <td>{{ $user->name }} </td>
                    <td>{{ $user->email }}</td>
              
                    <td>
                        @if ($user->status == 1)
                            <span class="badge badge-success">Active</span>  <!-- Display 'Active' if status is 1 -->
                        @else
                            <span class="badge badge-danger">Inactive</span> <!-- Display 'Inactive' if status is not 1 -->
                        @endif
                    </td>
                    <td>{{ $user->phone_number }}</td> 
                    <td>
                        <!-- Edit Button -->
                        <a href="{{ route('users.edit', $user->id) }}" class="btn btn-warning btn-sm">Edit</a>
                        
                        <!-- Delete Button -->
                        <form action="{{ route('users.destroy', $user->id) }}" method="POST" style="display: inline-block;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" 
                                onclick="return confirm('Are you sure you want to delete this user?')">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table></div></div>
@endsection


@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
       // Ensure Bootstrap tooltips work
    if (typeof $.fn.tooltip !== 'undefined') {
        $('[data-toggle="tooltip"]').tooltip(); 
    } else {
        console.warn("Bootstrap tooltip is not loaded.");
    }

        // Search functionality
        $("#searchInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            console.log("Search Value: ", value); // Debugging output
            var hasResults = false;

            $("#UsersTable tbody tr.searchable").each(function() {
                var rowText = $(this).text().toLowerCase();
                if (rowText.indexOf(value) > -1) {
                    $(this).show();
                    hasResults = true;
                } else {
                    $(this).hide();
                }
            });

            // Show/hide "No Results" message
            if (hasResults) {
                $("#noResults").hide();
            } else {
                $("#noResults").show();
            }
        });
    });
</script>
@endsection