@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">
            Centros de Costos
        </h1>
        <div class="ui top attached right aligned basic segment">
            <button class="ui tiny green icon button" id="add_button">
                Agregar
                <i class="plus icon"></i>
            </button>
        </div>
        <table class="ui table" id="centros_costos">
            <thead>
            <tr>
                <th>Tipo de Centro</th>
                <th>Categoría</th>
                <th>Tipo de Cuenta</th>
                <th>Cuenta Contable</th>
                <th>Centro de Costo</th>
                <th>Descripción</th>
                <th>
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach ($centrosCostos as $centroCosto)
                <tr data-id="{{$centroCosto->id}}">
                    <td data-id="{{$centroCosto->tipoCentro->id}}">{{$centroCosto->tipoCentro->descripcion}}</td>
                    <td data-id="{{$centroCosto->categoria->id}}">{{$centroCosto->categoria->descripcion}}</td>
                    <td data-id="{{$centroCosto->tipoCuenta?->id}}">{{$centroCosto->tipoCuenta?->descripcion}}</td>
                    <td>{{$centroCosto->cuentaContable}}</td>
                    <td>{{$centroCosto->id}}</td>
                    <td>{{$centroCosto->descripcion}}</td>
                    <td>
                        <div class="ui mini buttons">
                            <button class="ui icon button edit_button" data-id="{{$centroCosto->id}}">
                                <i class="edit icon"></i>
                            </button>
                            <button class="ui red icon button remove_button" data-id="{{$centroCosto->id}}">
                                <i class="remove icon"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="modal_add">
        <div class="content">
            <form class="ui form" id="add_form">
                <div class="fields">
                    <div class="three wide field">
                        <label for="tipo_centro">Tipo de Centro</label>
                        <div class="ui selection search dropdown" id="tipo_centro">
                            <input type="hidden" name="tipo_centro_id" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Tipo</div>
                            <div class="menu">
                            @foreach ($tiposCentros as $tipoCentro)
                                <div class="item" data-value="{{$tipoCentro->id}}">{{$tipoCentro->descripcion}}</div>
                            @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="three wide field">
                        <label for="tipo_cuenta">Tipo de Cuenta</label>
                        <div class="ui selection search dropdown" id="tipo_cuenta">
                            <input type="hidden" name="tipo_cuenta_id" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Tipo de Cuenta</div>
                            <div class="menu">
                                <div class="item" data-value="">---</div>
                                @foreach ($tiposCuentas as $tipoCuenta)
                                    <div class="item" data-value="{{$tipoCuenta->id}}">{{$tipoCuenta->descripcion}}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="five wide field">
                    <label for="categoria">Categoría</label>
                    <div class="ui selection search dropdown" id="categoria">
                        <input type="hidden" name="categoria_id" />
                        <i class="dropdown icon"></i>
                        <div class="default text">Categoría</div>
                        <div class="menu">
                        @foreach ($categorias as $categoria)
                            <div class="item" data-value="{{$categoria->id}}">{{$categoria->descripcion}}</div>
                        @endforeach
                        </div>
                    </div>
                </div>
                <div class="three wide field">
                    <label for="cuenta_contable">Cuenta Contable</label>
                    <input type="text" name="cuenta_contable" id="cuenta_contable" />
                </div>
                <div class="two wide field">
                    <label for="identificador">Centro de Costo</label>
                    <input type="number" name="id" id="identificador" maxlength="3" />
                </div>
                <div class="field">
                    <label for="descripcion">Descripción</label>
                    <textarea id="descripcion" name="descripcion" class="ui textarea" rows="1" cols="10"></textarea>
                </div>
            </form>
        </div>
        <div class="actions">
            <button class="ui positive icon button">
                <i class="plus icon"></i>
                Agregar
            </button>
        </div>
    </div>
    <div class="ui modal" id="modal_edit">
        <div class="header">
            Centro de Costo <span id="id"></span>
        </div>
        <div class="content">
            <form class="ui form" id="edit_form">
                <input type="hidden" name="id" id="identificador" />
                <div class="fields">
                    <div class="three wide field">
                        <label for="tipo_centro">Tipo de Centro</label>
                        <div class="ui selection search dropdown" id="tipo_centro">
                            <input type="hidden" name="tipo_centro_id" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Tipo</div>
                            <div class="menu">
                                @foreach ($tiposCentros as $tipoCentro)
                                    <div class="item" data-value="{{$tipoCentro->id}}">{{$tipoCentro->descripcion}}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="three wide field">
                        <label for="tipo_cuenta">Tipo de Cuenta</label>
                        <div class="ui selection search dropdown" id="tipo_cuenta">
                            <input type="hidden" name="tipo_cuenta_id" />
                            <i class="dropdown icon"></i>
                            <div class="default text">Tipo de Cuenta</div>
                            <div class="menu">
                                <div class="item" data-value="">---</div>
                                @foreach ($tiposCuentas as $tipoCuenta)
                                    <div class="item" data-value="{{$tipoCuenta->id}}">{{$tipoCuenta->descripcion}}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="five wide field">
                    <label for="categoria">Categoría</label>
                    <div class="ui selection search dropdown" id="categoria">
                        <input type="hidden" name="categoria_id" />
                        <i class="dropdown icon"></i>
                        <div class="default text">Categoría</div>
                        <div class="menu">
                            @foreach ($categorias as $categoria)
                                <div class="item" data-value="{{$categoria->id}}">{{$categoria->descripcion}}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="three wide field">
                    <label for="cuenta_contable">Cuenta Contable</label>
                    <input type="text" name="cuenta_contable" id="cuenta_contable" />
                </div>
                <div class="field">
                    <label for="descripcion">Descripción</label>
                    <textarea id="descripcion" name="descripcion" class="ui textarea" rows="1" cols="10"></textarea>
                </div>
            </form>
        </div>
        <div class="actions">
            <button class="ui positive icon button">
                <i class="plus icon"></i>
                Editar
            </button>
        </div>
    </div>
