@extends('app-new')
@push('head-script')
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')
    <!-- <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{$menu['name']}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/home') }}">{{trans('rights.home')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{$menu['name']}}
                    </li>
                </ol>
            </div>
        </div>
    </div> -->
@endpush
@section('content')
    <!-- Column Search -->
    <section id="dashboard-ecommerce">
        <div class="text-left">
            <h1 >{{$menu->name}}</h1>
            <p class="mb-2 pb-75">
                Click on the below tabs to go the respective page
            </p> 
        </div>
        <div class="row">
            <div class="col-12">
                <div class="row mt-2">
                    @foreach($menues as $key => $submenu)
                        
                        @if($user->hasMenuPermission($submenu) && $menu->name != $submenu->name)
                            @php
                                $submenu->load(['sub_menu' => function($q){
                                    $q->whereIn('position', ['left', 'both']);
                                }]);
                                $subMenuChilds = $submenu->sub_menu;
                                $ids = [];
                                foreach($subMenuChilds as $child){
                                    if($user->hasMenuPermission($child)){
                                        $ids[] = $child->id;
                                    }
                                }
                                $subMenuChilds = $subMenuChilds->whereIn('id', $ids);
                            @endphp
                            @if(count($subMenuChilds)>0) 
                                <div class="col-md-2 head-border" id="#headingOne{{$submenu->id}}" data-bs-toggle="collapse" data-bs-target="#module{{$submenu->id}}" aria-expanded="true" aria-controls="{{$submenu->id}}">
                                    <div class="new-border position-relative">
                                        <div class="card new-card text-center active-card">
                                            <div class="card-body">
                                                <div>
                                                    <i class="module-icon" data-feather="{{$icon}}"></i>
                                                    <p class="card-text"><strong>{{$submenu->name}}</strong></p>
                                                    <i class="arrow-icon" data-feather="chevron-down"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div  id="module{{$submenu->id}}" aria-labelledby="headingOne{{$submenu->id}}" class="row accordion-collapse collapse new-accordian">
                                    <h3 class="sub-module-heading">{{$submenu->name}}</h3>
                                    <br>
                                    @foreach($submenu->sub_menu as $k=>$subSubMenu)
                                                                                <div class="col-md-2 head-border">
                                            <div class="new-border position-relative">
                                                <a href="{{$aliasVal}}{{$subSubMenu->alias}}">
                                                    <div class="card new-card text-center">
                                                        <div class="card-body">
                                                            <div>
                                                                <i class="module-icon" data-feather="{{$icon}}"></i>
                                                                <p class="card-text"><strong>{{$subSubMenu->name}}</strong></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="col-md-2 head-border">
                                    <div class="new-border position-relative">
                                        <a href="{{$aliasVal}}{{$submenu->alias}}">
                                            <div class="card new-card new-accordian-card text-center align-center">
                                                <div class="card-body">
                                                    <div>
                                                        <i class="module-icon" data-feather="{{$icon}}"></i>
                                                        <p class="card-text"><strong>{{$submenu->name}}</strong></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endif 
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->

    <style>
        #dashboard-ecommerce a {
            text-decoration: none;
            color: #6e6b7b!important;
        }
        .new-border:after {
            content: '';
            display: block;
            position: relative;
            width: 80%;
            margin: 0 auto;
            top: 0;
        }
        .new-border:before {
            content : "";
            position: absolute;
            right    : 0;
            z-index: 1;
            top  : 20%;
            height   : 60%;
        }

        .card .card{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;}
        
        .card .active{background-color: #e6e6e6;}
        .new-accordian{ background: rgb(233 223 237 / 41%); padding: 29px 16px 0px 12px; margin-bottom: 26px !important; margin-left: 16px;    width: 97%;}
        div.head-border:nth-of-type(4n) .new-border:before {
            border-right: none;
        }

        .nonenew-border::before{border-right: none;} 
        .nonenewborder-bottom::after{border-bottom: none;}
        .module-icon{
            height:30px; 
            width:30px; 
            color: #7367f0;
        }
        .arrow-icon{
            position: absolute; 
            left: 45%; 
            bottom: 9px; 
            height:20px; 
            width:20px; 
            color: #7367f0;
        }
        .sub-module-heading{
            color: #7367f0;
            text-align: center;
            margin-bottom: 1em;

        }

        .search-icon{position: absolute; right: 0; top: 9px; }
        .new-card-title{font-weight: 600;font-size: 25px !important;text-align: center;color: #7367F0;}
        .new-card p{margin-top: 17px; font-size: 1.1em}
        .new-card{ min-height:150px; }

        .new-card .card-body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .new-card-header{background: url(../../../app-assets/images/portrait/small/bg.png)no-repeat ;     background-size: cover;}

        .innerpageboxed .feather { height: 30px; width: 30px; }
        .innerpageboxed h3 { margin-bottom: 0; font-size: 15px; margin-top: 17px}
    </style>
@endsection 
@push('footer-script') 
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/components/components-accordion.js"></script>
    <!-- END: Page JS-->
    <script>
        $(".active-card").click(function(){
            $('.active-card').each(function(){
                $(this).removeClass("active");
            })
            $(this).addClass("active");

        })
    </script>
@endpush