@extends('layouts.master')

@section('content')
  @include('pages.auth.order.nav')
  @include('pages.auth.order.promotional-codes-form-modal')
  <div class="container">
    <div class="mb-1 mt-5 row">
      <div class="table-responsive">
        @if ($error ?? false)
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ $error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif
        <table class="table table-bordered table-striped text-center">
          <thead>
            <tr>
              <th>Code ID</th>
              <th>Creation Date</th>
              <th>Created By</th>
              <th>Discount Amount</th>
              <th>Sent To</th>
              <th>Active Until</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            @foreach($promotionalCodes as $promotionalCode)
              <tr>
                <td>{{ $promotionalCode->code }}</td>
                <td>{{ date('m/d/y g:iA', strtotime($promotionalCode->date_creation)) }}</td>
                <td>{{ $promotionalCode->creator_login }}</td>
                <td>{{ $promotionalCode->discount }}%</td>
                <td>{{ $promotionalCode->customer_name }}</td>
                <td>{{ date('m/d/y g:iA', strtotime($promotionalCode->date_expiration)) }}</td>
                <td>{{ $promotionalCode->status }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

    <div class="mt-4 row">
      <div class="col text-center">
        <div class="d-grid gap-2 d-lg-block">
          <button type="button" id="newCode" class="btn btn-primary btn-lg">Generate New Code</button>
        </div>
      </div>
    </div>
  </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    jQuery(function() {
      $('#expireDate').datepicker({ 
          startDate: new Date(),
          format: 'yyyy-mm-dd',
          autoclose: true
      })

      $('#newCode').on('click', function() {
        $('#promotionalCodeForm').modal('show')
      })
    })
  </script>
@endsection