@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
<link href="{{ BE_URL.'plugins/sweetalert/sweetalert.css' }}" rel="stylesheet" type="text/css">
@stop

@section('page_title','Tenderly Features')

@section('inner_page_link')
    <li class="breadcrumb-item active">Feature List</li>
@stop

@section('main_content') 
	<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Features</h4>
                    <div class="table-responsive m-t-10">
                        <table id="module-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th></th>
                                    <th>Feature</th>
                                    <!-- <th>Main Module</th> -->
                                    <th>Tag</th>
                                    <th>Icon</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($modules) && !empty($modules))
                                    @foreach($modules as $key => $module)                                        
                                        <tr id="feature_{{ $module->id }}">
                                            <td>{{ ($key+1) }}</td>                                            
                                            <td><a href="javascript:;" class="{{ (!empty($module->subModules) && count($module->subModules) > 0 ? 'toggle_submodules' : '' ) }}"><i class="mdi {{ (!empty($module->subModules)  && count($module->subModules) > 0  ? 'mdi-plus-circle text-green' : 'mdi-do-not-disturb-off text-red' ) }}"></i></a></td>
                                            <th>{{ $module->display_name }}</td>
                                            <!-- <td>-</td> -->
                                            <td>{{ $module->name }}</td>
                                            <td><i class="mdi {{ $module->icon }}"></i> : {{ $module->icon }}</td>
                                        </tr>
                                        @if(!empty($module->subModules) && count($module->subModules) > 0 )
                                            @foreach($module->subModules as $innerKey => $submodule)
                                                <tr class="hide sub_module feature_{{ $module->id }}">
                                                    <td class="hide text-center" colspan="2"><i class="mdi mdi-arrow-right"></i></td>
                                                    <td class="hide">{{ $submodule->display_name }}</td>
                                                    <!-- <td class="hide">{ $submodule->parentModule->name }}</td> -->
                                                    <td class="hide">{{ $submodule->name }}</td>
                                                    <td class="hide"><i class="mdi {{ $submodule->icon }}"></i> : {{ $submodule->icon }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_script')
<script src="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.js' }}"></script>
<script src="{{ BE_URL.'plugins/datatables/jquery.dataTables.min.js' }}"></script>
<script src="{{ BE_URL.'plugins/sweetalert/sweetalert.min.js' }}"></script>
<script type="text/javascript">
    // Toggle sub modules according to its availibility to parent module
    $(document).on('click','.toggle_submodules',function(){
        var feature_row_id = $(this).closest('tr').attr('id');
        if($('.'+feature_row_id).is(':visible') || $(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).html('<i class="mdi mdi-plus-circle text-green"></i>');
            $('.'+feature_row_id).find('td').slideUp();
            $('.'+feature_row_id).hide(400);
        }else{
            $(this).addClass('active');
            $(this).html('<i class="mdi mdi-do-not-disturb text-red"></i>');
            $('.'+feature_row_id).show();
            $('.'+feature_row_id).find('td').slideDown();
        }
    });
</script>
@stop