From 3ff5f3f1a616a2e79eb49ababc62e27e68ddf11c Mon Sep 17 00:00:00 2001
From: Juan Pablo Vial <jpvialb@incoviba.cl>
Date: Thu, 28 Nov 2024 14:07:07 -0300
Subject: [PATCH] Vistas

---
 .../ventas/escrituras/abono/cuotas.blade.php  |  83 +++++++++++
 .../abono/cuotas/add_modal.blade.php          |  94 ++++++++++++
 .../abono/cuotas/edit_modal.blade.php         | 138 ++++++++++++++++++
 .../views/ventas/escrituras/add.blade.php     |   1 +
 4 files changed, 316 insertions(+)
 create mode 100644 app/resources/views/ventas/escrituras/abono/cuotas.blade.php
 create mode 100644 app/resources/views/ventas/escrituras/abono/cuotas/add_modal.blade.php
 create mode 100644 app/resources/views/ventas/escrituras/abono/cuotas/edit_modal.blade.php

diff --git a/app/resources/views/ventas/escrituras/abono/cuotas.blade.php b/app/resources/views/ventas/escrituras/abono/cuotas.blade.php
new file mode 100644
index 0000000..af664d6
--- /dev/null
+++ b/app/resources/views/ventas/escrituras/abono/cuotas.blade.php
@@ -0,0 +1,83 @@
+@extends('ventas.base')
+
+@section('venta_subtitle')
+    Cuotas - Abono a Escritura
+@endsection
+
+@section('venta_content')
+    <table class="ui table">
+        <thead>
+        <tr>
+            <th rowspan="2">#</th>
+            <th rowspan="2">Fecha</th>
+            <th>Valor $</th>
+            <th>UF</th>
+            <th rowspan="2">Estado</th>
+            <th class="right aligned">
+                <button class="ui green icon button" id="add_button">
+                    <i class="plus icon"></i>
+                </button>
+            </th>
+        </tr>
+        </thead>
+        <tbody id="cuotas">
+        @foreach ($cuotas as $cuota)
+            <tr data-id="{{$cuota->id}}">
+                <td class="numero" rowspan="2" data-value="{{$cuota->numero}}">{{$cuota->numero}}</td>
+                <td class="fecha" rowspan="2" data-value="{{$cuota->pago->fecha->format('Y-m-d')}}">{{$cuota->pago->fecha->format('d-m-Y')}}</td>
+                <td class="valor" data-value="{{$cuota->pago->valor}}">{{$format->pesos($cuota->pago->valor)}}</td>
+                <td class="valor_uf" data-value="{{$cuota->pago->valor()}}">{{$format->ufs($cuota->pago->valor())}}</td>
+                <td class="estado" rowspan="2" data-value="{{$cuota->pago->currentEstado->tipoEstadoPago->id}}">{{ucwords($cuota->pago->currentEstado->tipoEstadoPago->descripcion)}}</td>
+                <td class="right aligned">
+                    <button class="ui icon button edit_button" data-id="{{$cuota->id}}">
+                        <i class="edit icon"></i>
+                    </button>
+                    <button class="ui red icon button remove_button" data-id="{{$cuota->id}}">
+                        <i class="remove icon"></i>
+                    </button>
+                </td>
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+
+    @include('ventas.escrituras.abono.cuotas.add_modal')
+    @include('ventas.escrituras.abono.cuotas.edit_modal')
+@endsection
+
+@push('page_scripts')
+    <script>
+        $(document).ready(function () {
+            const addModal = new AddModal({
+                modal: '#add_cuota_modal',
+                form: '#add_cuota_form',
+                fecha: '#add_fecha',
+            })
+            const editModal = new EditModal({
+                table: 'cuotas',
+                modal: '#edit_cuota_modal',
+                form: '#edit_cuota_form',
+                fecha: '#edit_fecha',
+                estado: '#edit_estado'
+            })
+
+            document.getElementById('add_button').addEventListener('click', clickEvent => {
+                addModal.draw()
+            })
+            Array.from(document.getElementsByClassName('edit_button')).forEach(button => {
+                button.addEventListener('click', clickEvent => {
+                    const id = $(clickEvent.currentTarget).data('id')
+                    editModal.getData({cuota_id: id})
+                })
+            })
+            Array.from(document.getElementsByClassName('remove_button')).forEach(button => {
+                button.addEventListener('click', clickEvent => {
+                    const id = $(clickEvent.currentTarget).data('id')
+                    const url = `{{$urls->api}}/venta/{{$venta->id}}/cuota/${id}`
+                    const method = 'delete'
+                    console.debug(url)
+                })
+            })
+        })
+    </script>
+@endpush
diff --git a/app/resources/views/ventas/escrituras/abono/cuotas/add_modal.blade.php b/app/resources/views/ventas/escrituras/abono/cuotas/add_modal.blade.php
new file mode 100644
index 0000000..ea5541f
--- /dev/null
+++ b/app/resources/views/ventas/escrituras/abono/cuotas/add_modal.blade.php
@@ -0,0 +1,94 @@
+<div class="ui modal" id="add_cuota_modal">
+    <div class="header">
+        Agregar Cuota
+    </div>
+    <div class="content">
+        <form class="ui form" id="add_cuota_form">
+            <input type="hidden" name="id" />
+            <div class="two wide field">
+                <label>Número</label>
+                <input type="text" name="numero" />
+            </div>
+            <div class="three wide field">
+                <label>Fecha</label>
+                <div class="ui calendar" id="add_fecha">
+                    <div class="ui icon input">
+                        <i class="calendar icon"></i>
+                        <input type="text" name="fecha" />
+                    </div>
+                </div>
+            </div>
+            <div class="three wide field">
+                <label>Valor $</label>
+                <div class="ui left labeled input">
+                    <div class="ui basic label">$</div>
+                    <input type="text" name="valor" />
+                </div>
+            </div>
+            <div class="three wide field">
+                <label>Valor UF</label>
+                <div class="ui left labeled input">
+                    <div class="ui basic label">UF</div>
+                    <input type="text" name="uf" />
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui negative button">
+            Cancelar
+        </div>
+        <div class="ui positive right labeled icon button">
+            Agregar
+            <i class="add icon"></i>
+        </div>
+    </div>
+</div>
+
+@push('page_scripts')
+    <script>
+        class AddModal {
+            props
+
+            constructor(props) {
+                this.setup(props)
+            }
+            draw() {
+                $(this.props.modal).modal('show')
+            }
+            save() {
+                const form = document.getElementById(this.props.form)
+                const body = new FormData(form)
+                const fecha = $(this.props.fecha).calendar('get date')
+                body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
+                const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuotas/add`
+                const method = 'post'
+                APIClient.fetch(url, {method, body}).then(response => {
+                    if (!response) {
+                        return
+                    }
+                    return response.json().then(json => {
+                        if (json.success) {
+                            window.location.reload()
+                        }
+                    })
+                })
+            }
+            setup(ids) {
+                this.props = ids
+
+                $(this.props.modal).modal({
+                    onApprove: () => {
+                        this.save()
+                    }
+                })
+                $(this.props.form).submit(event => {
+                    event.preventDefault()
+                    this.save()
+                    return false
+                })
+                $(this.props.fecha).calendar(calendar_date_options)
+            }
+        }
+    </script>
+@endpush
diff --git a/app/resources/views/ventas/escrituras/abono/cuotas/edit_modal.blade.php b/app/resources/views/ventas/escrituras/abono/cuotas/edit_modal.blade.php
new file mode 100644
index 0000000..b25df7c
--- /dev/null
+++ b/app/resources/views/ventas/escrituras/abono/cuotas/edit_modal.blade.php
@@ -0,0 +1,138 @@
+<div class="ui modal" id="edit_cuota_modal">
+    <div class="header">
+        Editar Cuota <span class="numero"></span>
+    </div>
+    <div class="content">
+        <form class="ui form" id="edit_cuota_form">
+            <input type="hidden" name="id" />
+            <div class="two wide field">
+                <label>Número</label>
+                <input type="text" name="numero" />
+            </div>
+            <div class="three wide field">
+                <label>Fecha</label>
+                <div class="ui calendar" id="edit_fecha">
+                    <div class="ui icon input">
+                        <i class="calendar icon"></i>
+                        <input type="text" name="fecha" />
+                    </div>
+                </div>
+            </div>
+            <div class="three wide field">
+                <label>Valor $</label>
+                <div class="ui left labeled input">
+                    <div class="ui basic label">$</div>
+                    <input type="text" name="valor" />
+                </div>
+            </div>
+            <div class="three wide field">
+                <label>Valor UF</label>
+                <div class="ui left labeled input">
+                    <div class="ui basic label">UF</div>
+                    <input type="text" name="uf" />
+                </div>
+            </div>
+            <div class="three wide field">
+                <label>Estado</label>
+                <div class="ui selection search dropdown" id="edit_estado">
+                    <i class="dropdown icon"></i>
+                    <input type="hidden" name="estado" />
+                    <div class="default text">Estado</div>
+                    <div class="menu">
+                        @foreach($estados as $estado)
+                            <div class="item" data-value="{{$estado->id}}">{{$estado->nombre}}</div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui negative button">
+            Cancelar
+        </div>
+        <div class="ui positive right labeled icon button">
+            Editar
+            <i class="edit icon"></i>
+        </div>
+    </div>
+</div>
+
+@push('page_scripts')
+    <script>
+        class EditModal {
+            props
+            data
+
+            constructor(props) {
+                this.setup(props)
+                this.data = null
+            }
+            getData({cuota_id}) {
+                const table = document.getElementById(this.props.table)
+                const row = table.querySelector(`row[data-id='${cuota_id}']`)
+                this.data = {
+                    id: cuota_id,
+                    numero: row.querySelector('.numero').datasets.value,
+                    fecha: new Date(row.querySelector('.fecha').datasets.value),
+                    valor: row.querySelector('.valor').datasets.value,
+                    uf: row.querySelector('.valor_uf').datasets.value,
+                    estado: row.querySelector('.estado').datasets.value
+                }
+
+                this.draw()
+            }
+            draw() {
+                const form = document.getElementById(this.props.form)
+                form.querySelector('input[name="id"]').value = this.data.id
+                form.querySelector('input[name="numero"]').value = this.data.numero
+                $(this.props.fecha).calendar('set date', this.data.fecha)
+                form.querySelector('input[name="valor"]').value = this.data.valor
+                form.querySelector('input[name="uf"]').value = this.data.uf
+                $(this.props.estado).dropdown('set selected', this.data.estado)
+
+                $(this.props.modal).find('.header .numero').text(this.data.numero)
+
+                $(this.props.modal).modal('show')
+            }
+            save() {
+                const form = document.getElementById(this.props.form)
+                const body = new FormData(form)
+                const fecha = $(this.props.fecha).calendar('get date')
+                body.set('fecha', fecha.getFullYear() + '-' + (fecha.getMonth() + 1).toString().padStart(2, '0') + '-' + fecha.getDate().toString().padStart(2, '0'))
+                body.set('estado', $(this.props.estado).dropdown('get value'))
+                const url = `{{$urls->api}}/venta/{{$venta->id}}/escritura/cuota/${this.data.id}/edit`
+                const method = 'post'
+                APIClient.fetch(url, {method, body}).then(response => {
+                    if (!response) {
+                        return
+                    }
+                    return response.json().then(json => {
+                        if (json.success) {
+                            window.location.reload()
+                        }
+                    })
+                })
+            }
+            setup(ids) {
+                this.props = ids
+
+                $(this.props.modal).modal({
+                    onApprove: () => {
+                        this.save()
+                    },
+                    onHidden: () => {
+                        this.data = null
+                    }
+                })
+                $(this.props.form).submit(event => {
+                    event.preventDefault()
+                    this.save()
+                    return false
+                })
+                $(this.props.fecha).calendar(calendar_date_options)
+                $(this.props.estado).dropdown()
+            }
+        }
+    </script>
+@endpush
diff --git a/app/resources/views/ventas/escrituras/add.blade.php b/app/resources/views/ventas/escrituras/add.blade.php
index 24234a4..82ea3ad 100644
--- a/app/resources/views/ventas/escrituras/add.blade.php
+++ b/app/resources/views/ventas/escrituras/add.blade.php
@@ -14,6 +14,7 @@
             <p>Crédito {{$format->ufs($venta->formaPago()->credito->pago->valor())}}</p>
         @endif
     </div>
+    <a href="{{$urls->base}}/venta/{{$venta->id}}/escritura/cuotas" class="ui small green button"><i class="plus icon"></i> Agregar Cuotas</a>
     <form class="ui form" id="add_form">
         <div class="three wide field">
             <label for="fecha">Fecha</label>