<div class="ui modal" id="add_cuota_modal">
    <div class="header">
        Agregar Cuota
    </div>
    <div class="content">
        <form class="ui form" id="add_cuota_form">
            <input type="hidden" name="venta_id" value="{{$venta->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="add_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>
        </form>
    </div>
    <div class="actions">
        <div class="ui negative button">
            Cancelar
        </div>
        <div class="ui positive right labeled icon button">
            Agregar
            <i class="add icon"></i>
        </div>
    </div>
</div>

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

            constructor(props) {
                this.setup(props)
            }
            draw() {
                $(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'))
                const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuotas/add`
                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()
                    }
                })
                $(this.props.form).submit(event => {
                    event.preventDefault()
                    this.save()
                    return false
                })
                $(this.props.fecha).calendar(calendar_date_options)
            }
        }
    </script>
@endpush
