@extends('adminlte::page')

@section('content_header')
    <h4>Productos</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()"><i class="fas fa-upload"></i> {{__('general.import_file')}}</button>
                <a href="{{ route('products.create') }}" type="button" class="btn btn-primary"><i class="fas fa-plus"></i>
                    {{__('general.new_register')}}</a>
            </div>
        </div>
        <div class="card-body ">
            <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('products.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>GMID</th>
                                <th>Descripción</th>
                                <th>Business CODE</th>
                                <th>Business Group CODE</th>
                                <th>Value Center CODE</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>
                                </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="{{ route('products.import')}}">{{ __('general.import') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')

@include('partials.scripts.general')
@include('partials.scripts.select2')

<script type="text/javascript">

    function openFileImporter() {
        $('#modalFileImporter').modal('show');
        $('#modalFileImporter').find('.modal-title').text('Importar Archivo de Productos' );
        $('#spinner').hide();
        $('#body-modal').show();
        $('#modalFileImporter').find('.modal-footer').show();
        $('#import-btn').attr('{{ route("products.import") }}');

    };

    function getTable(){

        builtDatable('myTable', {
			searching: false,
            ajax: {
                url: "{{ route('product.list.json') }}",
                type: 'POST',
                data: function ( d ) {
                    d._token = "{{ csrf_token() }}";
                    d.filtro = $('#form-filter').serializeArray();
                }
            },
            'columns': [
                {'data': 'material_code', 'defaultContent': 'N/A'},
                {'data': 'description', 'defaultContent': 'N/A'},
                {'data': 'business_code', 'defaultContent': 'N/A'},
                {'data': 'business_group_code', 'defaultContent': 'N/A'},
                {'data': 'value_center_code', 'defaultContent': 'N/A'},
                {
                    'data': null,
                    'defaultContent': '',
                    'render': function (data, type, row) {
                        console.log(row.id)
                        return `<div class="btn-group" role="group" aria-label="Basic example">
                                    <button class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top" title="Duplicar Registro" onClick="cloneRegister(:id)"><i class="fas fa-clone"></i></button>
                                    <a href="{{ route('products.edit', ':id') }}" class="btn btn-sm btn-warning" data-toggle="tooltip" data-placement="top" title="Modificar Registro"><i class="fas fa-edit"></i></a>
                                    <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);
                    }
                }
            ],
            "order": [[ 0, "desc" ]]

        });
    }

    function cloneRegister(id)
    {
        var url = "{{ route('product.clone', ':id') }}".replace(':id', id);
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
            },
            success: function (data) {
                if (data.success) {
                    Swal.fire({
                        title: 'Registro Duplicado',
                        text: 'El registro se ha duplicado correctamente',
                        type: 'success',
                        confirmButtonText: 'Ok'
                    }).then(function () {
                        getTable();
                    });

                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ha ocurrido un error al duplicar el registro: ' + data.message,
                        type: 'error',
                        confirmButtonText: 'Ok'
                    });
                }
            },
            error: function (data) {
                Swal.fire({
                    title: 'Error',
                    text: 'Ha ocurrido un error al duplicar el registro: ' + data.message,
                    type: 'error',
                    confirmButtonText: 'Ok'
                });
            }
        });
    }

    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('product.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'
                        );
                    }
                });
            }
        })

    }

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

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

        $('#import-btn').on('click', function(e){
            e.preventDefault();
            let files = $('[name="file"]')[0].files;
            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('_token', "{{ csrf_token() }}");
            let url = $(this).attr('action');
            $.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) {
                    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();
                    })
                }
            });
        });
    })
</script>
@endsection