@extends('layouts/app')
@section('css')
<style type="text/css" nonce="{{ csp_nonce() }}">
    .text_get {
        color: #0d6efd;
    }
    .text_update {
        color: #198754;
    }
    .text_create {
        color: #fd7e14;
    }
    .text_search {
        color: #6f42c1;
    }
    .text_login {
        color: #0d6efd;
    }
</style>
@stop
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">Logs</li>
                    <li class="breadcrumb-item"><a href="{{route('logs.logActivity')}}">Log Activities</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <form action="{{ route('logs.logActivity')}}" method="post" id="form">
                @csrf
                <div class="card">
                @if(Session::has('message'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h5><i class="icon fas fa-check"></i> Success!</h5>
                    {{ Session::get('message') }}
                    @php
                    Session::forget('message');
                    @endphp
                </div>
                @endif
                @if(Session::has('error'))
                <div class="alert alert-danger">
                    <h5><i class="icon fas fa-x"></i> Errors!</h5>
                    @foreach(Session::get('error') as $err)
                    {{ $err }}<br>
                    @endforeach
                    @php
                    Session::forget('error');
                    @endphp
                </div>
                @endif
                <div class="container mt-3">
                    <div class="card-tools">
                        <div class="input-group input-group-sm">
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">Module</label>
                                    <select id="branch" class="form-control mr-2" name="module">
                                        <option value="">Select Module</option>
                                        @foreach($modules as $module)
                                        <option value="{{ $module->module }}" @if(isset($_POST['module']) && $module->module == $_POST['module']) selected="selected" @endif>{{ $module->module }}</option>
                                        @endforeach
                                    </select>                       
                                </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">From Date</label>
                                    <div class='input-group date datetimepicker' id='datetimepicker1'>
                                        <input type='date' value="{{ $_POST['date_from'] ?? date('Y-m-d', strtotime('-1 month')) }}"
                                            class="form-control" name="date_from" id="date_from" max="{{date('Y-m-d')}}"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">To Date</label>
                                    <div class='input-group date datetimepicker' id='datetimepicker2'>
                                        <input type='date' value="{{ $_POST['date_to'] ?? date('Y-m-d') }}"
                                            class="form-control" name="date_to" id="date_to" max="{{date('Y-m-d')}}"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm">
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div>
                                    <button type="submit" value="sub" class="btn btn-default">
                                        <i class="fas fa-search"></i>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    @if(!empty($logs))
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>Updated At</th>
                                <th>User Name</th>
                                <th>Module</th>
                                <th>Type</th>
                                <th>Level Name</th>
                                <th>Message</th>
                                <th>Remote IP</th>
                                <th>Browser</th>
                                <th>Operating System</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($logs as $log)
                            <tr data-widget="expandable-table" aria-expanded="false">
                              <td>{{ $log->updated_at->format('d/m/Y H:i:s') }}</td>
                              <td>{{ $log->user_name }}</td>
                              <td>{{ $log->module }}</td>
                              <td class="text_{{$log->activity_type}}">{{ $log->activity_type }}</td>
                              <td>{{ $log->level_name }}</td>
                              <td>{{ $log->message }}</td>
                              <td>{{ $log->remote_ip }}</td>
                              <td>{{ $log->browser }}</td>
                              <td>{{ $log->operating_system }}</td>
                            </tr>
                          @endforeach                            
                        </tbody>
                    </table>
                    @else
                    <div class="card-body">
                        <h6 align='center'>No data found</h6>
                    </div>
                    @endif
                    <div class="card-footer clearfix ">
                        <div class="pagination pagination-sm m-0 float-right">
                            @if(!empty($logs))
                            {{ $logs->links('pages.pagination') }}
                            @endif
                        </div>
                    </div>
                </div>
              </div>
            </form>
        </div>
      </div>
    </div>
</div>
</div>
@endsection
@section('js')
<script nonce="{{ csp_nonce() }}">

    $('input[name="date_from"]').on('change', function() {
        var value =  $(this).val();

        var today = new Date();
        var tyear = today.getFullYear();
        var tmonth = (today.getMonth() + 1).toString().padStart(2, '0');
        var tday = today.getDate().toString().padStart(2, '0');

        var newDate = new Date(value);
        newDate.setMonth(newDate.getMonth() + 1);
        var year = newDate.getFullYear();
        var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
        var day = newDate.getDate().toString().padStart(2, '0');

        var formattedDate = year + '-' + month + '-' + day;
        var tformattedDate = tyear + '-' + tmonth + '-' + tday;

        fdate = $('#date_from').val();
        edate = $('#date_to').val();

        if(new Date(formattedDate) > new Date(tformattedDate)) {
            $('#date_to').val(tformattedDate);
        }
        else if((new Date(edate) > new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
            $('#date_to').val(formattedDate);
        }

        // $('#date_to').attr("min", value);
        $('#date_to').attr("max", tformattedDate);
    });

    $('input[name="date_to"]').on('change', function() {
        var value =  $(this).val();

        var newDate = new Date(value);
        newDate.setMonth(newDate.getMonth() - 1);
        var year = newDate.getFullYear();
        var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
        var day = newDate.getDate().toString().padStart(2, '0');

        var formattedDate = year + '-' + month + '-' + day;

        fdate = $('#date_from').val();
        edate = $('#date_to').val();
        
        if((new Date(fdate) < new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
            $('#date_from').val(formattedDate);
        }
    });
</script>
@stop