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



        <div class="container mt-5">
            <div class="accordion" id="todoAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#task{{ $todo->id }}">
                            <strong>{{ $todo->todoHeading }}</strong> <span class="badge bg-secondary ms-3">{{ $todo->date }}</span>
                        </button>
                    </h2>
                    <div id="task{{ $todo->id }}" class="accordion-collapse collapse show" data-bs-parent="#todoAccordion">
                        <div class="accordion-body">
                            <ul class="list-group">
                                @foreach ($todo->todo as $task)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <span>{{ $task['todo'] }}</span>
                                        <span class="badge {{ $task['status'] == 'complete' ? 'bg-success' : 'bg-warning' }}">
                                            {{ ucfirst($task['status']) }}
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                            
                        </div>
                    </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