@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1>Búsqueda</h1>

        <form id="search_form" class="ui form" action="{{$urls->base}}/search" method="post">
            <div class="field">
                <div class="ui fluid input" data-tooltip="Para buscar frases se deben encerrar entre comillas. ej, 'portal la viña' o &quot;portal la viña&quot;" data-position="bottom left">
                    <input type="text" name="query" />
                </div>
            </div>
            <div class="ui search selection dropdown" id="tipo">
                <input type="hidden" name="tipo" />
                <i class="dropdown icon"></i>
                <div class="default text">Tipo</div>
                <div class="menu">
                    <div class="item" data-value="*" data-selected="true">Cualquiera</div>
                    @foreach (['departamento', 'estacionamiento', 'bodega', 'propietario', 'precio_venta', 'proyecto', 'pago', 'unidad'] as $value)
                    <div class="item" data-value="{{$value}}">{{ucwords(str_replace('_', ' ', $value))}}</div>
                    @endforeach
                </div>
            </div>
            <button class="ui button" type="submit">Buscar</button>
        </form>
        <div id="results"></div>
    </div>
@endsection

@include('layout.head.styles.datatables')
@include('layout.body.scripts.datatables')

@push('page_scripts')
    <script type="text/javascript">
        class Row
        {
            proyecto
            unidad
            venta

            constructor({proyecto, unidad}) {
                this.proyecto = proyecto
                this.unidad = unidad
            }
            draw() {
                const tipo = this.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                let unidad = tipo.charAt(0).toUpperCase() + tipo.slice(1) + ' ' + this.unidad.descripcion
                let precio = 0
                let propietario = ''
                let fecha = ''
                let fecha_entrega = ''
                if (typeof this.venta !== 'undefined') {
                    const dateFormatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
                    unidad = $('<a></a>').attr('href', '{{$urls->base}}/venta/' + this.venta.id).html(unidad)
                    if (!this.venta.current_estado.tipo_estado_venta.activa) {
                        unidad.html(unidad.html() + ' (I)')
                    }
                    propietario = $('<a></a>')
                        .attr('href','{{$urls->base}}/search/' + encodeURIComponent(this.venta.propietario.nombre_completo) + '/propietario')
                        .html(this.venta.propietario.nombre_completo)
                    fecha = dateFormatter.format(new Date(this.venta.fecha))
                    if (typeof this.venta.entrega !== 'undefined') {
                        fecha_entrega = dateFormatter.format(new Date(this.venta.entrega.fecha))
                    }
                    precio = this.venta.valor
                } else {
                    unidad += '<i class="ban icon"></i>'
                    precio = this.unidad.current_precio.valor
                }

                const numberFormat = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                const superficie = numberFormat.format(Math.round(this.unidad.proyecto_tipo_unidad.superficie * 100) / 100)

                return $('<tr></tr>').append(
                    $('<td></td>').append(
                        $('<a></a>').attr('href', '{{$urls->base}}/proyecto/' + this.proyecto.id).html(this.proyecto.descripcion)
                    )
                ).append(
                    $('<td></td>').append(unidad)
                ).append(
                    $('<td></td>').append(this.unidad.descripcion.padStart(4, '0'))
                ).append(
                    $('<td></td>').append(propietario)
                ).append(
                    $('<td></td>').addClass('right aligned').html(superficie + ' m&#0178;')
                ).append(
                    $('<td></td>').addClass('right aligned').html(numberFormat.format(precio))
                ).append(
                    $('<td></td>').html(fecha)
                ).append(
                    $('<td></td>').html(fecha_entrega)
                )
            }
        }
        const results = {
            id: '',
            data: [],
            table: null,
            get: function() {
                return {
                    results: () => {
                        if ($("[name='query']").val().length < 1) {
                            return
                        }
                        this.draw().loading()
                        const data = new FormData(document.getElementById('search_form'))
                        const uri = '{{$urls->api}}/search'
                        this.data = []
                        return fetchAPI(uri, {method: 'post', body: data}).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json()
                        }).catch(error => {
                            this.draw().clear()
                            this.draw().error(error)
                        }).then(data => {
                            this.draw().clear()
                            if (typeof data.results === 'undefined' || data.results.length === 0) {
                                this.draw().empty()
                                return
                            }
                            const progress = this.draw().progress(data.results.length)
                            const promises = []
                            data.results.forEach(row => {
                                if (row.tipo === 'venta') {
                                    return promises.push(this.get().venta(row.id).then(json => {
                                        if (json.venta === null) {
                                            console.debug(json)
                                            return
                                        }
                                        const venta = json.venta
                                        progress.progress('increment')
                                        const r = new Row({unidad: venta.propiedad.unidades[0], proyecto: venta.proyecto})
                                        r.venta = venta
                                        this.data.push(r)
                                    }).catch(error => {
                                        progress.progress('increment')
                                        console.error(row)
                                        console.error(error)
                                    }))
                                }
                                promises.push(this.get().unidad(row.id).then(json => {
                                    const unidad = json.unidad
                                    progress.progress('increment')
                                    this.data.push(new Row({unidad: unidad, proyecto: unidad.proyecto_tipo_unidad.proyecto}))
                                }).catch(error => {
                                    progress.progress('increment')
                                    console.error(row)
                                    console.error(error)
                                }))
                            })
                            Promise.all(promises).then(() => {
                                this.sort()
                                this.draw().clear()
                                this.draw().table()
                            })
                        })
                    },
                    unidad: id => {
                        const url = '{{$urls->api}}/ventas/unidad/' + id
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        })
                    },
                    venta: id => {
                        const url = '{{$urls->api}}/venta/' + id
                        return fetchAPI(url).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json()
                        })
                    }
                }
            },
            sort: function() {
                this.data.sort((a, b) => {
                    const p = a.proyecto.descripcion.localeCompare(b.proyecto.descripcion)
                    if (p === 0) {
                        const t = a.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                            .localeCompare(b.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion)
                        if (t === 0) {
                            return a.unidad.descripcion.localeCompare(b.unidad.descripcion)
                        }
                        return t
                    }
                    return p
                })
            },
            draw: function() {
                return {
                    clear: () => {
                        $(this.id).html('')
                    },
                    separator: () => {
                        this.draw().clear()
                        $(this.id).append(
                            $('<div></div>').addClass('ui horizontal divider').html('Resultados')
                        )
                    },
                    loading: () => {
                        this.draw().separator()
                        $(this.id).append(
                            $('<div></div>').addClass('ui active centered inline loader')
                        )
                    },
                    table: () => {
                        const parent = $(this.id)
                        this.draw().separator()

                        if (this.table !== null) {
                            this.table.clear()
                                .draw()
                                .destroy()
                            this.table = null
                        }

                        const table = $('<table></table>').addClass('ui table')
                        const thead = this.draw().head()
                        const tbody = $('<tbody></tbody>')

                        this.data.forEach(row => {
                            tbody.append(row.draw())
                        })
                        table.append(thead).append(tbody)
                        parent.append(table)

                        this.table = new DataTable(table, {
                            pageLength: 25,
                            order: [
                                [0, 'asc'],
                                [2, 'asc']
                            ],
                            columnDefs: [
                                {
                                    target: 2,
                                    visible: false,
                                    searchable: false
                                },
                                {
                                    target: 1,
                                    orderData: [2]
                                }
                            ]
                        })
                    },
                    head: () => {
                        return $('<thead></thead>').append(
                            $('<tr></tr>').append(
                                $('<th></th>').html('Proyecto')
                            ).append(
                                $('<th></th>').html('Unidad')
                            ).append(
                                $('<th></th>').html('Unidad [Sort]')
                            ).append(
                                $('<th></th>').html('Propietario')
                            ).append(
                                $('<th></th>').html('Superficie')
                            ).append(
                                $('<th></th>').html('Valor')
                            ).append(
                                $('<th></th>').html('Fecha Venta')
                            ).append(
                                $('<th></th>').html('Fecha Entrega')
                            )
                        )
                    },
                    empty: () => {
                        this.draw().separator()
                        $(this.id).append(
                            $('<div></div>').addClass('ui icon info message').append(
                                $('<i></i>').addClass('meh outline icon')
                            ).append(
                                $('<div></div>').addClass('content').html('No se han encontrado resultados.')
                            )
                        )
                    },
                    error: error => {
                        this.draw().separator()
                        $(this.id).append(
                            $('<div></div>').addClass('ui icon error message').append(
                                $('<i></i>').addClass('exclamation triangle icon')
                            ).append(
                                $('<div></div>').addClass('content').html(error)
                            )
                        )
                    },
                    progress: cantidad => {
                        this.draw().separator()
                        const progress = $('<div></div>').addClass('ui active progress').append(
                            $('<div></div>').addClass('bar').append(
                                $('<div></div>').addClass('centered progress')
                            )
                        ).append(
                            $('<div></div>').addClass('label').html('Cargando datos')
                        )
                        progress.progress({
                            total: cantidad,
                            label: 'ratio',
                            text: {
                                ratio: '{value} de {total} ({percent}%)'
                            }
                        })
                        $(this.id).append(progress)
                        return progress
                    }
                }
            },
            setup: function(id) {
                this.id = id
                this.get().results()

                $('#tipo').dropdown().dropdown('set selected', '*')
                @if (trim($post) !== '')
                $("[name='query']").val('{{$post}}')
                @elseif (trim($query) !== '')
                $("[name='query']").val('{{$query}}')
                @endif
                @if (trim($tipo) !== '')
                $('#tipo').dropdown('set selected', '{{$tipo}}')
                @endif

                $('#search_form').submit(event => {
                    event.preventDefault()
                    this.get().results()
                    return false
                })
                $("[name='query']").focus()
            }
        }
        $(document).ready(() => {
            results.setup('#results')
        })
    </script>
@endpush