@extends('ventas.base')

@section('venta_subtitle')
    Editar Bono - Pie
@endsection

@section('venta_content')
    <div class="ui compact 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
        <p>Valor 10% {{$format->ufs($venta->valor * 0.1)}}</p>
    </div>
    <form class="ui form" id="add_bono">
        <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" placeholder="Fecha" />
                </div>
            </div>
        </div>
        <div class="three wide field">
            <label for="valor">Valor</label>
            <div class="ui right labeled input">
                <input type="text" name="valor" id="valor" value="{{ round($venta->formaPago()->bonoPie->pago->valor(), 2) }}" />
                <div class="ui basic label">UF</div>
            </div>
        </div>
        <button class="ui button">Editar</button>
    </form>
@endsection

@include('layout.body.scripts.number_input')

@push('page_scripts')
    <script>
        $(document).ready(() => {
            const fecha = $('#fecha')
            fecha.calendar(calendar_date_options)
            fecha.calendar('set date', new Date({{$venta->formaPago()->bonoPie->pago->fecha->format('Y, m-1, j')}}))

            const numberInput = new NumberInput({input: document.querySelector('input[name="valor"]'), isRational: true})
            numberInput.watch()

            $('#add_bono').submit(submitEvent => {
                submitEvent.preventDefault()
                const url = '{{$urls->api}}/venta/{{$venta->id}}/bono_pie/edit'
                const method = 'post'
                const body = new FormData()
                body.set('fecha', $('#fecha').calendar('get date').toISOString())
                body.set('valor', numberInput.currentValue)
                return APIClient.fetch(url, {method, body}).then(response => {
                    if (response.ok) {
                        return response.json()
                    }
                }).then(json => {
                    if (!json.success) {
                        return
                    }
                    window.location = '{{$urls->base}}/venta/{{$venta->id}}'
                })
            })
        })
    </script>
@endpush