@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="padding">
            <div class="box">
                <div class="box-header">
                    <div class="pull-right">
                        <button class="btn btn-sm white pull-right hidden-sm-up" ui-toggle-class="show" target="#inbox-menu">
                            <i class="fa fa-bars"></i>
                        </button>
                        @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin')
                        <a id="AddNewDeviceType" href="{{route('slots.create',$tree->id)}}" class="btn btn-sm white">
                            New Slot
                        </a>
                        @endif
                    </div>
                    <h2>{{$tree->name}} slots</h2>
                    <small>List of {{$tree->name}} slots</small>
                </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>Tree</th>
                                    <th>Menu index</th>
                                    <th>DIR</th>
                                    <th>Data Type</th>
                                    <th>Visible</th>
                                    <th>Visual element id</th>
                                    <th>Min</th>
                                    <th>Max</th>
                                    <th>Step</th>
                                    <th>Unit</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>  
                                @foreach($slots as $slot)
                                <tr>
                                    <td>{{$slot->name}}</td>
                                    <td>{{$slot->tree->name}}</td>
                                    <td>{{$slot->menu_index}}</td>
                                    <td>{{__('texte.dir_types_arr')[$slot->dir]}}</td>
                                    <td>{{__('texte.data_types_arr')[$slot->data_type]}}</td>
                                    <td>{{$slot->visible==1 ? 'Yes' : 'No'}}</td>
                                    <td>{{__('texte.visual_elements_arr')[$slot->visual_element_id]}}</td>
                                    <td>{{$slot->min}}</td>
                                    <td>{{$slot->max}}</td>
                                    <td>{{$slot->step}}</td>
                                    <td>{{$slot->unit}}</td>

                                    <td class="text-center">
                                        <a id="View" href="{{route('slots.show',$slot->id)}}"><i class="material-icons md-24">info</i></a>      
                                        @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin')
                                        <a id="Edit" href="{{route('slots.edit',$slot->id)}}"><i class="material-icons md-24">settings</i></a>                                    
                                        <button type="button" class="anchor-btn" onclick="delete_slot({{$slot->id}})"><i class="material-icons md-24">delete</i></butotn>
                                        @endif
                                    </td>
                                </tr>   
                                @endforeach
                            </tbody>
                        </table>                        
                    </div>
                </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({
        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": 3 }
                      ],
        "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_slot(id){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/ajax_delete_slot',
                    type: 'POST',
            data: { 'id' : id},
            beforeSend:function(){
                return confirm("Are you sure you want to delete this slot?");
            },
            success: function(response){
                        $("button[data-dismiss=\"modal\"]").click();
                        if(response.warning){
                            alert(response.warning);
                        }
                        else{
                            alert(response.success);
                            location.reload();
                        }
                    }
        });    
    }
    
</script>

@endsection