@extends('layouts.master')
@section('title') @lang('translation.Data_Tables') @endsection
@section('css')

<!-- DataTables -->
<link href="{{ URL::asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"/>
@endsection
@section('content')

@include('components.breadcum')

<div class="row">
    <div class="col-12">
        {!! success_error_view_generator() !!}
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive ">
                <table id="listResults" class="table dt-responsive mb-4  nowrap w-100 mb-">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Username</th>
                            <!-- <th>Email</th> -->
                            <th>Transaction id</th>
                            <!-- <th>Purchase token</th> -->
                            <th>Price</th>
                            <th>Start date</th>
                            <th>End date</th>
                            <!-- <th>Device type</th> -->
                            <!-- <th>Plan id</th>
                            <th>Package name</th> -->
                            <th>Sessions</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- Required datatable js -->
<script src="{{asset('/assets/admin/vendors/general/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('/assets/admin/vendors/general/datatable/jquery.dataTables.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#listResults').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [
                [0, "DESC"]
            ],
            "ajax": "{{route('admin.product_transactions.listing')}}",
            "columns": [
                {"data": "id",searchable: false,sortable: false},
                {"data": "username",searchable: false,sortable: false},
                // {"data": "email",searchable: false,sortable: false},
                {"data": "transaction_id",searchable: false,sortable: false},
                // {"data": "purchase_token",searchable: false,sortable: false},
                {"data": "price",searchable: false,sortable: false},
                {"data": "start_date",searchable: false,sortable: false},
                {"data": "end_date",searchable: false,sortable: false},
                // {"data": "device_type",searchable: false,sortable: false},
                // {"data": "plan_id",searchable: false,sortable: false},
                // {"data": "package_name",searchable: false,sortable: false},
                {"data": "total_meeting",searchable: false,sortable: false},
                {"data": "status",searchable: false,sortable: false},
                {"data": "action",searchable: false,sortable: false}
            ]
        });
    });
</script>
@endsection