@extends('layouts.app')
@include('plugins.datatables')
@include('plugins.jsonpresenter')

@section('content')

<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Audit Trail / System Log</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('systemconfiguration.audittraillogsystem') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-12">
                                <h2 class="card-title">Audit Trail / System Log</h2>
                            </div>
                            <div class="col-md-8 mt-3">
                                <form class="p-t-10" id="form-search" role="form" autocomplete="off" method="post" action="" novalidate>
                                    <div class="form-group-attached">
                                        <div class="row clearfix">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Activity</label>
                                                    <select  id="activity_id" name="activity_id" class="form-control">
                                                        <option value="" selected="" >Choose one..</option>
                                                        @foreach($all_activity_type as $index => $activity)
                                                        <option value="{{ $activity->id }}">{{ $activity->name_bi }}</option>
                                                        @endforeach
                                                    </select>							
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-3">
                                                <div class="form-group form-group-default form-group-default-custom">
                                                    <label><span>Name / Email <i style="cursor: help; color: #48B0F7;" class="la la-question-circle" data-html="true" data-toggle="tooltip" title="User in charge of the process"></i>  </span></label>
                                                    <input id="search_name" name="search_name" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="timesheetinput3">Report Date From</label>
                                                    <div class="position-relative has-icon-left">
                                                        <input type="date" id="report_date_from" class="form-control" name="report_date_from">
                                                        <div class="form-control-position">
                                                            <i class="ft-message-square"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="timesheetinput3">Report Date To</label>
                                                    <div class="position-relative has-icon-left">
                                                        <input type="date" id="report_date_to" class="form-control" name="report_date_to">
                                                        <div class="form-control-position">
                                                            <i class="ft-message-square"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>    
                                        </div>
    
                                        <!-- <div class="pull-right p-t-10 p-b-10">
                                            <button class="btn btn-default" onclick="resetFilterForm()">Reset</button>
                                            <button class="btn btn-info" type="submit"><i class="la la-search m-r-5"></i> Search</button>
                                            <a href="javascript:;" class="btn btn-danger" onclick="exportPdf()"><i class="la la-file-pdf-o m-r-5"></i> PDF</a>
                                        </div> -->
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-4 mt-5">
                                <div class="form-group form-group-default form-group-default-custom mt-1">
                                    <!-- <button class="btn btn-default" onclick="resetFilterForm()">Reset</button> -->
                                    <button class="btn btn-info" type="submit"><i class="la la-search m-r-5"></i> Search</button>
                                    <a href="javascript:;" class="btn btn-danger" onclick="exportPdf()"><i class="la la-file-pdf-o m-r-5"></i> PDF</a>
                                    <button class="btn btn-default" onclick="resetFilterForm()">Reset</button>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Activity</th>
                                    <th>Module</th>
                                    <th>Details</th>
                                    <th>User</th>
                                    <th>IP Address</th>
                                    <th>Date & Time</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

@endsection
@push('js')
<script type="text/javascript">

var table = $('#table');

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},        
        { data: "activity_type.name", name: "activity_type.name", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "module.name", name: "module.name"}, 
        { data: "description", name: "description"},     
        { data: "created_by_user_id", name: "created_by_user_id", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},   
        { data: "ip_address", name: "ip_address"},        
        { data: "created_at", name: "created_at"},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "destroy": true,
    "iDisplayLength": 20
};

table.dataTable(settings);

$('body').on('submit','#form-search',function(e){

    e.preventDefault();

    var form = $("#form-search");

    if(!form.valid()){
        return false;
    }

    var settings = {
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "ajax": form.attr('action')+"?"+form.serialize(),
        "columns": [
            { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }},        
            { data: "activity_type.name", name: "activity_type.name", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "module.name", name: "module.name"}, 
            { data: "description", name: "description"},     
            { data: "created_by_user_id", name: "created_by_user_id", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},   
            { data: "ip_address", name: "ip_address"},        
            { data: "created_at", name: "created_at"},
            { data: "action", name: "action", orderable: false, searchable: false},
        ],
        "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
        "destroy": true,
        "iDisplayLength": 20
    };

    table.dataTable(settings);

})

// search box for table
$('#search-table').keyup(function() {
    table.fnFilter($(this).val());
});

function view(id) {
    $("#modal-div").load("{{ route('systemconfiguration.audittraillogsystem') }}/"+id);
}

function resetFilterForm() {
    $('#form-search')[0].reset();
    $("#form-search").trigger("reset");
    $('#form-search select').select2().val("").trigger("change");
}

function exportPdf() {

    var form = $("#form-search");
    
    // $("#modal-div").load("{{ route('systemconfiguration.audittraillogsystem') }}/export_log/view?"+form.serialize());

    window.open("{{ route('systemconfiguration.audittraillogsystem') }}/export_log?"+form.serialize());
}

</script>
@endpush