@extends('layout.base')

@include('layout.head.styles.datatables')
@include('layout.head.styles.datatables.searchbuilder')
@include('layout.head.styles.datatables.buttons')

@push('page_styles')
    <style>
        #table_container {
            margin-left: 1rem;
            margin-right: 1rem;
        }
    </style>
@endpush

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Movimientos Contables</h1>
        <form class="ui form" id="movimientos_form">
            <div class="fields">
                <div class="six wide field">
                    <label for="sociedad">Sociedad</label>
                    <div class="ui selection search multiple dropdown" id="sociedades">
                        <input type="hidden" name="sociedad[]"/>
                        <i class="dropdown icon"></i>
                        <div class="default text">Sociedad</div>
                        <div class="menu">
                            @foreach($sociedades as $sociedad)
                                <div class="item" data-value="{{$sociedad->rut}}">{{$sociedad->razon}}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="three wide field">
                    <label for="mes">Mes</label>
                    <div class="ui calendar" id="mes">
                        <div class="ui right icon input">
                            <input type="text" name="mes"/>
                            <i class="calendar icon"></i>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label></label>
                    <button class="ui circular icon button">
                        <i class="sync alternate icon"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div id="table_container">
        <table id="tabla_movimientos" class="ui compact table">
            <thead>
            <tr>
                <th>Sigla</th>
                <th>Banco</th>
                <th>Cuenta</th>
                <th>Fecha</th>
                <th>ISO Fecha</th>
                <th>Mes</th>
                <th>Año</th>
                <th class="right aligned">Valor</th>
                <th>Valor</th>
                <th>Glosa</th>
                <th>Centro de Costo</th>
                <th>Categoría</th>
                <th>Detalle</th>
                <th>RUT</th>
                <th>Nombre</th>
                <th>Identificador</th>
                <th>Editar</th>
            </tr>
            </thead>
            <tbody id="movimientos"></tbody>
        </table>
    </div>
    @include('contabilidad.movimientos.edit_modal')
@endsection

@include('layout.body.scripts.datatables')
@include('layout.body.scripts.datatables.searchbuilder')
@include('layout.body.scripts.datatables.buttons')
@include('layout.body.scripts.rut')

@push('page_scripts')
    <script>
        class CentrosCostos {
            static data = []
            static get() {
                if (this.data.length === 0) {
                    this.data = JSON.parse('{!! json_encode($centros) !!}')
                }
                return this.data
            }
        }
    </script>
@endpush
@push('page_scripts')
    @include('contabilidad.movimientos.scripts.event_handler')
    @include('contabilidad.movimientos.scripts.loading_handler')
    @include('contabilidad.movimientos.scripts.control_form')
    @include('contabilidad.movimientos.scripts.movimientos_table')
    @include('contabilidad.movimientos.scripts.edit_modal')
    @include('contabilidad.movimientos.scripts.edit_form')
    @include('contabilidad.movimientos.scripts.movimientos_handler')
    @include('contabilidad.movimientos.scripts.results_handler')
    <script>
        const app = {
            handlers: {},
            setup() {
                this.handlers.results = new ResultsHandler()
                this.handlers.loading = new LoadingHandler({id: '#movimientos_form'})
                this.handlers.movimientos = new MovimientosHandler({
                    urls: {
                        get: '{{$urls->api}}/contabilidad/movimientos/sociedad/mes',
                        edit: '{{$urls->api}}/contabilidad/movimientos/edit',
                        remove: '{{$urls->api}}/contabilidad/movimiento',
                    },
                    loadingHandler: this.handlers.loading,
                    resultsHandler: this.handlers.results
                })
                this.handlers.forms = {
                    edit: new EditForm({ids: {modal: '#movimientos_modal', data: '#movimientos_data', form: '#movimientos_edit',}})
                }
                this.handlers.modals = {
                    edit: new EditModal({ids: {modal: '#movimientos_modal'}, editForm: this.handlers.forms.edit})
                }
                this.handlers.events = new EventHandler({movimientosHandler: this.handlers.movimientos, modalHandler: this.handlers.modals.edit})
                this.handlers.table = new MovimientosTable({ids: {table: '#tabla_movimientos', buttons: {edit: '.edit_button', remove: '.remove_button'}}, eventHandler: this.handlers.events})
                this.handlers.forms.control = new ControlForm({ids: {form: '#movimientos_form', sociedades: '#sociedades', mes: '#mes',},})

                this.handlers.forms.edit.setup()
            }
        }
        $(document).ready(() => {
            app.setup()
        })
    </script>
@endpush