Editar estado cuota

app/resources/views/ventas/pies/cuotas/estados/edit.blade.php

@@ -0,0 +1,93 @@
+<div class="ui mini modal" id="edit_estado_cuota_modal">
+    <div class="header">Editar Estado Cuota <span class="numero"></span></div>
+    <div class="content">
+        <form class="ui form" id="edit_estado_cuota_form">
+            <input type="hidden" name="id" />
+            <div class="field">
+                <label>Estado</label>
+                <div class="ui search selection dropdown" id="edit_estado_estado">
+                    <i class="dropdown icon"></i>
+                    <input type="hidden" name="estado" />
+                    <div class="default text">Estado</div>
+                    <div class="menu">
+                        @foreach($estados as $estado)
+                            <div class="item" data-value="{{ $estado->id }}">{{ ucwords($estado->descripcion) }}</div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+            <div class="field">
+                <label>Fecha Estado</label>
+                <div class="ui calendar" id="edit_estado_fecha">
+                    <div class="ui icon input">
+                        <input type="text" name="fecha" />
+                        <i class="calendar icon"></i>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <button class="ui positive approve icon button">
+            <i class="check icon"></i>
+        </button>
+        <button class="ui negative cancel icon button">
+            <i class="times icon"></i>
+        </button>
+    </div>
+</div>
+
+@push('page_scripts')
+    <script>
+        class EditEstadoModal {
+            id
+            approveCallback
+            data
+
+            constructor({id, approve}) {
+                this.id = id
+
+                this.approveCallback = approve;
+
+                $(this.id).modal({
+                    onApprove: $element => {
+                        return this.approve($element)
+                    }
+                })
+                $(this.id).find('#edit_estado_estado').dropdown()
+                $(this.id).find('#edit_estado_fecha').calendar(calendar_date_options)
+            }
+            open({id, estado_id, fecha}) {
+                this.data = {id, fecha: fecha, estado: estado_id}
+                $(this.id).find('input[name="id"]').val(id)
+                $(this.id).find('#edit_estado_estado').dropdown('set selected', estado_id)
+                const dateParts = fecha.split('-')
+                const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+                $(this.id).find('#edit_estado_fecha').calendar('set date', date)
+
+                $(this.id).modal('show')
+            }
+            approve($element) {
+                const $form = $(this.id).find('#edit_estado_cuota_form')
+                const temp = new FormData(document.getElementById('edit_estado_cuota_form'))
+                const date = $form.find('#edit_estado_fecha').calendar('get date')
+
+                temp.set('estado', $form.find('#edit_estado_estado').dropdown('get value'))
+                temp.set('fecha', date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0'))
+
+                const data = new FormData()
+                Object.entries(this.data).forEach(([key, value]) => {
+                    if (key === 'id') {
+                        return;
+                    }
+                    if (temp.get(key) === value.toString()) {
+                        return;
+                    }
+                    data.set(key, temp.get(key))
+                })
+
+                return this.approveCallback({id: this.data.id, data})
+            }
+        }
+    </script>
+@endpush