<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
