@extends('ventas.base')

@section('venta_subtitle')
    Agregar Abono en Escritura
@endsection

@section('venta_content')
    <div class="ui basic segment">
        <p>Valor Promesa {{$format->ufs($venta->valor)}}</p>
        @if (isset($venta->formaPago()->pie))
            <p>Valor Anticipo {{$format->ufs($venta->formaPago()->pie->valor)}}</p>
        @endif
        @if (isset($venta->formaPago()->credito))
            <p>Crédito {{$format->ufs($venta->formaPago()->credito->pago->valor())}}</p>
        @endif
    </div>
    <form class="ui form" id="add_form">
        <div class="three wide field">
            <label for="fecha">Fecha</label>
            <div class="ui calendar" id="fecha">
                <div class="ui left icon input">
                    <i class="calendar icon"></i>
                    <input type="text" name="fecha" />
                </div>
            </div>
        </div>
        <div class="fields">
            <div class="field">
                <label for="valor">Valor</label>
                <div class="ui labeled input" id="valor">
                    <div class="ui basic label">$</div>
                    <input type="text" name="valor" />
                </div>
            </div>
            <div class="field">
                <div class="ui checkbox" id="uf">
                    <input type="checkbox" name="uf" />
                    <label>Valor en UFs</label>
                </div>
            </div>
        </div>
        <div class="fields">
            <div class="three wide field">
                <label for="bancos">Banco</label>
                <div class="ui search selection dropdown" id="bancos">
                    <input type="hidden" name="banco" />
                    <i class="dropdown icon"></i>
                    <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="fields">
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="tipo" value="1" checked="checked" />
                        <label>Cheque</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="tipo" value="3" />
                        <label>Vale Vista</label>
                    </div>
                </div>
            </div>
        </div>
        <button class="ui button">Agregar</button>
    </form>
@endsection

@push('page_scripts')
    <script>
        const escritura = {
            ids: {},
            add() {
                return {
                    escritura: event => {
                        event.preventDefault()
                        const body = new FormData(event.currentTarget)
                        const fecha = $(this.ids.fecha).calendar('get date')
                        body.set('fecha', [fecha.getFullYear(), fecha.getMonth()+1, fecha.getDate()].join('-'))
                        const status = $(this.ids.checkbox).checkbox('is checked')
                        body.set('uf', status)

                        const url = '{{$urls->api}}/venta/{{$venta->id}}/escritura/add'
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.status) {
                                    window.location = '{{$urls->base}}/venta/{{$venta->id}}'
                                }
                            })
                        })
                        return false
                    }
                }
            },
            toggle() {
                return {
                    checkbox: () => {
                        const status = $(this.ids.checkbox).checkbox('is checked')
                        if (status) {
                            return this.toggle().uf()
                        }
                        return this.toggle().pesos()
                    },
                    uf: () => {
                        const valor = $(this.ids.valor)
                        valor.attr('class', 'ui right labeled input')
                        valor.find('.label').remove()
                        valor.append(
                            $('<div></div>').addClass('ui basic label').html('UF')
                        )
                    },
                    pesos: () => {
                        const valor = $(this.ids.valor)
                        valor.attr('class', 'ui labeled input')
                        valor.find('.label').remove()
                        valor.prepend(
                            $('<div></div>').addClass('ui basic label').html('$')
                        )
                    }
                }
            },
            setup(ids) {
                this.ids = ids

                $(this.ids.fecha).calendar(calendar_date_options)
                $(this.ids.checkbox).checkbox({
                    fireOnInit: true,
                    onChange: this.toggle().checkbox
                })
                $(this.ids.bancos).dropdown()
                $(this.ids.form).submit(this.add().escritura)
            }
        }
        $(document).ready(() => {
            escritura.setup({
                form: '#add_form',
                fecha: '#fecha',
                checkbox: '#uf',
                valor: '#valor',
                bancos: '#bancos'
            })
        })
    </script>
@endpush