@extends('layouts.app')

@section('css')
    <link href="./assets/vendor/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container-fluid">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Course Buyer List</h4>
                    </div>
                    <div id="response"></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example3" class="display mb-2" style="min-width: 845px">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Image</th>
                                        <th>Code</th>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Course Category</th>
                                        <th>Status</th>
                                        <th>Price</th>
                                        <th>Duration</th>
                                        <th>Purchased By</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="./assets/vendor/datatables/js/jquery.dataTables.min.js"></script>
    {{-- <script src="./assets/js/plugins-init/datatables.init.js"></script> --}}
    <script>
        var token = sessionStorage.getItem('token');
        var url = "{{ env('APP_URL') }}";

        function displayData() {

            $.ajax({
                type: "GET",
                url: url + "/list-course",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(msg) {
                    // console.log(msg);
                    if (msg.success) {
                        var json = msg.data.course;
                        var row = '';
                        $.each(json, function(index, obj) {
                            console.log(obj);
                             row += '<tr><td> ' + obj.id + ' </td> <td><img class="" width="35" src="'+obj.image+'" alt=""></td> <td> ' + obj.code + ' </td> <td> ' + obj.name +
                                ' </td><td>'+obj.description+'</td> <td>'+obj.categories_name+'</td> <td> ' + obj.status + ' </td> <td> ' + obj.price + ' </td><td>'+ obj.duration +' Month</td><td><a href="