@extends('layouts.master')
@section('page_title', 'Services')
@section('content')

    <div class="container" id="service_container">
        {{ Form::page_header("Services", "service") }}
        <div>
            {{ Form::hidden('update_parent_sort_url', action('ServiceCatController@update_sort', ['business' => $business->business ]), ['id' => 'update_parent_sort_url'] ) }}
            {{ Form::hidden('update_child_sort_url', action('ServiceController@update_sort', ['business' => $business->business ]), ['id' => 'update_child_sort_url'] ) }}
            {{ Form::hidden('update_grandchild_sort_url', action('ServiceOptionController@update_sort', ['business' => $business->business ]), ['id' => 'update_grandchild_sort_url'] ) }}
        </div>

        <div class="row grid-header">
            {{ Form::button_ex("Add a Category",
                "show_hide_add_btn();
                parent_list_manager.add_one('".\App\Models\Service_Cat::add_url($business)."', parent_selector.calc_new_handle_id() );",
                'add_parent_btn') }}
        </div>
        <div class="row" >
            <div class="col-md-12 grey-bg curve_container" id="service_details">
                <ul id="parent-items" class="drag-drop-ul parent-ul">
                    @foreach($service_cats as $service_cat)
                        @include('business.service._service_cat', [$service_cat, $service_tax])
                    @endforeach
                    <li class="parent-li new-parent-div" id="parent_handle_"></li>
                </ul>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    @include('shared_script._list_manager')
    @include('shared_script._sortable_manager')

    <script id="document_script">

        var parent_list_manager = null;
        var child_list_manager = null;
        var grandchild_list_manager = null;
        var parent_selector = null;
        var child_selector = null;
        var grandchild_selector = null;

        $(document).ready(function () {
            parent_list_manager = new list_manager('parent', 'Category');
            parent_list_manager.set_track_num_items({{$service_cats->count()}});
            parent_list_manager.set_do_delete_function('do_delete_parent');
            parent_list_manager.set_after_load_function('do_after_load_parent');
            parent_list_manager.set_after_cancel_function('show_hide_display');
            parent_list_manager.set_after_create_function('do_after_create_parent');
            parent_list_manager.set_after_delete_function('show_hide_display');
            parent_selector = new top_level_selector();
            init_sortable ('.parent-ul', document.getElementById(parent_selector.get_sort_url()).value);

            child_list_manager = new list_manager('child', 'Service');
            child_list_manager.set_do_delete_function('do_delete_child');
            child_list_manager.set_after_load_function('do_after_load_child');
            child_list_manager.set_after_create_function('do_after_create_child');
            child_selector = new secondary_level_selector('child', 'parent');
            init_sortable('.child-ul', document.getElementById(child_selector.get_sort_url()).value);

            grandchild_list_manager = new list_manager('grandchild', 'Service Option');
            grandchild_list_manager.set_do_delete_function('do_delete_grandchild');
            grandchild_list_manager.set_after_load_function('do_after_load_grandchild');
            grandchild_list_manager.set_after_cancel_function('show_add_grandchild_btn');
            grandchild_list_manager.set_after_create_function('show_add_grandchild_btn');
            grandchild_selector = new secondary_level_selector('grandchild', 'child');

            if (parent_list_manager.num_items() == 0) {
                document.getElementById("add_parent_btn").click();
            }
        });

    </script>
    <script id="parent_script">
        function show_hide_add_btn()
        {
            $('#service_details').show();
            if (parent_list_manager.num_items() == 0) {
                $("#add_parent_btn").hide();
            } else {
                $("#add_parent_btn").show();
            }
        }
        function show_hide_display()
        {
            $("#add_parent_btn").show();
            if (parent_list_manager.num_items() == 0) {
                $('#service_details').hide();
            } else {
                $('#service_details').show();
            }
        }
        function do_after_load_parent(handle_id) {
            var tax_type_select = $('#'+handle_id).find("#tax_type");
            if (tax_type_select != null)
                tax_type_select.change();
            // for new records
            if (handle_id.endsWith('_'))
                scroll_to_div_top(handle_id);
        }
        function on_change_tax_type(selectedIndex, pk) {
            if (selectedIndex == '{{\App\Models\Service_Cat::TAX_TYPE_OTHER}}') {
                $('#tax_rate_row_'+pk).show();
            } else {
                $('#tax_rate_row_'+pk).hide();
            }
        }
        function do_after_create_parent(handle_id) {
            init_sortable ('parent-ul', document.getElementById(parent_selector.get_sort_url()).value);
            show_hide_display();
        }

    </script>
    <script id="child_script">
        function do_after_create_child(handle_id) {
            var parts = handle_id.split('_');
            var child_pk = parts[4];
            $('#child_'+child_pk+'_plus').click();
        }
        function do_after_load_child(handle_id) {
            scroll_to_div_top(handle_id);
            var tax_type_select = $('#'+handle_id).find("#tax_type");
            if (tax_type_select != null)
                tax_type_select.change();
            init_sortable('.child-ul', document.getElementById(child_selector.get_sort_url()).value);
        }
        function on_change_service_tax_type(selectedIndex, pk) {
            if (selectedIndex == '{{\App\Models\Service_Cat::TAX_TYPE_OTHER}}') {
                $('#service_tax_rate_row_'+pk).show();
            } else {
                $('#service_tax_rate_row_'+pk).hide();
            }
        }

    </script>
    <script id="grandchild_script">
        function do_after_load_grandchildren(handle_id) {
            var child_pk = handle_id.split('_')[1];
            if ($('#do_add_'+child_pk).val() == 1) {
                var btn = $('#add_child_'+child_pk+'_grandchild_btn');
                btn.click();
                btn.hide();
            }
            init_sortable('.grandchild-ul', document.getElementById(grandchild_selector.get_sort_url()).value);
        }
        function show_add_grandchild_btn(handle_id) {
            var child_pk = handle_id.split('_')[1];
            var btn = $('#add_child_'+child_pk+'_grandchild_btn');
            btn.show();
        }
        function do_after_load_grandchild(handle_id) {
            var price_select = $('#'+handle_id).find("#price");
            if (price_select != null)
                price_select.change();
        }
        function duration_change(duration_input, duration)
        {
            var name_div = $(duration_input).parent().parent().find("#name");
            if (duration > 119)
                name_div.val(Math.round(duration / 60 * 100) / 100 + ' hours');
            else
                name_div.val(duration + ' minutes');
        }
        function zero_price_show(price, pk)
        {
            var zero_price_row = $('#zero_price_row_'+pk);
            if (price == 0 && price != '') {
                var zero_price_text = $(zero_price_row).find("#zero_price_text");
                if (zero_price_text.val() == '')
                    zero_price_text.val('Complimentary');
                zero_price_row.show();
            } else {
                zero_price_row.hide();
            }
        }

        var new_pk = 0;
        function add_new_service() {
            new_pk++;
            var new_row = $('#new_service_option_row_');
            new_row
                .clone()
                .attr('id', 'new_service_option_row_' + new_pk)
                .appendTo('#new_service_option_wrapper')
                .show();
            var select_item = $('#new_service_option_row_'+new_pk).find('#child_service_option_link__child_service_option_');
            select_item
                .attr('name', 'child_service_option_link__child_service_option_' + new_pk)
                .attr('id', 'child_service_option_link__child_service_option_' + new_pk);
        }
    </script>
    
@endsection

@section('page_style')
    <style>
        .grandchild-wrapper {
            margin-left: 30px;
        }
        .list-row {
            padding-left: 15px;
        }
    </style>
@endsection