@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">
            Desistida - {{$venta->proyecto()->descripcion}} -
            <a href="{{$urls->base}}/venta/{{$venta->id}}">
                {{$venta->propiedad()->summary()}}
            </a>
        </h1>
        <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>
    </div>
@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({{$venta->resciliacion()->fecha->format('Y')}},
                    {{$venta->resciliacion()->fecha->format('n')}}-1, {{$venta->resciliacion()->fecha->format('j')}})
            calendar_date_options['initialDate'] = old
            calendar_date_options['onChange'] = function(date, text, mode) {
                if (date.getTime() === old.getTime()) {
                    return
                }
                const body = new FormData()
                body.set('fecha', date.toISOString())
                $('#loading-spinner-fecha').show()
                fetchAPI(url, {method: 'post', body}).then(response => {
                    $('#loading-spinner-fecha').hide()
                    if (!response) {
                        return
                    }
                    old = date
                    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()
                fetchAPI(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()
                fetchAPI(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