@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h3 class="card-title">Data Table With Full Features</h3>
                </div> --}}
                <!-- /.card-header -->
                <div class="card-body">                                    
                    <table id="example1" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th></th>                                
                                <th>Uniq Code</th>                                
                                <th>Valid From</th>                                
                                <th>Valid Until</th>                                
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>                    
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->

    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      {{-- <div class="modal-header text-right">
    </div> --}}
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>&nbsp;&nbsp;&nbsp;        
            <button class="close" style="margin-left:10px;margin-right:10px" onclick="print()"><span class="fa fa-print"></span></button>
            <div id="printThis" style="width:200px; margin:0 auto;background-color: white;">
                <div id="qrcode" style="display: flex; justify-content: center; text-align: center; ">
                </div>
                
                <table id="dataPrintTable" width="85%" style="margin:0 auto;">
                    <thead>
                        <tr>
                           <td colspan="3">
                               <p class="text-center" style="margin: 0 auto;"><strong>#USPay Voucher</strong></p>
                           </td>
                        </tr>
                    </thead>
                    <tbody style="font-size: 14px"></tbody>
                    <tfoot>
                        <tr>
                            <td><br></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p class="text-center" style="margin: 0 auto;font-size: 14px"><strong>Let's Thrive Together !</strong></p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p class="text-center" style="margin: 0 auto;font-size: 14px">How to use E-voucher</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <ul style="font-size: 10px;padding-left:10px;">
                                    <li>Login to UnionSpace App</li>
                                    <li>Click on SCAN NOW from the Dashboard</li>
                                    <li>Scan this QR code</li>
                                    <li>The top up amount will be reflected in your UnionSpace account</li>
                                </ul>                                
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <hr style=" border: 1px solid black;">                                
                                <p class="text-center" style="margin: 0 auto;font-size: 10px">Powered by</p>
                                <p class="text-center" style="margin: 0 auto;">
                                <img src="{{asset('unionspace-logo-dark.png')}}" alt="unionspacelogo" style="width: 100px;">
                                </p>
                                <br>
                                 
                            </td>
                        </tr>
                    </tfoot>
                </table>

            </div>
            <div id="previewImage" style="display:none">
            </div>
            {{-- <div id="qrcode"></div> --}}
        </div>      
    </div>
  </div>
</div>

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
var table = $('#example1').DataTable({
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: '{{route("voucher.datatable")}}',
        data: {
            'status': '1',
        },
    },
    "columns": [
            { "name": "op.created_at", "data": "created_at", "searchable": false, "visible": false },
            { "name": "op.unique_code", "data": "unique_code" },
            { "name": "op.valid_from", "data": "valid_from" },
            { "name": "op.valid_until", "data": "valid_until" },
            { "name": "op.status", "data" : null},
            { "name": "action", "data": null, "orderable": false, "searchable": false },
        ],
    "order" :[[ 0, 'desc' ]],
    "columnDefs": [
        {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {                        
            
            // newArr["valid_from"] = data.valid_from
            // newArr["valid_until"] = data.valid_until

            var newArr = window.btoa(JSON.stringify(data))

            var action = '';            
            action += '<div class="float-right"><button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
            action += '<button class="btn btn-outline-info" onclick="printqr(\''+newArr+'\', \''+data.unique_code+'\')"><span class="fa fa-qrcode"></span></button></div>&nbsp;'
            return action            
            }
        },
        {
            "targets": -2,
            "data": "status",
            "render": function ( data, type, row, meta ) {
                if(data.status == 0){
                    return "Active"
                }                                    
                if(data.status == 1){
                    return "Claimed"
                }                                    
                if(data.status == 2){
                    return "Expaired"
                }                                    

            }
        }
    ],
})

function printqr(data, unique_code){
    var param = {type:7, vid:unique_code};
    var data = JSON.parse(window.atob(data))
    console.log(data)
    axios.get('https://turbo.entreprenity.co/generate-qr', {
        params: {
            param: JSON.stringify(param)
        }
    })
    .then(function (response) {        
        $('#btn-download').remove()
        $('#qrcode').html('<canvas id="canvas" width="200" height="200"></canvas>')

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();

        img.onload = function() {
        context.drawImage(this, 0, 0, canvas.width, canvas.height);
        }

        img.src = "data:image/png;base64,"+response.data;

        $('#valid_from').html(data.valid_from)
        $('#valid_until').html(data.valid_until)

        var tbody = ''
        if(data.credit != null){
            tbody += '<tr><td>'+data.currency+'</td><td>:</td><td class="text-right"><span>'+new Intl.NumberFormat('de-DE').format(data.credit)+'</span></td></tr>'
        }
        if(data.working_pass != null){
            tbody += '<tr><td>Working Pass</td><td>:</td><td class="text-right"><span>'+data.working_pass+' Hours</span></td></tr>'
        }
        if(data.meeting_room != null){
            tbody += '<tr><td>Meeting Room</td><td>:</td><td class="text-right"><span>'+data.meeting_room+' Hours</span></td></tr>'
        }

        tbody += '<tr><td>Valid From</td><td>:</td><td class="text-right"><span>'+data.valid_from+'</span></td></tr>\
                    <tr><td>Valid Until</td><td>:</td><td class="text-right"><span>'+data.valid_until+'</span></td></tr>';

        $('#dataPrintTable > tbody').html(tbody)

        $('#printThis').before('<a href="#" class="close" style="margin-left:10px" id="btn-download" ><span class="fa fa-download"></span></a>')
        var button = document.getElementById('btn-download');
        button.addEventListener('click', function (e) {
            debugBase64(unique_code)
        });

        $('#myModal').modal('show');
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    })
    .then(function () {
        // always executed
    });

    // $('#qrcode').qrcode(JSON.stringify(param));
    
    // $('#myModal').modal('show');
}

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
    $('#qrcode').html('');
})

function print(){
    // $('canvas').printThis()
    $('#printThis').printThis({canvas: true})
}

function debugBase64(name){
    html2canvas($('#printThis'), {
        onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
                var base64URL = canvas.toDataURL('image/png'); 
                var newData = base64URL.replace(/^data:image\/png/, "data:application/octet-stream");   
                var download = document.createElement('a');
                download.href = newData;
                download.download = name+'.png';
                download.click();    
            }
        });

    // var childDivs = document.querySelectorAll('#previewImage canvas')

    // var base64URL = childDivs.toDataURL('image/png');    
    // var download = document.createElement('a');
    // download.href = base64URL;
    // download.download = name+'.png';
    // download.click();    
}
</script>
@endsection