@extends('layouts.app')
@push('style')
  
 
<style>
    .full-page {
    
    height:calc(100vh - 225px);
}

<style>.ui-sortable {
  --icon-size: .8em;
  --gutter: .5em;
  padding: 0 0 0 var(--icon-size);
}

.ui-sortable li {
  padding-left: var(--gutter);
}

.ui-sortable  li::before {
    padding-right: 0.3em;
    padding-top:10px;
  font-family: "FontAwesome";
  content: "\f0c9";
  vertical-align: middle;
}
</style>
    </style>
@endpush
@section('content')
    @if (session('error'))
        <div class="container my-5">
            <div class="px-4 my-2">
                <div class="mr-4 alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            </div>
        </div>
    @endif

 
    <div class="full-page col p-4 pb-0  mx-0  rounded-3 border shadow-lg text-left">
            <div class="row  " >
                <div class="d-flex flex-col bd-light justify-content-center mb-2">    
                    <div id="info-message" class="mr-4 alert alert-danger " hidden> </div>
                    <h4 class="text-dark text-uppercase ps-2"> {{ __('menu.configurations') }}</h4>  
                </div>
            </div>
            <div class="row">
                <div class="d-flex flex-col bd-light justify-content-center ">
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div id="submenu0" class="card-body"> 
                            <strong class="card-title">{{ __('menu.MenuCardTitle') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('menu.MenuCardText') }}</p>
                            <button a class="btn btn-primary" name="menu" id="menu"><i class="fa-solid fa-bars  px-1"></i>  {{ __('menu.MenuBtnText') }}</button >  
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div  id="submenu1" class="card-body "> 
                            <strong class="card-title">{{ __('applabels.SocialMedia') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.SocialMediaText') }}</p>
                            <button a class="btn btn-primary" name="btnRS" id="btnRS"><i class= "fa-solid fa-share-nodes  px-1" disabled></i>{{ __('applabels.SocialMedia') }}</button >
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">
                        <div id="submenu2" class="card-body"> 
                            <strong class="card-title">{{ __('applabels.Notifications') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.NotificationsText') }}</p>
                            <button  class="btn btn-primary" name="btnNOTIF" id="btnNOTIF"   ><i class="fa-regular fa-bell  px-1" disabled></i>{{ __('applabels.Notifications') }}</button >
                        </div>                       
                    </div>
                    <div class="card p-4 h-100" style="width: 18rem;">                        
                        <div id="submenu3" class="card-body"> 
                                <strong class="card-title">{{ __('applabels.Blocking') }}</strong>
                            <p class="card-text" style="height: 6.5rem">{{ __('applabels.BlockingText') }}</p>
                            <button  class="btn btn-primary" name="btnBLOCK" id="btnBLOCK"   ><i class="fa-solid fa-user-slash px-1 " disabled></i> {{ __('applabels.Blocking') }}</button > 
                        </div>                       
                    </div>
                   <!--  <div  class="p2 text-center m-auto"> <h4 class="text-dark"> <button a class="btn btn-primary" name="btnReplies" id="btnReplies">{{ __('applabels.DefaultMessages') }}</button ></h4></div> 
                    <div class="p2 text-center m-auto"> <h4 class="text-dark"> </h4></div> 
                    <div   class="p2 text-center m-auto"> <h4 class="text-dark"></h4>  </div> 
                    <div   class="p2 text-center m-auto"> <h4 class="text-dark"></h4>  </div> -->
                </div>
            </div>    
            
  
              
    </div> 

    @include('configs.components.menu')

@push('scripts') 

<!-- Bootstrap --> 
 
<script type="text/javascript">  

   
      
    
   
        


       
     
    
 
    
    
 
</script>
    
@endpush
@endsection