Sindbad~EG File Manager
<ul class="nav nav-tabs"id="myTab" role="tablist">
<li class="nav-item" wire:click="change('factura')">
<a class="nav-link {{$factura}}" id="listado-tab" data-toggle="tab" href="#listado" role="tab" aria-controls="listado" aria-selected="{{$facturaview}}">Factura por consumo</a>
</li>
<li class="nav-item" wire:click="change('derecho')">
<a class="nav-link {{$derecho}}" id="grafico-tab" data-toggle="tab" href="#grafico" role="tab" aria-controls="grafico" aria-selected="{{$derechoview}}">Factura por derecho de conexión</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show {{$factura}}" id="listado" role="tabpanel" aria-labelledby="listado-tab">
<fieldset>
<legend>Factura por consumo</legend>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="lecturainicial">Condominio:</label>
<select class="form-control" wire:model="condominio_id">
<option value="">Seleccione una opcion</option>
@foreach($condominios as $con)
<option value="{{$con->id}}">{{$con->con_nom}}</option>
@endforeach
</select>
@error('condominio_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lecturainicial">Lotes:</label>
<select class="form-control" wire:model="lote_id">
<option value="">Seleccione una opcion</option>
@foreach($lotes as $lot)
<option value="{{$lot->id}}">{{$lot->manzana}} - {{$lot->lote}}</option>
@endforeach
</select>
@error('lote_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lecturainicial">Lectura inicial:</label>
<input type="number" class="form-control" id="lecturainicial" placeholder="Lectura inicial" wire:model="lecturainicial">
@error('lecturainicial') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lecturafinal">Lectura final:</label>
<input type="number" class="form-control" id="lecturafinal" placeholder="Lectura final" wire:model="lecturafinal">
@error('lecturafinal') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="cargofijo">Cargo fijo:</label>
<input type="text"
id="cargofijo"
class="form-control"
placeholder="Cargo fijo"
x-data="{
formattedValue: '',
updateValue(e) {
// Elimina todos los puntos y caracteres no numéricos
let cleanValue = e.target.value.replace(/\D/g, '');
// Actualiza el modelo de Livewire con el valor limpio
@this.set('cargofijo', cleanValue);
// Formatea el valor para mostrar
if (cleanValue) {
this.formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
} else {
this.formattedValue = '';
}
// Actualiza el input con el valor formateado
e.target.value = this.formattedValue;
}
}"
x-on:input="updateValue($event)"
:value="formattedValue"
>
@error('cargofijo')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<!-- Alpine.js es requerido para esta solución -->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label for="totalconsumo">Total consumo:</label>
<input type="number" class="form-control" id="totalconsumo" placeholder="Total consumo" wire:model="totalconsumo" disabled>
@error('totalconsumo') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="excedente">Excedente:</label>
<input type="number" class="form-control" id="excedente" placeholder="Excedente" wire:model="excedente" disabled>
@error('excedente') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="precioexcedente">Precio excedente:</label>
<input type="text"
id="precioexcedente"
class="form-control"
placeholder="Precio excedente"
x-data="{
formattedValue: '',
updateValue(e) {
// Elimina todos los puntos y caracteres no numéricos
let cleanValue = e.target.value.replace(/\D/g, '');
// Actualiza el modelo de Livewire con el valor limpio
@this.set('precioexcedente', cleanValue);
// Formatea el valor para mostrar
if (cleanValue) {
this.formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
} else {
this.formattedValue = '';
}
// Actualiza el input con el valor formateado
e.target.value = this.formattedValue;
}
}"
x-on:input="updateValue($event)"
:value="formattedValue"
>
@error('precioexcedente')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="totalexcente">Total excedente:</label>
<input type="number" class="form-control" placeholder="Total excedente" wire:model="totalexcente" disabled>
@error('totalexcente') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="totalapagar">Total a pagar:</label>
<input type="number" class="form-control" placeholder="Total a pagar" wire:model="totalapagar" disabled>
@error('totalapagar') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="vencimiento">Vencimiento: <small>Vencimiento de la factura</small></label>
<input type="date" class="form-control" placeholder="Vencimiento" wire:model="vencimiento">
@error('vencimiento') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="mes">Meses: <small>Mes de lectura</small></label>
<select class="form-control" wire:model="mes">
<option value="">Selecciones un mes</option>
<option value="Enero">Enero</option>
<option value="Febrero">Febrero</option>
<option value="Marzo">Marzo</option>
<option value="Abril">Abril</option>
<option value="Mayo">Mayo</option>
<option value="Junio">Junio</option>
<option value="Julio">Julio</option>
<option value="Agosto">Agosto</option>
<option value="Setiembre">Setiembre</option>
<option value="Octubre">Octubre</option>
<option value="Noviembre">Noviembre</option>
<option value="Diciembre">Diciembre</option>
</select>
@error('mes') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="anho">Año: <small>Año de lectura</small></label>
<select class="form-control" wire:model="anho">
<option value="">Selecciones un mes</option>
@for($z=2019; $z <= date("Y"); $z++)
<option value="{{$z}}">{{$z}}</option>
@endfor
</select>
@error('anho') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
<button wire:click.prevent="store()" class="btn btn-success btn-sm">Guardar</button>
</form>
</fieldset>
</div>
<div class="tab-pane fade show {{$derecho}}" id="grafico" role="tabpanel" aria-labelledby="grafico-tab">
<fieldset>
<legend>Factura por derecho de conexión</legend>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="lecturainicial">Condominio:</label>
<select class="form-control" wire:model="condominio_id">
<option value="">Seleccione una opcion</option>
@foreach($condominios as $con)
<option value="{{$con->id}}">{{$con->con_nom}}</option>
@endforeach
</select>
@error('condominio_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lecturainicial">Lotes:</label>
<select class="form-control" wire:model="lote_id">
<option value="">Seleccione una opcion</option>
@foreach($lotes as $lot)
<option value="{{$lot->id}}">{{$lot->manzana}} - {{$lot->lote}}</option>
@endforeach
</select>
@error('lote_id') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="derechototal">Total a pagar:</label>
<input type="text"
id="derechototal"
class="form-control"
placeholder="Total a pagar"
x-data="{
formattedValue: '',
updateValue(e) {
// Elimina todos los puntos y caracteres no numéricos
let cleanValue = e.target.value.replace(/\D/g, '');
// Actualiza el modelo de Livewire con el valor limpio
@this.set('derechototal', cleanValue);
// Formatea el valor para mostrar
if (cleanValue) {
this.formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
} else {
this.formattedValue = '';
}
// Actualiza el input con el valor formateado
e.target.value = this.formattedValue;
}
}"
x-on:input="updateValue($event)"
:value="formattedValue"
>
@error('derechototal')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="vencimiento">Vencimiento: <small>Vencimiento de la factura</small></label>
<input type="date" class="form-control" placeholder="Vencimiento" wire:model="vencimiento">
@error('vencimiento') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
</div>
<button wire:click.prevent="storederecho()" class="btn btn-success btn-sm">Guardar</button>
</form>
</fieldset>
</div>
<script>
document.addEventListener('livewire:load', function () {
// Escuchar el evento de Livewire
Livewire.on('reset-inputs', () => {
//console.log('Evento reset-inputs recibido'); // Debug
// Lista de IDs de los inputs a resetear
const inputIds = ['derechototal', 'precioexcedente', 'cargofijo'];
// Resetear cada input
inputIds.forEach(id => {
const input = document.getElementById(id);
if (input) {
//console.log(`Reseteando input: ${id}`); // Debug
// Limpiar el valor
input.value = '';
// Disparar evento de input para actualizar Alpine.js
input.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true,
}));
// Disparar evento para Alpine.js
window.dispatchEvent(new Event('reset-field'));
}
});
});
});
</script>
</div>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists