@extends('layouts.app')

@section('content')

    <div class='container'>
    @include('admin.adminheader')
     <!-- Page-Title -->
     <div class="page-title-box">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <h4 class="page-title">Coupons</h4>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
                            <li class="breadcrumb-item active">Coupons</li>
                        </ol>
                    </div>
                </div>
                <!-- end row -->
            </div>

        <div class='row d-flex justify-content-center'>
            <div class='col-md-12'>
            <table id="example" class="table table-striped data-table" style="width:100%">
        <thead>
            <tr class='dt-row'>
                <th>ID</th>
                <th>Closer Name</th>
                <th>Coupon Code</th>
                <th>Discount Price</th>
                <th>Used</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
            </div>
        </div>
    </div>


<script type="text/javascript">
  $(function () {
      
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('coupons') }}",
        columns: [
            {data: 'id'},
            {data: 'closer_name'},
            {data: 'code'},
            {
                data: 'discount_price',
                render: function (data, type, row) {
                    return '$' + data;
                }
            },
            { data: 'usage_count', name: 'usage_count', orderable: true, searchable: true }
            ],
            order: [[4, 'desc']]
    });
      
  });
</script>

@endsection