@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
    <style>
        #excel-view {
            text-align: center;
        }
        .x-spreadsheet{
            height: 700px;
            overflow: scroll;
        }
    </style>
@endpush

@section('content')
<div class="container ml-0 mr-0 pl-0 pr-0 row">
    <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
        <div class="row row-bottom">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <h3 class="texto-obscuro">Visualización de Archivo de Excel</h3>
                <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('documentos') }}">Documentos</a><span class="breadcrumb-item active">Visualización de Archivo de Excel</span></nav>
            </div>
        </div>
        <div class="empty-space-50"></div>
        <div class="row">
            <input type="hidden" value="{{ $path }}" id="direccion">
            <div id="excel-view" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"></div>
        </div>
        <div class="empty-space-50"></div>
        <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('documentos') }}" class="btn btn-secundario text-white width-250" style="margin-right: 0px;">Regresar <span><-</span></a>
                </div>
            </div>
        <div class="empty-space-50"></div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xspreadsheet.css">
    <script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xspreadsheet.js"></script>
    <script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xlsx.full.min.js"></script>
    <script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel-viewer.js"></script>
    <script>
        let path = $('#direccion').val();
        console.log('Path: '+path);
        axios({
            url: path,
            method: "GET",
            responseType: "arraybuffer"
        }).then(res => {
            new ExcelViewer("#excel-view", res.data);
        })
    </script>
@endpush