Implemented repository mapper, and venta show

app/resources/routes/04_ventas.php

@@ -11,3 +11,16 @@ $app->group('/ventas', function($app) {
     }
     $app->get('[/]', Ventas::class);
 });
+$app->group('/venta/{proyecto_nombre:[A-za-zÑñ\+\ %0-9]+}/{unidad_descripcion:[0-9]+}', function($app) {
+    $app->get('[/]', [Ventas::class, 'showUnidad']);
+});
+$app->group('/venta/{venta_id:[0-9]+}', function($app) {
+    $app->group('/propietario', function($app) {
+        $app->get('[/]', [Ventas::class, 'propietario']);
+    });
+    $app->group('/propiedad', function($app) {
+        $app->get('[/]', [Ventas::class, 'propiedad']);
+    });
+    $app->get('/edit[/]', [Ventas::class, 'edit']);
+    $app->get('[/]', [Ventas::class, 'show']);
+});

app/resources/routes/api/direcciones.php

@@ -0,0 +1,11 @@
+<?php
+use Incoviba\Controller\Direcciones;
+
+$app->group('/direcciones', function($app) {
+    $app->group('/region/{region_id:[0-9]+}', function($app) {
+        $app->get('/comunas[/]', [Direcciones::class, 'comunas']);
+    });
+    $app->group('/comunas', function($app) {
+        $app->post('/find[/]', [Direcciones::class, 'findComunas']);
+    });
+});

app/resources/routes/api/ventas.php

@@ -14,3 +14,7 @@ $app->group('/ventas', function($app) {
     }
     $app->post('[/]', [Ventas::class, 'proyecto']);
 });
+$app->group('/venta/{venta_id}', function($app) {
+    $app->get('/comentarios', [Ventas::class, 'comentarios']);
+    $app->get('[/]', [Ventas::class, 'get']);
+});

app/resources/routes/api/ventas/pagos.php

@@ -0,0 +1,7 @@
+<?php
+use Incoviba\Controller\Ventas\Pagos;
+
+$app->group('/pago/{pago_id:[0-9]+}', function($app) {
+    $app->put('/depositar[/]', [Pagos::class, 'depositar']);
+    $app->put('/abonar[/]', [Pagos::class, 'abonar']);
+});

app/resources/routes/ventas/propietarios.php

@@ -0,0 +1,6 @@
+<?php
+use Incoviba\Controller\Ventas\Propietarios;
+
+$app->group('/propietario/{propietario_rut:[0-9]+}', function($app) {
+    $app->get('[/]', [Propietarios::class, 'show']);
+});

app/resources/views/ventas/edit.blade.php

