access pokemon details on creating and updating

app/Http/Controllers/TeamController.php

@@ -92,8 +92,8 @@ public function destroy($id): \Illuminate\Http\RedirectResponse
 
     private function createSelectedPokemonsArray(TeamRequest $request): array
     {
-        return $request->input('selected_pokemons')
-        ? explode(',', $request->input('selected_pokemons'))
-        : [];
+        $selectedPokemons = $request->input('selected_pokemons', '');
+        return !empty($selectedPokemons) ? explode(',', $selectedPokemons) : [];
     }
+
 }

resources/js/app.js

@@ -4,10 +4,11 @@ import { initializePokemonSelection } from './initializePokemonSelection.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     if (window.location.pathname === '/teams/create') {
-        initializePokemonSelection('.slot', '.pokemon-card', '#pokemonModal', '#selectedPokemons');
+        initializePokemonSelection('.slot', '.add-pokemon-btn', '#pokemonModal', '#selectedPokemons');
+
     }
 });
 
 document.addEventListener('DOMContentLoaded', () => {
-    initializePokemonSelection('.slot', '.pokemon-card', '#pokemonModal', '#selectedPokemons');
+    initializePokemonSelection('.slot', '.add-pokemon-btn', '#pokemonModal', '#selectedPokemons');
 });

resources/js/initializePokemonSelection.js

