@extends('ventas.base')

@section('venta_subtitle')
    Desistida
@endsection

@section('venta_content')
    <form class="ui form" id="desistida_form">
        <div class="fields">
            <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" />
                    </div>
                </div>
            </div>
            <div class="one wide field">
                <div id="loading-spinner-fecha" class="ui tiny blue active inline elastic loader" style="display: none;"></div>
            </div>
        </div>
        <div class="fields">
            <div class="three wide field">
                <label for="devolucion">Devolución</label>
                <div class="ui left labeled input">
                    <div class="ui basic label">$</div>
                    <input type="text" id="devolucion" value="{{$venta->resciliacion()->valor}}" />
                </div>
            </div>
            <div class="one wide field">
                <div id="loading-spinner-devolucion" class="ui tiny blue active inline elastic loader" style="display: none;"></div>
            </div>
        </div>
        <button class="ui red icon button" type="button" id="eliminar_desistimiento">
            <i class="ban icon"></i>
            Elmininar desistimiento
        </button>
        <div id="loading-spinner-eliminar" class="ui tiny blue active inline elastic loader" style="display: none;"></div>
    </form>
@endsection

@push('page_scripts')
    <script>
        function alertResponse(message, {color = 'green', icon = 'check circle'}={}) {
            $.toast({
                message,
                showProgress: 'bottom',
                progressUp: true,
                class: color,
                showIcon: icon,
                classProgress: 'blue'
            })
        }
        $(document).ready(() => {
            const url = '{{$urls->api}}/ventas/pago/{{$venta->resciliacion()->id}}'
            let old = new Date(Date.parse('{{$venta->resciliacion()?->fecha->format('Y-m-d') ?? $venta->currentEstado()->fecha->format('Y-m-d') ?? $venta->fecha->format('Y-m-d')}}') + 24 * 60 * 60 * 1000)
            calendar_date_options['initialDate'] = old
            calendar_date_options['onChange'] = function(date, text, mode) {
                if (date.getTime() === old.getTime()) {
                    return
                }
                const body = new FormData()
                const fecha = new Date(date.getTime())
                fecha.setDate(fecha.getDate() - 1)
                body.set('fecha', fecha.toISOString())
                $('#loading-spinner-fecha').show()
                APIClient.fetch(url, {method: 'post', body}).then(response => {
                    $('#loading-spinner-fecha').hide()
                    if (!response) {
                        return
                    }
                    old = new Date(date.getTime())
                    alertResponse('Fecha cambiada correctamente.')
                })
            }
            $('#fecha').calendar(calendar_date_options)
            $('#devolucion').change(event => {
                const val = $(event.currentTarget).val()
                const body = new FormData()
                body.set('valor', val)
                $('#loading-spinner-devolucion').show()
                APIClient.fetch(url, {method: 'post', body}).then(response => {
                    $('#loading-spinner-devolucion').hide()
                    if (!response) {
                        return
                    }
                    alertResponse('Devolución cambiada correctamente.')
                })
            })
            $('#eliminar_desistimiento').click(event => {
                const url = '{{$urls->api}}/venta/{{$venta->id}}/desistir/eliminar'
                $('#loading-spinner-eliminar').show()
                APIClient.fetch(url).then(response => {
                    $('#loading-spinner-eliminar').hide()
                    if (!response) {
                        alertResponse('No se pudo eliminar el desistimiento', {color: 'red', icon: 'triangle exclamation'})
                        return
                    }
                    response.json().then(json => {
                        if (!json.eliminado) {
                            alertResponse('No se pudo eliminar el disistimiento', {color: 'red', icon: 'triangle exclamation'})
                            return
                        }
                        window.location = '{{$urls->base}}/venta/{{$venta->id}}'
                    })
                })
            })
        })
    </script>
@endpush