@extends('layouts.admin')
@section('content')
<script type="text/javascript" src="{{asset('js/adapter.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vue.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/instascan.min.js')}}"></script>

@can('article_creer')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="#">
                Scanner de documents 
            </a>
        </div>
    </div>
@endcan
<div class="card">
    <div class="card-header">
 
    </div>

    <div class="card-body">
       
            <div id="app">
                <div class="sidebar">
                    <transition-group name="scans" tag="ul">

                    </transition-group>
                </div>
                <div class="preview-container text-center">
                    <video class="text-center" id="preview" style="width: 80%;"></video>
                </div>
            </div>
                <script type="text/javascript">
                    var app = new Vue({
                    el: '#app',
                    data: {
                        scanner: null,
                        activeCameraId: null,
                        cameras: [],
                        scans: []
                    },
                    mounted: function () {
                        var self = this;
                        self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
                        self.scanner.addListener('scan', function (content, image) {
                        self.scans.unshift({ date: +(Date.now()), content: content });

                      
                        var url = '{{ route("admin.bl.scan", ":content") }}';
                        url = url.replace(':content', content);
                        window.location.href = url ;
                        });
                        Instascan.Camera.getCameras().then(function (cameras) {
                        self.cameras = cameras;
                        if (cameras.length > 0) {
                            self.activeCameraId = cameras[0].id;
                            self.scanner.start(cameras[0]);
                        } else {
                            console.error('No cameras found.');
                        }
                        }).catch(function (e) {
                        console.error(e);
                        });
                    },
                    methods: {
                        formatName: function (name) {
                        return name || '(unknown)';
                        },
                        selectCamera: function (camera) {
                        this.activeCameraId = camera.id;
                        this.scanner.start(camera);
                        }
                    }
                    });
                </script>
     
        </div>
    </div>
</div>
@endsection
@section('scripts')
@parent
<script>
    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        @can('client_delete')
            let deleteButtonTrans = '{{ trans('global.datatables.delete') }}'
            let deleteButton = {
                text: deleteButtonTrans,
                url: "{{ route('admin.clients.massDestroy') }}",
                className: 'btn-danger',
                action: function (e, dt, node, config) {
                var ids = $.map(dt.rows({ selected: true }).nodes(), function (entry) {
                    return $(entry).data('entry-id')
                });

                if (ids.length === 0) {
                    alert('{{ trans('global.datatables.zero_selected') }}')

                    return
                }

                if (confirm('{{ trans('global.areYouSure') }}')) {
                    $.ajax({
                    headers: {'x-csrf-token': _token},
                    method: 'POST',
                    url: config.url,
                    data: { ids: ids, _method: 'DELETE' }})
                    .done(function () { location.reload() })
                }
                }
            }
            dtButtons.push(deleteButton)
        @endcan

        $.extend(true, $.fn.dataTable.defaults, {
            order: [[ 1, 'desc' ]],
            pageLength: 100,
        });
        $('.datatable-Client:not(.ajaxTable)').DataTable({ buttons: dtButtons })
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
        });
    })
</script>
@endsection