@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/jqtree.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.treetable.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('trees.create',[$device_type->id,0])}}" class="btn btn-sm white">
                            New Tree
                        </a>
                        @endif
                    </div>
                    <h2>{{$device_type->name}} Trees</h2>
                    <small>List of {{$device_type->model}} trees</small>
                </div>                
                
                <div class="panel-body">                    
                    <div id="tree">
                        <table id="myTable" class="table table-hover table-striped table-condensed dataTables-example">
                            <tbody>  
                                <tr>
                                    <th>Name</th>
                                    <th>DeviceType</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                                @if(count($trees)>0)
                                    @include('trees.recursive', ['trees' => $trees->where('parent_id',0), 'all_trees' => $trees, 'level' => 0])
                                @endif
                            </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 src="{{ asset('js/tree.jquery.js') }}"></script>
<script src="{{ asset('js/jquery.treetable.js') }}"></script>

<script>
    
    $("#myTable").treetable({ expandable: true });
    
    

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

@endsection