@extends('layouts.admin')

@section('style')
<link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.css') }}">
<style>
  .stats-card {
    background: #fff;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .stats-card h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: bold;
  }

  .stats-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
  }
</style>
@endSection

@section('content')

<!-- Stats Cards -->
<div class="card mb-3 mx-3">

  <div class="row mb-3">
    <div class="col-md-3">
      <div class="stats-card">
        <h3>{{ $stats['today'] }}</h3>
        <p>Uses Today</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card">
        <h3>{{ $stats['this_week'] }}</h3>
        <p>Uses This Week</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card" style="border-left: 3px solid #28a745;">
        <h3 class="text-success">{{ $stats['success'] }}</h3>
        <p>Successful</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card" style="border-left: 3px solid #dc3545;">
        <h3 class="text-danger">{{ $stats['failed'] }}</h3>
        <p>Failed</p>
      </div>
    </div>
  </div>
</div>

<!-- Filters -->
<div class="card mb-3 mx-3">
  <div class="card-body">
    <form method="GET" action="{{ route('admin.promo_code_usage_logs.index') }}">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label>Promo Code</label>
            <select name="promo_code_id" class="form-control">
              <option value="">All Codes</option>
              @foreach($promo_codes as $code)
              <option value="{{ $code->id }}" {{ ($filters['promo_code_id'] ?? '' )==$code->id ? 'selected' : '' }}>
                {{ $code->code }}
              </option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label>Start Date</label>
            <input type="date" name="start_date" class="form-control" value="{{ $filters['start_date'] ?? '' }}">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label>End Date</label>
            <input type="date" name="end_date" class="form-control" value="{{ $filters['end_date'] ?? '' }}">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label>&nbsp;</label>
            <div>
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-filter"></i> Filter
              </button>
              <a href="{{ route('admin.promo_code_usage_logs.index') }}" class="btn btn-default">
                <i class="fas fa-times"></i> Clear
              </a>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

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

<table id="usage_logs_table" class="table table-bordered table-hover dataTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>ID</th>
      <th>Promo Code</th>
      <th>User</th>
      <th>User Email</th>
      <th>Status</th>
      <th>Used At</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    @foreach($usage_logs as $log)
    <tr>
      <td></td>
      <td>{{ $log->id }}</td>
      <td>
        <strong>{{ $log->promoCode->code ?? 'N/A' }}</strong>
        @if($log->promoCode)
        <br>
        <small class="text-muted">{{ Str::limit($log->promoCode->description, 30) }}</small>
        @endif
      </td>
      <td>{{ $log->user->name ?? 'User #' . $log->user_id }}</td>
      <td>{{ $log->user->email ?? 'N/A' }}</td>
      <td>
        @if($log->status === 'success')
        <span class="badge badge-success">Success</span>
        @elseif($log->status === 'failed')
        <span class="badge badge-danger">Failed</span>
        @if($log->error_message)
        <br><small class="text-muted" title="{{ $log->error_message }}">{{ Str::limit($log->error_message, 30)
          }}</small>
        @endif
        @else
        <span class="badge badge-secondary">{{ ucfirst($log->status ?? 'Unknown') }}</span>
        @endif
      </td>
      <td>{{ $log->used_at->format('d/m/Y H:i:s') }}</td>
      <td>
        <a href="{{ route('admin.promo_code_usage_logs.show', $log->id) }}" class="btn btn-sm btn-info">
          <i class="fas fa-eye"></i> View
        </a>
      </td>
    </tr>
    @endforeach
  </tbody>
</table>
@endcomponent

@endsection

@section('script')
<script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script>
  $(function () {
            var t = $('#usage_logs_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#back_button.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: [[5, '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 back_btn = `<a role='button' href="{{ route('admin.promo_codes.index') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-arrow-left"></i> Back to Promo Codes</a>`;
            $('#back_button').prepend(back_btn);
        });
</script>
@endSection