@extends('adminlte::page')

@section('title', 'Categories')

  

 
  
                    @section('content_header')
    <h1></h1>

    
@endsection

   @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

@section('content')
    <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between">
            <h1 class="card-title" style="width:80%"> Categories</h1>
       <a href="{{ route('admin.categories.create') }}" class="btn btn-primary mb-3">Add Category</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="categoryTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Image</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($categories as $category)
                <tr class="searchable">
                    <td>{{ $category->id }}</td>
                    <td>
                        @if ($category->image)
                            <img src="{{  $category->image }}" alt="{{ $category->name }}" width="50" height="50">
                        @else
                            No Image
                        @endif
                    </td>
                    <td>{{ $category->name }}</td>
                    <td>
                        <a href="{{ route('admin.categories.edit', $category) }}" class="btn btn-warning btn-sm">Edit</a>
                        <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">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;

            $("#categoryTable 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