Add ToggleComplete for TaskController

resources/views/task/index.blade.php

@@ -9,18 +9,25 @@
     <div class="mb-5">
         <a class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" href="/task/create">Create new task</a>
     </div>
-
+    <div class="mb-5">
+        Progress:  {{ $completedTasks}} / {{ $totalTasks  }} completed.
+    </div>
     @foreach ($tasks as $task)
     <div class="block border-2 border-gray-500 p-2">
-        <div><a href="/task/{{ $task->id }}">
-            <h3 class="text-2xl tracking-tight text-blue-800">{{ $task->name }}<h3>
-        </a></div>
-        <div><strong>Where to go:</strong> {{ $task->location }}</div>
-        <div><strong>Time Estimate:</strong> {{ $task->time_estimate }}</div>
+        <div class="flex items-center justify-between">
+            <div>
+                <div><a href="/task/{{ $task->id }}">
+                    <h3 class="text-2xl tracking-tight text-blue-800">{{ $task->name }}<h3>
+                </a></div>
+                <div><strong>Where to go:</strong> {{ $task->location }}</div>
+                <div><strong>Time Estimate:</strong> {{ $task->time_estimate }}</div>
+            </div>
+            <div>
+                <p>{{ ($task->completed) ? "Completed" : "" }}</p>
+            </div>
+        </div>
     </div>    
     @endforeach
 
     <div class="mt-2">{{$tasks -> links()}}</div>
-</x-layout>
-
-$completedCount = Task::where('completed', true)->count();
+</x-layout>

resources/views/task/show.blade.php

@@ -4,12 +4,21 @@
     
     
     <div>
-        <div class="text-lg mb-4"> {{ $task->description }}</div>
+        <div class="text-lg mb-4"> 
+            <h2>What need to do </h2>
+            <p class="text-sm">{{ $task->description }}</p>
+        </div>
         <div><strong>Where to go:</strong> {{ $task->location }}</div>
         <div><strong>Time Estimate:</strong> {{ $task->time_estimate }} hour</div>
         <div><strong>Category:</strong> {{ $task->category->name }}</div>
         <div><strong>Owner:</strong> {{ $task->user->name }}</div>
-
+        <div class="mt-4 mb-4">
+            <form action="/task/{{ $task->id }}/toggle" method="POST" class="d-inline" >
+                @csrf
+                @method('PATCH')
+                <x-form-button>{{ (! $task->completed) ? 'Mark Completed' : "Greate! You nailed it!" }}</x-form-button>
+            </form>
+        </div>
     </div>   
     <div class="mt-5">
         <a href="/task/{{ $task->id }}/edit" class="text-sm text-blue-600 dark:text-blue-500 hover:underline">Edit</a>