@extends('adminlte::page')

@section('content_header')
    <h4>SIMIs</h4>
@stop

@section('content')
<div>
    <div class="card card-outline card-primary">
        <div class="card-header">

            <div class="card-tools">
                <button type="button" class="btn btn-success"
                onClick="openFileImporter('reporte')"><i class="fas fa-upload"></i> Importar Reporte SIMIs</button>


                <button type="button" class="btn btn-warning"
                onClick="openFileImporter('ret')"><i class="fas fa-upload"></i> {{__('general.import_file')}}</button>

            </div>
        </div>
        <div class="card-body ">
            @if ($errors->any())
                @foreach ($errors->all() as $error)
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h5><i class="icon fas fa-ban"></i> {{__('general.error')}}!</h5>
                        {{ $error }}
                    </div>
                @endforeach
            @endif
            <div class="accordion_item" id="accordionFIlter">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                                aria-expanded="true" aria-controls="collapseOne">
                                Filtros de Búsqueda
                            </button>
                        </h5>
                    </div>

                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionFIlter">
                        <div class="card-body">
                            @include('simis.partials.filter')
                        </div>

                    </div>
                </div>
            </div>

            <div class="card card-outline">
                <div class="card-header">
                    <h3 class="card-title">Listado de Registros</h3>
                </div>
                <div class="card-body ">
                    <table id="myTable" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Archivo</th>
                                <th>Tipo</th>
                                <th>Creado</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modalFileImporter" tabindex="-1" aria-labelledby="modalFileImporterLabel" aria-hidden="true"
                data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-md">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalFileImporterLabel"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="text-center" id="spinner" style="display:none"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>
                            <div id="body-modal">
                                <form action="" id="file_import_form" enctype="multipart/form-data" >
                                    @csrf
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="inputFile-addon">Upload</span>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputFile"
                                                aria-describedby="inputFile-addon" name="file">
                                            <label class="custom-file-label" for="inputFile">{{ __('general.choose_file') }}</label>
                                        </div>

                                        <div class="input-group mb-12">
                                            <label for="inputFile" class="custom-inputFile" id="UploadedFile">
                                                <i class="fa fa-cloud-upload"></i>
                                            </label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  __('general.cancel') }}</button>
                            <button type="button" class="btn btn-primary" id="import-btn" action="">{{ __('general.import') }}</button>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Modal -->
            <div class="modal fade" id="modalShowInfo" tabindex="-1" aria-labelledby="modalShowInfoLabel" aria-hidden="true"
                data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalShowInfoLabel"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="text-center" id="spinner" style="display:none"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>
                            <div id="body-modal">

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  __('general.cancel') }}</button>
                            <button type="button" class="btn btn-primary" id="import-btn" action="">{{ __('general.import') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')

<script type="text/javascript">

    function openFileImporter(type) {
        console.log(type)
        $('#modalFileImporter').modal('show');
        let name = (type == 'reporte') ? 'Importar Reporte de SIMI' : 'Importar Archivo .RET'
        $('#modalFileImporter').find('.modal-title').text(name);
        $('#spinner').hide();
        $('#body-modal').show();
        $('#modalFileImporter').find('.modal-footer').show();
        $('#modalFileImporter').find('#UploadedFile').html('');
        $('#modalFileImporter').find('#import-btn').attr('action', type);

    }


    function getTable(){
        builtDatable('myTable', {
            searching: false,
            ajax: {
                url: "{{ route('simis.list.json') }}",
                type: 'POST',
                data: function ( d ) {
                    d._token = "{{ csrf_token() }}";
                    d.filtro = $('#form-filter').serializeArray();
                }
            },
            'columns': [
                {'data': 'filename', 'defaultContent': 'N/A'},
                {'data': 'tipo', 'defaultContent': 'N/A'},
                {'data': 'created_at', 'defaultContent': 'N/A'},
                {
                    'data': null,
                    'defaultContent': '',
                    'render': function (data, type, row) {
                        return `
                        <div class="btn-group" role="group" aria-label="Basic example">
                            <button onClick="download(:id)" class="btn btn-sm btn-warning" data-toggle="tooltip" data-placement="top" title="Descargar PDF" id="download-btn"><i class="fas fa-download"></i></button>
                            <button onClick="viewData(:id)" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top" title="Ver Info" id="view-btn"><i class="fas fa-eye"></i></button>
                            <button onClick="deleteRegister(:id)" class="btn btn-sm btn-trash btn-danger" data-toggle="tooltip" data-placement="top" title="Eliminar Registro" id="delete-btn"><i class="fas fa-trash"></i></button>
                        </div>`.replace(/:id/g, row.id);
                    }
                }
            ],
            'columnDefs': [
                {
                    'targets': [2],
                    'render': function (data, type, row, meta) {
                        return moment(data).format('DD/MM/YYYY');
                    }
                }
            ],
            "order": [[ 0, "desc" ]]

        });
    }

    function download(id)
    {
        window.location.href = '{{ route("simis.download", ":id") }}'.replace(':id', id);
    }


    function deleteRegister(id)
    {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "¡No podrás revertir esto!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '¡Si, eliminar!'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    url: "{{ route('simi.destroy',':id') }}".replace(':id', id),
                    type: 'DELETE',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (data) {
                        if (data.success) {
                            Swal.fire(
                                '¡Eliminado!',
                                'El registro ha sido eliminado.',
                                'success'
                            ).then(function(){
                                getTable();
                            });
                        } else {
                            Swal.fire(
                                '¡Error!',
                                'El registro no pudo ser eliminado.',
                                'error'
                            );
                        }
                    },
                    error: function (data) {
                        Swal.fire(
                            '¡Error!',
                            'El registro no pudo ser eliminado: ' + data.message,
                            'error'
                        );
                    }
                });
            }
        })

    }

    function viewData(id) {
        $.ajax({
            url: "{{ route('simis.show',':id') }}".replace(':id', id),
            type: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (data) {
                if (data.success) {
                    $('#modalShowInfo').modal('show');
                    $('#modalShowInfo').find('.modal-title').text('Información SIMI: ' + data.data.filename);
                    let attr = data.data.atributos
                    let informacion_complementaria = data.data.informacion_complementaria
                    let bultos = data.data.bultos
                    attr = JSON.parse(attr)
                    informacion_complementaria = JSON.parse(informacion_complementaria)
                    bultos = JSON.parse(bultos)
                    html = $('#modalShowInfo').find('#body-modal').html('');
                    if(attr != null && Object.keys(attr).length > 0) {
                        html = $('#modalShowInfo').find('#body-modal').html(`
                            <table class="table table-striped table-bordered table-sm">
                                <thead>
                                    <tr>
                                        <td colspan="2">
                                            <h4>Atributos</h4>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Atributo</td>
                                        <td>Valor</td>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                </tbody>
                            </table>
                        `);


                        for (var [key, value] of Object.entries(attr)) {
                            if(key == 1){
                                html.find('#tbody').append(`
                                    <tr>
                                        <td>Nombre</td>
                                        <td>Valor</td>
                                    </tr>
                                `);
                            }

                            html.find('#tbody').append(`
                                <tr>
                                    <td><strong>${key}</strong></td>
                                    <td>${value}</td>
                                </tr>`);
                        }

                        html.find('#tbody').append(`
                            <tr>
                                <td colspan="2">
                                    <h4>Información Complementaria</h4>
                                </td>
                            </tr>
                            <tr>
                                <td>Atributo</td>
                                <td>Valor</td>
                            </tr>`)

                            if(informacion_complementaria != null && Object.keys(informacion_complementaria).length > 0) {

                                for (var [key, value] of Object.entries(informacion_complementaria)) {
                                if(typeof(value) == 'object'){
                                    html.find('#tbody').append(`
                                    <tr>
                                        <td colspan="2">
                                            <h6>Información Complementaria</h6>
                                        </td>
                                    </tr>`);
                                    for (var [key2, value2] of Object.entries(value)) {
                                        if(typeof value2 == 'object') {
                                            for (var [key3, value3] of Object.entries(value2)) {
                                                if(typeof value3 != 'object') {
                                                    html.find('#tbody').append(`
                                                    <tr>
                                                        <td><strong>${key3}</strong></td>
                                                        <td>${value3}</td>
                                                    </tr>`);
                                                }else{
                                                    for (var [key4, value4] of Object.entries(value3)) {
                                                        html.find('#tbody').append(`
                                                        <tr>
                                                            <td><strong>${key4}</strong></td>
                                                            <td>${value4}</td>
                                                        </tr>`);
                                                    }
                                                }
                                            }
                                        }else{
                                            html.find('#tbody').append(`
                                            <tr>
                                                <td><strong>${key2}</strong></td>
                                                <td>${value2}</td>
                                            </tr>`);
                                        }
                                    }
                                }else{
                                    html.find('#tbody').append(`
                                        <tr>
                                            <td><strong>${key}</strong></td>
                                            <td>${value}</td>
                                        </tr>`);

                                }
                            }
                        }

                        if(bultos != null && Object.keys(bultos).length > 0) {


                            for (var [key, value] of Object.entries(bultos)) {
                                if(typeof(value) == 'object'){
                                    html.find('#tbody').append(`
                                    <tr>
                                        <td colspan="2">
                                            <h6>Bultos</h6>
                                        </td>
                                    </tr>`);
                                    for (var [key2, value2] of Object.entries(value)) {
                                        if(typeof value2 == 'object') {
                                            for (var [key3, value3] of Object.entries(value2)) {
                                                if(typeof value3 != 'object') {
                                                    html.find('#tbody').append(`
                                                    <tr>
                                                        <td><strong>${key3}</strong></td>
                                                        <td>${value3}</td>
                                                    </tr>`);
                                                }else{
                                                    for (var [key4, value4] of Object.entries(value3)) {
                                                        html.find('#tbody').append(`
                                                        <tr>
                                                            <td><strong>${key4}</strong></td>
                                                            <td>${value4}</td>
                                                        </tr>`);
                                                    }
                                                }
                                            }
                                        }else{
                                            html.find('#tbody').append(`
                                            <tr>
                                                <td><strong>${key2}</strong></td>
                                                <td>${value2}</td>
                                            </tr>`);
                                        }
                                    }
                                }else{
                                    html.find('#tbody').append(`
                                        <tr>
                                            <td><strong>${key}</strong></td>
                                            <td>${value}</td>
                                        </tr>`);

                                }
                            }
                        }
                    }
                    $('#spinner').hide();
                    $('#body-modal').show();
                    $('#modalShowInfo').find('.modal-footer').hide();
                    $('#modalShowInfo').find('.modal-body').html(data.html);
                } else {
                    Swal.fire(
                        '¡Error!',
                        'El registro no pudo ser eliminado.',
                        'error'
                    );
                }
            },
            error: function (data) {
                Swal.fire(
                    '¡Error!',
                    'El registro no pudo ser eliminado: ' + data.message,
                    'error'
                );
            }
        });
    }


    $(document).ready(function(){
        getTable();


        $('#modalFileImporter #inputFile').change(function() {
            var i = $(this).prev('label').clone();
            var file = $(this)[0].files[0].name;
            $('#modalFileImporter').find('#UploadedFile').text(file);
        });


        $('#form-filter').on('submit', function(e){
            e.preventDefault();
            getTable();
        });

        $('#import-btn').on('click', function(e){
            e.preventDefault();
            let files = $('[name="file"]')[0].files;
            let action = $(this).attr('action');

            if(files.length <= 0){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe seleccionar un archivo para importar',
                    type: 'error',
                    confirmButtonText: 'Ok'
                });
                return false;
            }

            $('#spinner').show();
            $('#body-modal').hide();
            $('#modalFileImporter').find('.modal-footer').hide();

            let form = $('#file_import_form');
            let formData = new FormData();
            formData.append('file',files[0]);
            formData.append('type',action);
            formData.append('_token', "{{ csrf_token() }}");
            let url = "{{ route('simis.import') }}"
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.success) {
                        Swal.fire({
                            title: 'Éxito',
                            text: 'Archivo importado exitósamente',
                            type: 'success',
                            confirmButtonText: 'Ok'
                        }).then(function () {
                            getTable();
                            $('#modalFileImporter').modal('hide');
                        });

                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'Ha ocurrido un error al crear el registro: ' + data.responseJSON.message,
                            type: 'error',
                            confirmButtonText: 'Ok'
                        }).then(function () {
                            $('#spinner').hide();
                            $('#body-modal').show();
                            $('#modalFileImporter').find('.modal-footer').show();
                        });
                    }
                },
                error: function (data) {
                    let statusText = (typeof(data.responseJSON) != 'undefined') ? data.responseJSON.message : 'Server error: ' + data.statusText
                    Swal.fire({
                        title: 'Error',
                        text: 'Ha ocurrido un error al crear el registro: ' + statusText,
                        type: 'error',
                        confirmButtonText: 'Ok'
                    }).then(function () {
                        $('#modalFileImporter').find('#spinner').hide();
                        $('#modalFileImporter').find('#body-modal').show();
                        $('#modalFileImporter').find('.modal-footer').show();
                    })
                }
            });
        });
    })


</script>
@endsection