Files
sirpremiumv2/resources/views/livewire/show-tarifas.blade.php
T

335 lines
28 KiB
PHP

<div x-data="{
modTarifas : @entangle('modTarifas'),
modTarifasPromo : @entangle('modTarifasPromo'),
editarTarifa : @entangle('editarTarifa'),
editarTarifaPromo: @entangle('editarTarifaPromo'),
}" class="h-full w-full md:my-2">
<div class="fixed backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading wire:target="guardarTarifa,guardarTarifaPromo,editarTarifa,editarTarifaPromo,actualizarTarifa,actualizarTarifaPromo,limpiarEditarInputs,limpiarInputs">
<div class="grid h-full place-items-center">
<div class="max-w-xs">
<img src="./img/loading.gif" alt="loading" class="w-full text-center">
<p class="text-gray-500 text-center">Cargando</p>
</div>
</div>
</div>
<div class="bg-[#f5f5f5] md:w-full m-auto p-2 md:p-5 rounded-2xl relative mb-4">
<div class="grid grid-cols-1 text-center sm:flex justify-between my-2 items-center text-sm">
<div class="grid grid-cols-1 sm:flex items-center gap-4">
<div class="flex text-sm">
<x-icon-arrow-right />
Tarifas
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-4">
@if (auth()->user()->subvendedor && $config->subvendedor)
<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]">
Tarifas servicios
<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
@if (auth()->user()->subvendedor && $config->subvendedor)
<a x-on:click="modTarifasPromo = true" class="justify-center flex px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8]">
Tarifas promociones
<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 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" x-transition:leave-end="opacity-0 scale-100" class="fixed inset-0 z-50 backdrop-blur-sm bg-black/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-2xl shadow-md max-w-7xl mx-8">
<div class="mb-4">
<select name="servicio_id" id="servicio_id" name="servicio_id" wire:model="servicio_id" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-[72%] sm:w-60 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
<option value="" selected>Servicios</option>
@foreach ($servicios as $servicio)
<option value="{{ $servicio->id }}">{{ $servicio->nombre ?? '' }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
<div class="grid grid-cols-6 gap-2 text-left mb-4">
<div>
<label for="rol_id" class="text-gray-500 text-sm">Rol</label>
<select id="rol_id" name="rol_id" wire:model="rol_id" 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>
<label id="plan_id" class="text-gray-500 text-sm">Plan</label>
<select id="plan_id" name="plan_id" wire:model="plan_id" 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>Planes</option>
@foreach ($planes as $plan)
<option value="{{ $plan->id }}">
{{ $plan->pantallas ?? 0 }} {{ Str::plural('pantalla', $plan->pantallas ?? 0) }} - {{ $plan->dias ?? 0 }} días </option>
@endforeach
</select>
</div>
<div>
<label for="precio" class="text-gray-500 text-sm">Precio</label>
<input type="number" id="precio" name="precio" wire:model.debounce.300ms="precio" 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>
<label for="utilidad" class="text-gray-500 text-sm">Utilidad</label>
<input disabled type="number" id="utilidad" name="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 class="flex m-auto items-center">
<label for="estado" class="text-gray-500 text-sm mr-2">Activa</label>
<input type="checkbox" id="estado" name="estado" wire:model="estado" 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>
<div class="mb-3 mt-3 flex justify-end">
<button wire:click="guardarTarifa" 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>
</div>
</div>
</div>
<div class="overflow-y-auto max-h-48">
<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]">Estado</th>
<th class="font-normal pl-[1rem]">Rol</th>
<th class="font-normal pl-[1rem] whitespace-nowrap">Pantallas</th>
<th class="font-normal pl-[1rem]">Valor</th>
<th class="font-normal pl-[1rem]">Dias</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>
<tbody class="text-gray-500 select-none">
@if (!empty($tarifas))
@foreach ($tarifas as $tarifa)
<tr class="border-gray-200 text-left w-full pl-4">
<td class="pl-[1rem]">
@if ($tarifa->estado == '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]">{{ $tarifa->pantallas ?? '' }}</td>
<td class="pl-[1rem]">{{ number_format($tarifa->valor ?? 0) }}</td>
<td class="pl-[1rem]">{{ $tarifa->dias ?? '' }}</td>
<td class="pl-[1rem]">{{ number_format($tarifa->utilidad ?? 0) }}</td>
<td class="pl-[1rem]">
<button wire:click="editarTarifa('{{ $tarifa->id }}')" 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
@endif
</tbody>
</table>
</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="limpiarInputs" type="button" class="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 flex items-center">Cerrar</button>
</span>
</div>
</div>
</div>
</div>
<div x-cloak x-show="modTarifasPromo" 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 inset-0 z-50 backdrop-blur-sm bg-black/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-2xl shadow-md max-w-7xl mx-4">
<div class="mb-4">
<select name="promocion_id" id="promocion_id" name="promocion_id" wire:model="promocion_id" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0 w-[72%] sm:w-60 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
<option value="" selected>Promociones</option>
@foreach ($promo as $promo)
<option value="{{ $promo->id }}">{{ $promo->nombre ?? '' }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
<div class="grid grid-cols-6 gap-2 text-left mb-4">
<div>
<label for="rol_id" class="text-gray-500 text-sm">Rol</label>
<select id="rol_id" name="rol_id" wire:model="rol_id" 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>
<label id="promo_id" class="text-gray-500 text-sm">Plan</label>
<select id="promo_id" name="promo_id" wire:model="promo_id" 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>Planes</option>
@foreach ($promociones as $promocion)
<option value="{{ $promocion->id }}">{{ $promocion?->promocion?->descripcion ?? '' }}</option>
@endforeach
</select>
</div>
<div>
<label for="precio" class="text-gray-500 text-sm">Precio</label>
<input type="number" id="precio" name="precio" wire:model.debounce.300ms="precio" 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>
<label for="utilidad" class="text-gray-500 text-sm">Utilidad</label>
<input disabled type="number" id="utilidad" name="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 class="flex m-auto items-center">
<label for="estado" class="text-gray-500 text-sm mr-2">Activa</label>
<input type="checkbox" id="estado" name="estado" wire:model="estado" 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>
<div class="mb-3 mt-3 flex justify-end">
<button wire:click="guardarTarifaPromo" 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>
</div>
</div>
</div>
<div class="overflow-y-auto max-h-48">
<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]">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>
<tbody class="text-gray-500 select-none">
@if (!empty($tarifas))
@foreach ($tarifas as $tarifa)
<tr class="border-gray-200 text-left w-full pl-4">
<td class="pl-[1rem]">
@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="editarTarifaPromo('{{ $tarifa->id }}')" 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
@endif
</tbody>
</table>
</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="modTarifasPromo=false" wire:click="limpiarInputs" 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 x-cloak x-show="editarTarifa" 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 inset-0 z-50 backdrop-blur-sm bg-black/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-2xl shadow-md max-w-5xl mx-4">
<div>
<label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
<div class="grid grid-cols-6 gap-2 text-left mb-4">
<div>
<label for="rol_id" class="text-gray-500 text-sm">Rol</label>
<select id="rol_id" name="rol_id" wire:model="rol_id" 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>
<label for="precio" class="text-gray-500 text-sm">Precio</label>
<input type="number" id="precio" name="precio" wire:model.debounce.300ms="precio" 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>
<label for="utilidad" class="text-gray-500 text-sm">Utilidad</label>
<input disabled type="number" id="utilidad" name="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 class="flex m-auto items-center">
<label for="estado" class="text-gray-500 text-sm mr-2">Activa</label>
<input type="checkbox" id="estado" name="estado" wire:model="estado" 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>
<div class="mb-3 mt-3 flex justify-end">
<button wire:click="actualizarTarifa" 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>
</div>
</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="limpiarEditarInputs" x-on:click="editarTarifa=false" type="button" class="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 flex items-center">Cerrar</button>
</span>
</div>
</div>
</div>
</div>
<div x-cloak x-show="editarTarifaPromo" 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 inset-0 z-50 backdrop-blur-sm bg-black/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-2xl shadow-md max-w-5xl mx-4">
<div>
<label class="block text-gray-700 text-sm font-bold mb-2">Pantallas:</label>
<div class="grid grid-cols-6 gap-2 text-left mb-4">
<div>
<label for="rol_id" class="text-gray-500 text-sm">Rol</label>
<select id="rol_id" name="rol_id" wire:model="rol_id" 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>
<label for="precio" class="text-gray-500 text-sm">Precio</label>
<input type="number" id="precio" name="precio" wire:model.debounce.300ms="precio" 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>
<label for="utilidad" class="text-gray-500 text-sm">Utilidad</label>
<input disabled type="number" id="utilidad" name="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 class="flex m-auto items-center">
<label for="estado" class="text-gray-500 text-sm mr-2">Activa</label>
<input type="checkbox" id="estado" name="estado" wire:model="estado" 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>
<div class="mb-3 mt-3 flex justify-end">
<button wire:click="actualizarTarifaPromo" 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>
</div>
</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="limpiarEditarInputs" x-on:click="editarTarifaPromo=false" type="button" class="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 flex items-center">Cerrar</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>