@extends('admin.layouts.app')
@section('content')
<style>
/* tbody {
    display: block;
    height: 400px;
    overflow: auto;
} */
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}
</style>
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 text-md-right">
                @if(checkAdminHasAccess(request()->segment(2),"Add"))
                <a href="{!! route('admin.navigation.add') !!}"  class="btn btn-primary mb-1">Add New</a>
                @endif
            </div>
        </div>
        <div class="row divMenuBox">
            @php
            $canUpdate = checkAdminHasAccess(request()->segment(2),"Update");
            $canDelete = checkAdminHasAccess(request()->segment(2),"Delete");
            @endphp
            @if($menus->count())
            @foreach($menus as $menu)
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <table class="table text-center">
                            <thead class="clsMainMenu" data-id="{!! $menu->id !!}">
                                <th>
                                    @if($menu->cms_id) {!! $menu->cms->title !!} @else {!! $menu->title !!} @endif
                                    @if($menu->cms_id && $menu->cms->subtitle) <span>{!! $menu->cms->subtitle !!}</span> @elseif($menu->subtitle != "") <span>{!! $menu->subtitle !!}</span> @endif
                                </th>
                                <th>
                                    @if($canUpdate)
                                    <a href="{!! route('admin.navigation.edit',$menu->id) !!}" class="btn action-btn" role="button" aria-pressed="true" title="Edit"><i class="fa fa-pen blue" aria-hidden="true"></i></a>
                                    @endif
                                    @if($canDelete)
                                    <a href="javascript:void(0);" onclick="javascript:deleteData({!!$menu->id!!},'','')" class="btn action-btn" title="Delete" role="button" aria-pressed="true"><i class="fa fa-trash red" aria-hidden="true"></i></a>
                                    @endif
                                </th>
                            </thead>
                            @if($menu->child->count())
                            <tbody class="clsChildMenu">
                            @foreach($menu->child as $child)
                            <tr class="clsMainMenu" data-id="{!! $child->id !!}">
                                <td>
                                    @if($child->cms_id) {!! $child->cms->title !!} @else {!! $child->title !!} @endif
                                    @if($child->cms_id && $child->cms->subtitle) <span>{!! $child->cms->subtitle !!}</span> @elseif($child->subtitle != "") <span>{!! $child->subtitle !!}</span> @endif
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="btn action-btn" role="button" aria-pressed="true" title="Move Up Down"><i class="fas fa-sort green"></i></a>
                                    @if($canUpdate)
                                    <a href="{!! route('admin.navigation.edit',$child->id) !!}" class="btn action-btn" role="button" aria-pressed="true" title="Edit"><i class="fa fa-pen blue" aria-hidden="true"></i></a>
                                    @endif
                                    @if($canDelete)
                                    <a href="javascript:void(0);" onclick="deleteData({!!$child->id!!},'','')" class="btn action-btn" title="Delete" role="button" aria-pressed="true"><i class="fa fa-trash red" aria-hidden="true"></i></a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
        @if(request()->segment(2) == "online_campus_navigation")
        <hr style="border:1px solid grey">
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <table class="table text-center">
                            <thead>
                                <th>Tabs</th>
                            </thead>
                            <tbody class="clsTab">
                                @if($tabs->count())
                                @foreach($tabs as $tab)
                                <tr class="clsTabOption" data-tab="{!! $tab->title !!}">
                                    <td>{!! $tab->title !!}</td>
                                    <td>
                                        @php
                                        if($tab->is_active) {
                                            $statusBtnCls = 'fa fa-check-circle blue';
                                        } else {
                                            $statusBtnCls = 'fa fa-times-circle red';
                                        }

                                        if($canUpdate) {
                                            $status = '<a href="javascript:void(0);" onclick="updateStatus('.$tab->id.',\'\',\'\')" class="btn action-btn" role="button" aria-pressed="true">';
                                        } else {
                                            $status = '<a href="javascript:void(0);" class="btn action-btn" role="button" aria-pressed="true">';
                                        }
                                        $status .= '<i class="'.$statusBtnCls.'" aria-hidden="true"></i>';
                                        $status .= '</a>';
                                        echo $status;
                                        @endphp
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr class="clsTabOption" data-tab="Chat"><td>Chat</td></tr>
                                <tr class="clsTabOption" data-tab="Notes"><td>Notes</td></tr>
                                <tr class="clsTabOption" data-tab="Details"><td>Details</td></tr>
                                <tr class="clsTabOption" data-tab="Prayer"><td>Prayer</td></tr>
                                <tr class="clsTabOption" data-tab="New Here"><td>New Here</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>
@section('js')
<!-- <script src="{!! asset('assets/backend/js/pages/'.request()->segment(2).'.js') !!}"></script> -->
@if($canUpdate)
<script>
$( function() {
    $( ".divMenuBox" ).sortable({
        // connectWith: ".connectedSortable"
        stop: function( ) {
            updateSortOrder()
        }
    }).disableSelection();
    $( ".clsChildMenu" ).sortable({
        // connectWith: ".divMenuBox"
        stop: function( ) {
            updateSortOrder()
        }
    }).disableSelection();
    $( ".clsTab" ).sortable({
        // connectWith: ".divMenuBox"
        stop: function( ) {
            updateTabSortOrder()
        }
    }).disableSelection();
} );
function updateSortOrder()
{
    var menuIds = [];
    $.each($(".clsMainMenu"), function (k,v) {
        // console.log($(v).data('id'));
        menuIds.push($(v).data('id'));
    })
    console.log(menuIds);

    $.ajax({
        headers: {
            'X-CSRF-Token': _token
        },
        type: "post",
        url: baseUrl + segments[2] + "/update_sort_order",
        data: {menuIds:menuIds},
        success: function(data) {
        }
    });
}
function updateTabSortOrder()
{
    var menuTabs = [];
    $.each($(".clsTabOption"), function (k,v) {
        // console.log($(v).data('id'));
        menuTabs.push($(v).data('tab'));
    })
    console.log(menuTabs);

    $.ajax({
        headers: {
            'X-CSRF-Token': _token
        },
        type: "post",
        url: baseUrl + segments[2] + "/update_tab_sort_order",
        data: {menuTabs:menuTabs},
        success: function(data) {
        }
    });
}
</script>
@endif
@stop
@endsection