@extends('layouts.base2')
@section('title', 'Interface de gestion des audiences')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush
@section('content')
    @section('titlePage')
        <h1 class="m-0" style="color: #18528d"><i class="fas fa-clipboard-list me-2"></i> Audit du système</h1>
    @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">
        @include('layouts.flash-message')
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                        role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Journalisations</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        <div class="row">
                                            <table class="table table-hover table-striped align-middle" id="journalisation" style="width: 100%;">
                                                <thead>
                                                    <tr>
                                                        <th><span class="color-ico-barreau"> N°</span></th>
                                                        <th>UTILISATEUR</th>
                                                        <th>OPERATION</th>
                                                        <th>MODEL</th>
                                                        <th>DATE</th>
                                                        <th>DETAILS</th>

                                                    </tr>

                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@stop
@section('footer')

    <script>

        $(document).ready(function() {

        });

        if ($.fn.DataTable.isDataTable('#journalisation')) {
                $('#journalisation').DataTable().destroy();
            }

        var table = $('#journalisation').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: "{!! route('data.audit.systeme') !!}",
            columns: [
                {data: 'numero', name: 'numero'},
                {data: 'user', name: 'user'},
                {data: 'event', name: 'event'},
                {data: 'auditable_type', name: 'auditable_type'},
                {data: 'created_at', name: 'created_at'},
                {data: 'details', name: 'details'}
            ]
        });

    </script>

@stop