<div class="ui inverted grey segment">
    FORMA DE PAGO
</div>
<div class="ui segment">
    <table class="ui very basic fluid table">
        @include('ventas.show.forma_pago.pie', ['pie' => $formaPago->pie])
        @include('ventas.show.forma_pago.escritura', ['escritura' => $formaPago->escritura])
        @include('ventas.show.forma_pago.anticipo', ['anticipo' => ['uf' => $formaPago->anticipo(), 'pesos' => $formaPago->anticipo('pesos')]])
        @include('ventas.show.forma_pago.bono_pie', ['bonoPie' => $formaPago->bonoPie])
        @include('ventas.show.forma_pago.subsidio', ['subsidio' => $formaPago->subsidio])
        @include('ventas.show.forma_pago.credito', ['credito' => $formaPago->credito])
        @include('ventas.show.forma_pago.total')
        @include('ventas.show.forma_pago.devolucion', ['devolucion' => $formaPago->devolucion])
    </table>
</div>
<div id="pago_modal" class="ui modal">
    <div class="content">
        <div class="ui form">
            <div class="inline field">
                <label for="fecha">Fecha</label>
                <div class="ui calendar">
                    <div class="ui icon input">
                        <input id="fecha" name="fecha" type="text" />
                        <i class="calendar icon"></i>
                    </div>
                </div>
            </div>
            <button class="ui button">
                Guardar
            </button>
        </div>
    </div>
</div>

@push('page_scripts')
    <script type="text/javascript">
        class Anchor
        {
            classes
            title
            row_id
            pago_id
            method
            icon
            status

            constructor({classes, title, row_id, pago_id, method, icon})
            {
                this.classes = classes
                this.title = title
                this.row_id = row_id
                this.pago_id = pago_id
                this.method = method
                this.icon = icon
                this.status = true
            }

            draw()
            {
                const row = $(this.row_id)
                const anchor = row.find('a')

                anchor.attr('class', this.classes)
                anchor.attr('title', this.title)
                anchor.attr('href', 'javascript: ' + this.method + "({row_id: '" + this.row_id + "', pago_id: " + this.pago_id + '});')

                anchor.html('')
                anchor.append(
                    $('<i></i>').addClass(this.icon + ' icon')
                )
            }
            toggle()
            {
                if (this.status) {
                    $(this.row_id).find('a').css('pointer-events', 'none')
                    this.status = false
                    return
                }
                $(this.row_id).find('a').css('pointer-events', '')
                this.status = true
            }
        }
        class Cell
        {
            id
            classes
            text
            anchor
            status

            constructor({id, classes, text, anchor})
            {
                this.id = id
                this.classes = classes
                this.text = text
                this.anchor = anchor
                this.status = true
            }

            draw()
            {
                const row = $(this.id)
                row.attr('class', this.classes)
                row.html('').append(
                    $('<span></span>').html(this.text)
                ).append(this.anchor.draw())
            }
            toggle()
            {
                if (this.status) {
                    $(this.id).css('cursor', 'wait')
                    this.status = false
                    return
                }
                $(this.id).css('cursor', 'default')
                this.status = true
            }
        }
        class Modal
        {
            id
            date
            uri

            constructor({id}) {
                this.id = id
            }

            show() {
                $(this.id).find('div.ui.calendar').calendar('reset')
                $(this.id).find('div.ui.calendar input').val('')
                $(this.id).modal('show')
            }
            setup() {
                const modal = $(this.id)
                modal.modal({
                    onHide: function($element) {
                        const pagos = $("[id$='_pago']")
                        pagos.css('cursor', 'default')
                        const anchor = pagos.find("a")
                        anchor.css('pointer-events', '')
                    }
                })
                modal.find('div.ui.calendar').calendar({
                    type: 'date'
                })
            }
        }
        const pagos = {
            modal: null,
            cells: [],

            setup: function({modal_id}) {
                this.modal = new Modal({id: modal_id})
                this.modal.setup()
            },
            add: function() {
                return {
                    cell: ({cell_id, classes, text, anchor}) => {
                        this.cells.push(new Cell({id: cell_id, classes, text, anchor}))
                    }
                }
            },
            
        }
        function depositar({row_id, pago_id}) {
            const row = $(row_id)
            const anchor = row.find("a[title='Depositar']")
            const uri = '{{$urls->api}}/ventas/pago/' + pago_id + '/depositar'
            const modal = $('#pago_modal')

            row.css('cursor', 'wait')
            anchor.css('pointer-events', 'none')
            modal.find('#fecha').calendar('clear')
            modal.modal('show')
            modal.find('.ui.button').click(event => {
                modal.modal('hide')
                const date = modal.find('#fecha').val()
                return fetch(uri,
                    {method: 'put', body: JSON.stringify({fecha: date}), headers: {'Content-Type': 'application/json'}}
                ).then(response => {
                    anchor.css('pointer-events', '')
                    row.css('cursor', 'default')
                    if (response.ok) {
                        anchor.attr('href', "javascript: abonar({row_id: '" + row_id + "', pago_id: " + pago_id + "});")
                        anchor.attr('title', 'Abonar')
                        anchor.html('')
                        anchor.append(
                            $('<i></i>').addClass('piggy bank icon')
                        )
                        row.removeClass('warning').addClass('positive')
                        response.json().then(data => {
                            row.find('.text').html(data.fecha)
                        })
                    }
                })
            })
        }
        function abonar({row_id, pago_id}) {
            const row = $(row_id)
            row.css('cursor', 'wait')
            const anchor = row.find("a[title='Abonar']")
            anchor.css('pointer-events', 'none')
            const uri = '{{$urls->api}}/ventas/pago/' + pago_id + '/abonar'
            const modal = $('#pago_modal')
            modal.modal('show')
            modal.find('.ui.button').click(event => {
                const date = modal.find('#fecha').val()
                return fetch(uri,
                    {method: 'put', body: JSON.stringify({fecha: date}), headers: {'Content-Type': 'application/json'}}
                ).then(response => {
                    anchor.css('pointer-events', '')
                    row.css('cursor', 'default')
                    if (response.ok) {
                        anchor.remove()
                        row.removeClass('positive')
                        response.json().then(data => {
                            row.find('.text').html(data.fecha)
                        })
                    }
                })
            })
        }
        $(document).ready(() => {
            const modal = new Modal({id: '#pago_modal'})
            modal.setup()
        })
    </script>
@endpush
