From 909bb2b8798afa1fe414fc56c8159d4648ec578f Mon Sep 17 00:00:00 2001
From: Juan Pablo Vial <jpvialb@incoviba.cl>
Date: Tue, 22 Jul 2025 18:21:05 -0400
Subject: [PATCH] Mostrar reservas

---
 app/resources/routes/ventas/cierres.php       |   3 +-
 .../views/ventas/reservations.blade.php       | 287 ++++++++++++++++++
 app/src/Controller/Ventas/Reservations.php    |  22 ++
 3 files changed, 311 insertions(+), 1 deletion(-)
 create mode 100644 app/resources/views/ventas/reservations.blade.php
 create mode 100644 app/src/Controller/Ventas/Reservations.php

diff --git a/app/resources/routes/ventas/cierres.php b/app/resources/routes/ventas/cierres.php
index 62e3084..bf57def 100644
--- a/app/resources/routes/ventas/cierres.php
+++ b/app/resources/routes/ventas/cierres.php
@@ -1,5 +1,6 @@
 <?php
-use Incoviba\Controller\Ventas\Cierres;
+//use Incoviba\Controller\Ventas\Cierres;
+use Incoviba\Controller\Ventas\Reservations as Cierres;
 
 $app->group('/cierres', function($app) {
     $app->get('[/]', Cierres::class);
diff --git a/app/resources/views/ventas/reservations.blade.php b/app/resources/views/ventas/reservations.blade.php
new file mode 100644
index 0000000..12801f9
--- /dev/null
+++ b/app/resources/views/ventas/reservations.blade.php
@@ -0,0 +1,287 @@
+@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
diff --git a/app/src/Controller/Ventas/Reservations.php b/app/src/Controller/Ventas/Reservations.php
new file mode 100644
index 0000000..d8bd8df
--- /dev/null
+++ b/app/src/Controller/Ventas/Reservations.php
@@ -0,0 +1,22 @@
+<?php
+namespace Incoviba\Controller\Ventas;
+
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use Incoviba\Common\Alias\View;
+use Incoviba\Common\Implement\Exception\EmptyResult;
+use Incoviba\Repository;
+use Incoviba\Service;
+
+class Reservations
+{
+    public function __invoke(ServerRequestInterface $request, ResponseInterface $response,
+                             Service\Proyecto $proyectoService, View $view): ResponseInterface
+    {
+        $projects = [];
+        try {
+            $projects = $proyectoService->getVendibles('descripcion');
+        } catch (EmptyResult) {}
+        return $view->render($response, 'ventas.reservations', compact('projects'));
+    }
+}