@extends('layouts.backend')
@section('title', '| Coupons Usage')

@section('content')
<div class="col-md-12 margin-tb">
  <div class="card">
      <div class="card-header">
      <h3 class="card-title">Coupons Usage</h3>
          <div class="card-tools">
              <div class="pull-right">
				<a class="btn-sm btn-success" href="{{ route('coupons.create') }}"> New </a>
              </div>
          </div>
      </div>
	  <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap text-left">
                <thead>
                    <tr>
                        <th  class="text-left">#</th>
                        <th  class="text-left">User Email</th>
                        <th  class="text-left">User Name</th>
                        <th  class="text-left">Coupon Code</th>
                        <th  class="text-left">Order Id</th>
                        {{-- <th  class="text-left">Actions</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @forelse ($usages as $usage)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $usage->user->email ?? 'N/A' }}</td>
                            <td>{{ $usage->user->name ?? 'N/A' }}</td>
                            <td>{{ $usage->coupon->code ?? 'N/A' }}</td>
                            <td>{{$usage->payment->reference_id  ?? 'N/A' }}</td>
                            {{-- 
                            <td>
                                <a href="{{ route('coupons.edit', $usage->coupon_id) }}" class="btn btn-primary btn-sm">View Coupon</a>
                            </td> 
                            --}}
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">No usage records found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
      </div>
  </div>
</div>
@endsection