@extends('layouts.admin_master')
@section('content')



<div class="card mb-4">
    <div class="card-header">
        <i class="fas fa-table mr-1"></i>
        Pasien List
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>barcode</th>
                        <th>registration date</th>
                        <th>service date</th>
                        <th>action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>                        
        </div>
    </div>
</div>
@endsection
@section('script')
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />

<script>
    $('#dataTable').DataTable({
        ajax: "http://10.10.123.135:8083/api/v1/visit",
        columns: [{
                mData: 'barcode',
                 "render": function ( data) {
                    return '<img src="https://api.qrserver.com/v1/create-qr-code/?size=50x50&data='+data.barcode+'">';}
            },
            {
                mData: 'registration_date'
            },
            {
                mData: 'service_date'
            },
            {
                mData: "id",
                "render": function ( data) {
                    return `
                    <div class="btn-group mr-2" role="group" aria-label="First group">
                        <button type="button" onclick="alert('Coming Soon')" class="btn btn-primary btn-sm">Detail</button>
                        <button type="button" onclick="alert('Coming Soon')" class="btn btn-success btn-sm">Edit</button>
                        <button type="button" onclick="alert('Coming Soon')" class="btn btn-danger btn-sm">Batal</button>
                    </div>
                    `
                }
            }
        ],
        pagination : false
    })
</script>

@endsection