{% extends "header.html.twig" %}

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Promocodes</h3>
            <a href="{{ url('promocodeCreate',{}) }}" class="btn btn-success  pull-right">Add New</a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="usertable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Code</th>
                    <th>Value</th>
                    <th>Status</th>
                    <th>Valid From</th>
                    <th>Expire On</th>
                    <th>No's of Use</th>
                    <th>No's of Used</th>
                    <th>User</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for promocode in promocodes %}
                    <tr>
                        <td>{{ promocode.code }}</td>
                        <td>{{ promocode.value }}</td>
                        <td>{{ promocode.status }}</td>
                        <td>{{ promocode.startDate|date('m/d/Y') }}</td>
                        <td>{{ promocode.endDate|date('m/d/Y') }}</td>
                        <td>{{ promocode.numberOfTimeToUseIt }}</td>
                        <td>{{ promocode.numberOfTimeToUsedIt }}</td>
                        <td>{{ promocode.user|title }}</td>
                        <td><a href="{{ url('promocodeEdit',{id:promocode.id}) }}" class="btn btn-app btn-sm  pull-left"
                               style="padding:5px 10px;;margin:unset;min-width:unset;height:unset"><i
                                        class="fa fa-edit"></i></a>
                            <button data-toggle="modal" data-id="{{ promocode.id }}" data-target="#modal-default"
                                    class="btn pull-left btn-default"><i class="fa fa-trash"></i></button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog" style="width:330px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you would like to remove this promocode?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="model-id" href="#">
                        <button type="button" class="btn btn-primary">Delete</button>
                    </a>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
{% endblock body_content %}
{% block script_content %}
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script>
      $(document).ready(function () {
        $('.btn-default').click(function () {
          var getId = $(this).attr('data-id')
          $('a.model-id').attr('href', 'delete/' + getId)
        })
      })
      $(document).ready(function () {
        $('#usertable').DataTable({
          'paging': true,
          "dom": 'Bfrtip',
          "buttons": [
            'excel', 'pdf'
          ],
          'lengthChange': false,
          'searching': true,
          'ordering': true,
          'info': true,
          'autoWidth': false,
          "order": []
        })
      });
      setTimeout(function () {
        $(".dt-button").addClass('btn btn-primary')
      },300)
    </script>
{% endblock script_content %}