{{-- Extends layout --}}
@extends('front.layouts.app')

{{-- Content --}}
@section('content')
    <div class="clear"></div>
    <nav class="navbar navbar-expand-lg navbar-light p-0">
        <h4 class="mb-0 pr-2 ls1  font-weight-bold"> {{ __(":Specie türüne ait kategoriler",['specie'=>$species->first()->title??NULL]) }}</h4>
    </nav>

    <div class="line line-xs line-dark"></div>

    <div class="row container">
        <div class="col-md-4">
            <div id="jstree_demo_div"></div>
        </div>
        <div class="col-md-8">

                @component('front.components.specie_recursive',['species'=>$species])
                @endcomponent

        </div>
    </div>

@endsection

{{-- Styles Section --}}
@section('styles')
    <style>
        .padl-0{ padding-left:10px!important }
        .padl-1{ padding-left:20px!important }
        .padl-2{ padding-left:25px!important }
        .padl-3{ padding-left:30px!important }
        .padl-4{ padding-left:35px!important }
        .padl-5{ padding-left:40px!important }
        .padl-6{ padding-left:45px!important }
        .padl-7{ padding-left:50px!important }
        .padl-7{ padding-left:55px!important }
        .padl-8{ padding-left:60px!important }
        .padl-9{ padding-left:65px!important }


    </style>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"
        integrity="sha512-bU6dl4fd2XN3Do3aWypPP2DcKywDyR3YlyszV+rOw9OpglrGyBs6TyTsbglf9umgE+sy+dKm1UHhi07Lv+Vtfg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css"
        integrity="sha512-P8BwDSUInKMA7I116Z1RFg/Dfk85uFdliEUYO7vQlwtxLVMNvZimfMAQsaf++9EhlAGOVX6yhDQAIY3/70jDUg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script>
        $(function() {
                    $('#jstree_demo_div').jstree({
                            "massload": {
                                'url': '{{ asset('specie.json') }}',
                         'data': function(node) {
                                            return {
                                                'specie_id': node.id
                                            };
                                        }
                                },
                                'core': {
                                    'data': {
                                        'url': '{{ asset('specie.json') }}',
                                        'data': function(node) {
                                            return {
                                                'specie_id': node.id
                                            };
                                        }
                                    }
                                },
                                "plugins" : [ "massload", "state" ]
                            })
                    });
    </script>

@endsection


@section('breadcrumbs')
    {{ Breadcrumbs::render('species.index') }}
@endsection