@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>Name</th>
                                <th>Address</th>
                                <th>Phone</th>
                                <th>Opent At</th>
                                <th>Close At</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 modal-lg" role="document">
    <div class="modal-content">
      {{-- <div class="modal-header text-right">
    </div> --}}
        <div class="modal-body" style="max-height: 800px;">
            <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:530; margin:0 auto;background-color: white;">
                <div id="qrcode" style="display: flex; justify-content: center; text-align: center; ">
                </div>
                
                <table id="dataPrintTable" width="100%" style="margin:0 auto;">
                    <thead>
                        <tr>
                           <td colspan="3">
                               <h3 class="text-center" style="margin: 0 auto;"><strong><span id="name_cafe"></span></strong></h3>
                           </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 load this Voucher</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p style="font-size: 10px;padding-left:10px;margin-bottom:0px;">
                                    <label style="margin-bottom:0px;">1. Login to UnionSpace App</label>
                                    <label style="margin-bottom:0px;">2. Clabelck on Scan Now</label>
                                    <label style="margin-bottom:0px;">3. Scan this QR code</label>
                                    <label style="margin-bottom:0px;">4. The privilages on this Voucher will be loaded into your account</label>
                                </p>                                
                            </td>
                        </tr> --}}
                        <tr>
                            <td colspan="3">
                                <p style="width: 100%;
                                    text-align: center;
                                    border-bottom: 1px solid black;
                                    line-height: 0.1em;
                                    margin: 10px 0; "></p>
                                {{-- <hr style=" border: 1px solid black;margin: 0 0;">                                 --}}
                                <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="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.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": '{{route("cafe.datatable")}}', 
    "columns": [            
            { "name": "name", "data": "name" },
            { "name": "address", "data": "address" },
            { "name": "phone", "data": "phone" },
            { "name": "open_at", "data": "open_at" },
            { "name": "close_at", "data": "close_at" },    
            { "data": null, "orderable": false, "searchable": false },
        ],
    "order" :[[ 0, 'desc' ]],
    "columnDefs": [ {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {   
            // console.log(data)         
            // var newArr = window.btoa(JSON.stringify(data))
            var newArr = data.name

            var route = "{{url()->full()}}/"+data.id
            var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';
            action += '<button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
            action += '<button class="btn btn-outline-primary" onclick="show(\''+route+'\')"><span class="fa fa-pencil"></span></button>&nbsp;'
            action += '<button class="btn btn-outline-info" onclick="printqr(\''+newArr+'\', \''+data.id+'\')"><span class="fa fa-qrcode"></span></button>&nbsp;'
            action += '<button class="btn btn-outline-danger" onclick="deleted(\''+data.id+'\', \''+data.name+'\')"><i class="fa fa-trash"></i></button>&nbsp;'
            action += '</div>';
            return action            
        }
    },
    ],
})

function deleted(id, name){
    Swal({ title: 'Are you sure?', text: "You want to delete "+name+"!", type: 'warning', showCancelButton:true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result)=> { if (result.value) {
        unity_delete(id, name, '{{url("cafe")}}/'+id)

    } })
}

function printqr(data, id){
    var param = {type:9, location:id};
    // 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()
        $('#name_cafe').html(data)
        $('#qrcode').html('<canvas id="canvas" width="512" height="512"></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(data)
        });

        $('#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();    
            }
        });
}

let getPromotions = (id) => {
    axios.get('{{url("cafe-promotions-datatable")}}/'+id+'?columns[0][name]=op.cafe_id&columns[0][searchable]=true&columns[0][search][value]='+id, config) .then(function (response) {
                // console.log(response.data.data[0]) 
                let valpromo = response.data;
                result = '<ul>';

                for (const keypromo in valpromo) {
                    if (valpromo.hasOwnProperty(keypromo)) {
                        result += '<li>' +valpromo[keypromo].promotions+ '</li>'
                    }
                }
                result += '</ul>';
                result += '<br><button type="button" class="btn btn-outline-secondary" onclick="show(\'{{url()->full()}}/'+id+'\')">Manage Promotions</button>'

                $('#promotion_'+id).html(result)

            })
            .catch(function (error) {                 
                console.log(error);
                $('.loadingpart').remove();
            });
}

</script>
@endsection

@section('addCustomInfo')
if(v.name == 'image'){
    if(valuename != null){
        valuename = '<img class="img-responsive" src="'+valuename+'" alt="your image" style="max-height:500px;max-width:100%;width: expression(this.width > 500 ? 500: true);"/>&nbsp;&nbsp;&nbsp;'
    }
}

@endsection

@section('moreinfoJsLg')
    result += '<tr>'+
                    '<td width="30%"><strong>Promotion</strong></td>'+
                    '<td id="promotion_'+data.id+'"></td>'+
                '</tr>';

    getPromotions(data.id)
@endsection