@extends('layouts.master')
@section('page_title',"Article Taxonomy")

@section('content')

    <div class="container">
        {{ Form::page_header("Article Taxonomy", "library") }}
        {{ Form::hidden('get_taxonomy', action('ContentLibraryController@get_taxonomy', ['content_library' => $content_library->content_library,
            'taxonomy' => 'XXX']), ['id' => 'get_taxonomy_url'] ) }}

        {{ Form::open(['url' => action('ContentLibraryController@post_taxonomy', compact('content_library'))]) }}
        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    <div class="row">
                        {{ Form::select_placeholder('vertical', $selected_taxonomy, \App\Models\Taxonomy::get_verticals(), 'Select', 4) }}
                    </div>
                    <div class="white-bg"  id="taxonomy_tree">
                    </div>
                    <div class="row bt-button-row text-right">
                        {{ Form::button_save() }}
                        {{ Form::button_cancel() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    <script >
        $(document).ready(function() {
            $('#taxonomy_tree').hide();

            $('#vertical').change(function() {
                var taxonomy = $(this).val();
                if (taxonomy != null && taxonomy != '') {
                    var url = document.getElementById("get_taxonomy_url").value.replace('XXX', taxonomy);
                    $.ajax({
                        type: "GET",
                        url: url,
                        success: function(newHtml) {
                            var handle = document.getElementById('taxonomy_tree');
                            handle.innerHTML = newHtml;
                            $('#taxonomy_tree .checkbox-indent').each(function(i, obj) {
                                // indent all the checkboxes depending on their level
                                var class_name = obj.className;
                                var level = class_name.replace("bt-checkbox checkbox-indent checkbox-indent-", '');
                                obj.parentElement.style.paddingLeft = (level*25) + "px";
                            });
                            $('#taxonomy_tree').show();
                        }
                    });
                }
            });

            $('#vertical').change();
        });

    </script>
@endsection