@extends('adminlte::page')

@section('title', 'Tasks')

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

@section('content')
    <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between">
            <h1 class="card-title" style="width:80%"> Tasks</h1>
    
        </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="tasksTable"> 
        <thead>
            <tr>
              
                <th>Category</th>
                <th>Customer Name</th>
                <th>City Name</th>
                <th>Mobile Number</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
       
            @foreach ($tasks as $key => $task)
                <tr style="font-weight: {{ $task->is_view == 0 ? 'bold' : 'normal' }};" class="searchable">
                   
                    <td>{{ $task->category ? $task->category->name : 'No Category' }}</td> <!-- Gracefully handle missing category -->
                    <td>{{ $task->customer_name }}</td>
                    <td>{{ $task->city_name }}</td>
                    <td>{{ $task->mobile_number }}</td>
                    <td>
                        <a href="{{ route('admin.tasks.view', $task->id) }}" class="btn btn-info btn-sm">view</a>
                        <!--<a href="{{ route('admin.tasks.edit', $task->id) }}" class="btn btn-warning btn-sm">Edit</a>-->
                        <form action="{{ route('admin.tasks.destroy', $task->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
             
            @endforeach
        </tbody>
    </table>
    </div>
    </div>
@stop

@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;

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