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

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Sliders</h3>
            <a href="{{url('sliderCreate',{})}}" 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>Name</th>
                    <th>Slider Image</th>
                    <th>Description</th>
                    <th>Button Text</th>
                    <th>Button Service</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for slider in sliders %}
                    <tr>
                        <td>{{slider.name}}</td>
                        <td>
                            <img src="{{ base_url }}/uploads/slider/image/{{ slider.sliderPicture }}" height="100"
                                 width="100">
                        </td>
                        <td>{{slider.description}}</td>
                        <td>{{slider.buttonText}}</td>
                        <td>{{slider.buttonService}}</td>

                        <td><a href="{{url('sliderEdit',{id:slider.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="{{slider.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 slider?</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,
          'lengthChange': false,
          'searching': false,
          'ordering': true,
          'info': true,
          'autoWidth': false,
          "order": []
        })
      });

    </script>
{% endblock script_content %}