@@ -0,0 +1,94 @@
+@extends('layout.base')
+
+@section('page_content')
+    <div class="ui container">
+        <h2 class="ui header">Editar Venta</h2>
+        <form class="ui form" id="edit_form">
+            <div class="inline field">
+                <label for="valor">Valor</label>
+                <div class="ui right labeled input">
+                    <input type="text" id="valor" name="valor" value="{{$venta->valor}}" />
+                    <div class="ui label">UF</div>
+                </div>
+            </div>
+            <div class="inline field">
+                <label for="fecha">Fecha Promesa</label>
+                <div class="ui calendar" id="fecha_calendar">
+                    <div class="ui icon input">
+                        <input type="text" name="fecha" id="fecha" />
+                        <i class="calendar icon"></i>
+                    </div>
+                </div>
+            </div>
+            <button class="ui button">
+                Guardar
+            </button>
+        </form>
+    </div>
+@endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        function getMonthsList() {
+            const formatter = new Intl.DateTimeFormat('es-CL', {month: 'long'})
+            const months = []
+            let m = ''
+            for (let i = 0; i < 12; i ++) {
+                m = formatter.format((new Date()).setMonth(i))
+                months.push(m.charAt(0).toUpperCase() + m.slice(1))
+            }
+            return months
+        }
+        function redirect() {
+            const uri = '{{$urls->base}}/venta/{{$venta->id}}'
+            window.location = uri
+        }
+        function editVenta() {
+            const original = {
+                valor: {{$venta->valor}},
+                fecha: new Date('{{$venta->fecha->format('Y-m-d')}}T00:00:00')
+            }
+            const collator = new Intl.Collator('es-CL')
+            const data = {}
+            Object.keys(original).forEach(name => {
+                let val = $("[name='" + name + "']").val()
+                if (name === 'fecha') {
+                    val = $('#fecha_calendar').calendar('get date')
+                    if (val.getTime() !== original[name].getTime()) {
+                        data[name] = [val.getFullYear(), (''+(val.getMonth()+1)).padStart(2, '0'), (''+val.getDate()).padStart(2, '0')].join('-')
+                    }
+                    return
+                }
+                if (collator.compare(val, original[name]) !== 0) {
+                    data[name] = val
+                }
+            })
+            if (Object.keys(data).length === 0) {
+                redirect()
+                return
+            }
+            const uri = '{{$urls->api}}/venta/{{$venta->id}}'
+            return fetch(uri,
+                {method: 'put', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
+            ).then(response => {
+                if (response.ok) {
+                    redirect()
+                }
+            })
+        }
+        $(document).ready(() => {
+            $('#fecha_calendar').calendar({
+                type: 'date',
+                initialDate: '{{$venta->fecha->format('Y-m-d')}}',
+                text: {
+                    months: getMonthsList()
+                }
+            })
+            $('#edit_form').submit(event => {
+                event.preventDefault()
+                editVenta()
+                return false
+            })
+        })
+    </script>
+@endpush

app/resources/views/ventas/list.blade.php

@@ -87,6 +87,7 @@
                 id: 0,
                 proyecto: '',
                 proyectos: JSON.parse('{!! json_encode($proyectos) !!}'),
+                venta_ids: [],
                 ventas: []
             },
             loading: {
@@ -100,6 +101,7 @@
             get: function() {
                 return {
                     ventas: proyecto_id => {
+                        this.data.venta_ids = []
                         this.data.ventas = []
                         return fetch('{{$urls->api}}/ventas',
                             {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}
@@ -110,14 +112,31 @@
                             }
                         }).then(data => {
                             if (data.total > 0) {
-                                this.data.id = data.ventas[0].propiedad.departamentos[0].proyecto_tipo_unidad.proyecto.id
-                                this.data.proyecto = data.ventas[0].propiedad.departamentos[0].proyecto_tipo_unidad.proyecto.descripcion
-                                data.ventas.forEach(venta => {
-                                    this.add().venta(venta)
+                                this.data.id = data.proyecto.id
+                                this.data.proyecto = data.proyecto.descripcion
+                                this.data.venta_ids = data.ventas
+                                const promises = []
+                                data.ventas.forEach(venta_id => {
+                                    promises.push(this.get().venta(venta_id))
+                                })
+                                Promise.all(promises).then(() => {
+                                    this.draw().ventas()
                                 })
-                                this.draw().ventas()
                             }
                         })
+                    },
+                    venta: venta_id => {
+                        return fetch('{{$urls->api}}/venta/' + venta_id).then(response => {
+                            if (response.ok) {
+                                return response.json()
+                            }
+                        }).then(data => {
+                            if (typeof data.venta === 'undefined') {
+                                console.error(venta_id, data.error)
+                                return
+                            }
+                            this.add().venta(data.venta)
+                        })
                     }
                 }
             },

app/resources/views/ventas/propiedades/edit.blade.php

@@ -0,0 +1,104 @@
+@extends('layout.base')
+
+@section('page_content')
+    <div class="ui container">
+        <h2>Editar Propiedad - {{$proyecto->descripcion}} {{$propiedad->summary()}}</h2>
+        <table class="ui table">
+            <thead>
+                <tr>
+                    <th>Tipo</th>
+                    <th>Unidad</th>
+                    <th class="right aligned">
+                        <button class="ui small green circular icon button" id="add_unidad">
+                            <i class="plus icon"></i>
+                        </button>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+            @foreach($propiedad->unidades as $unidad)
+                <tr>
+                    <td>{{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}}</td>
+                    <td>{{$unidad->descripcion}}</td>
+                    <td class="right aligned">
+                        <button class="ui small red circular icon button remove_unidad" data-id="{{$unidad->id}}">
+                            <i class="remove icon"></i>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+    </div>
+    <div class="ui modal" id="add_modal">
+        <div class="content">
+            <h3 class="header">Agregar</h3>
+            <div class="ui form" id="add_form">
+                <div class="field">
+                    <label for="tipo">Tipo</label>
+                    <select id="tipo" name="tipo" class="ui search selection dropdown">
+                    @foreach ($tiposUnidades as $tipoUnidad)
+                        <option value="{{$tipoUnidad->id}}">{{ucwords($tipoUnidad->descripcion)}}</option>
+                    @endforeach
+                    </select>
+                </div>
+                <div class="field">
+                    <label for="unidad">Unidad</label>
+                    <select id="unidad" name="unidad" class="ui search selection dropdown" size="4"></select>
+                </div>
+                <button class="ui button">Agregar</button>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        const unidades = {
+        @foreach($tiposUnidades as $tipoUnidad)
+            {{$tipoUnidad->id}}: [
+                @foreach($unidades as $unidad)
+                    @if ($unidad->proyectoTipoUnidad->tipoUnidad->id === $tipoUnidad->id)
+                        {
+                            value: {{$unidad->id}},
+                            text: '{{$unidad->descripcion}}',
+                            name: '{{$unidad->descripcion}}'
+                        },
+                    @endif
+                @endforeach
+            ],
+        @endforeach
+        }
+        function changeTipoUnidad(tipo_unidad_id) {
+            $('#unidad').dropdown('change values', unidades[tipo_unidad_id].sort((a, b) => a.text.padStart(4, '0').localeCompare(b.text.padStart(4, '0'))))
+        }
+        function addUnidad() {
+            $('#add_modal').modal('show')
+        }
+        function removeUnidad(unidad_id) {
+            console.debug(unidad_id)
+        }
+        $(document).ready(() => {
+            $('#add_unidad').click(event => {
+                addUnidad()
+            })
+            $('.remove_unidad').click(event => {
+                const unidad_id = $(event.currentTarget).data('id')
+                removeUnidad(unidad_id)
+            })
+            $('#add_modal').modal()
+            const tipo = $('#tipo')
+            tipo.dropdown()
+            tipo.change(event => {
+                changeTipoUnidad(tipo.val())
+            })
+            $('#unidad').dropdown()
+            changeTipoUnidad(tipo.val())
+            $('#add_form').submit(event => {
+                event.preventDefault()
+                tipo.model('hide')
+                return false
+            })
+        })
+    </script>
+@endpush

app/resources/views/ventas/propietarios/edit.blade.php

@@ -0,0 +1,226 @@
+@extends('layout.base')
+
+@section('page_title')
+Editar Propietario
+@endsection
+
+@section('page_content')
+<div class="ui container">
+    <h2 class="ui header">Editar Propietario</h2>
+    <form class="ui form" id="edit_form">
+        <input type="hidden" name="venta_id" value="{{$venta_id}}" />
+        <div class="field">
+            <label for="rut">RUT</label>
+            {{$propietario->rut()}}
+        </div>
+        <div class="fields">
+            <div class="field">
+                <label for="nombres">Nombre</label>
+                <input type="text" name="nombres" id="nombres" value="{{trim($propietario->nombres)}}" />
+            </div>
+            <div class="field">
+                <label for="apellido_paterno">Apellido Paterno</label>
+                <input type="text" id="apellido_paterno" name="apellido_paterno" value="{{$propietario->apellidos['paterno']}}" />
+            </div>
+            <div class="field">
+                <label for="apellido_materno">Apellido Materno</label>
+                <input type="text" id="apellido_materno" name="apellido_materno" value="{{$propietario->apellidos['materno']}}" />
+            </div>
+        </div>
+        <div class="fields">
+            <div class="field">
+                <label for="calle">Dirección</label>
+                <input type="text" name="calle" id="calle" value="{{$propietario->datos->direccion->calle}}" />
+            </div>
+            <div class="field">
+                <label for="numero">Número</label>
+                <input type="number" id="numero" size="6" name="numero" value="{{$propietario->datos->direccion->numero}}" />
+            </div>
+            <div class="field">
+                <label for="extra">Información Adicional*</label>
+                <input type="text" id="extra" name="extra" value="{{$propietario->datos->direccion->extra}}" />
+            </div>
+        </div>
+        <div class="fields">
+            <div class="field">
+                <label for="region">Región</label>
+                <select id="region" name="region" class="ui search selection dropdown">
+                    @foreach($regiones as $region)
+                        <option value="{{$region->id}}"{{($propietario->datos->direccion->comuna->provincia->region->id === $region->id) ? ' selected="selected"' : ''}}>{{$region->numeral}} {{$region->descripcion}}</option>
+                    @endforeach
+                </select>
+            </div>
+            <div class="field">
+                <label for="comunas">Comuna</label>
+                <select class="ui search selection dropdown" name="comuna" id="comunas"></select>
+            </div>
+        </div>
+        <button class="ui button" id="guardar_button">Guardar</button>
+    </form>
+</div>
+@endsection
+
+@push('page_scripts')
+<script type="text/javascript">
+    function drawComunas({parent, comunas}) {
+        parent.html('')
+        comunas.forEach(comuna => {
+            const option = $('<option></option>')
+            option.attr('value', comuna.id).html(comuna.descripcion)
+            if (comuna.id === {{$propietario->datos->direccion->comuna->id}}) {
+                option.prop('selected', true)
+            }
+            parent.append(option)
+        })
+        parent.show()
+        parent.dropdown()
+    }
+    function findComunas(direccion) {
+        const original_id = $("[name='comuna']").val()
+        const uri = '{{$urls->api}}/direcciones/comunas/find'
+        const data = {direccion}
+        return fetch(uri,
+            {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
+        ).then(response => {
+            if (response.ok) {
+                return response.json()
+            }
+        }).then(data => {
+            if (data.total === 0) {
+                return
+            }
+            const comuna_id = data.comunas[0].id
+            if (comuna_id === original_id) {
+                return
+            }
+            const parent = $('#comunas')
+            parent.dropdown('set selected', comuna_id)
+        })
+    }
+    function getComunas(region_id) {
+        const parent = $('#comunas')
+        parent.hide()
+        const uri = '{{$urls->api}}/direcciones/region/' + region_id + '/comunas'
+        return fetch(uri).then(response => {
+            if (response.ok) {
+                return response.json()
+            }
+        }).then(data => {
+            if (data.total === 0) {
+                return
+            }
+            drawComunas({parent, comunas: data.comunas})
+        })
+    }
+    function redirect() {
+        window.location = '{{$urls->base}}/venta/{{$venta_id}}'
+    }
+    function changeDireccion() {
+        const names = [
+            'calle',
+            'numero',
+            'extra'
+        ]
+        const originals = [
+            '{{trim($propietario->datos->direccion->calle)}}',
+            '{{trim($propietario->datos->direccion->numero)}}',
+            '{{trim($propietario->datos->direccion->extra)}}'
+        ]
+        const values = []
+        names.forEach(name => {
+            const val = $("[name='" + name + "']").val()
+            values.push(val)
+        })
+        const collator = new Intl.Collator('es')
+        if (collator.compare(originals.join(' '), values.join(' ')) !== 0) {
+            findComunas(values.join(' ').trim())
+        }
+    }
+    function watchChangeDireccion() {
+        const watched = [
+            'calle',
+            'numero',
+            'extra'
+        ]
+        watched.forEach(name => {
+            $("[name='" + name + "']").change(event => {
+                changeDireccion()
+            })
+        })
+    }
+    function editPropietario() {
+        const uri = '{{$urls->api}}/ventas/propietario/{{$propietario->rut}}'
+        const names = [
+            'nombres',
+            'apellido_paterno',
+            'apellido_materno'
+        ]
+        const values = [
+            '{{trim($propietario->nombres)}}',
+            '{{trim($propietario->apellidos['paterno'])}}',
+            '{{trim($propietario->apellidos['materno'])}}'
+        ]
+        const direccion_names = [
+            'calle',
+            'numero',
+            'extra',
+            'comuna'
+        ]
+        const direccion_values = [
+            '{{trim($propietario->datos->direccion->calle)}}',
+            '{{$propietario->datos->direccion->numero}}',
+            '{{trim($propietario->datos->direccion->extra)}}',
+            '{{$propietario->datos->direccion->comuna->id}}'
+        ]
+        const data = {}
+        const collator = new Intl.Collator('es')
+        names.forEach((name, index) => {
+            const val = $("[name='" + name + "']").val()
+            if (collator.compare(val, values[index]) !== 0) {
+                console.debug(name, val, values[index], collator.compare(val, values[index]))
+                data[name] = val
+            }
+        })
+        direccion_names.forEach((name, index) => {
+            const val = $("[name='" + name + "']").val()
+            if (collator.compare(val, direccion_values[index]) !== 0) {
+                if (typeof data['direccion'] === 'undefined') {
+                    data['direccion'] = {}
+                }
+                console.debug(name, val, direccion_values[index])
+                data['direccion'][name] = val
+            }
+        })
+        if (Object.keys(data).length === 0) {
+            redirect()
+            return
+        }
+        return fetch(uri,
+            {method: 'put', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
+        ).then(response => {
+            if (response.ok) {
+                redirect()
+            }
+        })
+    }
+    $(document).ready(() => {
+        const regiones = $("select[name='region']")
+        regiones.dropdown()
+        regiones.change(event => {
+            const region_id = $(event.currentTarget).val()
+            getComunas(region_id)
+        })
+        $('#comunas').hide()
+        getComunas({{$propietario->datos->direccion->comuna->provincia->region->id}})
+        $('#edit_form').submit(event => {
+            event.preventDefault()
+            editPropietario({{$propietario->rut}})
+            return false
+        })
+        $('#guardar_button').click(event => {
+            editPropietario({{$propietario->rut}})
+        })
+        watchChangeDireccion()
+    })
+</script>
+@endpush

app/resources/views/ventas/propietarios/show.blade.php

@@ -0,0 +1,7 @@
+@extends('layout.base')
+
+@section('page_content')
+    <div class="ui container">
+    {{$propietario->nombreCompleto()}}
+    </div>
+@endsection

app/resources/views/ventas/show.blade.php

@@ -0,0 +1,40 @@
+@extends('layout.base')
+
+@section('page_title')
+    Venta {{$venta->proyecto()->descripcion}} {{$venta->propiedad()->summary()}}
+@endsection
+
+@section('page_content')
+    <div class="ui container">
+        <div class="ui two column grid">
+            <h1 class="four wide column header">
+                <div class="content">
+                    <div class="ui dividing sub header">{{$venta->proyecto()->descripcion}}</div>
+                    {{$venta->propiedad()->summary()}}
+                </div>
+            </h1>
+            <div class="right floated column">
+                @include('ventas.show.propietario')
+            </div>
+        </div>
+        <br />
+        <div class="ui fitted basic mini segment">
+            @if ($venta->currentEstado()->tipoEstadoVenta->activa)
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/desistir">
+                Desistir <i class="minus icon"></i>
+            </a>
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/ceder">
+                Ceder <i clasS="right chevron icon"></i>
+            </a>
+            @endif
+        </div>
+        <div class="ui segments">
+            @include('ventas.show.propiedad')
+            @include('ventas.show.detalle')
+            @include('ventas.show.forma_pago', ['formaPago' => $venta->formaPago()])
+            @include('ventas.show.escritura')
+            @include('ventas.show.entrega')
+            @include('ventas.show.comentarios')
+        </div>
+    </div>
+@endsection

app/resources/views/ventas/show/comentarios.blade.php

@@ -0,0 +1,88 @@
+<div class="ui inverted grey two column grid segment">
+    <div class="column">
+        COMENTARIOS
+    </div>
+    <div class="right aligned column">
+        <a href="javascript: addComment()" style="color: inherit;">
+            <i class="plus icon"></i>
+        </a>
+    </div>
+</div>
+<div class="ui segment">
+    <table class="ui very basic table">
+        <tbody id="comentarios"></tbody>
+    </table>
+</div>
+
+@push('page_scripts')
+    <script type="text/javascript">
+        class Comentario
+        {
+            fecha
+            texto
+
+            constructor({fecha, texto})
+            {
+                this.fecha = new Date(fecha + 'T00:00:00')
+                this.texto = texto
+            }
+            draw(dateFormatter)
+            {
+                return $('<tr></tr>').append(
+                    $('<td></td>').html(dateFormatter.format(this.fecha))
+                ).append(
+                    $('<td></td>').html(this.texto)
+                ).append(
+                    $('<td></td>').addClass('right aligned').append(
+                        $('<a></a>').attr('href', 'javascript: removeComment();').append(
+                            $('<i></i>').addClass('minus icon')
+                        )
+                    )
+                )
+            }
+        }
+        const comentarios = {
+            comentarios: [],
+            id: '',
+            fetch: function() {
+                return {
+                    comentarios: () => {
+                        const uri = '{{$urls->api}}/venta/{{$venta->id}}/comentarios'
+                        return fetch(uri).then(response => {
+                            if (response.ok) {
+                                return response.json()
+                            }
+                        }).then(data => {
+                            if (data.total === 0) {
+                                return
+                            }
+                            data.comentarios.forEach(settings => {
+                                this.comentarios.push(new Comentario(settings))
+                            })
+                            this.draw().comentarios()
+                        })
+                    }
+                }
+            },
+            draw: function() {
+                return {
+                    comentarios: () => {
+                        const body = $(this.id)
+                        const dateFormatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
+                        body.html('')
+                        this.comentarios.forEach(comentario => {
+                            body.append(comentario.draw(dateFormatter))
+                        })
+                    }
+                }
+            },
+            setup: function(id) {
+                this.id = id
+                this.fetch().comentarios()
+            }
+        }
+        $(document).ready(() => {
+            comentarios.setup('#comentarios')
+        })
+    </script>
+@endpush

app/resources/views/ventas/show/detalle.blade.php

@@ -0,0 +1,38 @@
+<div class="ui inverted grey two column grid segment">
+    <div class="column">
+        VENTA
+    </div>
+    <div class="right aligned column">
+        <a style="color: inherit;" href="{{$urls->base}}/venta/{{$venta->id}}/edit">
+            <i class="edit icon"></i>
+        </a>
+    </div>
+</div>
+<div class="ui segment">
+    <table class="ui very basic fluid table">
+        <thead>
+        <tr>
+            <th>Valor Promesa</th>
+            <th>Valor Util</th>
+            <th>UF/m²</th>
+            <th>Comisión</th>
+            <th>
+                Fecha Promesa <br/>
+                Fecha Ingreso
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>{{$format->ufs($venta->valor)}}</td>
+            <td>{{$format->ufs($venta->util())}}</td>
+            <td>{{$format->number($venta->util() / $venta->propiedad()->vendible(), 2)}} UF/m²</td>
+            <td>0,00 UF (0,00%)</td>
+            <td>
+                {{$venta->fecha->format('d-m-Y')}}<br/>
+                {{$venta->fechaIngreso->format('d-m-Y')}}
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>

app/resources/views/ventas/show/entrega.blade.php

@@ -0,0 +1,11 @@
+<div class="ui inverted grey segment">
+    ENTREGA
+</div>
+<div class="ui segment">
+    @if ($venta->entrega() !== null)
+    @else
+        <a href="{{$urls->base}}/venta/{{$venta->id}}/entregar">
+            No <i class="right chevron icon"></i>
+        </a>
+    @endif
+</div>

app/resources/views/ventas/show/escritura.blade.php

@@ -0,0 +1,22 @@
+<div class="ui inverted grey segment">
+    ESCRITURA
+</div>
+@if ($venta->formaPago()->escritura !== null)
+    <div class="ui segment">
+        Escriturado {{$venta->formaPago()->escritura->fecha->format('d-m-Y')}}
+        <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/informe">
+            Informe
+            <i class="right chevron icon"></i>
+        </a>
+        <br />
+        <a href="{{$urls->base}}/venta{{$venta->id}}/escritura/firmar">
+            Firmar
+        </a>
+    </div>
+@else
+    <div class="ui segment">
+        <a href="{{$urls->base}}/venta/{{$venta->id}}/escriturar">
+            Escriturar
+        </a>
+    </div>
+@endif

app/resources/views/ventas/show/forma_pago.blade.php

@@ -0,0 +1,229 @@
+<div class="ui inverted grey segment">
+    FORMA DE PAGO
+</div>
+<div class="ui segment">
+    <table class="ui very basic fluid table">
+        @include('ventas.show.forma_pago.pie', ['pie' => $formaPago->pie])
+        @include('ventas.show.forma_pago.escritura', ['escritura' => $formaPago->escritura])
+        @include('ventas.show.forma_pago.anticipo', ['anticipo' => ['uf' => $formaPago->anticipo(), 'pesos' => $formaPago->anticipo('pesos')]])
+        @include('ventas.show.forma_pago.bono_pie', ['bonoPie' => $formaPago->bonoPie])
+        @include('ventas.show.forma_pago.subsidio', ['subsidio' => $formaPago->subsidio])
+        @include('ventas.show.forma_pago.credito', ['credito' => $formaPago->credito])
+        @include('ventas.show.forma_pago.total')
+        @include('ventas.show.forma_pago.devolucion', ['devolucion' => $formaPago->devolucion])
+    </table>
+</div>
+<div id="pago_modal" class="ui modal">
+    <div class="content">
+        <div class="ui form">
+            <div class="inline field">
+                <label for="fecha">Fecha</label>
+                <div class="ui calendar">
+                    <div class="ui icon input">
+                        <input id="fecha" name="fecha" type="text" />
+                        <i class="calendar icon"></i>
+                    </div>
+                </div>
+            </div>
+            <button class="ui button">
+                Guardar
+            </button>
+        </div>
+    </div>
+</div>
+
+@push('page_scripts')
+    <script type="text/javascript">
+        class Anchor
+        {
+            classes
+            title
+            row_id
+            pago_id
+            method
+            icon
+            status
+
+            constructor({classes, title, row_id, pago_id, method, icon})
+            {
+                this.classes = classes
+                this.title = title
+                this.row_id = row_id
+                this.pago_id = pago_id
+                this.method = method
+                this.icon = icon
+                this.status = true
+            }
+
+            draw()
+            {
+                const row = $(this.row_id)
+                const anchor = row.find('a')
+
+                anchor.attr('class', this.classes)
+                anchor.attr('title', this.title)
+                anchor.attr('href', 'javascript: ' + this.method + "({row_id: '" + this.row_id + "', pago_id: " + this.pago_id + '});')
+
+                anchor.html('')
+                anchor.append(
+                    $('<i></i>').addClass(this.icon + ' icon')
+                )
+            }
+            toggle()
+            {
+                if (this.status) {
+                    $(this.row_id).find('a').css('pointer-events', 'none')
+                    this.status = false
+                    return
+                }
+                $(this.row_id).find('a').css('pointer-events', '')
+                this.status = true
+            }
+        }
+        class Cell
+        {
+            id
+            classes
+            text
+            anchor
+            status
+
+            constructor({id, classes, text, anchor})
+            {
+                this.id = id
+                this.classes = classes
+                this.text = text
+                this.anchor = anchor
+                this.status = true
+            }
+
+            draw()
+            {
+                const row = $(this.id)
+                row.attr('class', this.classes)
+                row.html('').append(
+                    $('<span></span>').html(this.text)
+                ).append(this.anchor.draw())
+            }
+            toggle()
+            {
+                if (this.status) {
+                    $(this.id).css('cursor', 'wait')
+                    this.status = false
+                    return
+                }
+                $(this.id).css('cursor', 'default')
+                this.status = true
+            }
+        }
+        class Modal
+        {
+            id
+            date
+            uri
+
+            constructor({id}) {
+                this.id = id
+            }
+
+            show() {
+                $(this.id).find('div.ui.calendar').calendar('reset')
+                $(this.id).find('div.ui.calendar input').val('')
+                $(this.id).modal('show')
+            }
+            setup() {
+                const modal = $(this.id)
+                modal.modal({
+                    onHide: function($element) {
+                        const pagos = $("[id$='_pago']")
+                        pagos.css('cursor', 'default')
+                        const anchor = pagos.find("a")
+                        anchor.css('pointer-events', '')
+                    }
+                })
+                modal.find('div.ui.calendar').calendar({
+                    type: 'date'
+                })
+            }
+        }
+        const pagos = {
+            modal: null,
+            cells: [],
+
+            setup: function({modal_id}) {
+                this.modal = new Modal({id: modal_id})
+                this.modal.setup()
+            },
+            add: function() {
+                return {
+                    cell: ({cell_id, classes, text, anchor}) => {
+                        this.cells.push(new Cell({id: cell_id, classes, text, anchor}))
+                    }
+                }
+            },
+            
+        }
+        function depositar({row_id, pago_id}) {
+            const row = $(row_id)
+            const anchor = row.find("a[title='Depositar']")
+            const uri = '{{$urls->api}}/ventas/pago/' + pago_id + '/depositar'
+            const modal = $('#pago_modal')
+
+            row.css('cursor', 'wait')
+            anchor.css('pointer-events', 'none')
+            modal.find('#fecha').calendar('clear')
+            modal.modal('show')
+            modal.find('.ui.button').click(event => {
+                modal.modal('hide')
+                const date = modal.find('#fecha').val()
+                return fetch(uri,
+                    {method: 'put', body: JSON.stringify({fecha: date}), headers: {'Content-Type': 'application/json'}}
+                ).then(response => {
+                    anchor.css('pointer-events', '')
+                    row.css('cursor', 'default')
+                    if (response.ok) {
+                        anchor.attr('href', "javascript: abonar({row_id: '" + row_id + "', pago_id: " + pago_id + "});")
+                        anchor.attr('title', 'Abonar')
+                        anchor.html('')
+                        anchor.append(
+                            $('<i></i>').addClass('piggy bank icon')
+                        )
+                        row.removeClass('warning').addClass('positive')
+                        response.json().then(data => {
+                            row.find('.text').html(data.fecha)
+                        })
+                    }
+                })
+            })
+        }
+        function abonar({row_id, pago_id}) {
+            const row = $(row_id)
+            row.css('cursor', 'wait')
+            const anchor = row.find("a[title='Abonar']")
+            anchor.css('pointer-events', 'none')
+            const uri = '{{$urls->api}}/ventas/pago/' + pago_id + '/abonar'
+            const modal = $('#pago_modal')
+            modal.modal('show')
+            modal.find('.ui.button').click(event => {
+                const date = modal.find('#fecha').val()
+                return fetch(uri,
+                    {method: 'put', body: JSON.stringify({fecha: date}), headers: {'Content-Type': 'application/json'}}
+                ).then(response => {
+                    anchor.css('pointer-events', '')
+                    row.css('cursor', 'default')
+                    if (response.ok) {
+                        anchor.remove()
+                        row.removeClass('positive')
+                        response.json().then(data => {
+                            row.find('.text').html(data.fecha)
+                        })
+                    }
+                })
+            })
+        }
+        $(document).ready(() => {
+            const modal = new Modal({id: '#pago_modal'})
+            modal.setup()
+        })
+    </script>
+@endpush

app/resources/views/ventas/show/forma_pago/anticipo.blade.php

@@ -0,0 +1,7 @@
+<tr>
+    <td><strong>Anticipo</strong></td>
+    <td></td>
+    <td class="right aligned"><strong>{{$format->ufs($anticipo['uf'])}}</strong></td>
+    <td class="right aligned"><strong>{{$format->pesos($anticipo['pesos'])}}</strong></td>
+    <td colspan="2"></td>
+</tr>

app/resources/views/ventas/show/forma_pago/bono_pie.blade.php

@@ -0,0 +1,22 @@
+<tr>
+    <td>
+        Bono Pie
+        @if ($bonoPie !== null)
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/bono_pie">
+                <i class="edit button"></i>
+            </a>
+        @else
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/bono_pie/add">
+                <i class="add icon"></i>
+            </a>
+        @endif
+    </td>
+    @if ($bonoPie !== null)
+    <td></td>
+    <td class="right aligned">{{$format->ufs($bonoPie->pago->valor())}}</td>
+    <td class="right aligned">{{$format->pesos($bonoPie->pago->valor)}}</td>
+    <td colspan="2"></td>
+    @else
+    <td colspan="5"></td>
+    @endif
+</tr>

app/resources/views/ventas/show/forma_pago/credito.blade.php

@@ -0,0 +1,40 @@
+<tr>
+    <td>
+        Crédito
+        @if ($credito !== null)
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/credito">
+                <i class="edit icon"></i>
+            </a>
+        @else
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/credito/add">
+                <i class="plus icon"></i>
+            </a>
+        @endif
+    </td>
+    @if ($credito !== null)
+        <td></td>
+        <td class="right aligned">
+            {{$format->ufs($credito->pago->valor())}}
+        </td>
+        <td class="right aligned">
+            {{$format->pesos($credito->pago->valor)}}
+        </td>
+        <td id="credito_pago" class="{{$credito->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado' ? 'warning' : ($credito->pago->currentEstado->tipoEstado->descripcion === 'depositado' ? 'positive' : '')}}">
+            <span class="text">{{$credito->pago->currentEstado->fecha->format('d-m-Y')}}</span>
+            @if ($credito->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado')
+                <a href="javascript: depositar({row_id: '#credito_pago', pago_id: {{$credito->pago->id}}});" title="Depositar">
+                    <i class="dollar sign icon"></i>
+                </a>
+            @elseif($credito->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
+                <a href="javascript: abonar({row_id: '#credito_pago', pago_id: {{$credito->pago->id}}});" title="Abonar">
+                    <i class="piggy bank icon"></i>
+                </a>
+            @endif
+        </td>
+        <td>
+            Banco: {{$credito->pago->banco?->nombre}}
+        </td>
+    @else
+        <td colspan="5"></td>
+    @endif
+</tr>

app/resources/views/ventas/show/forma_pago/escritura.blade.php

@@ -0,0 +1,34 @@
+<tr>
+    <td>
+        Escritura
+        @if ($escritura !== null)
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura">
+                <i class="edit icon"></i>
+            </a>
+        @else
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/add">
+                <i class="plus icon"></i>
+            </a>
+        @endif
+    </td>
+    @if ($escritura !== null)
+    <td></td>
+    <td class="right aligned">{{$format->ufs($escritura->pago->valor())}}</td>
+    <td class="right aligned">{{$format->pesos($escritura->pago->valor)}}</td>
+    <td id="escritura_pago" class="{{$escritura->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado' ? 'warning' : ($escritura->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado' ? 'positive' : '')}}">
+        <span class="text">{{$escritura->pago->currentEstado->fecha->format('d-m-Y')}}</span>
+        @if ($escritura->pago->currentEstado->tipoEstadoPago->descripcion === 'no pagado')
+            <a href="javascript: depositar({row_id: '#escritura_pago', pago_id: {{$escritura->pago->id}}});" title="Depositar">
+                <i class="dollar sign icon"></i>
+            </a>
+        @elseif ($escritura->pago->currentEstado->tipoEstadoPago->descripcion === 'depositado')
+            <a href="javascript: abonar({row_id: '#escritura_pago', pago_id: {{$escritura->pago->id}}});" title="Abonar">
+                <i clasS="piggy bank icon"></i>
+            </a>
+        @endif
+    </td>
+    <td></td>
+    @else
+        <td colspan="5"></td>
+    @endif
+</tr>

app/resources/views/ventas/show/forma_pago/pie.blade.php

@@ -0,0 +1,31 @@
+@if ($pie !== null)
+<tr>
+    <td>
+        Pie
+        <a href="{{$urls->base}}/venta/{{$venta->id}}/pie">
+            <i class="edit icon"></i>
+        </a>
+    </td>
+    <td></td>
+    <td class="right aligned">{{$format->ufs($pie->valor)}}</td>
+    <td class="right aligned">{{$format->pesos($pie->valor * $pie->uf)}}</td>
+    <td class="right aligned">Cuotas</td>
+    <td>
+        <a href="{{$urls->base}}/venta/{{$venta->id}}/pie/cuotas">
+            {{count($pie->cuotas(true))}}/{{$pie->cuotas}}
+        </a>
+        @if (count($pie->cuotas()) < $pie->cuotas)
+            <a href="{{$urls->base}}/ventas/pie/{{$pie->id}}/cuotas/add">
+                <i class="plus icon"></i>
+            </a>
+        @endif
+    </td>
+</tr>
+<tr>
+    <td>Pagado</td>
+    <td></td>
+    <td class="right aligned">{{$format->ufs($pie->pagado())}}</td>
+    <td class="right aligned">{{$format->pesos($pie->pagado('pesos'))}}</td>
+    <td colspan="2"></td>
+</tr>
+@endif

app/resources/views/ventas/show/forma_pago/subsidio.blade.php

@@ -0,0 +1,32 @@
+<tr>
+    <td
+        @if ($subsidio !== null)
+            rowspan="2"
+        @endif
+    >
+        Subsidio
+        @if ($subsidio !== null)
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/subsidio">
+                <i class="edit icon"></i>
+            </a>
+        @else
+            <a href="{{$urls->base}}/venta/{{$venta->id}}/subsidio/add">
+                <i class="plus icon"></i>
+            </a>
+        @endif
+    </td>
+    @if ($subsidio !== null)
+        <td>Ahorro</td>
+        <td class="right aligned">{{$format->ufs($subsidio->ahorro->valor())}}</td>
+        <td class="right aligned">{{$format->pesos($subsidio->ahorro->valor)}}</td>
+        <td colspan="2"></td>
+</tr>
+<tr>
+        <td>Subsidio</td>
+        <td class="right aligned">{{$format->ufs($subsidio->ahorro->valor())}}</td>
+        <td class="right aligned">{{$format->pesos($subsidio->ahorro->valor)}}</td>
+        <td colspan="2"></td>
+    @else
+        <td colspan="5"></td>
+    @endif
+</tr>

app/resources/views/ventas/show/forma_pago/total.blade.php

@@ -0,0 +1,28 @@
+<tr class="{{$venta->saldo() < 0 ? 'positive' : ($venta->saldo() > 0 ? 'error' : '')}}">
+    <td>
+        <strong>
+            Total
+        </strong>
+    </td>
+    <td></td>
+    <td class="right aligned">
+        <strong>
+            {{$format->ufs($formaPago->total())}}
+        </strong>
+    </td>
+    <td class="right aligned">
+        <strong>
+            {{$format->pesos($formaPago->total('pesos'))}}
+        </strong>
+    </td>
+    <td class="right aligned" >
+        @if ($venta->saldo() / $venta->valor > 0.01)
+        <strong>
+            &Delta;
+            {{$format->ufs($venta->saldo())}}
+            ({{$format->number($venta->saldo() / $venta->valor * 100, 2)}} %)
+        </strong>
+        @endif
+    </td>
+    <td></td>
+</tr>

app/resources/views/ventas/show/propiedad.blade.php

@@ -0,0 +1,56 @@
+<div class="ui inverted grey two column grid segment">
+    <div class="column">
+        PROPIEDAD
+    </div>
+    <div class="right aligned column">
+        <a style="color: inherit;" href="{{$urls->base}}/venta/{{$venta->id}}/propiedad">
+            <i class="edit icon"></i>
+        </a>
+    </div>
+</div>
+<div class="ui segment">
+    <table class="ui very basic fluid table">
+        <thead>
+        <tr>
+            <th colspan="2">Unidad</th>
+            <th class="center aligned">Piso</th>
+            <th class="right aligned">Metros vendibles</th>
+            <th class="right aligned">Precio</th>
+            <th class="right aligned">UF/m²</th>
+            <th class="center aligned">Orientacion</th>
+        </tr>
+        </thead>
+        <tbody>
+        @foreach($venta->propiedad()->unidades as $unidad)
+            <tr>
+                <td>
+                    {{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}}
+                    @if ($unidad->proyectoTipoUnidad->tipoUnidad->descripcion === 'departamento')
+                        {{$unidad->proyectoTipoUnidad->abreviacion}}
+                    @endif
+                </td>
+                <td class="right aligned">
+                    {{$unidad->descripcion}}
+                </td>
+                <td class="center aligned">
+                    {{$unidad->piso}}
+                </td>
+                <td class="right aligned">
+                    {{$format->number($unidad->proyectoTipoUnidad->vendible(), 2)}} m²
+                </td>
+                <td class="right aligned">
+                    {{$format->ufs($unidad->precio($venta->fecha)->valor)}}
+                </td>
+                <td class="right aligned">
+                    @if ($unidad->proyectoTipoUnidad->tipoUnidad->descripcion === 'departamento')
+                        {{$format->number($unidad->precio($venta->fecha)->valor / $unidad->proyectoTipoUnidad->vendible(), 2)}} UF/m²
+                    @endif
+                </td>
+                <td class="center aligned">
+                    {{$unidad->orientacion}}
+                </td>
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+</div>

app/resources/views/ventas/show/propietario.blade.php

@@ -0,0 +1,15 @@
+<div class="ui fluid card">
+    <div class="content">
+        <a class="right floated icon link" href="{{$urls->base}}/venta/{{$venta->id}}/propietario">
+            <i class="edit icon"></i>
+        </a>
+        <a class="header" href="{{$urls->base}}/search/{{urlencode($venta->propietario()->nombreCompleto())}}">
+            {{$venta->propietario()->nombreCompleto()}}
+            <i class="tiny search icon"></i>
+        </a>
+        {{$venta->propietario()->rut()}}
+        <div class="meta">
+            {{$venta->propietario()->datos->direccion}}
+        </div>
+    </div>
+</div>