@extends('admin.layouts.master')
@section('title')
App Setting - List
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto relative">
        <div class="card" id="gs-links-card">
            <div class="card-body" id="gs-links-card-body">
                <div class="md:flex">
                    <ul id="gs-links-container" class="flex flex-col w-full mb-4 text-sm font-medium text-center md:w-36 shrink-0 nav-tabs md:mb-0">
                        <li class="group grow @active('admin.app-setting.gs')">
                            <a href="{{route('admin.app-setting.gs')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-home-gear-line"></i> General Settings</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.preferences')">
                            <a href="{{route('admin.app-setting.preferences')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-settings-line"></i> Preferences</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.analytic')">
                            <a href="{{route('admin.app-setting.analytic')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-bar-chart-line"></i> Analytic</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.seosettings')">
                            <a href="{{route('admin.app-setting.seosettings')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-search-eye-line"></i> SEO Settings</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.language')">
                            <a href="{{route('admin.app-setting.language')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-global-line"></i> Language</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.currency')">
                            <a href="{{route('admin.app-setting.currency')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-money-dollar-circle-line"></i> Currency</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.payment-methods')">
                            <a href="{{route('admin.app-setting.payment-methods')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-bank-card-line"></i> Payment Methods</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.smtp-settings')">
                            <a href="{{route('admin.app-setting.smtp-settings')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-mail-settings-line"></i> SMTP Settings</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.email-templates')">
                            <a href="{{route('admin.app-setting.email-templates')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-mail-line"></i> Email Templates</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.third-party-settings')">
                            <a href="{{route('admin.app-setting.third-party-settings')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-plug-line"></i> Third Party Settings</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.social-media-login')">
                            <a href="{{route('admin.app-setting.social-media-login')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-user-shared-line"></i> Social Media Login</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.bloack-setting')">
                            <a href="{{route('admin.app-setting.bloack-setting')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-lock-line"></i> Bloack Setting</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.push-notification')">
                            <a href="{{route('admin.app-setting.push-notification')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-notification-line"></i> Push Notification</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.staffs')">
                            <a href="{{route('admin.app-setting.staffs')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-team-line"></i> Staffs</a>
                        </li>
                        <li class="group grow @active('admin.app-setting.system')">
                            <a href="{{route('admin.app-setting.system')}}" data-tab-toggle data-target="app-setting-body" class="inline-block text-start px-2 my-2  w-full py-1 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-white -mb-[1px]"><i class="ri-cpu-line"></i> System</a>
                        </li>
                    </ul>
        
                    <div class="tab-content w-full">
                        <div class="block tab-pane" id="app-setting-body">
                            @yield('app-setting-content')
                        </div>
                        
                    </div>
                </div>
            </div>
        </div><!--end card-->
       
    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>
@endsection

@section('styles')
<style>
#gs-links-container{
    width:200px;
    border-right-width: 1px; 
    padding:0.5rem;
}

.group\/item.active .group-\[\.active\]\/item\:bg-custom-500, .group.active .group-\[\.active\]\:bg-custom-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
    color: rgb(59 130 246 / var(--tw-bg-opacity));
    
}

.tab-content .tab-pane div#gs-title{
    height: 4.375rem;
    border-bottom-width: 1px;
    padding:1.25rem;  
}

#gs-links-card{
    margin-bottom: 0;
    border-radius: 0;
}

#gs-links-card-body{
    padding: 0;
}

.tab-content .tab-pane div#gs-content{
    padding:1.25rem;   
   
}



</style>
    
@endsection