@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
<style>
    .group {
        background-color: black;
        color:white;
    }
</style>
@stop

@section('content')
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-01">Dashboard</h2>

                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="row flex-row">
            <div class="col-xl-12">
                <table id="example"  class="display table mb-0 table-bordered" style="width:100% !important;">
                    <thead>
                    <tr>
                        <th>Subscription</th>
                        <th>Price</th>
                        <th>Name</th>
                        <th>Start Date</th>
                        <th>Trial End</th>
                        <th>Next Payment</th>
                        <th>Last Payment</th>
                        <th>Option</th>
                    </tr>
                    </thead>
                    <tbody>
                    @for($x=1;$x<=10;$x++)
                        @for($y=1;$y<=3;$y++)
                        <tr>
                            <td>Real Time Reviews</td>
                            <td>$149 / mo</td>
                            <td>John Doe {{$x}}</td>
                            <td>{{date('Y/m/d')}}</td>
                            <td>{{date('Y/m/d')}}</td>
                            <td>In {{rand(2,15)}} days</td>
                            <td>{{rand(16,29)}} days ago</td>
                            <td>OPTIONS HERE</td>
                        </tr>
                        @endfor
                    @endfor
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>Subscription</th>
                        <th>Price</th>
                        <th>Start Date</th>
                        <th>Trial End</th>
                        <th>Next Payment</th>
                        <th>Last Payment</th>
                        <th>Option</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <!-- End Row -->

    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
{{--    <script src="{{asset('assets/vendors/js/datatables/datatables.min.js')}}"></script>--}}
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        $(function(){
                var groupColumn = 2;
                var table = $('#example').DataTable({
                    "columnDefs": [
                        { "visible": false, "targets": groupColumn }
                    ],
                    "order": [[ groupColumn, 'asc' ]],
                    "displayLength": 25,
                    "drawCallback": function ( settings ) {
                        var api = this.api();
                        var rows = api.rows( {page:'current'} ).nodes();
                        var last=null;

                        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                            if ( last !== group ) {
                                $(rows).eq( i ).before(
                                    '<tr class="group"><td colspan="7">'+group+'</td></tr>'
                                );

                                last = group;
                            }
                        } );
                    }
                } );

                // Order by the grouping
                $('#example tbody').on( 'click', 'tr.group', function () {
                    var currentOrder = table.order()[0];
                    if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
                        table.order( [ groupColumn, 'desc' ] ).draw();
                    }
                    else {
                        table.order( [ groupColumn, 'asc' ] ).draw();
                    }
                } );
            } );
    </script>
@stop