From 455a7bddd505dda745576a0084b338b547da4a05 Mon Sep 17 00:00:00 2001
From: Vero Torrenegra <veronicatorrenegra@gmail.com>
Date: Mon, 9 Dec 2024 00:15:55 -0500
Subject: [PATCH 1/2] card update

---
 Modules/Raffle/app/Models/Raffle.php          |   3 +-
 package-lock.json                             |   7 +-
 .../js/Components/Dashboard/ActiveRaffles.vue |  10 +-
 .../js/Components/Dashboard/RaffleCard.vue    | 347 +++++++-----------
 4 files changed, 138 insertions(+), 229 deletions(-)

diff --git a/Modules/Raffle/app/Models/Raffle.php b/Modules/Raffle/app/Models/Raffle.php
index fc9e52b..a8bc159 100644
--- a/Modules/Raffle/app/Models/Raffle.php
+++ b/Modules/Raffle/app/Models/Raffle.php
@@ -45,4 +45,5 @@ public function tickets()
 {
     return $this->hasMany(Ticket::class, 'raffle_id');
 }
-}
+
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5a2b34e..4d199d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,7 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "gananza",
             "dependencies": {
                 "@headlessui/vue": "^1.7.23",
                 "@splidejs/vue-splide": "^0.6.12",
@@ -1570,9 +1571,9 @@
             }
         },
         "node_modules/cross-spawn": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
diff --git a/resources/js/Components/Dashboard/ActiveRaffles.vue b/resources/js/Components/Dashboard/ActiveRaffles.vue
index b3bc4dc..5a812dc 100644
--- a/resources/js/Components/Dashboard/ActiveRaffles.vue
+++ b/resources/js/Components/Dashboard/ActiveRaffles.vue
@@ -3,12 +3,18 @@
     <h2 :class="['text-2xl font-bold mb-6 text-center', theme.textPrimary]">Rifas Activas</h2>
 
     <!-- Mensaje si no hay rifas -->
-    <div v-if="raffles.data.length === 0" :class="theme.textSecondary">
+    <div
+      v-if="raffles.data.length === 0"
+      :class="theme.textSecondary"
+    >
       No hay rifas activas en este momento.
     </div>
 
     <!-- Grid de Rifas (1 fila con 3 cartas) -->
-    <div v-else class="container mx-auto w-full grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div
+      v-else
+      class="container mx-auto w-full grid grid-cols-1 md:grid-cols-3 gap-10"
+    >
       <RaffleCard
         v-for="raffle in raffles.data.slice(0, 3)"
         :key="raffle.id"
diff --git a/resources/js/Components/Dashboard/RaffleCard.vue b/resources/js/Components/Dashboard/RaffleCard.vue
index b5b948c..39e3726 100644
--- a/resources/js/Components/Dashboard/RaffleCard.vue
+++ b/resources/js/Components/Dashboard/RaffleCard.vue
@@ -1,26 +1,56 @@
 <template>
   <!-- Main Container -->
