<div class="ui mini modal" id="edit_cuota_modal">
    <div class="header">Editar Cuota <span class="numero"></span></div>
    <div class="content">
        <form class="ui form" id="edit_cuota_form">
            <input type="hidden" name="id" />
            <div class="field">
                <label>Fecha de Pago</label>
                <div class="ui calendar" id="edit_fecha">
                    <div class="ui icon input">
                        <input type="text" name="fecha" />
                        <i class="calendar icon"></i>
                    </div>
                </div>
            </div>
            <div class="field">
                <label>Banco</label>
                <div class="ui search selection dropdown" id="edit_banco">
                    <i class="dropdown icon"></i>
                    <input type="hidden" name="banco" />
                    <div class="default text">Banco</div>
                    <div class="menu">
                        @foreach($bancos as $banco)
                            <div class="item" data-value="{{ $banco->id }}">{{ $banco->nombre }}</div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="field">
                <label>Identificador</label>
                <input type="text" name="identificador" />
            </div>
            <div class="field">
                <label>Valor</label>
                <div class="ui labeled input">
                    <div class="ui label">$</div>
                    <input type="text" name="valor" />
                </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 EditModal {
            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_fecha').calendar(calendar_date_options)
                $(this.id).find('#edit_banco').dropdown()
            }
            open({id, number, fecha, banco_id, identificador, valor}) {
                this.data = {id, fecha: fecha.split('-').reverse().join('-'), banco: banco_id, identificador, valor}
                $(this.id).find('.numero').text(number)
                $(this.id).find('input[name="id"]').val(id)
                const dateParts = fecha.split('-')
                const date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0])
                $(this.id).find('#edit_fecha').calendar('set date', date)
                $(this.id).find('#edit_banco').dropdown('set selected', banco_id)
                $(this.id).find('input[name="identificador"]').val(identificador)
                $(this.id).find('input[name="valor"]').val(valor)

                $(this.id).modal('show')
            }
            approve($element) {
                const $form = $(this.id).find('#edit_cuota_form')
                const temp = new FormData(document.getElementById('edit_cuota_form'))
                const date = $form.find('#edit_fecha').calendar('get date')

                temp.set('fecha', date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0'))
                temp.set('banco', $form.find('#edit_banco').dropdown('get value'))
                temp.set('valor', temp.get('valor'))

                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
