@extends('layout.base')

@section('page_title')
    Cierres -Reservas
@endsection

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Cierres - Reservas</h2>

        <div class="ui compact segment" id="projects">
            <div class="ui header">Proyectos</div>
        @if (count($projects) == 0)
            <div class="ui message">
                No hay proyectos en venta.
            </div>
        @else
            <div class="ui link list">
            @foreach ($projects as $project)
                <div class="item link" data-id="{{ $project->id }}">
                    {{ $project->descripcion }}
                </div>
            @endforeach
            </div>
        @endif
        </div>
        <h4 class="ui header" id="project"></h4>
        <div class="ui right aligned top attached basic segment" id="controls">
            <div class="ui tiny icon buttons">
                <button class="ui button" id="up_button">
                    <i class="up arrow icon"></i>
                </button>
                <button class="ui button" id="refresh_button">
                    <i class="refresh icon"></i>
                </button>
            </div>
        </div>
        <table class="ui striped table" id="reservations">
            <thead>
                <tr>
                    <th>Unidades</th>
                    <th>Cliente</th>
                    <th>Fecha</th>
                    <th>Oferta</th>
                    <th>¿Valida?</th>
                    <th>Operador</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>
            <tbody></tbody>
        </table>
    </div>
@endsection

@push('page_styles')
    <style>
        .item.link {
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
@endpush

@push('page_scripts')
    <script>
        class Projects {
            display = {
                projects: '',
                project: ''
            }
            component_id = ''
            component = null
            current_project = null;
            title_id = ''
            title_component = null

            constructor({component_id, title_id}) {
                this.component_id = component_id
                this.component = document.getElementById(this.component_id)
                this.display.projects = this.component.style.display
                this.title_id = title_id
                this.title_component = document.getElementById(this.title_id)
                this.display.project = this.title_component.style.display

                this.show()
                this.watch()
            }

            select(event) {
                event.preventDefault()

                const project_id = event.currentTarget.dataset.id
                if (project_id === this.curent_project) {
                    this.hide()
                    this.title_component.innerHTML = event.currentTarget.innerHTML

                    reservations.action().reservations()

                    return
                }
                this.curent_project = project_id
                reservations.get().reservations(project_id)

                this.hide()
                this.title_component.innerHTML = event.currentTarget.innerHTML
            }
            watch() {
                this.component.querySelectorAll('.item.link').forEach(item => {
                    item.addEventListener('click', this.select.bind(this))
                })
            }
            show() {
                this.component.style.display = this.display.projects
                this.title_component.style.display = 'none'
            }
            hide() {
                this.component.style.display = 'none'
                this.title_component.style.display = this.display.project
            }
        }
        class Reservations {
            display = {
                reservations: '',
                controls: ''
            }
            component_id = ''
            component = null
            controls_id = ''
            controls = null
            formatters = {
                date: null,
                ufs: null
            }

            reservations = []

            constructor({component_id, controls_id, formatters = {date, ufs}}) {
                this.component_id = component_id
                this.component = document.getElementById(this.component_id)
                this.display.reservations = this.component.style.display
                this.controls_id = controls_id
                this.controls = document.getElementById(this.controls_id)
                this.display.controls = this.controls.style.display
                this.formatters = formatters

                this.watch()
                this.hide()
            }

            watch() {
                const buttons = this.controls.querySelectorAll('button')
                const up_button = buttons[0]
                const reset_button = buttons[1]
                up_button.addEventListener('click', reservations.action().up.bind(reservations))
                reset_button.addEventListener('click', reservations.action().reset.bind(reservations))
            }

            set() {
                return {
                    reservations: reservations => {
                        this.reservations = reservations
                        return this
                    }
                }
            }
            draw() {
                const tbody = this.component.querySelector('tbody')
                tbody.innerHTML = ''
                this.reservations.forEach(reservation => {
                    const tr = document.createElement('tr')
                    const date = new Date(Date.parse(reservation.fecha) + 24 * 60 * 60 * 1000)
                    tr.innerHTML = `
                        <td>${reservation.summary}</td>
                        <td>${reservation.buyer.nombreCompleto}</td>
                        <td>${this.formatters.date.format(date)}</td>
                        <td>${this.formatters.ufs.format(reservation.offer)} UF</td>
                        <td>${reservation.valid ? 'Si' : 'No'}</td>
                        <td>${reservation.broker?.name ?? ''}</td>
                        <td class="right aligned">
                            <button class="ui small icon button" data-id="${reservation.id}">
                                <i class="edit icon"></i>
                            </button>
                            <button class="ui small icon button" data-id="${reservation.id}">
                                <i class="trash icon"></i>
                            </button>
                        </td>
                    `
                    tbody.appendChild(tr)
                })
                this.show()
            }

            show() {
                this.component.style.display = this.display.reservations
                this.controls.style.display = this.display.controls
            }
            hide() {
                this.component.style.display = 'none'
                this.controls.style.display = 'none'
            }
        }
        const reservations = {
            components: {
                projects: null,
                reservations: null
            },
            get() {
                return {
                    reservations: project_id => {
                        const reservations = [
                            {
                                id: 1,
                                summary: 'D1',
                                buyer: {
                                    rut: '12345678-9',
                                    nombreCompleto: 'Juan Perez'
                                },
                                fecha: '2021-01-01',
                                offer: 1000,
                                valid: false,
                                broker: {
                                    name: 'Operador 1'
                                }
                            },
                            {
                                id: 2,
                                summary: 'D2',
                                buyer: {
                                    rut: '12345678-9',
                                    nombreCompleto: 'Pedro Gonzalez'
                                },
                                fecha: '2021-10-01',
                                offer: 1200,
                                valid: true,
                                broker: null
                            }
                        ]
                        this.components.reservations.set().reservations(reservations).draw()
                    }
                }
            },
            action() {
                return {
                    reset: event => {
                        event.preventDefault()
                        this.components.projects.current_project = null
                        this.components.reservations.reservations = []
                        this.components.reservations.hide()
                        this.components.projects.show()
                        return false
                    },
                    up: event => {
                        event.preventDefault()
                        this.components.reservations.hide()
                        this.components.projects.show()
                        return false
                    },
                    reservations: () => {
                        this.components.reservations.draw()
                    }
                }
            },
            setup(configuration) {
                const formatters = {
                    date: new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: 'long', day: 'numeric'}),
                    ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                }
                this.components.projects = new Projects({component_id: configuration.ids.projects, title_id: configuration.ids.project})
                this.components.reservations = new Reservations({component_id: configuration.ids.reservations, controls_id: configuration.ids.controls, formatters})
            }
        }
        $(document).ready(() => {
            reservations.setup({
                ids: {
                    projects: 'projects',
                    project: 'project',
                    controls: 'controls',
                    reservations: 'reservations'
                }
            })
        })
    </script>
@endpush