@extends('layouts.admin')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/styles/apps/crm/users-list.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('libs/datatables-net/media/css/dataTables.bootstrap4.min.css')}}"> <!-- original -->
    <link rel="stylesheet" type="text/css" href="{{asset('assets/styles/libs/datatables-net/datatables.min.css')}}"> <!-- customization -->
    <link rel="stylesheet" type="text/css" href="{{asset('libs/jquery-minicolors/jquery.minicolors.css')}}"> <!-- Original -->
    <link rel="stylesheet" type="text/css" href="{{asset('assets/styles/libs/jquery-minicolors/jquery.minicolors.min.css')}}"> <!-- Customization -->
@endsection

@section('content')
    <div class="ks-column ks-page">
        <div class="ks-page-header">
            <section class="ks-title">
                <h3>{{$pageTitle}}</h3>
            </section>
        </div>

        <div class="ks-page-content">
            <div class="ks-page-content-body ks-tabs-page-container">
                <div class="ks-tabs-container-description">
                    <h3 class="text-capitalize">{{$appSection->title}}</h3>
                </div>
                <ul class="nav ks-nav-tabs ks-tabs-page-default ks-tabs-full-page">
                    @if(\Auth::user()->can('browse-appsectionitem'))
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-toggle="tab" data-target="#items">
                                Items
                            </a>
                        </li>
                    @endif
                </ul>

                <div class="tab-content">

                    @if(\Auth::user()->can('browse-appsectionitem'))
                        <div class="tab-pane ks-column-section active" id="items" role="tabpanel">

							                            @if(\Auth::user()->can('add-appsectionitem'))
                                <a class="addNew text-white" onclick="currentDataTableId='{{$dataTableId1}}'" data-url="{{route('app-section-items.create', ['model'=>'AppSectionItem','app_section_id'=>$appSection->id])}}"><div class="btn btn-success">Add Item</div></a>
                                <br><br>
                            @endif
                            <div class="ks-user-list-view-table">
                                <div class="ks-full-table container-fluid">
                                    <table id="{{$dataTableId1}}" class="display table table-striped table-bordered" width="100%" data-url="{{route('app-section-items.list',['app_section_id'=>$appSection->id])}}">
                                        <thead>
                                        <tr>
                                            @foreach(\App\Http\Controllers\Admin\AppSectionItemController::columns() as $col)
                                                <th class="text-center">{{$col['title']}}</th>
                                            @endforeach
                                        </tr>
                                        </thead>
                                        <tfoot>
                                        <tr>
                                            @foreach(\App\Http\Controllers\Admin\AppSectionItemController::columns() as $col)
                                                <th class="text-center" title="{{$col['title']}}"></th>
                                            @endforeach
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                        </div>
                    @endif

                </div>

            </div>
        </div>
    </div>
@stop

@include('admin.partials.datatables')

@section('javascript')
    @if(\Auth::user()->can('browse-appsection'))
        <script>
			var myTable1;
			var columnOptions1 = [
                    @foreach(\App\Http\Controllers\Admin\AppSectionItemController::columns() as $col)
				{ "data": "{{$col['data']}}", "name": '{{$col['name']}}', "orderable": '{{$col['orderable']}}', "searchable": '{{$col['searchable']}}', "className": '{{$col['className']}}' },
                @endforeach
			];
			loadDataTable(myTable1,'{{$dataTableId1}}', columnOptions1);
        </script>
    @endif

    <script src="{{asset('libs/jquery-minicolors/jquery.minicolors.min.js')}}"></script>
@stop