290 lines
11 KiB
PHP
290 lines
11 KiB
PHP
<!-- resources/views/ventas/reservations/modal/edit.blade.php -->
|
|
<div class="ui modal" id="edit_reservation_modal">
|
|
<div class="header">
|
|
Editar Reserva
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form" id="edit_reservation_form">
|
|
<input type="hidden" name="reservation_id" />
|
|
<input type="hidden" name="project_id" />
|
|
|
|
<div class="three wide required field">
|
|
<label>Fecha</label>
|
|
<div class="ui calendar" id="edit_date">
|
|
<div class="ui icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="date" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fields">
|
|
<div class="three wide required field">
|
|
<label>RUT</label>
|
|
<div class="ui right labeled input" id="edit_rut">
|
|
<input type="text" name="buyer_rut" placeholder="RUT" readonly />
|
|
<div class="ui basic label">-<span id="edit_digit"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label></label>
|
|
<div class="ui inline loader" id="edit_rut_loader" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fields">
|
|
<div class="three wide required field">
|
|
<label>Nombre</label>
|
|
<input type="text" name="buyer_name" placeholder="Nombre" />
|
|
</div>
|
|
<div class="six wide required field">
|
|
<label>Apellidos</label>
|
|
<input type="text" name="buyer_last_name" placeholder="Apellido Paterno" />
|
|
</div>
|
|
<div class="six wide field">
|
|
<label></label>
|
|
<input type="text" name="buyer_last_name2" placeholder="Apellido Materno" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui segment">
|
|
<h4 class="ui header">Unidades</h4>
|
|
<div id="edit_units_holder">
|
|
<!-- Units will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui segment">
|
|
<h4 class="ui header">Promociones</h4>
|
|
<div id="edit_promotions_holder">
|
|
<!-- Promotions will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui error message"></div>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui cancel button">
|
|
Cancelar
|
|
</div>
|
|
<button type="button" class="ui primary button" id="edit_reservation_submit">
|
|
Guardar Cambios
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class EditReservationModal {
|
|
constructor() {
|
|
this.ids = {
|
|
modal: 'edit_reservation_modal',
|
|
form: 'edit_reservation_form',
|
|
date: 'edit_date',
|
|
rut: 'edit_rut',
|
|
digit: 'edit_digit',
|
|
rutLoader: 'edit_rut_loader',
|
|
unitsHolder: 'edit_units_holder',
|
|
promotionsHolder: 'edit_promotions_holder',
|
|
submitButton: 'edit_reservation_submit'
|
|
};
|
|
|
|
this.components = {
|
|
$modal: null,
|
|
$form: null,
|
|
$date: null,
|
|
$submitButton: null
|
|
};
|
|
|
|
this.data = {
|
|
reservation: null,
|
|
units: [],
|
|
promotions: []
|
|
};
|
|
|
|
this.initialize();
|
|
}
|
|
|
|
initialize() {
|
|
this.setupComponents();
|
|
this.setupEvents();
|
|
}
|
|
|
|
setupComponents() {
|
|
this.components.$modal = $(`#${this.ids.modal}`);
|
|
this.components.$form = $(`#${this.ids.form}`);
|
|
this.components.$date = $(`#${this.ids.date}`);
|
|
this.components.$submitButton = $(`#${this.ids.submitButton}`);
|
|
|
|
// Initialize date picker
|
|
this.components.$date.calendar({
|
|
type: 'date',
|
|
formatter: {
|
|
date: function(date, settings) {
|
|
if (!date) return '';
|
|
return date.toISOString().split('T')[0];
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
setupEvents() {
|
|
this.components.$submitButton.on('click', () => this.updateReservation());
|
|
}
|
|
|
|
load(reservationId) {
|
|
this.components.$modal.modal('show');
|
|
this.components.$modal.addClass('loading');
|
|
|
|
// Use APIClient to fetch the reservation data
|
|
APIClient.fetch(`/api/reservation/${reservationId}`)
|
|
.then(response => {
|
|
if (!response) {
|
|
throw new Error('No se pudo cargar la reserva');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.reservation) {
|
|
this.populateForm(data.reservation);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading reservation:', error);
|
|
this.showError('Error al cargar la reserva');
|
|
})
|
|
.finally(() => {
|
|
this.components.$modal.removeClass('loading');
|
|
});
|
|
}
|
|
|
|
populateForm(reservation) {
|
|
// Set basic info
|
|
this.components.$form.find('[name="reservation_id"]').val(reservation.id);
|
|
this.components.$form.find('[name="project_id"]').val(reservation.project_id);
|
|
|
|
// Set date
|
|
if (reservation.date) {
|
|
this.components.$date.calendar('set date', new Date(reservation.date));
|
|
}
|
|
|
|
// Set buyer info
|
|
if (reservation.buyer) {
|
|
const buyer = reservation.buyer;
|
|
this.components.$form.find('[name="buyer_rut"]').val(buyer.rut);
|
|
this.components.$form.find('[name="buyer_name"]').val(buyer.nombre);
|
|
this.components.$form.find('[name="buyer_last_name"]').val(buyer.apellido_paterno);
|
|
this.components.$form.find('[name="buyer_last_name2"]').val(buyer.apellido_materno || '');
|
|
// Set other buyer fields as needed
|
|
}
|
|
|
|
// Load units
|
|
this.loadUnits(reservation.units || []);
|
|
|
|
// Load promotions if any
|
|
if (reservation.promotions && reservation.promotions.length > 0) {
|
|
this.loadPromotions(reservation.promotions);
|
|
}
|
|
}
|
|
|
|
loadUnits(units) {
|
|
this.data.units = units;
|
|
const $holder = $(`#${this.ids.unitsHolder}`);
|
|
$holder.empty();
|
|
|
|
// Render units
|
|
units.forEach(unit => {
|
|
const $unit = $(`
|
|
<div class="field">
|
|
<div class="ui label">
|
|
${unit.tipo} - ${unit.numero}
|
|
<div class="detail">${unit.precio_uf} UF</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
$holder.append($unit);
|
|
});
|
|
}
|
|
|
|
loadPromotions(promotions) {
|
|
this.data.promotions = promotions;
|
|
const $holder = $(`#${this.ids.promotionsHolder}`);
|
|
$holder.empty();
|
|
|
|
// Render promotions
|
|
promotions.forEach(promotion => {
|
|
const $promo = $(`
|
|
<div class="field">
|
|
<div class="ui label">
|
|
${promotion.nombre}
|
|
<div class="detail">${promotion.descuento}%</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
$holder.append($promo);
|
|
});
|
|
}
|
|
|
|
updateReservation() {
|
|
const formData = new FormData(this.components.$form[0]);
|
|
const reservationId = formData.get('reservation_id');
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
this.components.$submitButton.addClass('loading');
|
|
|
|
// Use APIClient to update the reservation
|
|
APIClient.fetch(`/api/reservation/${reservationId}/edit`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => {
|
|
if (!response) {
|
|
throw new Error('No se pudo actualizar la reserva');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
this.showSuccess('Reserva actualizada correctamente');
|
|
this.components.$modal.modal('hide');
|
|
|
|
// Refresh the reservations list
|
|
if (window.reservations && typeof window.reservations.refresh === 'function') {
|
|
window.reservations.refresh();
|
|
}
|
|
} else {
|
|
throw new Error(data.error || 'Error desconocido al actualizar la reserva');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error updating reservation:', error);
|
|
this.showError(error.message || 'Error al actualizar la reserva');
|
|
})
|
|
.finally(() => {
|
|
this.components.$submitButton.removeClass('loading');
|
|
});
|
|
}
|
|
|
|
showError(message) {
|
|
// You can replace this with your preferred notification system
|
|
alert('Error: ' + message);
|
|
}
|
|
|
|
showSuccess(message) {
|
|
// You can replace this with your preferred notification system
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
// Initialize the modal when the page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.editReservationModal = new EditReservationModal();
|
|
});
|
|
</script>
|
|
@endpush
|