-  <div :class="['raffle-card shadow-lg rounded-lg p-4 flex flex-col items-center gap-4 mx-auto', theme.cardBackground]">
-    <!-- Raffle Image -->
-    <img
-      src="../../../../public/assets/media/auth/Letra-Gananza.svg"
-      alt="Prize"
-      class="h-32 w-32 object-cover rounded-lg mb-3"
-    />
-    <!-- Raffle Title and Organizer -->
-    <h3 :class="['text-lg font-semibold', theme.textPrimary]">{{ raffle.name }}</h3>
-    <p :class="theme.textSecondary">Organizador: {{ raffle.organizer.name }}</p>
-    <p :class="theme.textSecondary">
-      Ticket de precios <span :class="theme.textHighlight">${{ raffle.ticket_price }}</span>
-    </p>
-    <!-- Buy Button -->
-    <button
-      @click.prevent="openSelectionModal"
-      :class="theme.buttonPrimary"
-      class="py-2 px-4 rounded-lg hover:scale-105 transition"
-    >
-      Comprar
-    </button>
+  <div
+    :class="['raffle-card shadow-lg rounded-lg p-6 items-center gap-5 mx-auto grid grid-cols-2', theme.cardBackground]"
+  >
+    <!-- Raffle Image and Countdown -->
+    <div>
+      <!-- Countdown Timer -->
+      <div
+        class="countdown p-0.3 x-sm rounded-lg text-center"
+        :class="countdownEnded ? 'bg-red-600 text-white' : 'bg-yellow-600 text-white'"
+      >
+        <p v-if="countdownEnded">¡Ya terminó!</p>
+        <p v-else>
+          {{ countdown.days }} :
+          {{ countdown.hours }} :
+          {{ countdown.minutes }} :
+          {{ countdown.seconds }}
+        </p>
+      </div>
+      <img
+        src="../../../../public/assets/media/auth/Logo-Gananza2.svg"
+        alt="Prize"
+        class="h-32 w-32 flex items-center justify-center rounded-lg mb-3"
+      />
+    </div>
+
+    <!-- Raffle Details -->
+    <div class="flex flex-col justify-center">
+      <h3 :class="['text-lg font-semibold', theme.textPrimary]">{{ raffle.name }}</h3>
+      <p :class="theme.textSecondary">Organizador: {{ raffle.organizer.name }}</p>
+      <p :class="theme.textSecondary">
+        Precio: <span :class="theme.textHighlight">${{ raffle.ticket_price }}</span>
+      </p>
+      <p :class="theme.textSecondary">Números disponibles: {{ raffle.total_tickets }}</p>
+      <p :class="theme.textSecondary">Total vendido: ${{ raffle.total_sales }}</p>
+      <p :class="theme.textSecondary">Fecha de juego: <br>{{ raffle.end_date }}</p>
+
+      <!-- Buy Button -->
+      <button
+        v-if="!countdownEnded"
+        @click.prevent="openSelectionModal"
+        :class="[theme.buttonPrimary, 'mt-4 py-2 px-4 rounded-lg hover:scale-105 transition']"
+      >
+        Comprar
+      </button>
+      <p
+        v-else
+        class="text-gray-500 mt-4"
+      >
+        Rifa finalizada
+      </p>
+    </div>
 
     <!-- Modal for Selecting Numbers -->
     <TransitionRoot
@@ -40,7 +70,7 @@
         >
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-3xl p-8 rounded-2xl shadow-2xl flex gap-8']">
             <!-- Number Selection -->
-            <div class="w-2/3 flex flex-col items-center gap-4">
+            <div class="w-2/3 grid grid-col items-center justify-cente gap-x-6">
               <div class="grid grid-cols-5 gap-4 mb-4">
                 <button
                   v-for="number in paginatedNumbers"
@@ -51,6 +81,23 @@
                   {{ number }}
                 </button>
               </div>
+
+              <!-- Buttons: "Limpiar" and "Random" -->
+              <div class="flex justify-evenly mt-2 p-6">
+                <button
+                  @click="clearSelection"
+                  :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']"
+                >
+                  Limpiar
+                </button>
+                <button
+                  @click="selectRandomNumbers"
+                  :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']"
+                >
+                  Random
+                </button>
+              </div>
+
               <!-- Pagination for Numbers -->
               <div class="flex justify-center items-center w-full">
                 <button
@@ -58,17 +105,17 @@
                   :disabled="currentPage === 1"
                   class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
                 >
-                  Atras
+                  &lt;
                 </button>
-                <span> Página {{ currentPage }} de {{ totalPages }}</span>
                 <button
                   @click="goToNextPage"
                   :disabled="currentPage === totalPages"
                   class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
                 >
-                  Siguiente
+                  &gt;
                 </button>
               </div>
+              <div><span>Página {{ currentPage }} de {{ totalPages }}</span></div>
             </div>
 
             <!-- Invoice Section -->
@@ -80,7 +127,8 @@
               </div>
               <div class="w-full mb-4">
                 <label class="text-gray-700">Numeros Seleccionados</label>
-                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ selectedNumber.join(', ') || 'Ninguno' }}
+                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">
+                  {{ selectedNumber.join(', ') || 'Ninguno' }}
                 </div>
               </div>
               <button
@@ -94,229 +142,82 @@
         </TransitionChild>
       </Dialog>
     </TransitionRoot>
-
-    <!-- Modal for Invoice -->
-    <TransitionRoot
-      appear
-      :show="showModal"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        @close="closeModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          leave="ease-in duration-200"
-        >
-          <DialogPanel :class="[theme.modalBackground, 'w-full max-w-lg p-8 rounded-2xl shadow-2xl']">
-            <div>
-              <!-- Invoice Table -->
-              <table
-                cellspacing="0"
-                cellpadding="10"
-                class="w-full text-left border-collapse"
-              >
-                <thead>
-                  <tr>
-                    <th class="border-b-2 py-2">Nombre</th>
-                    <th class="border-b-2 py-2">Tus Numeros</th>
-                    <th class="border-b-2 py-2">Total a pagar</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="border-t py-2">{{ userName }}</td>
-                    <td class="border-t py-2">{{ selectedNumber.join(', ') || 'None' }}</td>
-                    <td class="border-t py-2">
-                      ${{ selectedNumber.length > 0 ? (raffle.ticket_price * selectedNumber.length).toFixed(2) : '0.00'
-                      }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!-- Payment and Close Buttons -->
-            <button
-              @click="openVerificationModal"
-              :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg mr-2']"
-            >
-              Ir a pagar
-            </button>
-            <button
-              @click="closeModal"
-              :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']"
-            >
-              Cerrar
-            </button>
-          </DialogPanel>
-        </TransitionChild>
-      </Dialog>
-    </TransitionRoot>
-
-    <!-- Payment Verification Modal -->
-    <TransitionRoot
-      appear
-      :show="showVerificationModal"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        @close="closeVerificationModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          leave="ease-in duration-200"
-        >
-          <DialogPanel :class="[theme.modalBackground, 'w-full max-w-lg p-8 rounded-2xl shadow-2xl']">
-            <h2>Aquí va la pasarela de pagos</h2>
-            <!-- Receipt Validation Form -->
-            <button
-              @click="closeVerificationModal"
-              :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg mt-4']"
-            >
-              Cerrar
-            </button>
-          </DialogPanel>
-        </TransitionChild>
-      </Dialog>
-    </TransitionRoot>
   </div>
 </template>
 
 <script setup>
-/* Imports and Setup */
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel } from '@headlessui/vue';
 
 /* Props and Reactive Data */
-const raffleProps = defineProps({ raffle: Object });
+const raffleProps = defineProps({
+  raffle: {
+    type: Object,
+    required: true,
+  },
+});
 const showSelectionModal = ref(false);
-const showModal = ref(false);
-const showVerificationModal = ref(false);
-const totalTickets = ref(raffleProps.raffle.total_tickets || 0);
-const referenceNumber = ref('');
-const numbers = ref([]);
 const selectedNumber = ref([]);
