@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Importar Informe de Tesorería</h1>

        <form class="ui form" id="import_form" enctype="multipart/form-data">
            <div class="ten wide field">
                <label>Informe</label>
                <div class="ui file action input">
                    <input type="file" name="file[]" id="file" accept=".xlsx" multiple placeholder="Informe" />
                    <label for="file" class="ui icon button">
                        <i class="file icon"></i>
                    </label>
                </div>
            </div>
            <button class="ui icon button">
                <i class="arrow up icon"></i>
                Subir
            </button>
        </form>
    </div>
@endsection

@push('page_scripts')
    <script>
        $(document).ready(() => {
            $('#import_form').submit(submitEvent => {
                submitEvent.preventDefault()

                let formData = new FormData()
                formData.append('file', $('#file')[0].files[0])

                const url = '{{$urls->api}}/contabilidad/tesoreria/import'
                const method = 'post'
                const body = new FormData(submitEvent.currentTarget)

                fetchAPI(url, {method, body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(data => {
                        console.log(data)

                    })
                }).catch(error => {
                    console.error(error)
                })
                return false
            })
        })
    </script>
@endpush