Common components

app/resources/views/ventas/reservations/modal/common/scripts/payments.blade.php

@@ -0,0 +1,112 @@
+@push('page_scripts')
+<script>
+    class ModalPayments {
+        prefix
+        ids = {
+            pie: {
+                checkbox: '',
+                value: '',
+                installments: ''
+            },
+            credit: {
+                checkbox: '',
+                value: ''
+            }
+        }
+        components = {
+            pie: {
+                $checkbox: null,
+                value: null,
+                installments: null
+            },
+            credit: {
+                $checkbox: null,
+                value: null
+            }
+        }
+        data = {
+            pie: {
+                value: '',
+                installments: ''
+            },
+            credit: {
+                value: ''
+            }
+        }
+        constructor(prefix) {
+            this.prefix = prefix
+            this.ids = {
+                pie: {
+                    checkbox: `${this.prefix}_has_pie`,
+                    value: `${this.prefix}_pie`,
+                    installments: `${this.prefix}_cuotas`
+                },
+                credit: {
+                    checkbox: `${this.prefix}_has_credit`,
+                    value: `${this.prefix}_credit`
+                }
+            }
+            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()
+        }
+    }
+</script>
+@endpush