@extends('layouts.app')

@section('link')
    <link rel="stylesheet" href="{{asset('css/dataTables.bootstrap4.min.css')}}" type="text/css" />
    
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">    
    <link href="{{ asset('css/admin_filters.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    .ui-icon::after{
        top:0;
    }
    .ui-icon{
        background: !important;
    }
    
    .dark_bordered_warning{
        vertical-align: baseline;
        padding: 5px 20px;
        margin-bottom: 5px;
    }
    
    .input-sm {
        background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
        height: 36px;
        border-radius: 5px;
        border-color: #aaaaaa;
    }
</style>
@endsection

@section('content')

<div class="row-col">

    <div class="col-sm">
        <div class="padding">
            @include('shared.messages')
            <div class="box">
                <div class="box-header">
                    <div class="pull-right">
                    </div>
                    <h2>Slot Revisions</h2>
                    <small>List of all slot revisions</small>
                </div>    
                
                <form id='reference_create' method="POST" action="{{route('revisions.post_index')}}" role="form" class="form-inline">
                        {{ csrf_field() }}                        
                        
                        <div class="form-inline panel panel-default">    
                            <h3 class="panel-title">Filters</h3>                        

                            <div class="form-group">
                                <div class="input-group">
                                    <div style="display: inline-block; height:40px;margin-left:2px;">
                                        <div class='yadcf-filter-wrapper-inner'>
                                            <input type="text" class="yadcf-filter-range-date" id="date_from" name="date_from" value="{{isset($input['date_from']) ? $input['date_from'] : ''}}" placeholder="Date from"/>
                                            <input type="text" class="yadcf-filter-range-date" id="date_to" name="date_to" value="{{isset($input['date_to']) ? $input['date_to'] : ''}}" placeholder="Date to"/>
                                        </div>
                                    </div>  
                                    <div class="errorBox"></div>
                                </div>  
                            </div>
                            
                            <div class="form-group">
                                <div class="input-group">
                                    <select class="form-control" id="user" name="users[]" data-name="User" multiple>
                                            @foreach($users as $user)
                                            <option value='{{$user->id}}' {{isset($input['users']) && in_array($user->id,$input['users']) ? 'selected' : '' }}>{{$user->first_name.' '.$user->last_name}}</option>
                                            @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="input-group">
                                    <select class="form-control" id="slot" name="slots[]" data-name="Slot" multiple>
                                            @foreach($slots as $slot)
                                            <option value='{{$slot->id}}' {{isset($input['slots']) && in_array($slot->id,$input['slots']) ? 'selected' : '' }}>{{$slot->name}}</option>
                                            @endforeach
                                    </select>
                                </div>
                            </div>                        

                            <div class="form-group">
                                <div class="input-group">
                                    <button id="search_btn" type='submit' class="btn btn-primary btn-submit dark_bordered_warning">Search</button> 
                                    <button type='button' class='btn btn-warning dark_bordered_warning' onclick="reset_filters();" title='Reset filters' data-toggle='tooltip'>Reset filters</button>
                               </div>
                            </div>
                        </div>

                    </form>
                
                <div class="panel-body">
                    <div id="UsersTableHolder">
                        <table id="myTable" class="table table-hover table-striped table-condensed dataTables-example">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>User</th>
                                    <th>Device ID</th>
                                    <th>Device Type</th>
                                    <th>Slot</th>
                                    <th>Value</th>
                                    <th>Date/Time</th>
                                </tr>
                            </thead>
                            @if(isset($revisions))
                            <tbody>  
                                @foreach($revisions as $revision)
                                <tr>
                                    <td>{{$revision->id}}</td>
                                    <td>{{$revision->first_name.' '.$revision->last_name}}</td>
                                    <td>{{$revision->device_id}}</td>
                                    <td>{{isset($device_types[$revision->type_id]) ? $device_types[$revision->type_id]['name'] : ''}}</td>
                                    <td>{{$revision->slot_name}}</td>
                                    <td>{{$revision->value}}</td>
                                    <td>{{date('d.m.Y H:i',strtotime($revision->created_at))}}</td>
                                </tr>   
                                @endforeach
                            </tbody>
                            @endif
                        </table>   
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/datepicker-bg.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>

<script src="{{ asset('js/datatables.min.js') }}"></script> 
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>  


<script type="text/javascript" charset="utf-8">
    
    $('#slot,#user').each(function(){
        var select_element = $(this);
        select_element.chosen({placeholder_text_multiple: '--- '+ select_element.attr('data-name') + ' ---'});
    });
        
    $("#date_from").datepicker({   
        onSelect: function(dateText, inst){
           $("#date_to").datepicker("option","minDate",
           $("#date_from").datepicker("getDate"));
        }
    });

    $("#date_to").datepicker(); 
    
    table = $('.dataTables-example').DataTable({
        pageLength: 100,
        responsive: true,
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "_MENU_  <span style='vertical-align:-moz-middle-with-baseline;margin-left:5px;'>Entries per page</span>" 
            

        },

        "initComplete":function(settings, json) {
            $('select[name="myTable_length"]').chosen();
            $('.input-sm').attr('placeholder','Търсене');
            $('div.dataTables_filter input').css({ marginLeft : "0px"});
            this_table = $('.dataTables-example').dataTable();
            $("a").each(function(){
                if($(this).attr('disabled')=='disabled'){
                    $(this).addClass('not-active');
                }
            }); 
        },
        "dom" : "fl<'#add_price_list'>tip",

    });
    
    function reset_filters(){
        $('#slot,#user').val('').trigger("chosen:updated").change();
        $('#date_from,#date_to').val('');
    }
    
</script>
@endsection