@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">
@endsection


@section('content')

<div class="row">
@include('shared.messages')
    <div class="col-sm">
        <div class="box">
            <div class="box-header">
                <ul class="nav nav-tabs" id="myTab" role="tablist" style="padding: 10px 0 0 10px;">
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('devices.index')}}"><h4>Devices</h4></a>
                    </li>
                    @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Admin Guest')
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('new_devices.index')}}"><h4>New Devices</h4></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{{route('device_types.index')}}"><h4>Devices Types</h4></a>
                    </li>
                    @endif
                    @if(auth()->user()->role!='Installer')
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('devices.attach')}}"><h4>Attach devices</h4></a>
                    </li>
                    @endif
                </ul>
                <small>{{'List of all devices types'}}</small>

                <div class="pull-right">                       
                    @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin')
                    <a id="AddNewDeviceType" href="{{route('device_types.create')}}" class="btn btn-sm white">
                        New Device Type
                    </a>
                    @endif
                </div>
            </div>                

            <div class="panel-body">
                <div id="UsersTableHolder">
                    <table id="myTable" class="table table-hover table-striped table-condensed dataTables-example">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Model</th>
                                <th>Identificator</th>
                                <th>Protocol Version</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>  
                            @foreach($device_types as $device_type)
                            <tr>
                                <td>{{$device_type->device_name}}</td>
                                <td>{{$device_type->model}}</td>
                                <td>{{$device_type->identificator}}</td>
                                <td>{{$device_type->protocol_version}}</td>
                                <td class="text-center">
                                    <a id="View" href="{{route('trees.index',$device_type->id)}}"><i class="material-icons md-24">list</i></a>
                                    <a id="View" href="{{route('device_types.show',$device_type->id)}}"><i class="material-icons md-24">info</i></a>    
                                    @if(auth()->user()->role->role=='Admin')
                                    <a id="Edit" href="{{route('device_types.edit',$device_type->id )}}"><i class="material-icons md-24">settings</i></a>                                    
                                    <button type="button" class="anchor-btn" onclick="delete_device_type({{$device_type->id}})"><i class="material-icons md-24">delete</i></butotn>
                                    @endif
                                </td>
                            </tr>   
                            @endforeach
                        </tbody>
                    </table>                        
                </div>
            </div>
        </div>
    </div>
</div>

<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>
    
    table = $('.dataTables-example').DataTable({
        pageLength: 100,
        responsive: true,
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "_MENU_  <span style='vertical-align:-moz-middle-with-baseline;margin-left:5px;'>Резултата на страница</span>",  
            "sInfo": "Показване на записи от _START_ до _END_ от общо _TOTAL_ записа",
            "sZeroRecords": "Не са намерени записи по зададените параметри",
            "sInfoEmpty": "Не са намерени записи по зададените параметри",
            "sInfoFiltered" : "- филтрирани от _MAX_ записа",
            "sLoadingRecords" : "Резултатите се зареждат, моля изчакайте...",
            "oPaginate": {
                                    "sNext": "Следваща страница",
                                    "sPrevious": "Предишна страница",
                              },

        },
        "columnDefs": [
                        { "orderable": false, "targets": 4 }
                      ],
        "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();
        },
        "dom" : "fl<'#add_package'>tip",

    });

    function delete_device_type(id){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/ajax_delete_device_type',
                    type: 'POST',
            data: { 'id' : id},
            beforeSend:function(){
                return confirm("Are you sure you want to delete this Device Type?");
            },
            success: function(response){
                        $("button[data-dismiss=\"modal\"]").click();
                        if(response.warning){
                            alert(response.warning);
                        }
                        else{
                            alert(response.success);
                            location.reload();
                        }
                    }
        });    
    }
    
</script>

@endsection