-
-/* Pagination Variables */
-const currentPage = ref(1);
-const itemsPerPage = 15;
-const totalPages = computed(() => Math.ceil(totalTickets.value / itemsPerPage));
-
-/* User and Theme Settings */
-const user = usePage().props.auth?.user || null;
-const userName = ref(user ? user.name : 'Unauthenticated User');
-const { isDarkMode } = useDarkMode();
-const theme = computed(() => ({
-  cardBackground: isDarkMode.value ? 'bg-[#1c1c1e]' : 'bg-[#f9f9f9]',
-  modalBackground: isDarkMode.value ? 'bg-[#2c2c2e]' : 'bg-white',
-  buttonPrimary: 'bg-blue-600 text-white',
-  buttonDanger: 'bg-red-500 text-white',
-}));
-
-/* Number Selection Logic */
-const initializeNumbers = () => {
-  numbers.value = Array.from({ length: totalTickets.value }, (_, i) => i + 1);
-};
-
-const paginatedNumbers = computed(() => {
-  const start = (currentPage.value - 1) * itemsPerPage;
-  const end = start + itemsPerPage;
-  return numbers.value.slice(start, end);
+const countdown = ref({
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
 });
+const countdownEnded = ref(false);
 
-const goToNextPage = () => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value += 1;
-  }
-};
-
-const goToPreviousPage = () => {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
-  }
-};
-
-const handleNumberClick = (number) => {
-  const index = selectedNumber.value.indexOf(number);
-  if (index === -1) {
-    selectedNumber.value.push(number);
-  } else {
-    selectedNumber.value.splice(index, 1);
-  }
-};
-
-/* Modal Logic */
-const openSelectionModal = () => {
-  initializeNumbers();
-  showSelectionModal.value = true;
-};
+const calculateCountdown = () => {
+  const now = new Date();
+  const endDate = new Date(raffleProps.raffle.end_date);
 
-const closeSelectionModal = () => {
-  showSelectionModal.value = false;
-};
+  const totalMilliseconds = endDate - now;
 
-const proceedToPaymentModal = () => {
-  if (selectedNumber.value.length === 0) {
-    alert('Please select at least one number.');
+  if (totalMilliseconds <= 0) {
+    countdownEnded.value = true;
+    countdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
     return;
   }
-  closeSelectionModal();
-  showModal.value = true;
-};
 
-const openModal = () => {
-  showModal.value = true;
-};
+  countdownEnded.value = false;
 
-const closeModal = () => {
-  showModal.value = false;
+  const totalSeconds = Math.floor(totalMilliseconds / 1000);
+  countdown.value = {
+    days: Math.floor(totalSeconds / (24 * 60 * 60)),
+    hours: Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60)),
+    minutes: Math.floor((totalSeconds % (60 * 60)) / 60),
+    seconds: totalSeconds % 60,
+  };
 };
 
-const openVerificationModal = () => {
-  closeModal();
-  showVerificationModal.value = true;
-};
+let timerInterval;
+onMounted(() => {
+  calculateCountdown();
+  timerInterval = setInterval(calculateCountdown, 1000);
+});
 
-const closeVerificationModal = () => {
-  showVerificationModal.value = false;
-};
+onUnmounted(() => {
+  clearInterval(timerInterval);
+});
+
+const { isDarkMode } = useDarkMode();
+const theme = computed(() => ({
+  cardBackground: isDarkMode.value ? 'bg-[#1c1c1e]' : 'bg-[#f9f9f9]',
+  textPrimary: isDarkMode.value ? 'text-white' : 'text-gray-900',
+  textSecondary: isDarkMode.value ? 'text-gray-400' : 'text-gray-600',
+  textHighlight: isDarkMode.value ? 'text-yellow-300' : 'text-yellow-600',
+  buttonPrimary: 'bg-blue-600 text-white',
+}));
 </script>
 
 <style scoped>
