@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="{{ asset('/css/treeview.css') }}">

<style type="text/css">
    .ui-autocomplete {
        z-index: 99999;
    }

    ul#tree1 li {
        text-decoration:none;
        list-style: none;
        cursor: pointer;
        font-weight: bold;
        line-height: 30px;
        color: #369;
    }
</style>

<section class="content-header" style="margin-bottom:20px">
    <h1>My Channels</h1>
</section>
<!-- /.box -->

@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Channel Data</h3>
        <div class="pull-right">
            <a class="btn btn-success btn-sm pull-right" href="{{ route('mychannels.add') }}"> Add Channels</a>
            <hr>
            <a class="btn btn-primary btn-sm " href="{{ route('mychannels.view') }}">Table View</a>
            <a class="btn btn-primary btn-sm active" href="{{ route('mychannels.index') }}">Tree View</a>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <ul id="tree1" class="tree">
                    @foreach($results as $result)
                    <li>
                        <i class="indicator glyphicon glyphicon-plus-sign displayChild" data-id="{{ $result->id }}" data-level="0"></i>
                        {{ $result->name }} <span data-id="{{ $result->id }}" data-image="yes" class="glyphicon glyphicon-edit openPopUp" data-toggle="modal" data-target="#edit-modal"></span>
                        <ul class="addChilds_{{$result->id}}"></ul>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>

@include('elements.mychannel')

<script src="{{ asset('/js/select2.min.js') }}"></script>
<!-- <script src="{{ asset('/js/treeview.js') }}"></script> -->
<script src="{{ asset('/js/mychannel.js') }}"></script>
@endsection