@@ -1,61 +1,98 @@
-export function initializePokemonSelection(slotSelector, pokemonCardSelector, modalSelector, hiddenInputSelector) {
+export function initializePokemonSelection(slotSelector, addPokemonBtnSelector, modalSelector, hiddenInputSelector) {
     const selectedPokemons = {};
     let currentSlotId = null;
 
-    function updateSlotDisplay(slotId, pokemonName) {
-        document.getElementById(`slot-${slotId}`).textContent = pokemonName || "Empty";
+    function updateSlotDisplay(slotId, pokemonName, pokemonSprite) {
+        const slotElement = document.getElementById(`slot-${slotId}`);
+        if (pokemonName) {
+            slotElement.innerHTML = `
+            <div class="card text-center">
+                <img class="card-img-top" src="${pokemonSprite}" alt="Sprite of ${pokemonName}" style="object-fit: contain; aspect-ratio: 1/1" height="200px">
+                <div class="card-body p-2">
+                    <h5 class="card-title mb-0">${pokemonName}</h5>
+                </div>
+            </div>
+        `;
+        } else {
+            slotElement.innerHTML = "";
+        }
     }
 
     function updateHiddenInput() {
-        document.querySelector(hiddenInputSelector).value = Object.values(selectedPokemons).join(',');
+        const hiddenInput = document.querySelector(hiddenInputSelector);
+        hiddenInput.value = Object.values(selectedPokemons).join(',');
     }
 
+
     function updateCardVisuals() {
-        document.querySelectorAll(pokemonCardSelector).forEach(card => {
+        document.querySelectorAll('.pokemon-card').forEach(card => {
             card.classList.remove('selected-green', 'selected-blue');
+            const pokemonId = card.querySelector('.add-pokemon-btn').dataset.pokemonId;
+            const addButton = card.querySelector('.add-pokemon-btn');
 
-            if (Object.values(selectedPokemons).includes(card.dataset.pokemonId)) {
-                card.classList.add('selected-blue');
-            }
-            if (selectedPokemons[currentSlotId] === card.dataset.pokemonId) {
-                card.classList.remove('selected-blue');
-                card.classList.add('selected-green');
+            if (selectedPokemons[currentSlotId] === pokemonId) {
+                updateCardIfSelected(card, addButton);
+            } else if (Object.values(selectedPokemons).includes(pokemonId)) {
+                updateCardIfSelectedOnAnotherSlot(card, addButton);
+            } else {
+                updateCardIfNotSelected(card, addButton);
             }
         });
     }
 
+    function updateCardIfSelected(card, addButton) {
+        card.classList.add('selected-green');
+        addButton.classList.remove('btn-success');
+        addButton.classList.add('btn-danger');
+        addButton.innerHTML = '<i class="bi bi-dash"></i>';
+    }
+
+    function updateCardIfSelectedOnAnotherSlot(card, addButton) {
+        card.classList.add('selected-blue');
+        addButton.classList.remove('btn-danger');
+        addButton.classList.add('btn-success');
+        addButton.innerHTML = '<i class="bi bi-plus"></i>';
+    }
+
+    function updateCardIfNotSelected(card, addButton) {
+        addButton.classList.remove('btn-danger');
+        addButton.classList.add('btn-success');
+        addButton.innerHTML = '<i class="bi bi-plus"></i>';
+    }
+
     function handleSlotClick(event) {
         currentSlotId = event.currentTarget.dataset.slotId;
         updateCardVisuals();
         $(modalSelector).modal('show');
     }
 
-    function handleCardClick(event) {
-        const card = event.currentTarget;
-        const pokemonId = card.dataset.pokemonId;
-        const pokemonName = card.dataset.pokemonName;
+    function handleAddButtonClick(event) {
+        const button = event.currentTarget;
+        const pokemonId = button.dataset.pokemonId;
+        const pokemonName = button.dataset.pokemonName;
+        const pokemonSprite = button.dataset.pokemonSprite;
 
         if (selectedPokemons[currentSlotId] === pokemonId) {
             delete selectedPokemons[currentSlotId];
             updateSlotDisplay(currentSlotId);
         } else if (!Object.values(selectedPokemons).includes(pokemonId)) {
             selectedPokemons[currentSlotId] = pokemonId;
-            updateSlotDisplay(currentSlotId, pokemonName);
+            updateSlotDisplay(currentSlotId, pokemonName, pokemonSprite);
         } else {
             alert("This Pokemon is already selected in another slot.");
             return;
         }
 
         updateHiddenInput();
         updateCardVisuals();
-        $(modalSelector).modal('hide');
     }
 
+
     document.querySelectorAll(slotSelector).forEach(slot => {
         slot.addEventListener('click', handleSlotClick);
     });
 
-    document.querySelectorAll(pokemonCardSelector).forEach(card => {
-        card.addEventListener('click', handleCardClick);
+    document.querySelectorAll(addPokemonBtnSelector).forEach(button => {
+        button.addEventListener('click', handleAddButtonClick);
     });
 }

resources/views/partials/pokemon-modal.blade.php

@@ -8,11 +8,18 @@
                 <div class="row">
                     @foreach($pokemons as $pokemon)
                         <div class="col-3 mb-3">
-                            <div class="pokemon-card border p-2 text-center"
-                                 data-pokemon-id="{{ $pokemon->id }}"
-                                 data-pokemon-name="{{ $pokemon->name }}"
-                                 style="cursor: pointer;">
-                                {{ $pokemon->name }}
+                            <div class="pokemon-card border p-2 text-center">
+                                <h6>{{ $pokemon->name }}</h6>
+                                <button class="btn add-pokemon-btn"
+                                        data-pokemon-id="{{ $pokemon->id }}"
+                                        data-pokemon-name="{{ $pokemon->name }}"
+                                        data-pokemon-sprite="/images/pokemon_sprites/{{$pokemon->sprite}}"
+                                        data-bs-dismiss="modal">
+                                    <i class="bi bi-plus"></i>
+                                </button>
+                                <a href="{{ route('pokemons.show', $pokemon) }}" target="_blank" class="btn btn-secondary">
+                                    <i class="bi bi-eye"></i>
+                                </a>
                             </div>
                         </div>
                     @endforeach
@@ -24,7 +31,7 @@
 
 <style>
     .pokemon-card {
-        cursor: pointer;
+        cursor: default;
     }
     .pokemon-card.selected-blue {
         background-color: #007bff;
@@ -34,4 +41,8 @@
         background-color: #28a745;
         color: white;
     }
+    .btn-remove {
+        background-color: #dc3545;
+        color: white;
+    }
 </style>

resources/views/partials/team-form.blade.php

@@ -3,17 +3,17 @@
     <div class="row">
         @for ($i = 1; $i <= 3; $i++)
             <div class="col-4 mb-3">
-                <div class="slot border p-2 text-center" data-slot-id="{{ $i }}" style="cursor: pointer;">
-                    <span id="slot-{{ $i }}">Empty</span>
+                <div class="slot border p-2 text-center" data-slot-id="{{ $i }}">
+                    <span id="slot-{{ $i }}"></span>
                 </div>
             </div>
         @endfor
     </div>
     <div class="row">
         @for ($i = 4; $i <= 6; $i++)
             <div class="col-4 mb-3">
-                <div class="slot border p-2 text-center" data-slot-id="{{ $i }}" style="cursor: pointer;">
-                    <span id="slot-{{ $i }}">Empty</span>
+                <div class="slot border p-2 text-center" data-slot-id="{{ $i }}">
+                    <span id="slot-{{ $i }}"></span>
                 </div>
             </div>
         @endfor
@@ -24,9 +24,14 @@
 
 <style>
     .slot {
-        height: 100px;
+        height: 260px;
+        cursor: pointer;
         background-color: #f0f0f0;
         line-height: 70px;
         font-size: 1.2em;
     }
+
+    .slot:hover {
+        background-color: #d4f3e8;
+    }
 </style>

resources/views/pokemons/index.blade.php

@@ -23,9 +23,8 @@
                         <a href="{{ route('pokemons.show', [
                                                         'pokemon' => $pokemon,
                                                         'backRoute' => 'pokemons.index'
-                                                        ]
-                                                    )
-                                                }}">
+                                                        ])
+                                                    }}">
                             {{ $pokemon->name }}
                         </a>
                     </td>