@endsection

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

@push('page_scripts')
    <script>
        const centros = {
            ids: {
                table: '',
                modals: {
                    add: '',
                    edit: ''
                },
                buttons: {
                    add: '',
                    edit: '',
                    remove: ''
                },
                forms: {
                    add: '',
                    edit: ''
                }
            },
            setup: function({ids}) {
                this.ids = ids

                Object.keys(this.ids.modals).forEach(name => {
                    $(this.ids.modals[name]).modal({
                        onApprove: ($element) => {
                            this.actions()[name]()
                        },
                        onHidden: (modal) => {
                            document.getElementById(this.ids.forms[name]).reset()
                        }
                    })
                    $(this.ids.modals[name]).find('.dropdown').each((idx, item) => {
                        $(item).dropdown()
                    })
                })
                Object.keys(this.ids.buttons).forEach(name => {
                    if (name === 'remove') {
                        return
                    }
                    $(this.ids.buttons[name]).click(event => {
                        if (name === 'edit') {
                            const id = $(event.currentTarget).data('id')
                            const row = $("tr[data-id='" + id + "']")
                            const data = {
                                id,
                                tipo_centro_id: row.find(':nth-child(1)').data('id'),
                                categoria_id: row.find(':nth-child(2)').data('id'),
                                tipo_cuenta_id: row.find(':nth-child(3)').data('id'),
                                cuenta_contable: row.find(':nth-child(4)').html(),
                                descripcion: row.find(':nth-child(6)').html()
                            }
                            $(this.ids.modals[name]).find('#id').html(id)
                            const form = $('#' + this.ids.forms[name])
                            form.find("[name='id']").val(data.id)
                            form.find('#tipo_centro').dropdown('set selected', data.tipo_centro_id)
                            form.find('#categoria').dropdown('set selected', data.categoria_id)
                            form.find('#tipo_cuenta').dropdown('set selected', data.tipo_cuenta_id)
                            form.find('#cuenta_contable').val(data.cuenta_contable)
                            form.find('#descripcion').val(data.descripcion)
                        }
                        $(this.ids.modals[name]).modal('show')
                    })
                })
                $(this.ids.buttons.remove).click(event => {
                    const id = $(event.currentTarget).data('id')
                    this.actions().remove(id)
                })
                $(this.ids.table).dataTable({
                    order: [
                        [0, 'desc'],
                        [1, 'asc'],
                        [4, 'asc']
                    ]
                })
            },
            actions: function() {
                return {
                    add: () => {
                        const body = new FormData(document.getElementById(this.ids.forms.add))
                        const url = '{{$urls->api}}/contabilidad/centros_costos/add'
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (json.added) {
                                    window.location.reload()
                                }
                            })
                        })
                    },
                    edit: () => {
                        const body = new FormData(document.getElementById(this.ids.forms.edit))
                        const url = '{{$urls->api}}/contabilidad/centro_costo/' + body.get('id') + '/edit'
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (json.edited) {
                                    window.location.reload()
                                }
                            })
                        })
                    },
                    remove: id => {
                        const url = '{{$urls->api}}/contabilidad/centro_costo/' + id
                        fetchAPI(url, {method: 'delete'}).then(response => {
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (json.removed) {
                                    window.location.reload()
                                }
                            })
                        })
                    }
                }
            }
        }
        $(document).ready(() => {
            centros.setup({ids: {
                    table: '#centros_costos',
                    modals: {
                        add: '#modal_add',
                        edit: '#modal_edit'
                    },
                    buttons: {
                        add: '#add_button',
                        edit: '.edit_button',
                        remove: '.remove_button'
                    },
                    forms: {
                        add: 'add_form',
                        edit: 'edit_form'
                    }
                }
            })
        })
    </script>
@endpush