@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Depósitos a Plazo</h1>
    </div>
    <div class="ui stackable grid">
        <div class="two wide column"></div>
        <div class="twelve wide column">
            <table class="ui table" id="depositos">
                <thead>
                <tr>
                    <th>Inmobiliaria</th>
                    <th>Banco</th>
                    <th>N° Depósito</th>
                    <th>Capital</th>
                    <th>Inicio</th>
                    <th>Plazo</th>
                    <th>Vencimiento</th>
                    <th>Vencimiento ISO</th>
                    <th>Monto al Vencimiento</th>
                    <th>Tasa</th>
                    <th>
                        <button class="ui green icon button" id="add_button">
                            <i class="plus icon"></i>
                        </button>
                    </th>
                </tr>
                </thead>
                <tbody>
                @foreach ($activos as $deposito)
                    <tr>
                        <td>{{$deposito->cuenta->inmobiliaria->razon}}</td>
                        <td>{{$deposito->cuenta->banco->nombre}}</td>
                        <td>{{$deposito->id}}</td>
                        <td>{{$format->pesos($deposito->capital)}}</td>
                        <td>{{$deposito->inicio->format('d-m-Y')}}</td>
                        <td>{{$deposito->plazo()}}</td>
                        <td>{{$deposito->termino->format('d-m-Y')}}</td>
                        <td>{{$deposito->termino->format('Y-m-d')}}</td>
                        <td>{{$format->pesos($deposito->futuro)}}</td>
                        <td>{{$format->percent($deposito->tasa() * 100, 4)}}</td>
                        <td>
                            <button class="ui red icon button remove_button" data-deposito="{{$deposito->id}}">
                                <i class="remove icon"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
                @foreach ($vencidos as $deposito)
                    <tr class="yellow">
                        <td>{{$deposito->cuenta->inmobiliaria->razon}}</td>
                        <td>{{$deposito->cuenta->banco->nombre}}</td>
                        <td>{{$deposito->id}}</td>
                        <td>{{$format->pesos($deposito->capital)}}</td>
                        <td>{{$deposito->inicio->format('d-m-Y')}}</td>
                        <td>{{$deposito->plazo()}}</td>
                        <td>{{$deposito->termino->format('d-m-Y')}}</td>
                        <td>{{$deposito->termino->format('Y-m-d')}}</td>
                        <td>{{$format->pesos($deposito->futuro)}}</td>
                        <td>{{$format->percent($deposito->tasa() * 100, 4)}}</td>
                        <td>
                            <button class="ui red icon button remove_button" data-deposito="{{$deposito->id}}">
                                <i class="remove icon"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="ui modal" id="add_modal">
        <div class="content">
            <form class="ui form" id="add_form">
                <div class="two fields">
                    <div class="field">
                        <label for="inmobiliaria">Inmobiliaria</label>
                        <div class="ui search selection dropdown" id="inmobiliaria">
                            <input type="hidden" name="inmobiliaria_rut" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Inmobiliaria</div>
                            <div class="menu">
                                @foreach ($inmobiliarias as $inmobiliaria)
                                    <div class="item" data-value="{{$inmobiliaria->rut}}">{{$inmobiliaria->razon}}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="banco">Banco</label>
                        <div class="ui search selection dropdown" id="banco">
                            <input type="hidden" name="banco_id" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Banco</div>
                            <div class="menu"></div>
                        </div>
                    </div>
                </div>
                <div class="three wide field">
                    <label for="identificador">N° Depósito</label>
                    <input type="text" id="identificador" name="id" />
                </div>
                <div class="three fields">
                    <div class="field">
                        <label for="capital">Capital</label>
                        <input type="number" id="capital" name="capital" />
                    </div>
                    <div class="field">
                        <label for="futuro">Monto al Vencimiento</label>
                        <input type="number" id="futuro" name="futuro" />
                    </div>
                </div>
                <div class="two fields">
                    <div class="field">
                        <label for="inicio">Inicio</label>
                        <div class="ui calendar" id="inicio">
                            <div class="ui left icon input">
                                <i class="calendar icon"></i>
                                <input type="text" name="inicio" />
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="termino">Vencimiento</label>
                        <div class="ui calendar" id="termino">
                            <div class="ui left icon input">
                                <i class="calendar icon"></i>
                                <input type="text" name="termino" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="actions">
            <button class="ui approve button">Agregar</button>
        </div>
    </div>
@endsection

@include('layout.head.styles.datatables')
@include('layout.body.scripts.datatables')

@push('page_scripts')
    <script>
        const depositos = {
            ids: {},
            data: {
                inmobiliaria: {
                    rut: 0,
                    razon: ''
                },
                banco: {
                    id: 0,
                    nombre: ''
                }
            },
            get() {
                return {
                    bancos: inmobiliaria_rut => {
                        const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/cuentas'
                        return fetchAPI(url).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.cuentas.length === 0) {
                                    return
                                }
                                $(this.ids.forms.add.bancos).dropdown('change values', json.cuentas.map(cuenta => {
                                    return {value: cuenta.banco.id, text: cuenta.banco.nombre, name: cuenta.banco.nombre}
                                })).dropdown('refresh')
                            })
                        })
                    },
                }
            },
            add() {
                return {
                    deposito: form => {
                        const url = '{{$urls->api}}/contabilidad/depositos/add'
                        const body = new FormData(form)
                        const inicio = $(this.ids.forms.add.inicio).calendar('get date')
                        const termino = $(this.ids.forms.add.termino).calendar('get date')
                        body.set('inicio', [inicio.getFullYear(), inicio.getMonth()+1, inicio.getDate()].join('-'))
                        body.set('termino', [termino.getFullYear(), termino.getMonth()+1, termino.getDate()].join('-'))

                        return fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.status) {
                                    window.location.reload()
                                }
                            })
                        })
                    }
                }
            },
            setup(ids) {
                this.ids = ids

                $(this.ids.buttons.add).click(event => {
                    $(this.ids.modals.add).modal('show')
                })
                $(this.ids.modals.add).modal({
                    onApprove: $element => {
                        $(this.ids.forms.add.base).submit()
                    }
                })
                $(this.ids.forms.add.base).submit(event => {
                    event.preventDefault()
                    this.add().deposito(event.currentTarget)
                    return false
                })
                $(this.ids.forms.add.inmobiliarias).dropdown({
                    fireOnInit: true,
                    onChange: (value, text, $choice) => {
                        this.data.inmobiliaria.rut = value
                        this.data.inmobiliaria.razon = text
                        this.get().bancos(value)
                    }
                })
                $(this.ids.forms.add.banco).dropdown({
                    fireOnInit: true,
                    onChange: (value, text, $choice) => {
                        this.data.banco.id = value
                        this.data.banco.nombre = text
                    }
                })
                $(this.ids.forms.add.inicio).calendar(calendar_date_options)
                $(this.ids.forms.add.termino).calendar(calendar_date_options)

                $(this.ids.table).dataTable({
                    columnDefs: [{target: 7, visible: false, searchable: false}],
                    order: [[7, 'desc'], [0, 'asc']]
                })
            }
        }
        $(document).ready(() => {
            depositos.setup({
                table: '#depositos',
                buttons: {
                    add: '#add_button'
                },
                modals: {
                    add: '#add_modal'
                },
                forms: {
                    add: {
                        base: '#add_form',
                        inmobiliarias: '#inmobiliaria',
                        bancos: '#banco',
                        inicio: '#inicio',
                        termino: '#termino'
                    }
                }
            })
        })
    </script>
@endpush