| Current File : /home/exataengenharia/public_html/resources/views/usuarios/edit.blade.php |
<!DOCTYPE html>
<html>
<head>
<title>Edite suas informações</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
</script>
<link href="/css/app.css" rel="stylesheet">
<style>
body {
padding: 10px;
}
.card {
margin-top: 2rem;
-webkit-box-shadow: -1px 99px 101px -18px rgba(204, 198, 204, 1);
-moz-box-shadow: -1px 99px 101px -18px rgba(204, 198, 204, 1);
box-shadow: -1px 99px 101px -18px rgba(204, 198, 204, 1);
}
.formulario label {
font-size: 20px;
line-height: 2.5;
font-weight: 700;
}
.formulario .text-infor {
font-size: 26px;
margin-left: 1.1rem;
border: .2px solid blanchedalmond;
padding: 1rem;
}
.hidden {
display: none;
}
.add-informations {
position: fixed;
bottom: 20px;
right: 20px;
}
.container__edit {
margin-top: 5rem;
}
.modal-body {
height: 100vh;
}
iframe {
height: 100%;
}
.infor-order {
border-radius: 50%;
font-size: 30px;
height: 100px;
padding: 1rem;
opacity: .4;
}
#before-link {
position: relative;
top: 40px;
font-size: 1.2rem;
left: 50px;
color: #403FD8;
text-decoration: none;
}
/* animate */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.button {
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<a href="{{ route('dashboard') }}" id="before-link"><i class="bi bi-arrow-left"
style="font-size: 15px;font-weight: 800;"></i> Voltar para a DashBoard</a>
<body>
<!-- Cabeçalho -->
<div class="container-fluid">
<div class="container container__edit">
<div class="container-fluid container__main__edit">
<h1>Editar Informações</h1>
</div>
@foreach ($informations as $index => $information)
<div class="card">
<div class="card-body">
<div class="" style="display: flex;align-items: center;justify-content: space-between;">
<span class="infor-order">{{ $index + 1 }} </span>
</div>
<form class="row form-card" action="{{ route('usuarios.update', $information->id) }}"
method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group col-md-6 formulario">
<label for="residence{{ $index }}">Residência</label>
<input type="text" class="form-control residence-input hidden"
id="residence{{ $index }}" name="residence"
value="{{ old('residence', $information->residence) }}">
<div class="residence-text text-infor">
{{ $information->residence }}
</div>
<label for="monthly_generation{{ $index }}">Geração Mensal</label>
<input class="format1 form-control monthly-generation-input hidden" inputmode="numeric"
id="monthly_generation{{ $index }}" name="monthly_generation"
value="{{ old('monthly_generation', $information->monthly_generation) }}">
<div class="monthly-generation-text text-infor">
{{ $information->monthly_generation }}
</div>
<label for="annual_savings{{ $index }}">Economia Anual</label>
<input class="format2 form-control annual-savings-input hidden" inputmode="numeric"
id="annual_savings{{ $index }}" name="annual_savings"
value="{{ old('annual_savings', $information->annual_savings) }}">
<div class="annual-savings-text text-infor">
{{ $information->annual_savings }}
</div>
<label for="path{{ $index }}">Carregar Imagem</label>
<input type="file" class="form-control" id="path{{ $index }}" name="path"
onchange="displaySelectedImage(this, {{ $index }});">
</div>
<div class="col-md-6">
<div class="form-group">
<img class="figure-img card-img-top img-slide"
id="selected-image{{ $index }}"
src="{{ asset('storage/' . $information->path) }}">
</div>
<div style="display: flex; justify-content: center;align-items: center;">
<button type="submit" id="save-data" class="btn btn-success"
style="margin-right: 2em;">Salvar <i
class="bi bi-clipboard-check-fill"></i></button>
<button class="btn btn-primary editar-button">Editar informações <i
class="bi bi-pencil-square"></i></button>
</div>
<br>
</div>
</form>
<div class="card-footer">
<form action="{{ route('usuarios.destroy', $information->id) }}" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="btn "
style="font-size: 2rem;border-radius: 50%;color: red"> <i
class="bi bi-x-circle-fill"></i> </button>
</form>
</div>
</div>
</div>
@endforeach
<!-- Button trigger modal -->
<button type="button" class="btn add-informations"
style="font-size: 2rem;border-radius: 50%;color: #FF5801" data-bs-toggle="modal"
data-bs-target="#staticBackdrop">
<i class="bi bi-plus-circle-fill"></i>
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Adicionar novo elemento</h1>
<button type="button" id="close" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<iframe src="{{ route('create') }}" width="100%"> </iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const close = document.getElementById('close')
close.addEventListener('click', () => {
window.location.reload()
})
</script>
<script>
function displaySelectedImage(input, index) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('selected-image' + index).src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}
const editarButtons = document.querySelectorAll('.editar-button');
const residenceInputs = document.querySelectorAll('.residence-input');
const monthlyGenerationInputs = document.querySelectorAll('.monthly-generation-input');
const annualSavingsInputs = document.querySelectorAll('.annual-savings-input');
const textFade = document.querySelectorAll('.text-infor');
const order = document.getElementById('order')
let state = Array.from({
length: editarButtons.length
}).fill(0); // Array para controlar o estado de cada card
editarButtons.forEach((button, index) => {
button.addEventListener('click', (e) => {
e.preventDefault();
const residenceInput = residenceInputs[index];
const monthlyGenerationInput = monthlyGenerationInputs[index];
const annualSavingsInput = annualSavingsInputs[index];
const residenceText = textFade[index * 3];
const monthlyGenerationText = textFade[index * 3 + 1];
const annualSavingsText = textFade[index * 3 + 2];
if (state[index]) {
residenceInput.classList.add('hidden');
residenceText.classList.remove('hidden');
monthlyGenerationInput.classList.add('hidden');
monthlyGenerationText.classList.remove('hidden');
annualSavingsInput.classList.add('hidden');
annualSavingsText.classList.remove('hidden');
state[index] = 0; // fechado
} else {
residenceInput.classList.remove('hidden');
residenceText.classList.add('hidden');
monthlyGenerationInput.classList.remove('hidden');
monthlyGenerationText.classList.add('hidden');
annualSavingsInput.classList.remove('hidden');
annualSavingsText.classList.add('hidden');
state[index] = 1; // aberto
}
});
});
</script>
<script>
function formatNumber(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function updateFormattedValue(input) {
const rawValue = input.value.replace(/\./g, "");
const formattedValue = formatNumber(rawValue);
input.value = formattedValue;
}
window.addEventListener("DOMContentLoaded", function() {
const monthlyGenerationInputs = document.querySelectorAll('.monthly-generation-input');
const annualSavingsInputs = document.querySelectorAll('.annual-savings-input');
monthlyGenerationInputs.forEach(function(input) {
input.addEventListener("input", function() {
updateFormattedValue(this);
});
input.addEventListener("focus", function() {
this.value = "";
});
});
annualSavingsInputs.forEach(function(input) {
input.addEventListener("input", function() {
updateFormattedValue(this);
});
input.addEventListener("focus", function() {
this.value = "";
});
});
});
</script>
</body>
</html>