diff --git a/app/Http/Livewire/ShowUsuarios.php b/app/Http/Livewire/ShowUsuarios.php
index 9b853cb..7ed2387 100755
--- a/app/Http/Livewire/ShowUsuarios.php
+++ b/app/Http/Livewire/ShowUsuarios.php
@@ -61,7 +61,9 @@ class ShowUsuarios extends Component
     public $usuario_nombre;
     public $precioTarifa;
     public $tarifasGestion;
-    public $estadoTarifa;
+
+    public $estadoTarifa = true;
+
     public $usuarioGestion_id;
     public $precioTarifasGestion;
     public $buscar_servicio;
@@ -81,7 +83,8 @@ class ShowUsuarios extends Component
     public $modTarifas;
     public $modalSaldoDesc;
 
-
+    public $editarTarifaRol = false;
+    public $informacionTarifaRol;
 
     protected $rules = [
         'nombre' => 'required',
@@ -259,6 +262,54 @@ class ShowUsuarios extends Component
 
         $this->editar = true;
     }
+
+    public function editarTarifa($tarifa)
+    {
+        $this->editarTarifaRol = true;
+
+        $this->informacionTarifaRol = $tarifa;
+
+        $this->roles_modTarifas = $tarifa['rol_id'];
+        $this->precio_modTarifas = $tarifa['precio'];
+        $this->utilidad = $tarifa['utilidad'];
+        $this->estadoTarifa = $tarifa['visible'] == 'activo' ? 1 : 0;
+        $this->servicio_modTarifas = $tarifa['promocion_id'];
+    }
+
+    public function actualizarTarifaRol($id)
+    {
+        if (empty($this->roles_modTarifas)) {
+            $this->alert('warning', '¡Seleccione un rol!', [
+                'position' => 'top'
+            ]);
+        }
+        if (empty($this->precio_modTarifas)) {
+            $this->alert('warning', '¡Coloque un precio!', [
+                'position' => 'top'
+            ]);
+        }
+        if (empty($this->utilidad)) {
+            $this->alert('warning', '¡Coloque una utilidad!', [
+                'position' => 'top'
+            ]);
+        }
+
+        TarifaPromo::find($id)->update([
+            'precio' => $this->precio_modTarifas,
+            'utilidad' => $this->utilidad,
+            'visible' => $this->estadoTarifa == 1 ? 'activo' : 'inactivo',
+            'rol_id' => $this->roles_modTarifas,
+            'promocion_id' => $this->servicio_modTarifas
+        ]);
+
+        $this->alert('success', 'Tarifa actualizada con exito!', [
+            'position' => 'top'
+        ]);
+
+        $this->editarTarifaRol = false;
+    }
+
+
     public function actualizar()
     {
         $this->validate(
@@ -324,7 +375,7 @@ class ShowUsuarios extends Component
             $usuarioTarifa->utilidad = $this->utilidad;
             $usuarioTarifa->tarifa_id = $this->tarifasGestion;
             $usuarioTarifa->usuario_id = $this->usuarioGestion_id;
-            $usuarioTarifa->visible = $this->estadoTarifa ? 'false' : 'true';
+            $usuarioTarifa->visible = $this->estadoTarifa ? 'activo' : 'inactivo';
             $usuarioTarifa->save();
 
             $this->alert('success', '¡Tarifas del usuario actualizadas correctamente!', [
@@ -516,38 +567,42 @@ class ShowUsuarios extends Component
     /*   ------------- ACTUALIZAR -------------   */
     public function updateTarifas()
     {
+        $consulta_existe = TarifaPromo::where('promocion_id', $this->servicio_modTarifas)
+            ->where('rol_id', $this->roles_modTarifas)
+            ->exists();
 
-        $consulta_existe = TarifaPromo::where('promocion_id', $this->servicio_modTarifas)->where('rol_id', $this->roles_modTarifas)->get();
-        //dd($consulta_existe);
-
-        if (empty($this->servicio_modTarifas)) {
-            $this->alert('warning', 'Seleccione una promocion!', [
+        if ($consulta_existe) {
+            $this->alert('warning', '¡Esta tarifa ya existe!', [
+                'position' => 'top'
+            ]);
+        } elseif (empty($this->servicio_modTarifas)) {
+            $this->alert('warning', '¡Seleccione una promocion!', [
+                'position' => 'top'
+            ]);
+        } elseif (empty($this->precio_modTarifas)) {
+            $this->alert('warning', '¡Coloque un precio!', [
+                'position' => 'top'
+            ]);
+        } elseif (empty($this->utilidad)) {
+            $this->alert('warning', '¡Coloque la utilidad!', [
                 'position' => 'top'
             ]);
         } else {
+            $tarifa = new TarifaPromo;
+            $tarifa->utilidad = $this->utilidad;
+            $tarifa->promocion_id = $this->servicio_modTarifas;
+            $tarifa->rol_id = $this->roles_modTarifas;
+            $tarifa->precio = $this->precio_modTarifas;
+            $tarifa->visible = $this->estadoTarifa ? 'activo' : 'inactivo';
+            $tarifa->save();
 
-            if ($consulta_existe->count() > 0) {
-
-                $this->alert('warning', 'Esta tarifa ya existe!', [
-                    'position' => 'top'
-                ]);
-            } else {
-                $tarifa = new TarifaPromo;
-                $tarifa->precio = $this->precio_modTarifas;
-                $tarifa->utilidad = $this->utilidad;
-                $tarifa->promocion_id = $this->servicio_modTarifas;
-                $tarifa->rol_id = $this->roles_modTarifas;
-                $tarifa->save();
-
-                $this->alert('success', 'Tarifas actualizadas correctamente!', [
-                    'position' => 'top'
-                ]);
-            }
+            $this->alert('success', '¡Tarifas actualizadas correctamente!', [
+                'position' => 'top'
+            ]);
         }
     }
 
     /*   ------------- ELIMINAR -------------   */
-
     public function eliminarModTarifa($id)
     {
         TarifaPromo::where('id', $id)->delete();
diff --git a/app/Models/TarifaPromo.php b/app/Models/TarifaPromo.php
index 85e373b..1958734 100755
--- a/app/Models/TarifaPromo.php
+++ b/app/Models/TarifaPromo.php
@@ -8,12 +8,13 @@ use Illuminate\Database\Eloquent\Model;
 class TarifaPromo extends Model
 {
     use HasFactory;
+
     protected $fillable = [
+        'utilidad',
         'promocion_id',
         'rol_id',
         'precio',
         'visible',
-       
     ];
 
     public function  rol(){
diff --git a/app/Models/Usuario_tarifa.php b/app/Models/Usuario_tarifa.php
index 48d80a5..59bdf3e 100755
--- a/app/Models/Usuario_tarifa.php
+++ b/app/Models/Usuario_tarifa.php
@@ -14,7 +14,6 @@ class Usuario_tarifa extends Model
         'precio',
         'utilidad',
         'visible',
-        
     ];
 
     public function  usuario(){
diff --git a/database/migrations/2022_11_07_125641_create_usuario_tarifas_table.php b/database/migrations/2022_11_07_125641_create_usuario_tarifas_table.php
index 27fe141..f52238e 100755
--- a/database/migrations/2022_11_07_125641_create_usuario_tarifas_table.php
+++ b/database/migrations/2022_11_07_125641_create_usuario_tarifas_table.php
@@ -6,43 +6,33 @@ use Illuminate\Support\Facades\Schema;
 
 return new class extends Migration
 {
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
     public function up()
     {
         Schema::create('usuario_tarifas', function (Blueprint $table) {
             $table->id();
-            $table -> string('precio')->nullable();
-            $table -> string('visible')->nullable();
-            
+            $table->string('precio')->nullable();
+            $table->string('visible')->nullable();
+
             $table->unsignedBigInteger('tarifa_id')->nullable();
-            
+
             $table->foreign('tarifa_id')
-                    ->references('id')
-                    ->on('tarifas')
-                    ->onDelete('cascade')
-                    ->onUpdate('cascade');
+                ->references('id')
+                ->on('tarifas')
+                ->onDelete('cascade')
+                ->onUpdate('cascade');
 
             $table->unsignedBigInteger('usuario_id')->nullable();
-            
+
             $table->foreign('usuario_id')
-                    ->references('id')
-                    ->on('users')
-                    ->onDelete('cascade')
-                    ->onUpdate('cascade');
+                ->references('id')
+                ->on('users')
+                ->onDelete('cascade')
+                ->onUpdate('cascade');
 
             $table->timestamps();
         });
     }
 
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
     public function down()
     {
         Schema::dropIfExists('usuario_tarifas');
diff --git a/resources/views/livewire/show-index-servicio.blade.php b/resources/views/livewire/show-index-servicio.blade.php
index 2e41f82..c17e6f4 100755
--- a/resources/views/livewire/show-index-servicio.blade.php
+++ b/resources/views/livewire/show-index-servicio.blade.php
@@ -1,11 +1,11 @@
 <div class=" bg-gray-100">
-  
+
     <div class="md:px-10 py-8  ">
 
         <h1 class="ml-2 text-xl sm:text-2xl font-black">
             {{$servicio->nombre}}
-        </h1>        
-        
+        </h1>
+
 
         <div class="md:grid md:grid-cols-4  md:items-center ">
 
@@ -13,7 +13,7 @@
                 <img src="{{asset($servicio->img_inicio) }}" alt="" class="rounded-xl md:w-[100%]">
             </div>
 
-            
+
             <div class="px-8 mb-4 md:mb-0 md:border-r md:mr-6 max-w-xs">
                 <div class="mb-4">
                     @if($servicio->nombre == 'Youtube Premium' || $servicio->nombre== 'Spotify Premium')
@@ -33,35 +33,35 @@
                         @endforeach
                     </select>
                     @endif
-                    
-                    
+
+
                     @if (!empty($disponibles))
                     <p class="italic text-green-500">
-                        {{$disponibles ?? ''}} Cuentas disponibles. 
+                        {{$disponibles ?? ''}} Cuentas disponibles.
                     </p>
-                   
+
                     @endif
                 </div>
-                
+
                 <div class="mb-4">
                     <label class="block text-gray-700 font-bold mb-1">Cantidad</label>
                     <input type="tel" wire:model="cantidad_tarjetaPlan" class="@error('cantidad_tarjetaPlan') border border-red-500 @enderror border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-full md:w-[72%] py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                     @error('cantidad_tarjetaPlan') <span class="text-red-400 text-sm ">Requerido*</span> @enderror
                 </div>
-                
+
                 <div class="mb-4">
                     <label class="block text-gray-700 font-bold mb-1">Descripción</label>
                     <p class="text-gray-500 ">
                         {{$servicio->descripcion}}
                     </p>
                 </div>
-                
+
                 @if (!empty($valor))
                     <label class="block text-gray-700 font-bold mb-1">Precio</label>
                     <p class="font-bold text-lg"> ${{number_format( $valor ?? '')}}</p>
                 @else
 
-                
+
                      <label class="block text-gray-700 font-bold mb-1">Precio</label>
                      @if ($servicio->tarifas_min_valor !=  $servicio->tarifas_max_valor)
                      <p class="font-bold text-lg"> {{number_format($servicio->tarifas_min_valor)}} - {{number_format($servicio->tarifas_max_valor)}}</p>
@@ -69,7 +69,7 @@
                      <p class="font-bold text-lg"> {{number_format($servicio->tarifas_min_valor)}}</p>
                      @endif
 
-                    
+
                 @endif
             </div>
 
@@ -79,7 +79,7 @@
                     <input type="text"  wire:model="nombre_tarjetaPlan" class="@error('nombre_tarjetaPlan') border border-red-500 @enderror 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">
                     @error('nombre_tarjetaPlan') <span class="text-red-400 text-sm ">Requerido*</span> @enderror
                 </div>
-                
+
                 <div class="mb-4">
                     <label class="block text-gray-700 font-bold mb-1">Email</label>
                     <input type="text"  wire:model="email_tarjetaPlan" class="@error('email_tarjetaPlan') border border-red-500 @enderror 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">
@@ -94,19 +94,19 @@
 
                 <div class="px-4 py-3 sm:px-6 sm:flex sm:justify-evenly">
                     <span>
-                        <button wire:click="comprar" @if ($cantidad_tarjetaPlan <= (int)$disponibles )  
+                        <button wire:click="comprar" @if ($cantidad_tarjetaPlan <= (int)$disponibles )
 
 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 sm-text-sm sm-leading-5"
 
- @else disabled  
+ @else disabled
 
-class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>Pagar</button>   
+class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>Pagar</button>
                     </span>
                 </div>
             </div>
         </div>
     </div>
-    
+
 
 
 
@@ -136,11 +136,11 @@ class="cursor-no-drop inline-flex justify-center w-full rounded-md border border
                                 <p class="font-bold text-base"> {{number_format($plan->tarifas_min_valor)}}</p>
                             @endif
                         </div>
-                        
+
                         <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly mb-2">
-                            
+
                                 <button  type="button"  class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-1 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Comprar</button>
-                            
+
                         </div>
                     </div>
                 </a>
diff --git a/resources/views/livewire/show-planes.blade.php b/resources/views/livewire/show-planes.blade.php
index ca2dcfa..1f61f7b 100755
--- a/resources/views/livewire/show-planes.blade.php
+++ b/resources/views/livewire/show-planes.blade.php
@@ -596,9 +596,7 @@
         </div>
     </div>
 
-
     {{-- Modal newCuenta --}}
-
     <div x-cloak x-show="newCuenta" x-transition:enter="transition duration-350"
         x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
@@ -698,10 +696,7 @@
         </div>
     </div>
 
-
-
     {{-- Modal tarifas --}}
-
     <div x-cloak x-show="modTarifas" x-transition:enter="transition duration-350"
         x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
@@ -808,9 +803,9 @@
                                         </td>
                                         <td class="pl-[1rem]">{{ $tarifa->rol->nombre ?? '' }}</td>
                                         <td class="pl-[1rem]">{{ $tarifa->pantallas ?? '' }}</td>
-                                        <td class="pl-[1rem]">{{ $tarifa->valor ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ number_format($tarifa->valor ?? 0) }}</td>
                                         <td class="pl-[1rem]">{{ $tarifa->dias ?? '' }}</td>
-                                        <td class="pl-[1rem]">{{ $tarifa->utilidad ?? '' }}</td>
+                                        <td class="pl-[1rem]">{{ number_format($tarifa->utilidad ?? 0) }}</td>
                                         <td class="pl-[1rem]">
                                             <button wire:click="editar({{ $tarifa }})" class="justify-center flex px-3 py-2 rounded-lg text-xs cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Editar</button>
                                         </td>
@@ -999,6 +994,7 @@
             </form>
         </div>
     </div>
+
     @include('layouts.footer')
     <script>
         function copiarAlPortapapeles(id_elemento) {
diff --git a/resources/views/livewire/show-usuarios.blade.php b/resources/views/livewire/show-usuarios.blade.php
index 8f58118..3f57db9 100755
--- a/resources/views/livewire/show-usuarios.blade.php
+++ b/resources/views/livewire/show-usuarios.blade.php
@@ -7,9 +7,10 @@
     modalPassword: @entangle('modalPassword'),
     modTarifas: @entangle('modTarifas'),
     modalSaldoDesc: @entangle('modalSaldoDesc'),
+    editarTarifaRol: @entangle('editarTarifaRol'),
 }" class="h-full w-full md:my-2">
     <div class="absolute backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading
-        wire:target="gestionarPromociones,addpromos,eliminarUsuarioPromo,gestionar,eliminarUsuarioTarifa,addtarifas,crear,actualizar,editar,eliminar,limpiarInputAdd,limpiarInputEdit,editarPassword,limpiarContra,confirmarNewPassword,saldo,addSaldo">
+        wire:target="gestionarPromociones,actualizarTarifaRol,addpromos,eliminarUsuarioPromo,gestionar,eliminarUsuarioTarifa,addtarifas,crear,actualizar,editar,eliminar,limpiarInputAdd,limpiarInputEdit,editarPassword,limpiarContra,confirmarNewPassword,saldo,addSaldo">
         <div class="grid h-full place-items-center   ">
             <div class="max-w-xs">
                 <img src="./img/loading.gif" alt="" class="w-full text-center">
@@ -22,9 +23,13 @@
         <div class="grid grid-cols-1 sm:flex justify-between my-2 items-center">
             <div class="grid grid-cols-1 sm:flex items-center gap-3 md:gap-8">
                 <div class="flex text-sm">
-                    <svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
+                    <svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 24 24"
+                        style="enable-background:new 0 0 512 512" xml:space="preserve">
                         <g>
-                            <path d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z" fill="#b221fd" data-original="#000000" />
+                            <path
+                                d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z"
+                                fill="#b221fd" data-original="#000000" />
                         </g>
                     </svg>
                     Usuario
@@ -33,27 +38,35 @@
                     <a x-on:click="add = !add"
                         class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8] mb-3 md:mb-0">Añadir
                         usuario
-                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="w-[0.87rem] ml-2">
-                            <path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192   c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z" fill="#ffffff" />
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                            version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
+                            style="enable-background:new 0 0 512 512;" xml:space="preserve" class="w-[0.87rem] ml-2">
+                            <path
+                                d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192   c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z"
+                                fill="#ffffff" />
                         </svg>
                     </a>
-                    <a x-on:click="modTarifas = true" class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Mod.
+                    <a x-on:click="modTarifas = true"
+                        class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Mod.
                         tarifas promos.
-                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 ml-2" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
-                            <polygon points="14.604 5.687 0 20.29 0 24 3.71 24 18.313 9.396 14.604 5.687" fill="#ffffff" data-original="#000000" />
-                            <path d="M23.232.768a2.624,2.624,0,0,0-3.71,0l-3.5,3.505,3.709,3.709,3.5-3.5A2.624,2.624,0,0,0,23.232.768Z" fill="#ffffff" data-original="#000000" />
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                            xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" class="w-4 ml-2" x="0" y="0"
+                            viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
+                            <polygon points="14.604 5.687 0 20.29 0 24 3.71 24 18.313 9.396 14.604 5.687" fill="#ffffff"
+                                data-original="#000000" />
+                            <path
+                                d="M23.232.768a2.624,2.624,0,0,0-3.71,0l-3.5,3.505,3.709,3.709,3.5-3.5A2.624,2.624,0,0,0,23.232.768Z"
+                                fill="#ffffff" data-original="#000000" />
                         </svg>
                     </a>
                 @endif
             </div>
         </div>
 
-
-
-
         {{-- Buscar --}}
         <div class="flex relative">
-            <input id="buscar" type="search" wire:model="buscar" placeholder="Buscar" class="w-full md:w-auto shadow-md border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 rounded-[0.8rem] px-4 py-1 m-auto focus:border-neutral-300  focus:outline-none focus:shadow-outline">
+            <input id="buscar" type="search" wire:model="buscar" placeholder="Buscar"
+                class="w-full md:w-auto shadow-md border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 rounded-[0.8rem] px-4 py-1 m-auto focus:border-neutral-300  focus:outline-none focus:shadow-outline">
         </div>
 
         {{-- -Tabla usuarios - --}}
@@ -634,7 +647,9 @@
                             Monto a descontar
                         </div>
                         <div>
-                            <input type="number" min="0" name="monto" wire:model="valor_recargar" placeholder="$100.000" required class="border-2 w-1/2 md:w-auto mb-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            <input type="number" min="0" name="monto" wire:model="valor_recargar"
+                                placeholder="$100.000" required
+                                class="border-2 w-1/2 md:w-auto mb-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
 
                             <div class="flex text-sm justify-center">Tu valor total seria: $<p>
                                     {{ number_format($saldo_actual - $valor_recargar) }}
@@ -661,7 +676,6 @@
         </div>
 
         {{-- Modal tarifas --}}
-
         <div x-cloak x-show="modTarifas" x-transition:enter="transition duration-350"
             x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
@@ -681,38 +695,36 @@
 
                     </div>
 
-                    <div>
+                    <div class="grid grid-cols-3 gap-2 text-left">
+                        <div class="w-full">
+                            <label class="text-gray-500 text-sm">Rol</label>
+                            <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas" class="w-full border-2 border-neutral-200 rounded-lg focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                                <option value="" selected>Roles</option>
+                                @foreach ($roles as $rol)
+                                    <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
+                                @endforeach
+                            </select>
+                        </div>
 
-                        <div class="grid grid-cols-2 gap-2 text-left">
-                            <div class="w-[9rem]">
-                                <label class="text-gray-500 text-sm">Rol</label>
-                                <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas"
-                                    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="" selected>Roles</option>
-                                    @foreach ($roles as $rol)
-                                        <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
-                                    @endforeach
-                                </select>
-                            </div>
+                        <div class="w-full">
+                            <label class="text-gray-500 text-sm">Precio</label>
+                            <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas" min="0" class="w-full border-2 border-neutral-200 rounded-lg focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                        </div>
 
-                            <div class="w-[8rem]">
-                                <label class="text-gray-500 text-sm">Precio</label>
-                                <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas"
-                                    min="0"
-                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                            </div>
+                        <div class="w-full">
+                            <label class="text-gray-500 text-sm">Utilidad</label>
+                            <input type="text" type="number" id="utilidad" wire:model="utilidad" min="0" class="w-full border-2 border-neutral-200 rounded-lg focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         </div>
                     </div>
+
                     <div class="mb-3 mt-3 flex gap-4 justify-end items-center">
-                        <p class="font-semibold text-gray-500">
-                            Utilidad
-                        </p>
-                        <input placeholder="$12000" type="number" id="utilidad" wire:model="utilidad"
-                            min="0"
-                            class="w-1/2 border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                        <div class="flex m-auto items-center">
+                            <label class="text-gray-500 text-sm mr-2">Activa</label>
+                            <input type="checkbox" id="estadoTarifa" wire:model="estadoTarifa" checked
+                                class="border-2 border-neutral-200 focus:ring-0 shadow apperance-none focus:border-neutral-300 text-[#B221FD] leading-tight focus:outline-none focus:shadow-outline">
+                        </div>
                         <span>
-                            <button wire:click="updateTarifas" type="button"
-                                class="inline-flex justify-center w-full md:w-auto rounded-md border border-transparent px-4 py-1 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</button>
+                            <button wire:click="updateTarifas" type="button" class="inline-flex justify-center w-full md:w-auto rounded-md border border-transparent px-4 py-1 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</button>
                         </span>
                     </div>
 
@@ -720,8 +732,11 @@
                         <table class="w-full sm-w-[20rem] text-center mt-4 border-separate border-spacing-y-2 mb-4">
                             <thead class="font-normal bg-[#000029] text-white h-9">
                                 <tr class="text-left">
-                                    <th class="rounded-l-lg font-normal pl-[1rem]">Rol</th>
+                                    <th class="rounded-l-lg font-normal pl-[1rem]">Estado</th>
+                                    <th class="font-normal pl-[1rem]">Rol</th>
                                     <th class="font-normal pl-[1rem]">Valor</th>
+                                    <th class="font-normal pl-[1rem]">Utilidad</th>
+                                    <th class="font-normal pl-[1rem]"></th>
                                     <th class="rounded-r-lg font-normal w-[1rem]"></th>
                                 </tr>
                             </thead>
@@ -729,28 +744,18 @@
                                 @if (!empty($tarifas))
                                     @foreach ($tarifas as $tarifa)
                                         <tr class="border-gray-200 text-left w-full pl-4">
-                                            <td class="pl-[1rem]">{{ $tarifa->rol->nombre ?? '' }}</td>
-                                            <td class="pl-[1rem]">{{ $tarifa->precio ?? '' }}</td>
                                             <td class="pl-[1rem]">
-                                                <svg wire:click="eliminarModTarifa({{ $tarifa->id ?? '' }})"
-                                                    xmlns="http://www.w3.org/2000/svg" version="1.1"
-                                                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                                                    xmlns:svgjs="http://svgjs.com/svgjs" class="w-6 cursor-pointer"
-                                                    x="0" y="0" viewBox="0 0 24 24"
-                                                    style="enable-background:new 0 0 512 512" xml:space="preserve"
-                                                    class="">
-                                                    <g>
-                                                        <g id="Flat_Color" data-name="Flat Color">
-                                                            <circle cx="12" cy="12" fill="#e63946"
-                                                                r="10" data-original="#e63946" class="">
-                                                            </circle>
-                                                            <path
-                                                                d="m13.41 12 2.3-2.29a1 1 0 0 0 -1.42-1.42l-2.29 2.3-2.29-2.3a1 1 0 0 0 -1.42 1.42l2.3 2.29-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l2.29-2.3 2.29 2.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
-                                                                fill="#edebea" data-original="#edebea"
-                                                                class=""></path>
-                                                        </g>
-                                                    </g>
-                                                </svg>
+                                                @if ($tarifa->visible == 'activo')
+                                                    <div class="bg-green-500 rounded-full w-3 h-3"></div>
+                                                @else
+                                                    <div class="bg-red-500 rounded-full w-3 h-3"></div>
+                                                @endif
+                                            </td>
+                                            <td class="pl-[1rem]">{{ $tarifa->rol->nombre ?? '' }}</td>
+                                            <td class="pl-[1rem]">{{ number_format($tarifa->precio) ?? 0 }}</td>
+                                            <td class="pl-[1rem]">{{ number_format($tarifa->utilidad) ?? 0 }}</td>
+                                            <td class="pl-[1rem]">
+                                                <button wire:click="editarTarifa({{ $tarifa }})" class="justify-center flex px-3 py-2 rounded-lg text-xs cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">Editar</button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -759,13 +764,7 @@
                         </table>
                     </div>
 
-                    <div class="mb-4 grid grid-cols-2">
-
-
-                    </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 x-on:click="modTarifas=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>
@@ -776,5 +775,69 @@
             </div>
         </div>
 
+        <div x-cloak x-show="editarTarifaRol" x-transition:enter="transition duration-350"
+        x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-100"
+        class="fixed backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full z-20">
+        <div class="grid h-full  place-items-center">
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
+                @if ($informacionTarifaRol)
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
+                        <div class="grid grid-cols-3 gap-2 text-left mb-4">
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Rol</label>
+                                <select name="roles" id="roles" wire:model.debounce.500ms="roles_modTarifas"
+                                    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="" selected>Roles</option>
+                                    @foreach ($roles as $rol)
+                                        <option value="{{ $rol->id }}">{{ $rol->nombre ?? '' }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Precio</label>
+                                <input type="number" id="precio_modTarifas" wire:model="precio_modTarifas"
+                                    min="0"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                            <div class="w-[6rem]">
+                                <label class="text-gray-500 text-sm">Utilidad</label>
+                                <input type="number" id="utilidad" wire:model="utilidad" min="0"
+                                    class="w-full border-2 border-neutral-200 rounded-[0.8rem] focus:ring-0 shadow apperance-none focus:border-neutral-300 py-2 pl-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                        </div>
+
+                        <div class="mb-4 grid grid-cols-2">
+                            <div class="flex m-auto items-center">
+                                <label class="text-gray-500 text-sm mr-2">Activa</label>
+                                <input type="checkbox" id="estadoTarifa" wire:model="estadoTarifa" class="border-2 border-neutral-200 focus:ring-0 shadow apperance-none focus:border-neutral-300 text-[#B221FD] leading-tight focus:outline-none focus:shadow-outline">
+                            </div>
+                            <div class="mb-3 mt-3 flex justify-end">
+                                <span>
+                                    <button wire:click="actualizarTarifaRol('{{ $informacionTarifaRol['id'] }}')"
+                                        type="button"
+                                        class="inline-flex justify-center w-full md:w-auto rounded-md border border-transparent px-4 py-1 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">Actualizar</button>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+
+
+
+                <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="editarTarifaRol=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>
+        </div>
+    </div>
+
     </div>
 </div>