@extends('ventas.base')

@section('venta_subtitle')
    Escritura
@endsection

@section('venta_content')
    @if (count($venta->formaPago()->cuotasAbono) > 0)
        <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/cuotas" class="ui tertiary green button">Ver Cuotas</a>
        <div class="ui compact segment">
            <div class="header">
                Cuotas
            </div>
            <div class="ui horizontal list">
                <div class="item">
                    {{$format->pesos($venta->formaPago()->cuotasAbono('pesos'))}}
                </div>
                <div class="item">
                    {{$format->ufs($venta->formaPago()->cuotasAbono())}}
                </div>
            </div>
        </div>
    @else
        <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/cuotas" class="ui small green button"><i class="plus icon"></i> Agregar Cuotas</a>
    @endif
    <form class="ui form" id="edit_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" placeholder="Fecha" />
                </div>
            </div>
        </div>
        <div class="three wide field">
            <label for="valor">Valor</label>
            <div class="ui left labeled input">
                <div class="ui basic label">$</div>
                <input type="text" name="valor" value="{{$venta->formaPago()->escritura->pago->valor}}" />
            </div>
        </div>
        <div class="three wide field">
            <label>Estado</label>
            <div class="ui selection dropdown" id="estado">
                <input type="hidden" name="estado" />
                <div class="default text">Estado</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    @foreach($estados as $estado)
                        <div class="item" data-value="{{$estado->id}}">{{ucwords($estado->descripcion)}}</div>
                    @endforeach
                </div>
            </div>
        </div>
        <button class="ui button">Guardar</button>
    </form>
@endsection

@push('page_scripts')
    <script>
        function editEscritura() {
            const url = '{{$urls->api}}/ventas/escritura/{{$venta->id}}/edit'
            const data = new FormData()
            data.set('venta', {{$venta->id}})
            const fecha = $('#fecha').calendar('get date')
            data.set('fecha', fecha.toISOString())
            data.set('estado', $('#estado').dropdown('get value'))
            return fetchAPI(url, {method: 'post', body: data}).then(response => {
                if (response.ok) {
                    return response.json()
                }
            }).then(json => {
                if (!json.success) {
                    return
                }
                window.location = '{{$urls->base}}/venta/{{$venta->id}}'
            })
        }
        $(document).ready(() => {
            calendar_date_options.initialDate = new Date({{$venta->currentEstado()->fecha->format('Y, m-1, j')}})
            $('#fecha').calendar(calendar_date_options)
            $('#estado').dropdown()
            $('#estado').dropdown('set selected', '{{$venta->currentEstado()->id}}')
            $('#edit_form').submit(event => {
                event.preventDefault()
                editEscritura()
                return false
            })
        })
    </script>
@endpush