Forma de pago en reserva

app/resources/views/ventas/reservations/modal/add.blade.php

@@ -131,6 +131,41 @@
             <h4 class="ui dividing header">Unidades <span id="add_project_name"></span></h4>
             <div class="fields" id="add_unit_buttons"></div>
             <div id="add_units"></div>
+            <h4 class="ui dividing header">Forma de Pago</h4>
+            <div class="fields">
+                <div class="field">
+                    <div class="ui checkbox">
+                        <input type="checkbox" name="has_pie" id="add_has_pie" />
+                        <label>¿Tiene Pie?</label>
+                    </div>
+                </div>
+                <div class="field" id="add_pie">
+                    <label>Pie</label>
+                    <div class="ui right labeled input">
+                        <input type="text" name="pie" />
+                        <div class="ui basic label">UF</div>
+                    </div>
+                </div>
+                <div class="field" id="add_cuotas">
+                    <label>Cuotas</label>
+                    <input type="text" name="cuotas" />
+                </div>
+            </div>
+            <div class="fields">
+                <div class="field">
+                    <div class="ui checkbox">
+                        <input type="checkbox" name="has_credit" id="add_has_credit" />
+                        <label>¿Tiene Crédito?</label>
+                    </div>
+                </div>
+                <div class="field" id="add_credit">
+                    <label>Crédito</label>
+                    <div class="ui right labeled input">
+                        <input type="text" name="credit" />
+                        <div class="ui basic label">UF</div>
+                    </div>
+                </div>
+            </div>
         </form>
     </div>
     <div class="actions">
@@ -362,7 +397,7 @@
                             '<div class="three wide field">',
                                 '<label>Valor</label>',
                                 '<div class="ui right labeled input">',
-                                    '<input type="number" name="add_units_value[]" placeholder="Valor" />',
+                                    '<input type="text" name="add_units_value[]" placeholder="Valor" />',
                                     '<div class="ui basic label">UF</div>',
                                 '</div>',
                             '</div>',
@@ -394,6 +429,101 @@
                 this.draw.buttons()
             }
         }
+        class AddModalPayments {
+            ids = {
+                pie: {
+                    checkbox: 'add_has_pie',
+                    value: 'add_pie',
+                    installments: 'add_cuotas'
+                },
+                credit: {
+                    checkbox: 'add_has_credit',
+                    value: 'add_credit'
+                }
+            }
+            components = {
+                pie: {
+                    $checkbox: null,
+                    value: null,
+                    installments: null
+                },
+                credit: {
+                    $checkbox: null,
+                    value: null
+                }
+            }
+            data = {
+                pie: {
+                    value: '',
+                    installments: ''
+                },
+                credit: {
+                    value: ''
+                }
+            }
+            constructor() {
+                this.setup()
+            }
+            reset() {
+                this.components.pie.$checkbox.prop('checked', false)
+                this.components.pie.value.value = ''
+                this.components.pie.installments.value = ''
+                this.components.credit.$checkbox.prop('checked', false)
+                this.components.credit.value.value = ''
+            }
+            show = {
+                pie: () => {
+                    this.components.pie.value.style.display = this.data.pie.value
+                    this.components.pie.installments.style.display = this.data.pie.installments
+                },
+                credit: () => {
+                    this.components.credit.value.style.display = this.data.credit.value
+                }
+            }
+            hide = {
+                pie: () => {
+                    this.components.pie.value.style.display = 'none'
+                    this.components.pie.installments.style.display = 'none'
+                },
+                credit: () => {
+                    this.components.credit.value.style.display = 'none'
+                },
+                all: () => {
+                    this.hide.pie()
+                    this.hide.credit()
+                }
+            }
+            setup() {
+                this.components.pie.$checkbox = $(`#${this.ids.pie.checkbox}`)
+                this.components.pie.value = document.getElementById(this.ids.pie.value)
+                this.components.pie.installments = document.getElementById(this.ids.pie.installments)
+                this.components.credit.$checkbox = $(`#${this.ids.credit.checkbox}`)
+                this.components.credit.value = document.getElementById(this.ids.credit.value)
+
+                this.components.pie.$checkbox.checkbox()
+                this.components.pie.$checkbox.change(changeEvent => {
+                    if (this.components.pie.$checkbox.is(':checked')) {
+                        this.show.pie()
+                        return
+                    }
+                    this.hide.pie()
+                })
+                this.components.credit.$checkbox.checkbox()
+                this.components.credit.$checkbox.change(changeEvent => {
+                    if (this.components.credit.$checkbox.is(':checked')) {
+                        this.show.credit()
+                        return
+                    }
+                    this.hide.credit()
+                })
+
+                this.data.pie.value = this.components.pie.value.style.display
+                this.data.pie.installments = this.components.pie.installments.style.display
+                this.data.credit.value = this.components.credit.value.style.display
+
+                this.hide.all()
+            }
+        }
         class AddReservationModal {
             ids = {
                 modal: '',
@@ -429,6 +559,7 @@
                 project_name: null,
                 unit_buttons: null,
                 units: null,
+                payments: null,
                 $loader: null
             }
             data = {
@@ -509,6 +640,7 @@
                 this.components.form.reset()
                 this.components.promotions.reset()
                 this.components.units.reset()
+                this.components.payments.reset()
             }
             add() {
                 const url = '/api/ventas/reservation/add'
@@ -524,6 +656,16 @@
                 const birthdate = this.components.$birthdate.calendar('get date')
                 body.set('add_buyer_birthdate', [birthdate.getFullYear(), birthdate.getMonth() + 1, birthdate.getDate()].join('-'))
 
+                if (this.components.payments.components.pie.$checkbox.checkbox('is unchecked')) {
+                    body.delete('add_pie')
+                    body.delete('add_cuotas')
+                }
+                body.delete('add_has_pie')
+                if (this.components.payments.components.credit.$checkbox.checkbox('is unchecked')) {
+                    body.delete('add_credit')
+                }
+                body.delete('add_has_credit')
+
                 body.delete('comuna')
                 body.delete('region')
                 body.delete('broker')
@@ -672,6 +814,9 @@
             }
             fill = {
                 user: user => {
+                    if (typeof user === 'undefined' || user === null) {
+                        return
+                    }
                     const form = this.components.form
                     form.querySelector('input[name="add_buyer_name"]').value = user.nombres || ''
                     form.querySelector('input[name="add_buyer_last_name"]').value = user.apellidoPaterno || ''
@@ -753,6 +898,7 @@
                 this.components.projects = document.getElementById(this.ids.projects)
                 this.components.project_name = document.getElementById(this.ids.project_name)
                 this.components.units = new AddModalUnits(this)
+                this.components.payments = new AddModalPayments()
 
                 this.components.$modal.modal({
                     onApprove: () => {