@extends('layouts.admin')

@section('style')
<style>
  .dataTables_filter {
    text-align: center;
  }

  .dataTables_paginate {
    text-align: center;
  }

  .dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;
    margin-right: 10px;
  }

  .pagination {
    float: right;
    text-align: right;
    margin-right: 10px;
  }
</style>
@endsection

@section('script')
<script>
  $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            
            var table = $('.yajra-datatable').DataTable({
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                oLanguage: {
                    sLengthMenu: "_MENU_",
                },
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default',
                    footer: false,
                }],
                autoWidth: true,
                processing: true,
                serverSide: true,
                info: true,
                bInfo: true,
                ajax: "{{ route('admin.sharable_code_logs.codes') }}",
                columns: [
                    {data: 'id', name: 'sharable_codes.id'},
                    {data: 'code', name: 'sharable_codes.code'},
                    {data: 'owner_info', name: 'users.name', orderable: false},
                    {data: 'usage_info', name: 'sharable_codes.use_count'},
                    {data: 'created_at_formatted', name: 'sharable_codes.created_at'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
            });
        });
</script>
@endsection

@section('content')
@component('admin.components.tabs')
@slot('tabs')
<li class="nav-item">
  <a class="nav-link" href="{{ route('admin.sharable_code_logs.index') }}">
    <i class="fas fa-list"></i> All Logs
  </a>
</li>
<li class="nav-item">
  <a class="nav-link active" href="{{ route('admin.sharable_code_logs.codes') }}">
    <i class="fas fa-code"></i> Sharable Codes
  </a>
</li>
@endslot
@endcomponent

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Sharable Codes</h3>
        </div>
        <div class="card-body">
          <table class="table table-bordered yajra-datatable">
            <thead>
              <tr>
                <th>ID</th>
                <th>Code</th>
                <th>Owner</th>
                <th>Usage Count / Total Logs</th>
                <th>Created At</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection