@extends('proyectos.brokers.base')

@section('brokers_content')
    @include('proyectos.brokers.proyectos')
    <div id="brokers"></div>
@endsection

@push('page_scripts')
    <script>
        const brokers = {
            data: {
                contracts: {},
                project_id: null
            },
            formatters: {
                date: new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'}),
                percent: new Intl.NumberFormat('es-CL', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2})
            },
            draw() {
                return {
                    brokers: project_id => {
                        $('#projects').hide()
                        const div = document.getElementById('brokers')
                        const table = document.createElement('table')
                        table.classList.add('ui', 'table')
                        table.innerHTML = [
                            "<thead>",
                            "<tr>",
                            "<th>Operador</th>",
                            "<th>Comisión</th>",
                            "<th>Fecha Inicio</th>",
                            "<th class='right aligned'><button class='ui small tertiary green icon button' id='add_button'><i class='plus icon'></i></button></th>",
                            "</tr>",
                            "</thead>"].join('')
                        const tbody = document.createElement('tbody')
                        brokers.data.contracts[project_id].forEach(contract => {
                            const dateParts = contract.current.date.split('-')
                            const date = new Date([dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]].join('-'))
                            date.setMonth(date.getMonth() + 1)
                            tbody.insertAdjacentHTML('beforeend', [
                                "<tr>",
                                `<td>${contract.broker.name}</td>`,
                                `<td>${brokers.formatters.percent.format(contract.commission)}</td>`,
                                `<td>${brokers.formatters.date.format(date)}</td>`,
                                `<td class="right aligned"><button class="ui small tertiary red icon button remove_button" data-id="${contract.id}"><i class="remove icon"></i></button></td>`,
                                "</tr>"].join(''))
                        })
                        table.append(tbody)
                        div.innerHTML = ''
                        div.append(table)
                        $('#brokers').show()

                    }
                }
            },
            get() {
                return {
                    contracts: project_id => {
                        brokers.actions().startSpinner()
                        brokers.data.project_id = project_id
                        const url = `{{$urls->api}}/proyecto/${project_id}/brokers`
                        APIClient.fetch(url).then(response => {
                            if (!response.ok) {
                                return
                            }
                            return response.json().then(json => {
                                brokers.data.contracts[json.proyecto_id] = json.contracts
                                const promises = []
                                json.contracts.forEach(contract => {
                                    promises.push(brokers.get().broker(contract.broker_rut).then(broker => {
                                        brokers.data.contracts[json.proyecto_id].find(contract => contract.broker_rut === broker.rut).broker = broker
                                    }))
                                })
                                Promise.all(promises).then(() => {
                                    brokers.draw().brokers(json.proyecto_id)
                                })
                            })
                        }).finally(() => {
                            brokers.actions().stopSpinner()
                        })
                    },
                    broker: broker_rut => {
                        const url = `{{$urls->api}}/proyectos/broker/${broker_rut}`
                        return APIClient.fetch(url).then(response => {
                            if (!response.ok) {
                                return
                            }
                            return response.json().then(json => {
                                return json.broker
                            })
                        })
                    }
                }
            },
            actions() {
                return {
                    startSpinner: () => {
                        $('#refresh_button').addClass('loading')
                    },
                    stopSpinner: () => {
                        $('#refresh_button').removeClass('loading')
                    },
                    refresh: () => {
                        brokers.get().contracts(brokers.data.project_id)
                    },
                    up: () => {
                        $('#brokers').hide()
                        $('#projects').show()
                        brokers.data.project_id = null
                        document.getElementById('brokers').innerHTML = ''
                    }
                }
            }
        }
        $(document).ready(() => {
            $('#brokers').hide()
        })
    </script>
@endpush