@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Proyectos</h2>
        <table class="ui table">
            <thead>
            <tr>
                <th>Proyecto</th>
                <th>Inmobiliaria</th>
                <th>Etapa</th>
                <th>Estado</th>
                <th>Tiempo Total</th>
                <th>Tiempo RF</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($proyectos as $proyecto)
                <tr class="proyecto" data-id="{{$proyecto->id}}">
                    <td>
                        <a href="{{$urls->base}}/proyecto/{{$proyecto->id}}">
                            {{$proyecto->descripcion}}
                        </a>
                    </td>
                    <td>{{$proyecto->inmobiliaria()->nombreCompleto()}}</td>
                    <td class="etapa"></td>
                    <td class="estado"></td>
                    <td class="tiempo"></td>
                    <td class="recepcion"></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        class Proyecto {
            id
            estados

            constructor(id) {
                this.id = id
                this.estados = {
                    start: null,
                    current: null,
                    recepcion: null
                }
            }
            get() {
                return {
                    start: () => {
                        return fetchAPI('{{$urls->api}}/proyecto/' + this.id + '/inicio').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.estados.start = data.estado
                        })
                    },
                    current: () => {
                        return fetchAPI('{{$urls->api}}/proyecto/' + this.id + '/estado').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.estados.current = data.estado
                        })
                    },
                    recepcion: () => {
                        return fetchAPI('{{$urls->api}}/proyecto/' + this.id + '/recepcion').then(response => {
                            if (response.ok) {
                                if (response.status === 204) {
                                    return null
                                }
                                return response.json()
                            }
                        }).then(data => {
                            if (data === null) {
                                return
                            }
                            this.estados.recepcion = data.estado
                        })
                    }
                }
            }
            show() {
                const row = $(".proyecto[data-id='" + this.id + "']")
                const today = new Date()
                return {
                    etapa: () => {
                        row.find('.etapa').html(this.estados.current.tipo_estado_proyecto.etapa.descripcion)
                    },
                    current: () => {
                        let estado = this.estados.current.tipo_estado_proyecto.descripcion

                        if (this.estados.current.tipo_estado_proyecto.etapa.descripcion === 'Terminado') {
                            row.find('.estado').html(estado)
                            return
                        }

                        let diff = (today - new Date(this.estados.current.fecha.date)) / (1000 * 60 * 60 * 24)
                        if (isNaN(diff) || diff === 0) {
                            row.find('.estado').html(estado)
                            return
                        }
                        let frame = 'días'
                        if (diff >= 30) {
                            diff /= 30
                            frame = 'meses'
                            if (diff >= 12) {
                                diff /= 12
                                frame = 'años'
                            }
                        }
                        if (diff > 0) {
                            estado += ' (hace ' + Math.floor(diff) + ' ' + frame + ')'
                        }

                        row.find('.estado').html(estado)
                    },
                    tiempo: () => {
                        if (this.estados.current.tipo_estado_proyecto.etapa.descripcion === 'Terminado') {
                            return
                        }
                        let diff = (today - new Date(this.estados.start.fecha.date)) / (1000 * 60 * 60 * 24)
                        if (isNaN(diff) || diff === 0) {
                            return
                        }

                        let frame = 'días'
                        if (diff >= 30) {
                            diff /= 30
                            frame = 'meses'
                            if (diff >= 12) {
                                diff /= 12
                                frame = 'años'
                            }
                        }

                        row.find('.tiempo').html(Math.floor(diff) + ' ' + frame)
                    },
                    recepcion: () => {
                        if (this.estados.recepcion === null) {
                            return
                        }
                        let diff = (today - new Date(this.estados.recepcion.fecha.date)) / (1000 * 60 * 60 * 24)
                        if (isNaN(diff) || diff === 0) {
                            return
                        }

                        let frame = 'dias'
                        if (diff >= 30) {
                            diff /= 30
                            frame = 'meses'
                            if (diff >= 12) {
                                diff /= 12
                                frame = 'años'
                            }
                        }

                        row.find('.recepcion').html(Math.floor(diff) + ' ' + frame)
                    }
                }
            }
        }

        function loadEstados(proyecto_id) {
            const proyecto = new Proyecto(proyecto_id)
            const promises = []
            promises.push(proyecto.get().start())
            promises.push(proyecto.get().current())
            promises.push(proyecto.get().recepcion())
            Promise.all(promises).then(() => {
                proyecto.show().etapa()
                proyecto.show().current()
                proyecto.show().tiempo()
                proyecto.show().recepcion()
            })
        }
        $(document).ready(() => {
            @foreach ($proyectos as $proyecto)
                loadEstados('{{$proyecto->id}}')
            @endforeach
        })
    </script>
@endpush