@extends('layouts.admin')

@section('style')
<style>
  .select2-container,
  .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
    width: unset !important;
  }
</style>
@endSection

@section('content')

<!-- Main content -->
@component('admin.components.tabs')

<table id="promo_codes_table" class="table table-bordered table-hover dataTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>Code</th>
      <th>Max Use</th>
      <th>Max Use Per User</th>
      <th>Used Count</th>
      <th>Status</th>
      <th>Description</th>
      <th>Created Date</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    @foreach($promo_codes as $promo_code)
    <tr>
      <td></td>
      <td><strong>{{ $promo_code->code }}</strong></td>
      <td>{{ $promo_code->max_use == 0 ? 'Unlimited' : $promo_code->max_use }}</td>
      <td>{{ $promo_code->max_use_per_user }}</td>
      <td>{{ $promo_code->total_usage_count }}</td>
      <td>
        @switch($promo_code->status)
        @case('active')
        <span class="badge badge-success">Active</span>
        @break

        @case('inactive')
        <span class="badge badge-secondary">Inactive</span>
        @break

        @case('expired')
        <span class="badge badge-danger">Expired</span>
        @break

        @default
        <span class="badge badge-secondary">{{ ucfirst($promo_code->status) }}</span>
        @break
        @endswitch
      </td>
      <td>{{ Str::limit($promo_code->description, 50) }}</td>
      <td>{{ $promo_code->created_at->format('d/m/Y H:i') }}</td>
      <td>
        <a href="{{ route('admin.promo_codes.edit', $promo_code->id) }}" class="btn btn-sm btn-primary">
          <i class="fas fa-edit"></i> Edit
        </a>
        <form action="{{ route('admin.promo_codes.destroy', $promo_code->id) }}" method="POST"
          style="display: inline-block;" onsubmit="return confirm('Are you sure you want to delete this promo code?');">
          @csrf
          @method('DELETE')
          <button type="submit" class="btn btn-sm btn-danger">
            <i class="fas fa-trash"></i> Delete
          </button>
        </form>
      </td>
    </tr>
    @endforeach
  </tbody>
</table>
@endcomponent

@endsection

@section('script')
<script>
  $(function () {
            var t = $('#promo_codes_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_promo_code.col-sm-6 mb-2 text-left'><'#export_buttons.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>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                autoWidth: false,
                order: [[7, 'desc']]
            });

            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();

            var create_btn = `<a role='button' href="{{ route('admin.promo_codes.create') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Add New Promo Code</a>`;
            $('#create_promo_code').prepend(create_btn);
        });
</script>
@endSection