From 3d6e9b97c7e9eb6ec5a98f84c77a2831cf3bc17a Mon Sep 17 00:00:00 2001
From: lizandrogd <77708265+lizandrogd@users.noreply.github.com>
Date: Sun, 28 Jul 2024 17:52:50 -0500
Subject: [PATCH] Update show-planes.blade.php

---
 .../views/livewire/show-planes.blade.php      | 75 ++++++++++++++-----
 1 file changed, 55 insertions(+), 20 deletions(-)

diff --git a/resources/views/livewire/show-planes.blade.php b/resources/views/livewire/show-planes.blade.php
index 8f767eb..1cb8c40 100755
--- a/resources/views/livewire/show-planes.blade.php
+++ b/resources/views/livewire/show-planes.blade.php
@@ -332,15 +332,20 @@
                             @endif
                         </tbody>
                     </table>
-                    <div><span class="font-semibold text-gray-700">Email:</span>{{ $consulta_verUsuarios->correo ?? '' }}</div>
-                    <div><span class="font-semibold text-gray-700">Password:</span>{{ $consulta_verUsuarios->password ?? '' }}</div>
+                    <div><span
+                            class="font-semibold text-gray-700">Email:</span>{{ $consulta_verUsuarios->correo ?? '' }}
+                    </div>
+                    <div><span
+                            class="font-semibold text-gray-700">Password:</span>{{ $consulta_verUsuarios->password ?? '' }}
+                    </div>
                     <div class="flex justify-end">
                         @if ($consulta_verUsuarios)
                             @if ($consulta_verUsuarios->estado == 'pendiente')
                                 @if (count($consulta_verUsuarios->historiales) != $consulta_verUsuarios->servicio->completa)
                                     @if (Auth::user()->rol->nombre == 'super')
                                         <span class="mr-4">
-                                            <button wire:click="openAdd" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
+                                            <button wire:click="openAdd" type="button"
+                                                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
                                                 Añadir usuario
                                             </button>
                                         </span>
@@ -350,7 +355,8 @@
                                 @if (count($consulta_verUsuarios->historiales) != $consulta_verUsuarios->servicio->pantallas)
                                     @if (Auth::user()->rol->nombre == 'super')
                                         <span class="mr-4">
-                                            <button wire:click="openAdd" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
+                                            <button wire:click="openAdd" type="button"
+                                                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
                                                 Añadir usuario
                                             </button>
                                         </span>
@@ -359,7 +365,8 @@
                             @endif
                         @endif
                         <span>
-                            <button wire:click="openRenovar" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
+                            <button wire:click="openRenovar" type="button"
+                                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5 ">
                                 Editar cuenta
                             </button>
                         </span>
@@ -368,7 +375,8 @@
 
                 <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
                     <span>
-                        <button x-on:click="ver=false" wire:click="" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
+                        <button x-on:click="ver=false" wire:click="" type="button"
+                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
                     </span>
                 </div>
             </div>
@@ -386,48 +394,73 @@
 
                 <div class="mb-4">
                     <label for="usuario_renovar" class="block text-gray-700 text-sm font-bold mb-2">Usuario:</label>
-                    <input type="email" id="usuario_nrenovar" wire:model="usuario_renovar" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    <input type="email" id="usuario_nrenovar" wire:model="usuario_renovar"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                 </div>
 
                 <div class="mb-4">
                     <label for="password_renovar"
                         class="block text-gray-700 text-sm font-bold mb-2">Contraseña:</label>
-                    <input type="text" id="password_renovar" wire:model="password_renovar" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    <input type="text" id="password_renovar" wire:model="password_renovar"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                 </div>
 
                 <div class="mb-4">
                     <label for="disponible" class="block text-gray-700 text-sm font-bold mb-2">Disponibilidad:</label>
-                    <select name="" id="" wire:model="estado" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    <select name="" id="" wire:model="estado"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         <option value="activo">Pantallas</option>
                         <option value="pendiente">Cuenta completa</option>
                         <option value="inactivo">Inactivo</option>
                     </select>
                 </div>
-
-                <div class="mb-4">
-                    <button wire:click="calcularFechas" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5" >
-                        + 30 dias
+                <div class="mb-4" x-data="{ isDisabled: false, countdown: 20 }" x-init="() => {
+                    $watch('isDisabled', value => {
+                        if (value) {
+                            let interval = setInterval(() => {
+                                if (countdown > 0) {
+                                    countdown--;
+                                } else {
+                                    clearInterval(interval);
+                                }
+                            }, 1000);
+                        }
+                    });
+                }">
+                    <button wire:click="calcularFechas" type="button"
+                        class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5"
+                        :class="{ 'opacity-50 cursor-not-allowed': isDisabled }" :disabled="isDisabled"
+                        :title="isDisabled ? `Puede volver a oprimir en ${countdown} segundos` : ''"
+                        x-on:click="isDisabled = true; countdown = 20; setTimeout(() => { isDisabled = false }, 20000)">
+                        + 30 días
                     </button>
                 </div>
 
+
                 <div date-rangepicker class="flex items-center gap-2 mb-4">
                     <div class="relative">
-                        <label for="fecha_inicial_renovar" class="block text-gray-700 text-sm font-bold mb-2">Fecha inicio:</label>
-                        <input name="fecha_inicial_renovar" wire:model.defer="fecha_inicial_renovar" type="date" class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm  focus:border-neutral-300  focus:outline-none focus:shadow-outline focus:ring-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
+                        <label for="fecha_inicial_renovar" class="block text-gray-700 text-sm font-bold mb-2">Fecha
+                            inicio:</label>
+                        <input name="fecha_inicial_renovar" wire:model.defer="fecha_inicial_renovar" type="date"
+                            class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm  focus:border-neutral-300  focus:outline-none focus:shadow-outline focus:ring-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
                     </div>
 
                     <div class="relative">
-                        <label for="fecha_final_renovar" class="block text-gray-700 text-sm font-bold mb-2">Fecha Final:</label>
-                        <input name="fecha_final_renovar" wire:model.defer="fecha_final_renovar" type="date" class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300  focus:outline-none focus:shadow-outline  focus:ring-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
+                        <label for="fecha_final_renovar" class="block text-gray-700 text-sm font-bold mb-2">Fecha
+                            Final:</label>
+                        <input name="fecha_final_renovar" wire:model.defer="fecha_final_renovar" type="date"
+                            class="border-2 border-neutral-200 rounded-[0.8rem] px-4 py-2 text-gray-900 sm:text-sm focus:border-neutral-300  focus:outline-none focus:shadow-outline  focus:ring-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input">
                     </div>
                 </div>
 
                 <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
                     <span>
-                        <button wire:click="saveRenovar()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
+                        <button wire:click="saveRenovar()" type="button"
+                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
                     </span>
                     <span>
-                        <button x-on:click="renovar=false" wire:click="" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
+                        <button x-on:click="renovar=false" wire:click="" type="button"
+                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
                     </span>
                 </div>
 
@@ -1016,7 +1049,9 @@
 
                 <div class="mb-4 flex flex-col">
                     <label for="nota_eliminacion" class="block text-gray-700 text-sm font-bold mb-2">Nota:</label>
-                    <textarea type="text" id="nota_eliminacion" wire:model="nota_eliminacion" placeholder="Porque quieres eliminar esta cuenta?" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300  w-full py-2 px-3 h-40 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
+                    <textarea type="text" id="nota_eliminacion" wire:model="nota_eliminacion"
+                        placeholder="Porque quieres eliminar esta cuenta?"
+                        class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300  w-full py-2 px-3 h-40 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
                     @error('nota_eliminacion')
                         <div class="text-red-500">{{ $message }}</div>
                     @enderror