@extends('backend.layouts.master')

@section('main-content')
 <!-- DataTales Example -->
 <div class="card shadow mb-4">
     <div class="row">
         <div class="col-md-12">
            @include('backend.layouts.notification')
         </div>
     </div>
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary float-left">All Promo Codes </h6>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        @if(!empty($allPromo))
        <table class="table table-bordered" id="product-dataTable" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>ID</th>
              <th>User Name</th>
              <th>Email</th>
              <th>Promo</th>
              <th>Points</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>ID</th>
              <th>User Name</th>
              <th>Email</th>
              <th>Promo</th>
              <th>Points</th>
              <th>Created At</th>
            </tr>
          </tfoot>
          <tbody>

            @foreach($allPromo as $promo)
                <tr>
                    <td>{{$promo->id}}</td>
                    <td>
                      @php
                        $user = DB::table('users')->where('id', $promo->user_id)->first(['email', 'name']);
                      @endphp
                      {{ !empty($user) ? $user->name : '' }}
                    </td>
                    <td> {{ !empty($user) ? $user->email : '' }} </td>
                    <td>{{$promo->promo_code}}</td>
                    <td>{{$promo->points}}</td>
                    <td>{{ date('d-m-Y', strtotime($promo->created_at)) }}</td>
                </tr>
            @endforeach
          </tbody>
        </table>
       
        @else
          <h6 class="text-center">No Promo Codes found!!!</h6>
        @endif
      </div>
    </div>
</div>
@endsection

@push('styles')
  <link href="{{asset('backend/vendor/datatables/dataTables.bootstrap4.min.css')}}" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
  <style>
      div.dataTables_wrapper div.dataTables_paginate{
          display: none;
      }
      .zoom {
        transition: transform .2s; /* Animation */
      }

      .zoom:hover {
        transform: scale(5);
      }
  </style>
@endpush

@push('scripts')

  <!-- Page level plugins -->
  <script src="{{asset('backend/vendor/datatables/jquery.dataTables.min.js')}}"></script>
  <script src="{{asset('backend/vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

  <!-- Page level custom scripts -->
  <script src="{{asset('backend/js/demo/datatables-demo.js')}}"></script>
  <script>

      $('#product-dataTable').DataTable( {
          scrollX: false,
          order: [[0, 'desc']],
        } );
  </script>
     
@endpush
