@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">
                    <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 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))
                    }
                } else {
                    unidad += '<i class="ban icon"></i>'
                }

                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(Math.round(this.unidad.proyecto_tipo_unidad.superficie * 100) / 100 + ' m&#0178;')
                ).append(
                    $('<td></td>').addClass('right aligned').html(this.unidad.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 fetch(uri, {method: 'post', body: data}).then(response => {
                            this.draw().clear()
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (typeof data.results !== 'undefined' && data.results.length > 0) {
                                data.results.forEach(row => {
                                    if (typeof row.proyecto_tipo_unidad === 'undefined') {
                                        const r = new Row({unidad: row.propiedad.departamentos[0], proyecto: row.proyecto})
                                        r.venta = row
                                        this.data.push(r)
                                    } else {
                                        this.data.push(new Row({unidad: row, proyecto: row.proyecto_tipo_unidad.proyecto}))
                                    }
                                })
                                this.draw().table()
                                return
                            }
                            this.draw().empty()
                        })
                    }
                }
            },
            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, {
                            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.')
                            )
                        )
                    }
                }
            },
            setup: function(id) {
                this.id = id
                this.get().results()

                $('#search_form').submit(event => {
                    event.preventDefault()
                    this.get().results()
                    return false
                })
            }
        }
        $(document).ready(() => {
            $('#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
            results.setup('#results')
        })
    </script>
@endpush