-/* Button Styles */
-.number-button {
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.number-button:hover {
-  cursor: pointer;
-  transform: scale(1.05);
-}
-
-.number-button:active,
-.number-button.bg-blue-600 {
-  transform: scale(0.95);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
-}
-
-.number-button.bg-blue-600 {
-  background-color: #2563eb;
-  color: #fff;
-}
-
-.number-button.bg-gray-200 {
-  background-color: #f9f9f9;
+.raffle-card {
+  max-width: 500px;
 }
 
-.number-button.selected {
-  background-color: #2563eb;
+.countdown {
+  font-size: 1.2rem;
+  font-weight: bold;
 }
 </style>

From 63db9c99942ffaa0ed1633e6408ea8889e6f329f Mon Sep 17 00:00:00 2001
From: Vero Torrenegra <veronicatorrenegra@gmail.com>
Date: Mon, 9 Dec 2024 00:51:25 -0500
Subject: [PATCH 2/2] edit card

---
 .../js/Components/Dashboard/RaffleCard.vue    | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/Dashboard/RaffleCard.vue b/resources/js/Components/Dashboard/RaffleCard.vue
index 39e3726..eab38e6 100644
--- a/resources/js/Components/Dashboard/RaffleCard.vue
+++ b/resources/js/Components/Dashboard/RaffleCard.vue
@@ -35,8 +35,6 @@
       <p :class="theme.textSecondary">Números disponibles: {{ raffle.total_tickets }}</p>
       <p :class="theme.textSecondary">Total vendido: ${{ raffle.total_sales }}</p>
       <p :class="theme.textSecondary">Fecha de juego: <br>{{ raffle.end_date }}</p>
-
-      <!-- Buy Button -->
       <button
         v-if="!countdownEnded"
         @click.prevent="openSelectionModal"
@@ -44,6 +42,7 @@
       >
         Comprar
       </button>
+
       <p
         v-else
         class="text-gray-500 mt-4"
@@ -70,7 +69,7 @@
         >
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-3xl p-8 rounded-2xl shadow-2xl flex gap-8']">
             <!-- Number Selection -->
-            <div class="w-2/3 grid grid-col items-center justify-cente gap-x-6">
+            <div class="w-2/3 grid items-center gap-x-6">
               <div class="grid grid-cols-5 gap-4 mb-4">
                 <button
                   v-for="number in paginatedNumbers"
@@ -117,8 +116,6 @@
               </div>
               <div><span>Página {{ currentPage }} de {{ totalPages }}</span></div>
             </div>
-
-            <!-- Invoice Section -->
             <div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-lg shadow-lg">
               <h3 class="text-lg font-semibold mb-4">Factura</h3>
               <div class="w-full mb-4">
@@ -126,7 +123,7 @@
                 <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ userName || 'None' }}</div>
               </div>
               <div class="w-full mb-4">
-                <label class="text-gray-700">Numeros Seleccionados</label>
+                <label class="text-gray-700">Números Seleccionados</label>
                 <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">
                   {{ selectedNumber.join(', ') || 'Ninguno' }}
                 </div>
@@ -147,7 +144,6 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { usePage } from '@inertiajs/vue3';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel } from '@headlessui/vue';
 
@@ -168,10 +164,18 @@ const countdown = ref({
 });
 const countdownEnded = ref(false);
 
+/* Methods */
+const openSelectionModal = () => {
+  if (!raffleProps.raffle.total_tickets || raffleProps.raffle.total_tickets <= 0) {
+    alert('No hay boletos disponibles');
+    return;
+  }
+  showSelectionModal.value = true;
+};
+
 const calculateCountdown = () => {
   const now = new Date();
   const endDate = new Date(raffleProps.raffle.end_date);
-
   const totalMilliseconds = endDate - now;
 
   if (totalMilliseconds <= 0) {
@@ -191,23 +195,25 @@ const calculateCountdown = () => {
   };
 };
 
+/* Lifecycle */
 let timerInterval;
 onMounted(() => {
   calculateCountdown();
   timerInterval = setInterval(calculateCountdown, 1000);
 });
-
 onUnmounted(() => {
   clearInterval(timerInterval);
 });
 
+/* Theme Configuration */
 const { isDarkMode } = useDarkMode();
 const theme = computed(() => ({
+  textPrimary: isDarkMode.value ? 'text-white' : 'text-black',
   cardBackground: isDarkMode.value ? 'bg-[#1c1c1e]' : 'bg-[#f9f9f9]',
-  textPrimary: isDarkMode.value ? 'text-white' : 'text-gray-900',
   textSecondary: isDarkMode.value ? 'text-gray-400' : 'text-gray-600',
   textHighlight: isDarkMode.value ? 'text-yellow-300' : 'text-yellow-600',
   buttonPrimary: 'bg-blue-600 text-white',
+  modalBackground: isDarkMode.value ? 'bg-[#2c2c2e]' : 'bg-white',
 }));
 </script>