From 270a07bb77a674e86b9f8542fe07236415ba78ba Mon Sep 17 00:00:00 2001
From: Juan Pablo Vial <jpvialb@incoviba.cl>
Date: Sun, 9 Nov 2025 17:50:46 -0300
Subject: [PATCH] Edit reservations

---
 .../views/ventas/reservations.blade.php       |   2 +
 .../ventas/reservations/modal/edit.blade.php  | 289 ++++++++++++++++++
 2 files changed, 291 insertions(+)
 create mode 100644 app/resources/views/ventas/reservations/modal/edit.blade.php

diff --git a/app/resources/views/ventas/reservations.blade.php b/app/resources/views/ventas/reservations.blade.php
index 007c456..7048c79 100644
--- a/app/resources/views/ventas/reservations.blade.php
+++ b/app/resources/views/ventas/reservations.blade.php
@@ -102,6 +102,7 @@
     </div>
 
     @include('ventas.reservations.modal.add')
+    @include('ventas.reservations.modal.edit')
     @include('ventas.reservations.modal.comment')
 @endsection
 
@@ -793,6 +794,7 @@
                 this.show.projects()
 
                 this.components.modals.add = new AddReservationModal(configuration.ids.projects)
+                this.components.modals.edit = new EditReservationModal()
                 this.components.modals.comment = new CommentModal()
 
                 const project_id = {{ $project_id ?? 'null' }};
diff --git a/app/resources/views/ventas/reservations/modal/edit.blade.php b/app/resources/views/ventas/reservations/modal/edit.blade.php
new file mode 100644
index 0000000..4caf26d
--- /dev/null
+++ b/app/resources/views/ventas/reservations/modal/edit.blade.php
@@ -0,0 +1,289 @@
+<!-- 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