@extends('layout.base')

@section('page_title')
    Importar
@endsection

@section('page_content')
    <h1>Importar</h1>
    <form class="ui form" action="#" method="post" id="importar_form" enctype="multipart/form-data">
        <div class="two wide field">
            <label>Fecha</label>
            <div class="ui date calendar">
                <div class="ui icon input">
                    <input type="text" name="fecha" />
                    <i class="calendar outline icon"></i>
                </div>
            </div>
        </div>
        <div class="six wide field">
            <label>Cuenta</label>
            <select name="cuenta"></select>
        </div>
        <div class="inline field">
            <input type="file" name="archivo" style="display: none;" />
            <div class="ui labeled icon input" id="archivo_btn">
                <div class="ui label">Archivo</div>
                <input type="text" readonly="" />
                <i class="search icon"></i>
            </div>
        </div>
        <button class="ui button">Importar</button>
    </form>
@endsection

@push('scripts')
    <script type="text/javascript">
        function getCuentas() {
            sendGet(_urls.api + '/cuentas').then((data) => {
                if (data.cuentas === null || data.cuentas.length === 0) {
                    return
                }
                const select = $("select[name='cuenta']")
                let values = []
                $.each(data.cuentas, (i, el) => {
                    const nombre = [el.nombre, el.categoria.nombre].join(' - ')
                    values.push({
                        name: nombre,
                        value: el.id,
                        text: nombre
                    })
                })
                select.dropdown({values})
            })
        }
        $(document).ready(() => {
            getCuentas()
            const today = new Date()
            const start = new Date(today.getFullYear(), today.getMonth() - 1)
            $('.ui.calendar').calendar({
                type: 'month',
                initialDate: start,
                maxDate: start,
                months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                formatter: {
                    date: function(date, settings) {
                        if (!date) return ''
                        const year = date.getFullYear()
                        const month = date.getMonth() + 1
                        return [year, month].join('-')
                    }
                }
            })
            $('#archivo_btn').css('cursor', 'pointer').click(() => {
                $("[name='archivo']").trigger('click')
            })
            $("[name='archivo']").change((e) => {
                const arch = $(e.currentTarget)
                const filename = arch[0].files[0].name
                $('#archivo_btn').find('input').val(filename)
            })
            $('#importar_form').submit((e) => {
                e.preventDefault()
                const data = new FormData(e.currentTarget)
                sendPost(_urls.api + '/import', data, true).then((resp) => {
                    console.debug(resp)
                })
                return false
            })
        })
    </script>
@endpush