<div class="ui 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="two wide field">
                <label>Número</label>
                <input type="text" name="numero" />
            </div>
            <div class="three wide field">
                <label>Fecha</label>
                <div class="ui calendar" id="edit_fecha">
                    <div class="ui icon input">
                        <i class="calendar icon"></i>
                        <input type="text" name="fecha" />
                    </div>
                </div>
            </div>
            <div class="three wide field">
                <label>Valor $</label>
                <div class="ui left labeled input">
                    <div class="ui basic label">$</div>
                    <input type="text" name="valor" />
                </div>
            </div>
            <div class="three wide field">
                <label>Estado</label>
                <div class="ui selection search dropdown" id="edit_estado">
                    <i class="dropdown icon"></i>
                    <input type="hidden" name="tipo_estado_id" />
                    <div class="default text">Estado</div>
                    <div class="menu">
                        @foreach($estados as $estado)
                            <div class="item" data-value="{{$estado->id}}">{{$estado->descripcion}}</div>
                        @endforeach
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui negative button">
            Cancelar
        </div>
        <div class="ui positive right labeled icon button">
            Editar
            <i class="edit icon"></i>
        </div>
    </div>
</div>

@push('page_scripts')
    <script>
        class EditModal {
            props
            data

            constructor(props) {
                this.setup(props)
                this.data = null
            }
            getData({cuota_id}) {
                const table = document.getElementById(this.props.table)
                const row = table.querySelector(`tr[data-id='${cuota_id}']`)
                const fecha = row.querySelector('.fecha').dataset.value.split('-')
                this.data = {
                    id: cuota_id,
                    numero: row.querySelector('.numero').dataset.value,
                    fecha: new Date(fecha[0], fecha[1] - 1, fecha[2]),
                    valor: row.querySelector('.valor').dataset.value,
                    estado: row.querySelector('.estado').dataset.value
                }

                this.draw()
            }
            draw() {
                const form = document.getElementById(this.props.form)
                form.querySelector('input[name="id"]').value = this.data.id
                form.querySelector('input[name="numero"]').value = this.data.numero
                $(this.props.fecha).calendar('set date', this.data.fecha)
                form.querySelector('input[name="valor"]').value = this.data.valor
                $(this.props.estado).dropdown('set selected', this.data.estado)

                $(this.props.modal).find('.header .numero').text(this.data.numero)

                $(this.props.modal).modal('show')
            }
            save() {
                const form = document.getElementById(this.props.form)
                const body = new FormData(form)
                const fecha = $(this.props.fecha).calendar('get date')
                body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
                body.set('tipo_estado_id', $(this.props.estado).dropdown('get value'))
                const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuota/${this.data.id}/edit`
                const method = 'post'
                APIClient.fetch(url, {method, body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        if (json.success) {
                            window.location.reload()
                        }
                    })
                })
            }
            setup(ids) {
                this.props = ids

                $(this.props.modal).modal({
                    onApprove: () => {
                        this.save()
                    },
                    onHidden: () => {
                        this.data = null
                    }
                })
                $(this.props.form).submit(event => {
                    event.preventDefault()
                    this.save()
                    return false
                })
                $(this.props.fecha).calendar(calendar_date_options)
                $(this.props.estado).dropdown()
            }
        }
    </script>
@endpush