resources/views/pokemons/show.blade.php

@@ -2,10 +2,31 @@
 
 @section("content")
 
+<?php
+    function generateBackRoute(): ?string
+    {
+        $backRoute = null;
+        if (isset($_GET['backRoute'])) {
+            if (is_array($_GET['backRoute'])) {
+                $routeName = $_GET['backRoute'][0];
+                $idOfRoute = $_GET['backRoute'][1];
+                $backRoute = route($routeName, $idOfRoute);
+            } else {
+                $backRoute = route($_GET['backRoute']);
+            }
+        }
+        return $backRoute;
+    }
+
+    $backRoute = generateBackRoute();
+?>
+
 <div class="container mt-5 w-75">
-    <a href="{{ route($_GET['backRoute']) }}" class="btn btn-primary mb-3"><i class="bi bi-arrow-return-left"></i>
-        Back
-    </a>
+    @if(isset($backRoute))
+        <a href="{{ generateBackRoute() }}" class="btn btn-primary mb-3"><i class="bi bi-arrow-return-left"></i>
+            Back
+        </a>
+    @endif
 
     <h1>{{ $pokemon->name }}</h1>
 

resources/views/teams/show.blade.php

@@ -14,7 +14,13 @@
             <div class="card m-1">
                 <img class="card-img-top" src="/images/pokemon_sprites/{{$pokemon->sprite}}" alt="Sprite of {{$pokemon->name}}" style="object-fit: contain; aspect-ratio: 1/1" height="350px">
                 <div class="card-body">
-                    <h5 class="card-title">{{ $pokemon->name }}</h5>
+                    <a href="{{ route('pokemons.show', [
+                                        'pokemon' => $pokemon,
+                                        'backRoute' => ['teams.show', $team->id]
+                                        ])
+                                    }}">
+                        <h5 class="card-title">{{ $pokemon->name }}</h5>
+                    </a>
                     <div class="type-wrapper">
                         <span class="type-tag" style="background-color: {{ $pokemon->type1->color }};">
                             {{ strtoupper($pokemon->type1->name) }}