@extends('layouts.dashboard')


@section('title-content')
    <title>{{ config('app.name') }} | Audits Index</title>
@endsection

@section('content')
    <div class="content">
        <div class="boxpane">
            <div class="boxpane-header">
                <h2 class="blue"><i class="fa-fw fa fa-dashboard"></i>
                    Audits Dashboard
                </h2>

                <div class="boxpane-icon">
                    <ul class="btn-tasks">
                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#">
                                <i class="icon fa fa-tasks" data-placement="left" title="{{ 'Actions' }}"></i>
                            </a>

                        </li>
                    </ul>
                </div>
            </div>
            <div class="boxpane-content">
                <div class="row">
                    <div class="col-md-12">
                        <p class="introtext">

                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                            {{-- <a class="navbar-brand" href="#">Navbar</a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                              <span class="navbar-toggler-icon"></span>
                            </button> --}}

                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="navbar-nav mr-auto">
                                    {{-- <li class="nav-item active">
                                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li> --}}
                                    {{-- <li class="nav-item">
                                  <a class="nav-link" href="#">Link</a>
                                </li>
                                <li class="nav-item dropdown">
                                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                  </a>
                                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                  </div>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link disabled" href="#">Disabled</a>
                                </li> --}}
                                </ul>
                                <form class="form-inline my-2 my-lg-0" action="" method="POST">
                                    @csrf
                                    <input class="form-control mr-sm-2" type="search" name="search" placeholder="Search"
                                        aria-label="Search">
                                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                                </form>
                            </div>
                        </nav>
                        </p>
                        <div class="row">
                            <div class="col-md-12">
                                <div style="position: relative" class="audit-list">

                                    <ul class="list-group">


                                        @foreach ($audits as $item)
                                            <li class="Twitter"><a
                                                    href="{{ route('audits.show', $srs->encode($item->id)) }}">
                                                    <h3>{{ $item->first_name . ' , ' . $item->last_name }}</h3>
                                                    <p>event: {{ $item->event }}, </p>
                                                    <p>auditable type:

                                                        , </p>
                                                    <p class="small">date: {{ $item->created_at }}</p>


                                                    <i class="fa fa-eye"></i>
                                                </a>


                                            </li>
                                        @endforeach

                                    </ul>

                                </div>


                            </div>
                        </div>
                        <div class="row">

                            <div class="col-md-3 mt-3 offset-col-sm-9">

                                {{ $audits->links() }}
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('assets/dashboard/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- X-editable Plugin -->
    <script src="{{ asset('assets/plugins/moment/moment.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>


    <script type="text/javascript">
        // $('#index_type').select2({
        //     minimumResultsForSearch: -1,
        //     placeholder: 'Select Level Index',
        // });
        // $('#srs,#sps,#acs,#dvs,#ras,#gender,#program').select2({
        //     minimumResultsForSearch: -1,
        //     // placeholder: 'Select SRS',
        // });
        $(document).ready(function() {
            let auditsTable = $('#auditsTable').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false,
                // responsive:true,
                ajax: '{{ route('audits.get-audits') }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'id'
                    },
                    {
                        data: 'auditable_type',
                        name: 'auditable_type'
                    },
                    {
                        data: 'event',
                        name: 'event'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    // {data: 'old_values', name: 'old_values'},
                    // {data: 'new_values', name: 'new_values'},
                ]
            });
            // $('#filter-form').on('submit', function (e) {
            //     auditsTable.draw();
            //     e.preventDefault();
            // });
        });
    </script>
@endsection
@section('css')
    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto:400,900");

        body {
            font-family: "Roboto", sans-serif;
            background-color: #f2f2f2;
            line-height: 1.2;
        }

        .audit-list ul {
            /* width: 60vw;
          padding: 0;
          margin: 0; */
            list-style: none;
            /* position: relative;
          top: 50%;
          left: 50%; */
            /* transform: translate(-50%, -50%); */
        }

        @media (max-width: 840px) {
            ul {
                width: 80vw;
            }
        }

        .audit-list ul li {
            border-bottom: 2px solid #e6e6e6;
            position: relative;
            overflow: hidden;
            transition: 0.2s ease-in-out;
        }

        .audit-list ul li a {
            display: block;
            padding: 20px;
            text-decoration: none;
            color: #222;
            transition: 0.2s ease-in-out;
        }

        .audit-list ul li a h3 {
            margin: 0 0 10px;
            font-size: 20px;
            font-weight: 900;
        }

        .audit-list ul li a p {
            margin: 0;
            font-size: 20px;
            max-width: calc(100% - 110px);
        }

        .audit-list ul li a i {
            position: absolute;
            top: 50%;
            right: 50px;
            transform: translatey(-50%);
            font-size: 20px !important;
            opacity: 0.25;
        }

        /* ul li.Twitter:hover {
          background-color: #55acee;
        }
        ul li.Dribbble:hover {
          background-color: #ea4c89;
        }
        ul li.GitHub:hover {
          background-color: #333;
        } */
        .audit-list ul li:hover {
            box-shadow: 0 10px 15px 0 #e6e6e6;
        }

        .audit-list ul li:hover>a {
            /* color: #fff;
          background-color: #333; */
        }

        .audit-list ul li:first-child {
            border-top: 2px solid #e6e6e6;
        }

        .audit-list p.small {

            font-size: 14px;
        }
    </style>
@endsection