@extends('layout.master')
@section('content')

<div class="main-content app-content">
    <div class="container-fluid">

        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Todo</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Todo List</li>
                </ol>
            </div>
            <div class="d-flex">
              <div class="justify-content-center">
                @can('todo show')
                  <a type="button" href="{{ route('todo.create') }}" class="btn btn-primary my-2 btn-icon-text d-inline-flex align-items-center">
                    <i class="fa-solid fa-plus me-2 fs-14"></i> New Todo
                  </a>
                @endcan()
              </div>
            </div>
        </div>
            <div id="successMessage" class="alert alert-success alert-dismissible fade show" role="alert">
                Todo 
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>


        <div class="col-lg-12">
            <div class="card custom-card mg-b-20 tasks">
                <div class="card-body">
                    <div class="row card-header border-bottom-0 pt-0 ps-0 pe-0 pb-2 d-flex">
                        <div class="col-md-8">
                            <div class="card-title">Todo</div> 
                        </div>
                        <div class="col-md-2">
                            <form method="get" action="{{ route('todo.index') }}">
                                @csrf
                                <input type="date" class="form-control" name="start">
                                <input type="date" class="form-control mt-2" name="end">
                                <input type="submit" class="form-control btn btn-primary mt-2" name="Submit">
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive tasks mt-3">
                        <table id="delete-datatable_wrapper" class="table card-table table-vcenter text-nowrap mb-0 border">
                            <thead>
                                <tr>
                                <th class="wd-lg-10p">Id</th>
                                <th class="wd-lg-10p">Task Heading</th>
                                <th class="wd-lg-20p ">Date</th>
                                <th class="wd-lg-20p">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($todos as $key=> $list)
                            <tr>
                                <td >
                                {{ $key+1}}
                                </td>
                                <td>
                                    {{ $list->todoHeading }}
                                </td>
                                <td>
                                    {{ $list->date }}
                                </td>
                              
                                       
                                <td>
                                   
                                    
                                    @can( 'todo show')

                                    <a href="{{ route('todo.show',$list->id) }}" class="btn btn-sm btn-primary">Show</a>

                                    @endcan()

                                    @can( 'todo delete')

                                    <a onclick="confirmDelete('{{ route('todo.destroy', $list->id) }}')" class="btn btn-sm btn-danger">Delete</a>

                                    @endcan()

                                </td>

                                    </tr>
                                @endforeach
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>




$(document).ready(function() {
    $('#successMessage').hide();

    $('.todo-checkbox').change(function() {
        var todoId = $(this).val(); // Get the todo id
        var status = $(this).is(':checked') ? 'complete' : 'pending'; // Determine the new status

            // Send Ajax request to update the status
        $.ajax({
            url: '/todos/update-status', // URL to handle the request
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}', // CSRF token
                todo_id: todoId,
                status: status
            },
            success: function(response) {
                // Optional: Show success message
                $('#successMessage').text(response.message).show();
                setTimeout(function() {
                    $('#successMessage').hide();
                }, 3000);
            },
            error: function(xhr, status, error) {
                // Optional: Show error message
                $('#statusMessage').text('There was an error updating the status.').show();
                setTimeout(function() {
                    $('#statusMessage').hide();
                }, 3000);
            }
        });
    });
    


});

</script>

@endsection