@extends('layouts/contentNavbarLayout')

@section('title', 'Wallet - Wallet Amount')

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none">Dashboard</a> /
        </span>
        Wallet
    </h4>

    <h1>Task List</h1>

    <table class="table">
        <thead>
            <tr>
                <th>Task Name</th>
                <th>Description</th>
                <th>Status</th>
                <th>Actions</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <td>{{ $task->name }}</td>
                    <td>{{ $task->description }}</td>
                    <td>
                        <form action="{{ route('tasks.updateStatus', $task->id) }}" method="POST">
                            @csrf
                            <select name="status" onchange="this.form.submit()">
                                <option value="pending" {{ $task->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="in_progress" {{ $task->status == 'in_progress' ? 'selected' : '' }}>In
                                    Progress</option>
                                <option value="completed" {{ $task->status == 'completed' ? 'selected' : '' }}>Completed
                                </option>
                            </select>
                        </form>
                    </td>
                    <td>
                        <form action="{{ route('tasks.addNote', $task->id) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <textarea name="note" class="form-control" placeholder="Add a note..." rows="2"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm">Add Note</button>
                        </form>
                    </td>
                    <td>
                        @foreach ($task->notes as $note)
                            <div>
                                <p>{{ $note->note }} <small>({{ $note->created_at->format('Y-m-d H:i') }})</small></p>
                            </div>
                        @endforeach
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    {{-- {{ $tasks->links() }} --}}

@endsection

<script>
    $(document).on('change', 'select[name="status"]', function() {
        var status = $(this).val();
        var taskId = $(this).closest('tr').data('task-id');

        $.ajax({
            url: '/admin/tasks/' + taskId + '/update-status',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                status: status
            },
            success: function(response) {
                alert('Task status updated successfully');
            }
        });
    });
</script>