Add octan and add team (WIP)

resources/js/pages/tournaments/Show.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import Button from '@/components/ui/button/button.svelte';
     import * as Card from '@/components/ui/card/index.js';
+    import Input from '@/components/ui/input/input.svelte';
     import * as Table from '@/components/ui/table';
     import AppLayout from '@/layouts/AppLayout.svelte';
     import { type Tournament } from '@/types';
@@ -13,8 +14,34 @@
 
     let { tournament }: { tournament: Tournament } = $props();
 
-    function handleAddTeam() {
+    let addTeam = $state(false);
+    let teamName = $state('');
+
+    async function handleAddTeam() {
         // add a new row to write the team name, on write complete save it
+        tournament.teams.push({ name: teamName });
+
+        // post request to /tournaments/{tournament}/addTeam
+
+        const response = await fetch(`/api/tournaments/${tournament.id}/addTeam`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                team_name: teamName,
+            }),
+        });
+
+        if (response.ok) {
+            addTeam = false;
+            teamName = '';
+        } else {
+            // handle error
+            console.log('response', JSON.stringify(response));
+            const data = await response.json();
+            console.log('data', JSON.stringify(data));
+        }
     }
 </script>
 
@@ -43,13 +70,17 @@
                             </Table.Cell>
                         </Table.Row>
                     {/each}
-                    <Table.Row>
-                        <Table.Cell>
-                            <Button onsubmit={handleAddTeam} variant="outline">+ Add Team</Button>
-                        </Table.Cell>
-                    </Table.Row>
+                    {#if addTeam}
+                        <Table.Row>
+                            <Table.Cell><Input bind:value={teamName} placeholder="Team Name" /></Table.Cell>
+                            <Table.Cell><Button onclick={handleAddTeam}>Save</Button></Table.Cell>
+                        </Table.Row>
+                    {/if}
                 </Table.Body>
             </Table.Root>
         </Card.Content>
+        <Card.Footer>
+            <Button onclick={() => (addTeam = true)} variant="outline">+ Add Team</Button>
+        </Card.Footer>
     </Card.Root>
 </AppLayout>