@extends('admin.layouts.master')
@section('title')
{{ translate('App Setting') }}
@endsection

@php

    $admin = auth('admin')->user();

    $permissionForGeneralSettings = $admin->role->permissions->firstWhere('module_name', 'General Settings');
    $permissionForPreferences = $admin->role->permissions->firstWhere('module_name', 'Preferences');
    $permissionForAnalytic = $admin->role->permissions->firstWhere('module_name', 'Analytic');
    $permissionForSEOSettings= $admin->role->permissions->firstWhere('module_name', 'SEO Settings');
    $permissionForLanguage = $admin->role->permissions->firstWhere('module_name', 'Language');
    $permissionForCurrency = $admin->role->permissions->firstWhere('module_name', 'Currency');
    $permissionForPaymentMethods = $admin->role->permissions->firstWhere('module_name', 'Payment Methods');
    $permissionForSMTPSettings = $admin->role->permissions->firstWhere('module_name', 'SMTP Settings');
    $permissionForEmailTemplates = $admin->role->permissions->firstWhere('module_name', 'Email Templates');
    $permissionForThirdPartySettings = $admin->role->permissions->firstWhere('module_name', 'Third Party Settings');
    $permissionForCookie = $admin->role->permissions->firstWhere('module_name', 'Cookie');
    $permissionForSocialMediaLogin = $admin->role->permissions->firstWhere('module_name', 'Social Media Login');
    $permissionForAbuseWordFiltering = $admin->role->permissions->firstWhere('module_name', 'Abuse Word Filtering');
    $permissionForPushNotification = $admin->role->permissions->firstWhere('module_name', 'Push Notification');
    $permissionForStaffs = $admin->role->permissions->firstWhere('module_name', 'Staffs');
    $permissionForSystem = $admin->role->permissions->firstWhere('module_name', 'System');
    $permissionForFooter = $admin->role->permissions->firstWhere('module_name', 'Footer');
    $permissionForFooterSection = $admin->role->permissions->firstWhere('module_name', 'Footer Section');
@endphp

@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">


        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            {{-- <div class="grow">
                <h5 class="text-16">App Setting</h5>
            </div> --}}
            {{-- <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">Members</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    Add New
                </li>
            </ul> --}}
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-12 gap-x-5">
            <div class="xl:col-span-12">
                <div class="card">
                    <div class="card-body border-b">
                        <h6 class="mb-4 text-15">{{ translate('App Setting') }}</h6>
                    </div>
                    <div class="card-body">

                        <div class="gap-4 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">
                                @if($permissionForGeneralSettings !== null && $permissionForGeneralSettings->can_show == '1')
                                    <li class="group active">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="general-settings" 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>{{ translate('General Settings') }}</a>
                                    </li>
                                @endif
                                @if($permissionForPreferences !== null && $permissionForPreferences->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="preferences" 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>{{ translate('Preferences') }}</a>
                                    </li>
                                @endif

                                    {{-- <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="send_wink" 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>Send Wink</a>
                                    </li> --}}

                                @if($permissionForSEOSettings !== null && $permissionForSEOSettings->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="seo-settings" 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-2-line"></i>{{ translate('SEO Settings') }}</a>
                                    </li>
                                @endif
                                @if($permissionForLanguage !== null && $permissionForLanguage->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="language" 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>{{ translate('Language') }}</a>
                                    </li>
                                @endif

                                @if($permissionForCurrency !== null && $permissionForCurrency->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="currency" 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>{{ translate('Currency') }}</a>
                                    </li>
                                @endif
                                @if($permissionForPaymentMethods !== null && $permissionForPaymentMethods->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="payment-methods" 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>{{ translate('Payment Methods') }}</a>
                                    </li>
                                @endif
                                @if($permissionForSMTPSettings !== null && $permissionForSMTPSettings->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="smtp-settings" 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>{{ translate('SMTP Settings') }}</a>
                                    </li>
                                @endif
                                @if($permissionForEmailTemplates !== null && $permissionForEmailTemplates->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates" 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>{{ translate('Email Templates') }}</a>
                                    </li>
                                @endif
                                @if($permissionForThirdPartySettings !== null && $permissionForThirdPartySettings->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="third-party-settings" 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>{{ translate('Third Party Settings') }}</a>
                                    </li>
                                @endif
                                @if($permissionForCookie !== null && $permissionForCookie->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="cookie" 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>{{ translate('Cookie') }}</a>
                                    </li>
                                @endif
                                @if($permissionForSocialMediaLogin !== null && $permissionForSocialMediaLogin->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="social-media-login" 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>{{ translate('Social Media Login') }}</a>
                                    </li>
                                @endif
                                @if($permissionForAbuseWordFiltering !== null && $permissionForAbuseWordFiltering->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="abuse-word-filtering" 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>{{ translate('Abuse Word Filtering') }}</a>
                                    </li>
                                @endif
                                @if($permissionForPushNotification !== null && $permissionForPushNotification->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="push-notification" 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>{{ translate('Push Notification') }}</a>
                                    </li>
                                @endif
                                @if($permissionForStaffs !== null && $permissionForStaffs->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="staffs" 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>{{ translate('Staffs') }}</a>
                                    </li>
                                @endif
                                @if($permissionForSystem !== null && $permissionForSystem->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="system" 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-server-line"></i>{{ translate('System') }}</a>
                                    </li>
                                @endif
                                @if($permissionForFooter !== null && $permissionForFooter->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="footer" 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-layout-bottom-line"></i>{{ translate('Footer') }}</a>
                                    </li>
                                @endif
                                @if($permissionForFooterSection !== null && $permissionForFooterSection->can_show == '1')
                                    <li class="group">
                                        <a href="javascript:void(0)" data-tab-toggle data-target="footer-section" 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-layout-bottom-line"></i>{{ translate('Footer Section') }}</a>
                                    </li>
                                @endif
                                @if($permissionForFooterSection !== null && $permissionForFooterSection->can_show == '1')
                                <li class="group">
                                    <a href="javascript:void(0)" data-tab-toggle data-target="user-footer-section" 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-layout-bottom-line"></i>User Dashorad Footer Section</a>
                                </li>
                                @endif
                            </ul>

                            <div class="tab-content w-full">
                                <div class="block tab-pane p-5" id="general-settings">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('General Settings') }}</h4>
                                        </div>
                                        <form action="{{ route('admin.general_setting.update', ['id' => $general_setting->id]) }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="system_name">{{ translate('System Name') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" name="system_name" value="{{$general_setting->system_name}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                        @error('system_name')
                                                           <span class="text-red-500 text-sm">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12">
                                                    <div class="col-span-4">
                                                        <label for="system_logo">{{ translate('System Logo') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="file" name="system_logo" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file">
                                                        <div class="flex flex-wrap items-center gap-4 mt-4">
                                                            <div class="relative">
                                                                @if($general_setting->system_logo)
                                                                <div class="mb-2">
                                                                    <img style="width:50%" src="{{ asset('admin/Image/AppSettings/Logo/' . $general_setting->system_logo) }}" alt="Banner" class="w-32 h-32 object-cover">
                                                                </div>
                                                                 @endif
                                                                  {{-- <button class="text-bold text-center absolute size-6 bg-red-200 border-2 border-white rounded-full -top-2.5 ltr:-right-2.5 rtl:-left-2.5 dark:border-zink-700">x</button> --}}
                                                            </div>


                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="date_format">Date Format</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <select name="date_format" id="date_format" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            <option value="" disabled>{{ __('Select Date Format') }}</option>
                                                            <option value="d-m-Y" {{ $general_setting['date_format'] == 'd-m-Y' ? 'selected' : '' }}>DD-MM-YYYY</option>
                                                            <option value="m-d-Y" {{ $general_setting['date_format'] == 'm-d-Y' ? 'selected' : '' }}>MM-DD-YYYY</option>
                                                            <option value="Y-m-d" {{ $general_setting['date_format'] == 'Y-m-d' ? 'selected' : '' }}>YYYY-MM-DD</option>
                                                            <option value="d/m/Y" {{ $general_setting['date_format'] == 'd/m/Y' ? 'selected' : '' }}>DD/MM/YYYY</option>
                                                            <option value="m/d/Y" {{ $general_setting['date_format'] == 'm/d/Y' ? 'selected' : '' }}>MM/DD/YYYY</option>
                                                            <option value="Y/m/d" {{ $general_setting['date_format'] == 'Y/m/d' ? 'selected' : '' }}>YYYY/MM/DD</option>
                                                            <option value="d F Y" {{ $general_setting['date_format'] == 'd F Y' ? 'selected' : '' }}>DD Month YYYY (e.g., 13 November 2024)</option>
                                                            <option value="l, d F Y" {{ $general_setting['date_format'] == 'l, d F Y' ? 'selected' : '' }}>Day, DD Month YYYY (e.g., Tuesday, 13 November 2024)</option>
                                                        </select>

                                                        @error('date_format')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                {{-- <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="system_timezone">{{ translate('System Timezone') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <select name="system_timezone" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                            <option value="">{{__('Select Timezone')}}</option>
                                                            @foreach($timezones as $k=>$timezone)
                                                            <option value="{{$k}}">{{$timezone}}</option>
                                                                <option value="{{$k}}" {{($general_setting['system_timezone']==$k)?'selected':''}}>{{$timezone}}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('system_timezone')
                                                           <span class="text-red-500 text-sm">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div> --}}

                                                <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="system_logo">{{ translate('Admin login page background') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="file" name="admin_login_page_background" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file">
                                                        <div class="flex flex-wrap items-center gap-4 mt-4">
                                                            <div class="relative">
                                                                @if($general_setting->admin_login_page_background)
                                                                <div class="mb-2">
                                                                    <img style="width:50%" src="{{ asset('admin/Image/AppSettings/Background/' . $general_setting->admin_login_page_background) }}" alt="Banner" class="w-32 h-32 object-cover">
                                                                </div>
                                                                @endif

                                                            </div>


                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="system_name">{{ translate('Member Code Prefix') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" name="member_code_prefix" value="{{$general_setting->member_code_prefix}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                          @error('member_code_prefix')
                                                           <span class="text-red-500 text-sm">{{ $message }}</span>
                                                          @enderror
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="system_name">{{ translate('Admin Page Title') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" name="admin_page_title" value="{{$general_setting->admin_page_title}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                          @error('admin_page_title')
                                                           <span class="text-red-500 text-sm">{{ $message }}</span>
                                                          @enderror
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="system_name">{{ translate('Admin Page Paragraph') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" name="admin_page_paragraph" value="{{$general_setting->admin_page_paragraph}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                          @error('admin_page_paragraph')
                                                           <span class="text-red-500 text-sm">{{ $message }}</span>
                                                          @enderror
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="system_name">{{ translate('Member Minimum Age') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" id="system_name" value="{{$general_setting->member_minimum_age}}" name="member_minimum_age" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                         @error('system_name')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                         @enderror
                                                    </div>
                                                </div>


                                                {{-- <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="system_timezone">{{ translate('Member Profile Picture Privacy') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <select name="member_profile_picture_privacy" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                            <option value="">{{ translate('Select') }}</option>
                                                            <option value="0" {{($general_setting['member_profile_picture_privacy']=='0')?'selected':''}}>Hide</option>
                                                            <option value="1" {{($general_setting['member_profile_picture_privacy']=='1')?'selected':''}}>Show</option>
                                                        </select>
                                                         @error('member_profile_picture_privacy')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                         @enderror
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="system_timezone">{{ translate('Member Gallery Image Privacy') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <select name="member_gallery_image_privacy" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                        <option value="">{{ translate('Select') }}</option>
                                                            <option value="0" {{($general_setting['member_gallery_image_privacy']=='0')?'selected':''}}>Hide</option>
                                                            <option value="1" {{($general_setting['member_gallery_image_privacy']=='1')?'selected':''}}>Show</option>
                                                        </select>
                                                         @error('member_gallery_image_privacy')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                         @enderror
                                                    </div>
                                                </div> --}}

                                                <div class="flex justify-end gap-2 mt-4">
                                                    @if($permissionForGeneralSettings !== null && $permissionForGeneralSettings->can_edit == '1')
                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="preferences">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Preferences') }}</h4>
                                        </div>

                                        <form action="{{ route('admin.preference.update', ['id' => $general_setting->id]) }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <input type="hidden" value="preferences" name="tab_id">
                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('HTTPS Activation') }}</label>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="https_activation" id="greenSoftSwitch" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"  {{ $preference->https_activation ? 'checked' : '' }}>
                                                            <label for="https_activation" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Maintenance Mode Activation') }}</label>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="maintenance_mode_activation" id="maintenance_mode_activation" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none" {{ $preference->maintenance_mode_activation ? 'checked' : '' }}>
                                                            <label for="maintenance_mode_activation" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Wallet System Activation') }}</label>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="wallet_system_activation" id="wallet_system_activation" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"  {{ $preference->wallet_system_activation ? 'checked' : '' }}>
                                                            <label for="wallet_system_activation" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Email/Phone Verification') }}</label>
                                                        <small class="text-red-500 px-2"><i>({{ translate('You need to configure SMTP correctly to enable this feature. Configure Now') }})</i></small>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="email_phone_verification" id="email_phone_verification" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"  {{ $preference->email_phone_verification ? 'checked' : '' }}>
                                                            <label for="email_phone_verification" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Member Verification') }}</label>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="member_verification" id="member_verification" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none" {{ $preference->member_verification ? 'checked' : '' }}>
                                                            <label for="member_verification" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Only Premium Member Can See Other Members Full Profile.') }}</label>
                                                        <small class="text-red-500 px-2"><i>({{ translate('If you disable this, all registered members will be able to see the members full profile.') }}')</i></small>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="premium_view_full" id="premium_view_full" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none" {{ $preference->premium_view_full ? 'checked' : '' }}>
                                                            <label for="premium_view_full" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-8">
                                                        <label for="">{{ translate('Member Profile Picture Approval by Admin.') }}</label>
                                                        <small class="text-red-500 px-2"><i>({{ translate('If you disable this, all registered members will be able to see the members full profile.') }}')</i></small>
                                                    </div>
                                                    <div class="col-span-4 px-5">
                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                            <input type="checkbox" name="member_profile_approve_admin" id="member_profile_approve_admin" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none" {{ $preference->premium_view_full ? 'checked' : '' }}>
                                                            <label for="member_profile_approve_admin" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                        </div>
                                                    </div>
                                                </div> --}}
                                                <div class="flex justify-end gap-2 mt-4">
                                                    @if($permissionForPreferences !== null && $permissionForPreferences->can_edit == '1')
                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                    @endif
                                                </div>

                                            </div>
                                        </form>

                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="send_wink">
                                    <form action="{{ route('admin.wink.update', ['id' => $wink->id]) }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">Send Wink</h4>
                                        </div>

                                        <div class="card-body p-4 bg-black">
                                            <label for="">Message</label>
                                            <textarea id="sendwink" name="winkcontent" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" rows="4">{{$wink->content}}</textarea>

                                        </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                            </div>

                                    </div>
                                </form>
                                </div>

                                <div class="hidden tab-pane p-5" id="seo-settings">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('SEO Settings') }}</h4>
                                        </div>

                                        <form action="{{ route('admin.seo_update.update', ['id' => $seo->id]) }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="card-body p-4 bg-black">
                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Meta Title') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" name="meta_name" value="{{$seo->meta_title}}" id="meta_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                    </div>
                                                </div>
                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Meta Description') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <textarea name="meta_description"  class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="2">{{$seo->meta_description}}</textarea>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Keywords') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <textarea name="keywords" placeholder="keyword, keyword" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="2s">{{$seo->keywords}}</textarea>
                                                        <small>
                                                            <div class="mt-1 text-xs text-slate-500 dark:text-zink-200">
                                                                {{ translate('Separate with coma') }}
                                                            </div>
                                                     </small>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-4">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Meta Image') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="file" name="meta_image" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file">
                                                         @if($seo->meta_image)
                                                            <div class="mb-2">
                                                                <img style="width:50%" src="{{ asset('admin/Image/AppSettings/SEO/' . $seo->meta_image) }}" alt="Banner" class="w-32 h-32 object-cover">
                                                            </div>
                                                         @endif
                                                    </div>
                                                </div>

                                                <div class="flex justify-end gap-2 mt-4">
                                                    @if($permissionForSEOSettings !== null && $permissionForSEOSettings->can_edit == '1')
                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>


                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="language">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Language') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="language-all" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('All') }}</a>
                                                    </li>
                                                    @if($permissionForLanguage !== null && $permissionForLanguage->can_create == '1')
                                                        <li class="group">
                                                            <a href="javascript:void(0);" data-tab-toggle data-target="language-add" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Add New') }}</a>
                                                        </li>
                                                    @endif
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="language-default" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Default') }}</a>
                                                    </li>

                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="language-all">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <h6 class="mb-4 text-15">{{ translate('Default Table') }}</h6>

                                                                <div class="overflow-x-auto">
                                                                    <table class="w-full">
                                                                        <thead class="ltr:text-left rtl:text-right">
                                                                            <tr>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">#</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Code') }}</th>
                                                                                {{-- <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('RTL') }}</th> --}}
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Image') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Options') }}</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        @php
                                                                            $a=1;
                                                                        @endphp
                                                                        @foreach ($languages as $language)
                                                                            <tr>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"><a href="#!" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600">{{$a}}</a></td>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$language->name}}</td>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$language->code}}</td>
                                                                                {{-- <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                                        <input type="checkbox"
                                                                                            name="rtLSwitch"
                                                                                            id="rtLSwitch"
                                                                                            class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-500 bg-white/80 dark:bg-zink-400 peer/published checked:bg-white dark:checked:bg-white ltr:checked:right-0 rtl:checked:left-0 checked:bg-none checked:border-custom-500 dark:checked:border-custom-500 arrow-none"
                                                                                            {{ $language->rtl == 0 ? 'checked' : '' }}>

                                                                                        <label for="rtLSwitch" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-custom-500 peer-checked/published:border-custom-500"></label>
                                                                                    </div>
                                                                                </td> --}}
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                    @if($language->image)
                                                                                        <img src="{{ asset('admin/assets/images/' . $language->image) }}" alt="Language Image" class="object-cover w-12 h-auto rounded" style="width: 50px; height: auto; " >
                                                                                    @endif
                                                                                </td>
                                                                              
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                    <a href="{{route('admin.app-setting.language.translate',$language->code)}}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600">
                                                                                        <i class="ri-translate"></i>
                                                                                    </a>
                                                                            
                                                                                    <!-- Edit Button -->
                                                                                    @if($language->id != 2)

                                                                                        @if($permissionForLanguage !== null && $permissionForLanguage->can_edit == '1')
                                                                                            <a href="javascript:void(0);"
                                                                                                class="edit-language-btn transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"
                                                                                                data-id="{{ $language->id }}"
                                                                                                data-name="{{ $language->name }}"
                                                                                                data-code="{{ $language->code }}"
                                                                                                data-image="{{ $language->image }}">
                                                                                                <i class="ri-edit-2-line"></i>
                                                                                            </a>
                                                                                        @endif
                                                                                        @if($permissionForLanguage !== null && $permissionForLanguage->can_delete == '1')

                                                                                            <a href="javascript:void(0);"
                                                                                                class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600"
                                                                                                onclick="confirmDelete('{{ route('admin.app-setting.language.destroy', $language->id) }}')">
                                                                                                <i class="ri-delete-bin-2-line"></i>
                                                                                            </a>
                                                                                        @endif

                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                            @php
                                                                                $a++;
                                                                            @endphp
                                                                         @endforeach

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div><!--end card-->

                                                    </div>
                                                    <div class="hidden tab-pane" id="language-add">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <form action="{{ route('admin.app-setting.language.store')}}" method="POST" enctype="multipart/form-data">
                                                                    @csrf
                                                                    <div class="mb-3">
                                                                        <label for="inputText" class="inline-block mb-2 text-base font-medium">{{ translate('Name') }}<span class="text-red-500">*</span></label>
                                                                        <input type="text" name="name" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                    </div>
                                                                    <div class="mb-3">
                                                                        <label for="inputText" class="inline-block mb-2 text-base font-medium">{{ translate('Code') }}<span class="text-red-500">*</span></label>
                                                                        <input type="text" name="code" id="inputText" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                    </div>
                                                                    <div class="mb-3">
                                                                        <label for="inputText" class="inline-block mb-2 text-base font-medium">{{ translate('Image') }}<span class="text-red-500">*</span></label>
                                                                        <input type="file" name="image" id="inputText" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file" required>
                                                                    </div>
                                                                    <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Submit') }}</button>
                                                                </form>
                                                            </div>
                                                        </div><!--end card-->
                                                    </div>



                                                    <div class="hidden tab-pane" id="language-default">


                                                    <form action="{{ route('admin.app-setting.default_language')}}" method="POST" >
                                                        @csrf

                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Default Language') }}</label>
                                                            </div>
                                                            <div class="col-span-4">
                                                                <select name="default_language" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('Select') }}</option>
                                                                    @foreach ($languages as $lang)
                                                                        <option value="{{$lang->id}}" {{ $language->default_language == 1 ? 'selected' : '' }}>{{$lang->name}}</option>
                                                                    @endforeach

                                                                </select>
                                                            </div>
                                                            <div class="col-span-4">
                                                                <button type="submit" class="float-right text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            </div>

                                                            </div>

                                                    </form>


                                                    </div>

                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="currency">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Currency') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="currency-all" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('All') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="currency-add-new" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Add New') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="currency-default" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Default') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="currency-set-format" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Set Format') }}</a>
                                                    </li>
                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="currency-all">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <h6 class="mb-4 text-15">{{ translate('Default Table') }}</h6>

                                                                <div class="overflow-x-auto">
                                                                    <table class="w-full">
                                                                        <thead class="ltr:text-left rtl:text-right">
                                                                            <tr>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">#</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Code') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('RTL') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Options') }}</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>

                                                                                @php
                                                                                    $a=1;
                                                                                @endphp
                                                                            @foreach ($currencies as $currency)

                                                                                <tr>
                                                                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"><a href="#!" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600">{{$a}}</a></td>
                                                                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$currency->name}}</td>
                                                                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$currency->code}}</td>
                                                                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                        <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">

                                                                                            @if($permissionForCurrency !== null && $permissionForCurrency->can_edit == '1')
                                                                                                <input type="checkbox" value="{{ $currency->id }}" name="rtl" id="rtl-{{ $currency->id }}"
                                                                                                    class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-500 bg-white/80 dark:bg-zink-400 peer/published checked:bg-white dark:checked:bg-white ltr:checked:right-0 rtl:checked:left-0 checked:bg-none checked:border-custom-500 dark:checked:border-custom-500 arrow-none"
                                                                                                    {{ $currency->rtl == 1 ? 'checked' : '' }}
                                                                                                    onclick="updateCurrencyRtl({{ $currency->id }}, this.checked)">
                                                                                                <label for="rtl-{{ $currency->id }}"
                                                                                                    class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-custom-500 peer-checked/published:border-custom-500"></label>
                                                                                            @endif
                                                                                        </div>


                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></td>
                                                                                </tr>

                                                                                 @php
                                                                                  $a++;
                                                                                 @endphp
                                                                              @endforeach

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div><!--end card-->
                                                    </div>
                                                    <div class="hidden tab-pane" id="currency-add-new">

                                                        <form action="{{ route('admin.currency_store') }}" method="POST" >
                                                            @csrf

                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Name') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="name" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Symbol') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text"  name="symbol" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Code') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="code" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-12">
                                                                @if($permissionForCurrency !== null && $permissionForCurrency->can_create == '1')
                                                                    <button type="submit" class="float-right text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Add Currency') }}</button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                      </form>

                                                    </div>
                                                    <div class="hidden tab-pane" id="currency-default">
                                                        <form action="{{ route('admin.default_curreny') }}" method="POST" >
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-5">




                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('System Default Currency') }}</label>
                                                            </div>
                                                            <div class="col-span-4">

                                                                <select name="default" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('This is a placeholder') }}</option>
                                                                    @foreach ($currencies as $currency)
                                                                     <option value="{{$currency->id}}" {{ $currency->default == 1 ? 'selected' : '' }}>{{$currency->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-span-4">
                                                                <button type="submit" class="float-right text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            </div>




                                                        </div>
                                                    </form>
                                                    </div>
                                                    <div class="hidden tab-pane" id="currency-set-format">
                                                        <form action="{{ route('admin.currency_format_update', ['id' => $currency_format->id]) }}" method="POST">
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Symbol Format') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <select name="symbol_format" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('This is a placeholder') }}</option>
                                                                    <option value="symbol_before_no_space" {{ $currency_format->symbol_format == 'symbol_before_no_space' ? 'selected' : '' }}>{{ translate('Symbol Before (No Space) - e.g., $100') }}</option>
                                                                    <option value="symbol_before_space" {{ $currency_format->symbol_format == 'symbol_before_space' ? 'selected' : '' }}>{{ translate('Symbol Before (With Space) - e.g., $ 100') }}</option>
                                                                    <option value="symbol_after_no_space" {{ $currency_format->symbol_format == 'symbol_after_no_space' ? 'selected' : '' }}>{{ translate('Symbol After (No Space) - e.g., 100$') }}</option>
                                                                    <option value="symbol_after_space" {{ $currency_format->symbol_format == 'symbol_after_space' ? 'selected' : '' }}>{{ translate('Symbol After (With Space) - e.g., 100 $') }}</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Decimal Separator') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <select name="decimal_separator" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('This is a placeholder') }}</option>
                                                                    <option value="comma_period" {{ $currency_format->decimal_separator == 'comma_period' ? 'selected' : '' }}>{{ translate('Comma for Thousands, Period for Decimals - e.g., 1,000.50') }}</option>
                                                                    <option value="period_comma" {{ $currency_format->decimal_separator == 'period_comma' ? 'selected' : '' }}>{{ translate('Period for Thousands, Comma for Decimals - e.g., 1.000,50') }}</option>
                                                                    <option value="space_comma" {{ $currency_format->decimal_separator == 'space_comma' ? 'selected' : '' }}>{{ translate('Space for Thousands, Comma for Decimals - e.g., 1 000,50') }}</option>
                                                                    <option value="none_period" {{ $currency_format->decimal_separator == 'none_period' ? 'selected' : '' }}>{{ translate('No Separator for Thousands, Period for Decimals - e.g., 1000.50') }}</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('No of decimals') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <select name="no_of_decimals" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('This is a placeholder') }}</option>
                                                                    <option value="0" {{ $currency_format->no_of_decimals == 0 ? 'selected' : '' }}>{{ translate('0 Decimals (e.g., 1000)') }}</option>
                                                                    <option value="1" {{ $currency_format->no_of_decimals == 1 ? 'selected' : '' }}>{{ translate('1 Decimal (e.g., 1000.5)') }}</option>
                                                                    <option value="2" {{ $currency_format->no_of_decimals == 2 ? 'selected' : '' }}>{{ translate('2 Decimals (e.g., 1000.50)') }}</option>
                                                                    <option value="3" {{ $currency_format->no_of_decimals == 3 ? 'selected' : '' }}>{{ translate('3 Decimals (e.g., 1000.500)') }}</option>
                                                                </select>
                                                            </div>

                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-12">
                                                                <button type="submit" class="float-right text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="payment-methods">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Payment Methods') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="payment-methods-mollie" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Mollie') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="payment-methods-stripe" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Stripe') }}</a>
                                                    </li>

                                                </ul>

                                                <div class="mt-5 tab-content">

                                                            <div class="block tab-pane" id="payment-methods-mollie">
                                                                <form action="{{ route('admin.payment_methods.update', ['id' => $payment_method->id]) }}" method="POST" enctype="multipart/form-data">
                                                                    @csrf
                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <div class="col-span-4">
                                                                        <label for="">{{ translate('Mollie Key') }}<span class="text-red-500">*</span></label>
                                                                    </div>
                                                                    <div class="col-span-8">
                                                                        <input type="text" name="mobile_key" value="{{$payment_method->mollie_key}}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                                    </div>
                                                                </div>

                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <label>Active Status</label>
                                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                        <input type="checkbox" name="payment_method_status" id="payment_method_status" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"  {{ $payment_method->payment_method_mollie_status == 1 ? 'checked' : '' }}>
                                                                        <label for="payment_method_status" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                    </div>
                                                                </div>

                                                                <div class="flex justify-end gap-2 mt-4">
                                                                    @if($permissionForPaymentMethods !== null && $permissionForPaymentMethods->can_edit == '1')
                                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                                    @endif
                                                                </div>
                                                            </form>
                                                            </div>


                                                            <div class="hidden tab-pane" id="payment-methods-stripe">
                                                                <form action="{{ route('admin.payment_update_stripe.update', ['id' => $payment_method->id]) }}" method="POST" enctype="multipart/form-data">
                                                                    @csrf
                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <div class="col-span-4">
                                                                        <label for="">{{ translate('Stripe Secret') }}<span class="text-red-500">*</span></label>
                                                                    </div>
                                                                    <div class="col-span-8">
                                                                        <input type="text" name="stripe_secret" value="{{$payment_method->stripe_secret}}"  class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                                    </div>
                                                                </div>
                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <div class="col-span-4">
                                                                        <label for="">{{ translate('Stripe Publishable') }}<span class="text-red-500">*</span></label>
                                                                    </div>
                                                                    <div class="col-span-8">
                                                                        <input type="text" name="stripe_publishable" value="{{$payment_method->stripe_publishable}}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                                    </div>
                                                                </div>


                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <label>Active Status</label>
                                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                        <input type="checkbox" name="payment_method_status"  class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"  {{ $payment_method->payment_method_stripe_status == 1 ? 'checked' : '' }}>
                                                                        <label for="payment_method_status" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                    </div>
                                                                </div>

                                                                <div class="flex justify-end gap-2 mt-4">
                                                                    @if($permissionForPaymentMethods !== null && $permissionForPaymentMethods->can_edit == '1')
                                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                                    @endif
                                                                </div>
                                                               </form>
                                                            </div>


                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="smtp-settings">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('SMTP Settings') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="smtp-settings-smtp-settings" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Setting') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="smtp-settings-test" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Test') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="smtp-settings-instructions" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Instructions') }}</a>
                                                    </li>

                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="smtp-settings-smtp-settings">

                                                        <form action="{{ route('admin.smtp_update.update', ['id' => $smtp->id]) }}" method="POST" enctype="multipart/form-data">
                                                            @csrf

                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Type') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <select name="type" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                    <option value="">{{ translate('Select SMTP Type') }}</option>
                                                                    <option value="smtp" {{ $smtp->type == 'smtp' ? 'selected' : '' }}>{{ translate('SMTP') }}</option>
                                                                    <option value="sendmail" {{ $smtp->type == 'sendmail' ? 'selected' : '' }}>{{ translate('Sendmail') }}</option>
                                                                    <option value="mailgun" {{ $smtp->type == 'mailgun' ? 'selected' : '' }}>{{ translate('Mailgun') }}</option>
                                                                    <option value="gmail_smtp" {{ $smtp->type == 'gmail_smtp' ? 'selected' : '' }}>{{ translate('Gmail SMTP') }}</option>
                                                                    <option value="outlook_smtp" {{ $smtp->type == 'outlook_smtp' ? 'selected' : '' }}>{{ translate('Outlook/Office365 SMTP') }}</option>

                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL HOST') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_host" value="{{$smtp->mail_host}}"  id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL PORT') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_port" value="{{$smtp->mail_port}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL USERNAME') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_username" value="{{$smtp->mail_username}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL PASSWORD') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_password" value="{{$smtp->mail_password}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL ENCRYPTION') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_encryption" value="{{$smtp->mail_encryption}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL FROM ADDRESS') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_from_address" value="{{$smtp->mail_from_address}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-5">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('MAIL FROM NAME') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input type="text" name="mail_from_name" value="{{$smtp->mail_from_name}}" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForSMTPSettings !== null && $permissionForSMTPSettings->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            @endif
                                                        </div>
                                                        </form>
                                                    </div>
                                                    <div class="hidden tab-pane" id="smtp-settings-test">
                                                        <form action="{{ route('admin.smtp_email') }}" method="POST">
                                                            @csrf
                                                            <div class="grid grid-cols-12 gap-4 mt-5">
                                                                <!-- Input Field -->
                                                                <div class="col-span-12 sm:col-span-8">
                                                                    <input type="email" name="email" placeholder="abc@gmail.com"
                                                                        class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500
                                                                        disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300
                                                                        dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500
                                                                        dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400
                                                                        dark:placeholder:text-zink-200"
                                                                        required>
                                                                </div>

                                                                <!-- Submit Button -->
                                                                <div class="col-span-12 sm:col-span-4">
                                                                    <button type="submit"
                                                                        class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600
                                                                        hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600
                                                                        focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600
                                                                        active:ring active:ring-custom-100 dark:ring-custom-400/20">
                                                                        {{ translate('Send test email') }}
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>

                                                    <div class="hidden tab-pane" id="smtp-settings-instructions">
                                                        <p class="text-red-500">{{ translate('Please be carefull when you are configuring SMTP. For incorrect configuration you will get error at the time of order place, new registration, sending newsletter.') }}</p>
                                                        <br>
                                                        <h5 class="text-slate-300">{{ translate('For Non-SSL') }}</h5>
                                                        <div class="card m-5 border border-slate-300">
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Select sendmail for Mail Driver if you face any issue after configuring smtp as Mail Driver') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail Host according to your server Mail Client Manual Settings') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail port as 587') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail Encryption as ssl if you face issue with tls') }}</p>
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <h5 class="text-slate-300">{{ translate('For SSL') }}</h5>
                                                        <div class="card m-5 border border-slate-300">
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Select sendmail for Mail Driver if you face any issue after configuring smtp as Mail Driver') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail Host according to your server Mail Client Manual Settings') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail port as 465') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('Set Mail Encryption as ssl') }}</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="email-templates">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Email Templates') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="gap-4 md:flex">
                                                <ul id="email-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">
                                                    @foreach ($template as $temp)
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="{{$temp->id}}" 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]">{{$temp->email_template_name}}</a>
                                                    </li>
                                                    @endforeach

                                                    {{-- <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-4" 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]">Staff Account Opening Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-5" 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]">Package Purchase Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-6" 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]">Manual Payment Approval Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-7" 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]">Email On Express Interest</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-8" 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]">Email On Accepting Interest</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-9" 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]">Password Reset Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-10" 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]">Profile Picture View Request Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-11" 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]">Profile Picture View Request Accepted Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-12" 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]">Gallery Image View Request Email</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="email-templates-13" 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]">Gallery Image View Request Accepted Email</a>
                                                    </li>
                                                     --}}
                                                </ul>

                                                <div class="tab-content w-full">

                                                @foreach($template as $key => $temp)
                                                    <div class="block tab-pane p-5" id="{{$temp->id}}">

                                                        <form action="{{ route('admin.email_templates_update', ['id' => $temp->id]) }}" method="POST" >
                                                            @csrf

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-8">
                                                                    <label for="">{{ translate('Activation') }}</label>
                                                                </div>
                                                                <div class="col-span-4">
                                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                        <input type="checkbox" name="status" value="1" id="status" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $temp->status == 1 ? 'checked' : '' }}>
                                                                        <label for="status" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                    </div>

                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-12">
                                                                    <label for="">{{ translate('Subject') }}</label>
                                                                    <input type="text" name="subject" value="{{$temp->subject}}" value="Gallery Image View Request Accepted." id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-12">
                                                                    <label for="">{{ translate('Email Body') }}</label>
                                                                    <textarea id="email-template-{{$key}}" name="content" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" rows="4">{{ $temp->content }}</textarea>

                                                                </div>
                                                            </div>

                                                            <div class="flex justify-end gap-2 mt-4">
                                                                @if($permissionForEmailTemplates !== null && $permissionForEmailTemplates->can_edit == '1')
                                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                                @endif
                                                            </div>
                                                        </form>

                                                    </div>
                                                @endforeach



                                                    {{-- <div class="block tab-pane p-5" id="email-templates-2">

                                                        <form action="{{ route('admin.email_templates_update', ['id' => $template['email_templates_2']->id]) }}" method="POST" >
                                                            @csrf

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-8">
                                                                <label for="">Activation</label>
                                                            </div>
                                                            <div class="col-span-4">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="status" value="1" id="status2" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                    {{ $template['email_templates_2']->status == 1 ? 'checked' : '' }}>
                                                                    <label for="status" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                </div>

                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-12">
                                                                <label for="">Subject</label>
                                                                <input type="text" name="subject" value="{{$template['email_templates_2']->subject}}"  id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-12">
                                                                <label for="">Email Body</label>
                                                                <textarea id="email-templates-2-body" name="content" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="4">{{$template['email_templates_2']->content}}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 mt-4">
                                                            <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                                        </div>
                                                       </form>
                                                    </div>

                                                    <div class="block tab-pane p-5" id="email-templates-3">
                                                        <form action="{{ route('admin.email_templates_update', ['id' => $template['email_templates_3']->id]) }}" method="POST" >
                                                            @csrf
                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <div class="col-span-8">
                                                                        <label for="">Activation</label>
                                                                    </div>
                                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                        <input type="checkbox" name="status" value="1" id="status3" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $template['email_templates_3']->status == 1 ? 'checked' : '' }}>
                                                                        <label for="status" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                    </div>
                                                                </div>

                                                                <div class="grid grid-cols-12 mt-4">
                                                                    <div class="col-span-12">
                                                                        <label for="">Subject</label>
                                                                        <input type="text" name="subject" value="{{$template['email_templates_3']->subject}}"  id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                    </div>
                                                                </div>

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-12">
                                                                    <label for="">Email Body</label>
                                                                    <textarea id="email-templates-3-body" name="content" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="4">{{$template['email_templates_3']->content}}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="flex justify-end gap-2 mt-4">
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                                            </div>
                                                      </form>
                                                    </div> --}}

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="third-party-settings">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Third Party Settings') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="gap-4 md:flex">
                                                <ul id="third-party-settings-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 active">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="third-party-settings-google-recaptcha" 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>{{ translate('Google reCAPTCHA') }}</a>
                                                    </li>
                                                    {{-- <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="third-party-settings-google-analytics" 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>{{ translate('Google Analytics') }}</a>
                                                    </li> --}}
                                                    {{-- <li class="group">
                                                        <a href="javascript:void(0)" data-tab-toggle data-target="third-party-settings-custom-script" 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>{{ translate('Custom Script') }}</a>
                                                    </li> --}}

                                                </ul>

                                                <div class="tab-content w-full">
                                                    <div class="block tab-pane p-5" id="third-party-settings-google-recaptcha">
                                                        <form action="{{ route('admin.third_party_Settings_update', ['id' => $thirdpartysetting->id]) }}" method="POST" enctype="multipart/form-data">
                                                            @csrf

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-4">
                                                                    <label for="">{{ translate('Activation') }}</label>
                                                                </div>
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="google_recaptcha_activation" id="greenSoftSwitch" value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $thirdpartysetting->google_recaptcha_activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch"
                                                                        class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900">
                                                                    </label>
                                                                </div>

                                                            </div>
                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-4">
                                                                    <label for="">{{ translate('Site KEY') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input placeholder="Site KEY" name="google_recaptcha_site_key" value="{{$thirdpartysetting->google_recaptcha_site_key}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 mt-4">
                                                                <div class="col-span-4">
                                                                    <label for="">{{ translate('SECRET KEY') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input placeholder="SECRET KEY" name="google_recaptcha_secret_key" value="{{$thirdpartysetting->google_recaptcha_secret_key}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                                </div>
                                                            </div>
                                                            <div class="flex justify-end gap-2 mt-4">
                                                                @if($permissionForThirdPartySettings !== null && $permissionForThirdPartySettings->can_edit == '1')
                                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                                @endif
                                                            </div>

                                                       </form>

                                                    </div>

                                                    <div class="hidden tab-pane p-5" id="third-party-settings-google-analytics">
                                                        <form action="{{ route('admin.third_party_Settings_update2', ['id' => $thirdpartysetting->id]) }}" method="POST" enctype="multipart/form-data">
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Activation') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" value="1" name="google_analytics_activation" id="google_analytics_activation" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none" {{ $thirdpartysetting->google_analytics_activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer cursor-pointertransition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Tracking ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="Tracking Id" name="google_analytics_tracking_id" value="{{$thirdpartysetting->google_analytics_tracking_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForThirdPartySettings !== null && $permissionForThirdPartySettings->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            @endif
                                                        </div>
                                                        </form>
                                                    </div>

                                                    <div class="hidden tab-pane p-5" id="third-party-settings-custom-script">

                                                        <form action="{{ route('admin.third_party_Settings_update3', ['id' => $thirdpartysetting->id]) }}" method="POST" enctype="multipart/form-data">
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Header custom script') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <textarea name="header_custom_script" placeholder="<script>&#10; ... &#10;</script>" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="4">{{$thirdpartysetting->header_custom_script}}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Footer custom script') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <textarea name="footer_custom_script" placeholder="<script>&#10; ... &#10;</script>" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="textArea" rows="4">{{$thirdpartysetting->footer_custom_script}}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForThirdPartySettings !== null && $permissionForThirdPartySettings->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            @endif
                                                        </div>


                                                        </form>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="social-media-login">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Social Media Login') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="social-media-login-google" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Google') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="social-media-login-facebook" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Facebook') }}</a>
                                                    </li>
                                                    {{-- <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="social-media-login-twitter" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Twitter') }}</a>
                                                    </li> --}}

                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="social-media-login-google">

                                                        <form action="{{ route('admin.social_media_login_update', ['id' => $social_media_login->id]) }}" method="POST" >
                                                            @csrf


                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Activation') }}</label>
                                                            </div>
                                                            <div class="col-span-8">

                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="google_activation" id="greenSoftSwitch" value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $social_media_login->google_activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch"
                                                                        class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900">
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Client ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="Client ID" name="google_client_id" value="{{$social_media_login->google_client_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Client Secret') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="Client Secret" name="google_client_secret" value="{{$social_media_login->google_client_secret}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForSocialMediaLogin !== null && $permissionForSocialMediaLogin->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            @endif
                                                        </div>

                                                        </form>

                                                    </div>
                                                    <div class="hidden tab-pane" id="social-media-login-facebook">
                                                        <form action="{{ route('admin.social_media_login_update2', ['id' => $social_media_login->id]) }}" method="POST" >
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-4">


                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Activation') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="facebook_activation" id="greenSoftSwitch" value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $social_media_login->facebook_activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch"
                                                                        class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900">
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('App ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="App ID" name="facebook_app_id" value="{{$social_media_login->facebook_app_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('App Secret') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="App Secret" name="facebook_app_secret" value="{{$social_media_login->facebook_app_secret}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForSocialMediaLogin !== null && $permissionForSocialMediaLogin->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                                                            @endif
                                                        </div>
                                                    </form>
                                                    </div>

                                                    {{-- <div class="hidden tab-pane" id="social-media-login-twitter">
                                                        <form action="{{ route('admin.social_media_login_update3', ['id' => $social_media_login->id]) }}" method="POST" >
                                                            @csrf
                                                        <div class="grid grid-cols-12 mt-4">

                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Activation<') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="twitter_activation" id="greenSoftSwitch" value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $social_media_login->twitter_activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch"
                                                                        class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900">
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Client ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="Client ID" name="twitter_client_id" value="{{$social_media_login->twitter_client_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Client Secret') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="Client Secret" name="twitter_client_secret" value="{{$social_media_login->twitter_client_secret}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-4">
                                                            <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                        </div>
                                                    </form>
                                                    </div> --}}

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="abuse-word-filtering">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Abuse Word Filtering') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <form id="abuseFilteringForm" action="{{ route('admin.abuse-filtering.update') }}" method="POST">
                                                @csrf
                                                <div id="abuseFilteringRows">
                                                    @foreach ($filterings as $filtering)
                                                        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden filtering-row">
                                                            <div class="grow">
                                                                <input type="text" name="words[]" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" value="{{ $filtering->word }}" required>
                                                            </div>
                                                            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                                                                @if($permissionForAbuseWordFiltering !== null && $permissionForAbuseWordFiltering->can_delete == '1')
                                                                    <li class="text-lg text-red-500 relative before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                                                                        <i class="ri-delete-bin-7-line delete-row" onclick="removeRow(this)"></i>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                <!-- Add new row button -->
                                                <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                                                    <div class="grow">
                                                        @if($permissionForAbuseWordFiltering !== null && $permissionForAbuseWordFiltering->can_create == '1')
                                                            <button type="button" class="text-white btn bg-custom-500 border-custom-500" onclick="addNewRow()">{{ translate('Add Field') }}</button>
                                                        @endif
                                                    </div>
                                                </div>

                                                <!-- Save and Cancel buttons -->
                                                <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                                                    <div class="grow">
                                                        @if($permissionForAbuseWordFiltering !== null && $permissionForAbuseWordFiltering->can_edit == '1')
                                                            <button type="submit" class="text-white btn bg-custom-500 border-custom-500">{{ translate('Save') }}</button>
                                                        @endif
                                                    </div>
                                                    <div class="shrink-0">
                                                        <button type="button" class="text-black btn border-custom-500" onclick="window.location.reload()">{{ translate('Cancel') }}</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>


                                <div class="hidden tab-pane p-5" id="push-notification">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Push Notification') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="push-notification-setting" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Setting') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="push-notification-instruction" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Instruction') }}</a>
                                                    </li>
                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="push-notification-setting">

                                                    <form action="{{ route('admin.push_notification_update', ['id' => $pushnotification->id]) }}" method="POST" >
                                                        @csrf

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('Activation') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                                    <input type="checkbox" name="activation" id="activation2" value="1"
                                                                        class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                                        {{ $pushnotification->activation == 1 ? 'checked' : '' }}>
                                                                    <label for="greenSoftSwitch"
                                                                        class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer transition border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900">
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM API KEY') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM API KEY" name="fcm_api_key" value="{{$pushnotification->fcm_api_key}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM AUTH DOMAIN') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM AUTH DOMAIN" name="fcm_auth_domain" value="{{$pushnotification->fcm_auth_domain}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM PROJECT ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM PROJECT ID" name="fcm_project_id" value="{{$pushnotification->fcm_project_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM STORAGE BUCKET') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM STORAGE BUCKET" name="fcm_storage_bucket" value="{{$pushnotification->fcm_storage_bucket}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM MESSAGING SENDER ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM MESSAGING SENDER ID" name="fcm_messaging_sender_id" value="{{$pushnotification->fcm_messaging_sender_id}}" type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FCM APP ID') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FCM APP ID" type="text" name="fcm_app_id" value="{{$pushnotification->fcm_app_id}}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4">
                                                            <div class="col-span-4">
                                                                <label for="">{{ translate('FIREBASE SERVER KEY') }}</label>
                                                            </div>
                                                            <div class="col-span-8">
                                                                <input placeholder="FIREBASE SERVER KEY" type="text" name="firebase_server_key" value="{{$pushnotification->firebase_server_key}}" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 mt-4">
                                                            @if($permissionForPushNotification !== null && $permissionForPushNotification->can_edit == '1')
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            @endif
                                                        </div>

                                                       </form>

                                                    </div>

                                                    <div class="hidden tab-pane" id="push-notification-instruction">
                                                        <div class="card m-5 border border-slate-300">
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('1. Log in to Google Firebase and Create a new app if you don\'t have any.') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('2. Go to Project Settings and select General tab.') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('3. Select Config and you will find Firebase Config Credentials.') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('4. Copy your App\'s Credentials and paste the Credentials into appropriate fields') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('5. Now, select Cloud Messaging tab and Enable Cloud Messaging API') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('6. After enabling Cloud Messaging API, you will find Server Key. Copy the key value and paste into FIREBASE SERVER KEY field') }}</p>
                                                            </div>
                                                            <div class="card-body p-4 border border-b-1">
                                                                <p>{{ translate('7. Configure the "firebase-messaging-sw.js" file and Keep the file in the root directory of your cPanel') }}</p>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="staffs">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Staffs') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="staffs-all-staff" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('All Staff') }}</a>
                                                    </li>
                                                    @if($permissionForStaffs !== null && $permissionForStaffs->can_create == '1')
                                                        <li class="group">
                                                            <a href="javascript:void(0);" data-tab-toggle data-target="staffs-add-new-staff" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Add New Staff') }}</a>
                                                        </li>
                                                    @endif
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="staffs-staff-roles" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Staff Roles') }}</a>
                                                    </li>
                                                    <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="staffs-add-new-staff-role" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Add New Staff Role') }}</a>
                                                    </li>
                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="staffs-all-staff">
                                                        <div class="overflow-x-auto">
                                                            <table class="w-full">
                                                                <thead class="ltr:text-left rtl:text-right">
                                                                    <tr>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">#</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Email') }}</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Phone') }}</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Role') }}</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Action') }}</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                @php
                                                                    $a=1;
                                                                @endphp
                                                                @foreach ($staffs as $staff)
                                                                    <tr>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $a }}</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $staff->name}}</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $staff->email}}</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">-</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                            {{ $staff->role ? $staff->role->role_name : 'No Role Assigned' }}
                                                                        </td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">

                                                                            @if($permissionForStaffs !== null && $permissionForStaffs->can_edit == '1')
                                                                                @if($staff->id != 1)
                                                                                    <a href="{{ route('admin.staff.edit', ['id' => $staff->id ]) }}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600">
                                                                                        <i class="ri-edit-2-line"></i>
                                                                                    </a>
                                                                                @endif
                                                                            @endif
                                                                            @if($permissionForStaffs !== null && $permissionForStaffs->can_delete == '1')
                                                                                @if($staff->id != 1)
                                                                                    <a href="javascript:void(0);" class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600" onclick="confirmRoleDelete('{{ route('admin.staff.destroy', $staff->id) }}', {{ $staff->id }})">
                                                                                        <i class="ri-delete-bin-2-line"></i>
                                                                                    </a>
                                                                                @endif
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                    @php
                                                                        $a++;
                                                                    @endphp
                                                                @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>
                                                    <div class="hidden tab-pane" id="staffs-add-new-staff">
                                                        <form action="{{ route('admin.staff.store') }}" method="POST">
                                                            @csrf
                                                            <div class="grid grid-cols-12 my-5">
                                                                <div class="col-span-4">
                                                                    <label for="first_name">{{ translate('First Name') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input type="text" id="first_name" name="first_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 my-5">
                                                                <div class="col-span-4">
                                                                    <label for="last_name">{{ translate('Last Name') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input type="text" id="last_name" name="last_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 my-5">
                                                                <div class="col-span-4">
                                                                    <label for="email">{{ translate('Email') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input type="email" id="email" name="email"  class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 my-5">
                                                                <div class="col-span-4">
                                                                    <label for="phone">{{ translate('Phone') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input type="text" id="phone" name="phone" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>

                                                            <div class="grid grid-cols-12 my-5">
                                                                <div class="col-span-4">
                                                                    <label for="password">{{ translate('Password') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <input type="text" id="password" name="password" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                                                                </div>
                                                            </div>


                                                            <div class="grid grid-cols-12 mt-5">
                                                                <div class="col-span-4">
                                                                    <label for="system_timezone">{{ translate('Role') }}</label>
                                                                </div>
                                                                <div class="col-span-8">
                                                                    <select id="role" name="role"  class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                                                                        <option value="">{{ translate('This is a placeholder') }}</option>
                                                                        @foreach ($roles as $role)
                                                                            <option value="{{ $role->id }}">{{ $role->role_name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>


                                                            <div class="flex justify-end gap-2 mt-4">
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Add New Staff</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="hidden tab-pane" id="staffs-staff-roles">
                                                        <div class="overflow-x-auto">
                                                            <table class="w-full">
                                                                <thead class="ltr:text-left rtl:text-right">
                                                                    <tr>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">#</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                                                        <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Options') }}</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @php
                                                                        $a=1;
                                                                    @endphp
                                                                    @foreach ($roles as $role)
                                                                    <tr>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $a }}</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $role->role_name }}</td>
                                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                            <a href="{{ route('admin.roles.edit', ['id' => $role->id ]) }}" class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600">
                                                                                <i class="ri-edit-2-line"></i>
                                                                            </a>
                                                                            @if($role->id != 1)
                                                                                <a href="javascript:void(0);" class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600" onclick="confirmRoleDelete('{{ route('admin.roles.destroy', $role->id) }}', {{ $role->id }})">
                                                                                    <i class="ri-delete-bin-2-line"></i>
                                                                                </a>
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                    @php
                                                                        $a++;
                                                                    @endphp
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>

                                                    <div class="hidden tab-pane" id="staffs-add-new-staff-role">
                                                        <form action="{{ route('admin.roles.store') }}" method="POST">
                                                            @csrf
                                                            <div class="grid grid-cols-12 items-center my-5">
                                                                <div class="col-span-4">
                                                                    <label for="name">{{ translate('Role Name') }}</label>
                                                                </div>
                                                                <div class="col-span-8 flex">
                                                                    <input
                                                                        type="text"
                                                                        id="role_name"
                                                                        name="role_name"
                                                                        class="form-input flex-grow border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                                                        required>
                                                                    {{-- <button
                                                                        type="submit"
                                                                        class="ml-2 text-white btn bg-custom-500 border-custom-500 hover:bg-custom-600 focus:bg-custom-600">
                                                                        {{ translate('Save') }}
                                                                    </button> --}}
                                                                </div>
                                                            </div>
                                                            <!-- Tabs -->
                                                            <div class="grid grid-cols-1 my-5 mb-7">
                                                                <div class="card-header p-2 mt-2">
                                                                    <div class="flex items-center pt-7 gap-5 sm:gap-6 pb-1.5 border-b-[1px] border-b-[#dcdcdc] w-full flex-wrap">
                                                                        <a href="#" id="dashboard-link" class="tab-link" onclick="toggleSection(event, 'dashboard-section', this)">{{ translate('Dashboard') }}</a>
                                                                        <a href="#" id="members-link" class="tab-link" onclick="toggleSection(event, 'members-section', this)">{{ translate('Members') }}</a>
                                                                        <a href="#" id="profile-attributes-link" class="tab-link" onclick="toggleSection(event, 'profile-attributes-section', this)">{{ translate('Profile Attributes') }}</a>
                                                                        <a href="#" id="payments-link" class="tab-link" onclick="toggleSection(event, 'payments-section', this)">{{ translate('Payments') }}</a>
                                                                        <a href="#" id="frontend-settings-link" class="tab-link" onclick="toggleSection(event, 'frontend-settings-section', this)">{{ translate('Frontend Settings') }}</a>
                                                                        <a href="#" id="faqs-link" class="tab-link" onclick="toggleSection(event, 'faqs-section', this)">{{ translate('FAQs') }}</a>
                                                                        <a href="#" id="blogs-link" class="tab-link" onclick="toggleSection(event, 'blogs-section', this)">{{ translate('Blogs') }}</a>
                                                                        <a href="#" id="packages-link" class="tab-link" onclick="toggleSection(event, 'packages-section', this)">{{ translate('Packages') }}</a>
                                                                        <a href="#" id="reports-link" class="tab-link" onclick="toggleSection(event, 'reports-section', this)">{{ translate('Report') }}</a>
                                                                        <a href="#" id="marketings-link" class="tab-link" onclick="toggleSection(event, 'marketings-section', this)">{{ translate('Marketing') }}</a>
                                                                        <a href="#" id="app-settings-link" class="tab-link" onclick="toggleSection(event, 'app-settings-section', this)">{{ translate('App Setting') }}</a>
                                                                        <a href="#" id="chat-video-settings-link" class="tab-link" onclick="toggleSection(event, 'chat-video-settings-section', this)">{{ translate('Chat & Video Setting') }}</a>
                                                                    </div>
                                                                </div>
                                                                <!-- title -->
                                                                <div class="col-span-1 mt-5">
                                                                    <h6>{{ translate('Assign Permissions to Role') }}</h6>
                                                                </div>
                                                                <!-- Permission Section Template -->
                                                                <div class="card mt-3">
                                                                    <!-- Dashboard -->
                                                                    <div id="dashboard-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox" id="select-all" onclick="toggleAllPermissions(this)">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list" id="dashboardPermissions">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Dashboard][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Dashboard</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Dashboard][can_show]" value="1"> Show
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Members -->
                                                                    <div id="members-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox" id="select-all" onclick="toggleAllPermissions(this)">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list" id="membersPermissions">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Members][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Members</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_view]" value="1"> View
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Bulk Actions][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Bulk Actions</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Bulk Actions][can_shw]" value="1"> show
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Profile Attributes -->
                                                                    <div id="profile-attributes-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Profile Attributes][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Profile Attributes</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Profile Attributes][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Profile Attributes][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" value="Edit" name="permissions[Profile Attributes][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Profile Attributes][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Payments -->
                                                                    <div id="payments-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox"  id="select-all" onclick="toggleAllPermissions(this)">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Payments][enabled]" value="1"  onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Payments</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Payments][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Payments][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" value="Edit" name="permissions[Payments][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Frontend Settings -->
                                                                    <div id="frontend-settings-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Frontend Settings][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Frontend Settings</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Frontend Settings][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Frontend Settings][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Frontend Settings][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Frontend Settings][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- FAQs -->
                                                                    <div id="faqs-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[FAQs][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">FAQs</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[FAQs Category][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">FAQs Category</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs Category][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs Category][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs Category][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[FAQs Category][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Blogs -->
                                                                    <div id="blogs-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox"  name="permissions[Blogs][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Blogs</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox"  name="permissions[Blogs Category][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Blogs Category</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs Category][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs Category][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs Category][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Blogs Category][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Packages -->
                                                                    <div id="packages-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Packages][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Packages</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Packages][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Packages][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Packages][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Packages][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Report -->
                                                                    <div id="reports-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Financial][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Financial</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Financial][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Financial][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Financial][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Financial][can_delete]" value="1"> Delete
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Income][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Income</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Income][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Income][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Income][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Income][can_delete]" value="1"> Delete
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Detail][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Detail</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Detail][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Detail][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Detail][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Detail][can_delete]" value="1"> Delete
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[MemberReport][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Member Report</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[MemberReport][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Members][can_delete]" value="1"> Delete
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Marketing -->
                                                                    <div id="marketings-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox"name="permissions[Newsletter][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Newsletter</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Newsletter][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Newsletter][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Newsletter][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Newsletter][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Banners][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Banners</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Banners][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Banners][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Banners][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Banners][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- App Setting -->
                                                                    <div id="app-settings-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[General Settings][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">General Settings</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[General Settings][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[General Settings][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Preferences][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Preferences</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Preferences][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Preferences][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Analytic][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Analytic</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Analytic][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Analytic][can_edit]" value="1"> Edit
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[SEO Settings][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">SEO Settings</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[SEO Settings][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[SEO Settings][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Language][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Language</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Language][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Language][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Language][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Language][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Currency][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Currency</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Currency][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Currency][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Currency][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Payment Methods][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Payment Methods</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Payment Methods][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Payment Methods][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[SMTP Settings][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">SMTP Settings</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[SMTP Settings][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[SMTP Settings][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr> <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Email Templates][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Email Templates</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Email Templates][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Email Templates][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Third Party Settings][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Third Party Settings</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Third Party Settings][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Third Party Settings][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Cookie][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Cookie</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Cookie][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Cookie][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Social Media Login][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Social Media Login</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Social Media Login][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Social Media Login][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Abuse Word Filtering][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Abuse Word Filtering</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Abuse Word Filtering][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Abuse Word Filtering][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Abuse Word Filtering][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Abuse Word Filtering][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Push Notification][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Push Notification</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Push Notification][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Push Notification][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Staffs][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Staffs</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Staffs][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Staffs][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Staffs][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Staffs][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[System][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">System</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[System][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        {{-- <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[System][can_edit]" value="1"> Edit
                                                                                        </label> --}}
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5"><input type="checkbox" name="permissions[Footer][enabled]" value="1" onclick="togglePermissions(this)"></td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Footer</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Footer Section][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Footer Section</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer Section][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer Section][can_create]" value="1"> Create
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer Section][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Footer Section][can_delete]" value="1"> Delete
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <!-- Chat & Video Setting -->
                                                                    <div id="chat-video-settings-section" class="toggle-section" style="display:none;">
                                                                        <table class="w-full border-separate table-custom border-spacing-y-1 whitespace-nowrap">
                                                                            <thead class="text-left">
                                                                                <tr class="relative rounded-md bg-slate-100 dark:bg-zink-600">
                                                                                    <th class="px-3.5 py-0.5 first:pl-5 last:pr-5 font-semibold">
                                                                                        <input type="checkbox">
                                                                                    </th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Modules') }}</th>
                                                                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold">{{ translate('Permissions') }}</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody class="list">
                                                                                <tr class="relative rounded-md">
                                                                                    <td class="px-3.5 py-0.5 first:pl-5 last:pr-5">
                                                                                        <input type="checkbox" name="permissions[Chat & Video Setting][enabled]" value="1" onclick="togglePermissions(this)">
                                                                                    </td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">Chat & Video Setting</td>
                                                                                    <td class="px-3.5 py-2.5 first:pl-5 last:pr-5">
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Chat & Video Setting][can_show]" value="1"> Show
                                                                                        </label>
                                                                                        <label style="margin-right: 20px;">
                                                                                            <input type="checkbox" name="permissions[Chat & Video Setting][can_edit]" value="1"> Edit
                                                                                        </label>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="flex justify-end gap-2 mt-5 mb-5" style=" padding: 8px 20px;">
                                                                <button type="button" class="ml-2 text-white btn bg-custom-500 border-custom-500 hover:bg-custom-600 focus:bg-custom-600">{{ translate('Cancel') }}</button>
                                                                <button type="submit" class="ml-2 text-white btn bg-custom-500 border-custom-500 hover:bg-custom-600 focus:bg-custom-600">{{ translate('Create') }}</button>
                                                            </div>
                                                            {{-- <div class="flex justify-end gap-2 mt-4">
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Add New Staff') }}</button>
                                                            </div> --}}
                                                        </form>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="system">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('System') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="system-server-status" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Server Status') }}</a>
                                                    </li>
                                                    {{-- <li class="group">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="system-update" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Update') }}</a>
                                                    </li> --}}
                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="system-server-status">
                                                        <div class="card m-5">
                                                            <div class="card-header p-2 border-b">
                                                                <h6>{{ translate('Server information') }}</h6>
                                                            </div>
                                                            <div class="card-body p-4 bg-black">
                                                                <div class="overflow-x-auto">
                                                                    <table class="w-full border-separate table-custom border-spacing-y-1">
                                                                        <thead class="ltr:text-left rtl:text-right ">
                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <th class="px-3.5 py-2.5 font-semibold">{{ translate('Name') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold">{{ translate('Status') }}</th>

                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <td class="px-3.5 py-2.5">
                                                                                    <a href="javascript:void(0)" class="tr-expendable">-</a>
                                                                                    Php versions
                                                                                </td>
                                                                                <td class="px-3.5 py-2.5 text-green-400">{{ phpversion() }}<i class="ri-check-line"></i></td>
                                                                            </tr>
                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Current Version</td>
                                                                                <td class="px-3.5 py-2.5">8.0.30</td>
                                                                            </tr>


                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <td class="px-3.5 py-2.5">
                                                                                    <a href="javascript:void(0)" class="tr-expendable">-</a>
                                                                                    MySQL Version
                                                                                </td>
                                                                                <td class="px-3.5 py-2.5 text-green-400">
                                                                                    {{ DB::selectOne('SELECT VERSION() as version')->version }}
                                                                                </td>
                                                                            </tr>

                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Current Version</td>
                                                                                <td class="px-3.5 py-2.5">8.0.30</td>
                                                                            </tr>
                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Required Version</td>
                                                                                <td class="px-3.5 py-2.5">8.0.30</td>
                                                                            </tr>

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="card m-5">
                                                            <div class="card-header p-2 border-b">
                                                                <h6>{{ translate('php.ini Config') }}</h6>
                                                            </div>
                                                            <div class="card-body p-4 bg-black">
                                                                <div class="overflow-x-auto">
                                                                    <table class="w-full border-separate table-custom border-spacing-y-1">
                                                                        <thead class="ltr:text-left rtl:text-right ">
                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <th class="px-3.5 py-2.5 font-semibold">{{ translate('Config Name') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold">{{ translate('Status') }}</th>

                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <td class="px-3.5 py-2.5">
                                                                                    <a href="javascript:void(0)" class="tr-expendable">-</a>
                                                                                    File Uploads
                                                                                </td>
                                                                                <td class="px-3.5 py-2.5 text-green-400">
                                                                                    @if (ini_get('file_uploads'))
                                                                                        Enabled
                                                                                    @else
                                                                                        Disabled
                                                                                    @endif
                                                                                </td>
                                                                            </tr>

                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Current</td>
                                                                                <td class="px-3.5 py-2.5">On</td>
                                                                            </tr>
                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Recommended</td>
                                                                                <td class="px-3.5 py-2.5">On</td>
                                                                            </tr>

                                                                            <tr class="relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500">
                                                                                <td class="px-3.5 py-2.5">
                                                                                    <a href="javascript:void(0)" class="tr-expendable">-</a>
                                                                                    Max File Uploads
                                                                                </td>
                                                                                <td class="px-3.5 py-2.5 text-green-400">
                                                                                    {{ ini_get('max_file_uploads') }}
                                                                                </td>
                                                                            </tr>

                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Current</td>
                                                                                <td class="px-3.5 py-2.5">20</td>
                                                                            </tr>
                                                                            <tr class="hidden relative rounded-md bg-slate-50 after:absolute after:border-l-2 after:left-0 after:top-0 after:bottom-0 after:border-transparent dark:bg-zink-600 [&.active]:after:border-custom-500 active">
                                                                                <td class="px-3.5 py-2.5">Recommended</td>
                                                                                <td class="px-3.5 py-2.5">20+</td>
                                                                            </tr>

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="hidden tab-pane" id="system-update">
                                                        <div class="grid grid-cols-1 mt-4 gap-4">
                                                            <div class="col-span-1">
                                                                <div id="system-serve-status-info-div">
                                                                    <ul>

                                                                        <li>
                                                                            {{ translate('Make sure your server has matched with all requirements.') }}' <a  href="javascript:void(0);" id="open-system-server-status" data-tab-toggle data-target="system-server-status" class="text-pink-500"> {{ translate('Check Here') }}</a>
                                                                        </li>
                                                                        <li>
                                                                            {{ translate('Download latest version from codecanyon.') }}
                                                                        </li>
                                                                        <li>
                                                                            {{ translate('Extract downloaded zip. You will find updates.zip file in those extraced files.') }}
                                                                        </li>
                                                                        <li>
                                                                            {{ translate('Upload that zip file here and click update now.') }}
                                                                        </li>
                                                                        <li>
                                                                            {{ translate('If you are using any addon make sure to update those addons after updating.') }}
                                                                        </li>
                                                                        <li>
                                                                            {{ translate('Please turn off maintenance mode before updating.') }}
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="grid grid-cols-12 mt-4 gap-4">
                                                            <div class="col-span-8">
                                                                <input type="file" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your name">
                                                            </div>
                                                            <div class="col-span-4">
                                                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                            </div>

                                                        </div>
                                                    </div> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="cookie">
                                    <div class="card m-5">
                                        <form action="{{ route('admin.cookie_update', ['id' => $cookie->id]) }}" method="POST" >
                                            @csrf


                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Cookie') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div class="grid grid-cols-12 mt-4">
                                                <div class="col-span-4">
                                                    <label for="">{{ translate('Cookie Agreement Text') }}</label>
                                                </div>
                                                <div class="col-span-8">
                                                    <textarea name="content" placeholder="we use cookies for better user experiencce" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="cookie-agreement-text" rows="4">{{$cookie->content}}</textarea>
                                                </div>
                                            </div>

                                            <div class="grid grid-cols-12 mt-4">
                                                <div class="col-span-4">
                                                    <label for="">{{ translate('Show Cookie Agreemen?')  }}</label>
                                                </div>
                                                <div class="col-span-8">
                                                    <div class="relative inline-block w-10 align-middle transition duration-200 ease-in ltr:mr-2 rtl:ml-2">
                                                        <input type="checkbox" name="status" id="greenSoftSwitch2" class="absolute block transition duration-300 ease-linear border-2 rounded-full appearance-none cursor-pointer size-5 border-slate-200 dark:border-zink-600 bg-white/80 dark:bg-zink-400 peer/published checked:bg-green-500 dark:checked:bg-green-500 ltr:checked:right-0 rtl:checked:left-0 checked:border-green-100 dark:checked:border-green-900 arrow-none checked:bg-none"
                                                        {{ $cookie->status == 1 ? 'checked' : '' }}>

                                                        <label for="greenSoftSwitch2" class="block h-5 overflow-hidden duration-300 ease-linear border rounded-full cursor-pointer border-slate-200 dark:border-zink-500 bg-slate-200 dark:bg-zink-600 peer-checked/published:bg-green-100 peer-checked/published:border-green-100 dark:peer-checked/published:bg-green-900 dark:peer-checked/published:border-green-900"></label>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                @if($permissionForCookie !== null && $permissionForCookie->can_edit == '1')
                                                    <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                @endif
                                            </div>
                                        </div>

                                        </form>

                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="footer">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Footer') }}</h4>
                                        </div>
                                        <form action="{{ route('admin.footer.update', ['id' => $footers->id]) }}" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="card-body p-4 bg-black">


                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Footer Logo') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="file" name="logo" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file">
                                                        <div class="flex flex-wrap items-center gap-4 mt-4">
                                                            <div class="relative">
                                                            @if($footers->logo)
                                                                <div class="mb-2">
                                                                    <img style="width:20%" src="{{ asset('admin/logoImages/' . $footers->logo) }}" alt="Current Logo" class="w-32 h-32 object-cover">
                                                                </div>
                                                            @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Footer Description') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <textarea placeholder="Description" name="description" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" id="description" rows="3">{{ $footers->description }}</textarea>
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 mt-5">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Link Name') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" value="{{ $footers->links }}" name='links' id="links" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Search Name') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text" value="{{ $footers->search }}" name='search' id="search" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                    </div>
                                                </div>

                                                <div class="grid grid-cols-12 my-5">
                                                    <div class="col-span-4">
                                                        <label for="">{{ translate('Footer Content') }}</label>
                                                    </div>
                                                    <div class="col-span-8">
                                                        <input type="text"  value="{{ $footers->content }}" name='content' id="content"  class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                                    </div>
                                                </div>

                                                <div class="flex justify-end gap-2 mt-4">
                                                    @if($permissionForFooter !== null && $permissionForFooter->can_edit == '1')
                                                        <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="hidden tab-pane p-5" id="footer-section">
                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Footer Section') }}</h4>
                                        </div>
                                        <div class="card-body p-4 bg-black">
                                            <div>
                                                <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                    <li class="group active">
                                                        <a href="javascript:void(0);" data-tab-toggle data-target="footer-all" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('All') }}</a>
                                                    </li>
                                                    @if($permissionForFooterSection !== null && $permissionForFooterSection->can_create == '1')
                                                        <li class="group">
                                                            <a href="javascript:void(0);" data-tab-toggle data-target="footer-add" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">{{ translate('Add New') }}</a>
                                                        </li>
                                                    @endif
                                                </ul>

                                                <div class="mt-5 tab-content">
                                                    <div class="block tab-pane" id="footer-all">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <h6 class="mb-4 text-15">{{ translate('Table') }}</h6>

                                                                <div class="overflow-x-auto">
                                                                    <table class="w-full">
                                                                        <thead class="ltr:text-left rtl:text-right">
                                                                            <tr>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">#</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Page') }}</th>
                                                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Options') }}</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        @php
                                                                            $a=1;
                                                                        @endphp
                                                                        @foreach ($footerSections as $section)
                                                                            <tr>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$a}}</td>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $section->section_name }}</td>
                                                                              
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                    {{ $section->pages()->pluck('title')->implode(', ') }}
                                                                                </td>
                                                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                                                    @if($permissionForFooterSection !== null && $permissionForFooterSection->can_edit == '1')
                                                                                        <a href="javascript:void(0);"
                                                                                            class="edit-footer-btn transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600"
                                                                                            data-id="{{ $section->id }}"
                                                                                            data-section-name ="{{ $section->section_name }}"
                                                                                             data-section-page="{{ $section->pages()->pluck('id')->implode(',') }}"
                                                                                            >
                                                                                            <i class="ri-edit-2-line"></i>
                                                                                        </a>
                                                                                    @endif
                                                                                    @if($permissionForFooterSection !== null && $permissionForFooterSection->can_delete == '1')
                                                                                        <a href="javascript:void(0);"
                                                                                            class="transition-all duration-150 ease-linear text-red-500 hover:text-red-600"
                                                                                            onclick="confirmDeletion('{{ route('admin.footer.section.destroy', $section->id) }}')">
                                                                                            <i class="ri-delete-bin-2-line"></i>
                                                                                        </a>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                            @php
                                                                                $a++;
                                                                            @endphp
                                                                        @endforeach

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div><!--end card-->

                                                    </div>
                                                    <div class="hidden tab-pane" id="footer-add">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <form action="{{ route('admin.footer.section.store') }}" method="POST" enctype="multipart/form-data">
                                                                    @csrf

                                                                    <!-- Section Name -->
                                                                    <div class="mb-3">
                                                                        <label for="section_name" class="inline-block mb-2 text-base font-medium">
                                                                            {{ translate('Section Name') }}
                                                                        </label>
                                                                        <input
                                                                            type="text"
                                                                            name="section_name"
                                                                            id="section_name"
                                                                            class="form-input border-slate-200 focus:outline-none focus:border-custom-500"
                                                                            value="{{ old('section_name') }}"
                                                                            placeholder="Enter name">
                                                                    </div>

                                                                    <!-- Section Page -->
                                                                    <div class="mb-3">
                                                                        <label for="section_page" class="inline-block mb-2 text-base font-medium">
                                                                            {{ translate('Section Page') }}
                                                                            <span class="text-red-500">*</span>
                                                                        </label>
                                                                        <select name="section_page[]" id="section_page" class="choices-multiple" multiple>
                                                                            @foreach ($pages as $page)
                                                                                <option
                                                                                    value="{{ $page->id }}"
                                                                                    {{ (is_array(old('section_page')) && in_array($page->id, old('section_page'))) ? 'selected' : '' }}>
                                                                                    {{ $page->title }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>

                                                                    <!-- Submit Button -->
                                                                    <button type="submit" class="btn bg-custom-500 text-white hover:bg-custom-600 focus:ring focus:ring-custom-100">
                                                                        {{ translate('Submit') }}
                                                                    </button>
                                                                </form>
                                                            </div>

                                                        </div><!--end card-->

                                                    </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hidden tab-pane p-5" id="user-footer-section">
                                <div class="card m-5">
                                    <div class="card-header p-2 bg-slate-900">
                                        <h4 class="text-white">User Dashorad Footer Section</h4>
                                    </div>
                                    <div class="card-body p-4 bg-black">
                                        <div>
                                            <ul class="flex flex-wrap w-full text-sm font-medium text-center border-b border-slate-200 dark:border-zink-500 nav-tabs">
                                                <li class="group active">
                                                    <a href="javascript:void(0);" data-tab-toggle data-target="get-footer-all" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 hover:text-custom-500 active:text-custom-500 dark:hover:text-custom-500 dark:active:text-custom-500 dark:group-[.active]:hover:text-custom-500 -mb-[1px]">Add Pages</a>
                                                </li>
                                              
                                            </ul>

                                            <div class="mt-5 tab-content">
                                                
                                                <div class="tab-pane" id="get-footer-all">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <form action="{{ route('admin.Userfooter.section.store') }}" method="POST" enctype="multipart/form-data">
                                                                @csrf

                                                                <!-- Section Page -->
                                                                <div class="mb-3">
                                                                    <label for="section_page" class="inline-block mb-2 text-base font-medium">
                                                                        {{ translate('Section Page') }}
                                                                        <span class="text-red-500">*</span>
                                                                    </label>
                                                                    <select name="section_page[]" id="user_section_page" class="choices-multiple" multiple>
                                                                        @foreach ($pages as $page)

                                                                        @php
                                                                            $selecteduserpages = explode(',', $userselectedpages->page_ids ?? '');
                                                                        @endphp
                                                                        <option value="{{ $page->id }}"
                                                                            {{ in_array($page->id, $selecteduserpages) ? 'selected' : '' }}>
                                                                            {{ $page->title }}
                                                                        </option>

                                                                        @endforeach
                                                                    </select>
                                                                </div>

                                                                <!-- Submit Button -->
                                                                <button type="submit" class="btn bg-custom-500 text-white hover:bg-custom-600 focus:ring focus:ring-custom-100">
                                                                    Update
                                                                </button>
                                                            </form>
                                                        </div>

                                                    </div><!--end card-->

                                                </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end grid-->

    </div>
    <!-- container-fluid -->
</div>
@php
    // dd($activeTab = session('active_tab', 'defaultTab'));
@endphp



{{-- Edit Language Modal --}}
<div id="editModal" modal-center class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div style="width:500px;" class="bg-white rounded-lg shadow-xl max-w-md p-6">
            <h2 class="text-lg font-semibold mb-4">{{ translate('Edit Language') }}</h2>

            <form id="editLanguageForm" method="POST" action="" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" id="editLanguageId" name="id">

                <!-- Name field -->
                <div class="mb-3">
                    <label for="name" class="inline-block mb-2 text-base font-medium">{{ translate('Name') }}<span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="editLanguageName" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200" value="{{ old('name') }}" required>
                </div>

                <!-- Code field -->
                <div class="mb-3">
                    <label for="code" class="inline-block mb-2 text-base font-medium">{{ translate('Code') }}<span class="text-red-500">*</span></label>
                    <input type="text" name="code" id="editLanguageCode" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200" value="{{ old('code') }}" required>
                </div>

                <!-- Image field -->
                <div class="mb-3">
                    <label for="image" class="inline-block mb-2 text-base font-medium">{{ translate('Image') }}<span class="text-red-500">*</span></label>
                    <input type="file" name="image" id="editLanguageImage" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500">

                    <!-- Display current image if it exists -->
                    <div id="currentImage" class="mt-2">
                        @if($language->image)
                            <img src="{{ asset('admin/assets/images/' . $language->image) }}" alt="Current Image" class="rounded" width="100">
                        @endif
                    </div>
                </div>

                <div class="flex items-center justify-end">
                    <button type="button" class="text-red-500 bg-white btn hover:text-red-500 hover:bg-red-100" onclick="closeEditModal()">{{ translate('Cancel') }}</button>
                    <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:bg-custom-600 focus:bg-custom-600">{{ translate('Save') }}</button>
                </div>
            </form>
        </div>
    </div>
</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>
<script src="{{asset('admin/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js')}}"></script>
<script src="{{asset('admin/assets/libs/apexcharts/apexcharts.min.js')}}"></script>

<!-- dropzone -->
<script src="{{asset('admin/assets/libs/dropzone/dropzone-min.js')}}"></script>
<!--product create init js-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product-create.init.js')}}"></script>

<script src="{{asset('admin/assets/libs/moment/moment.js')}}"></script>
<!-- for basic area chart -->
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
<!-- for github style chart -->
<script src="https://apexcharts.com/samples/assets/github-data.js"></script>
<!-- for irregular timeseries chart -->
<script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>

<script src="{{asset('admin/assets/js/pages/apexcharts-area.init.js')}}"></script>
<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

<script src="{{asset('admin/assets/js/datatables/jquery-3.7.0.js')}}"></script>


<script>
    document.querySelector('.group > a[data-target="currency"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="currency-all"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="language"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="language-all"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="payment-methods"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="payment-methods-mollie"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="smtp-settings"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="smtp-settings-smtp-settings"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="social-media-login"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="social-media-login-google"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="push-notification"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="push-notification-setting"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="staffs"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="staffs-all-staff"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="system"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="system-server-status"]');
        if (secondLink) {
            secondLink.click();
        }
    });

    document.querySelector('.group > a[data-target="footer-section"]').addEventListener('click', function() {
        const secondLink = document.querySelector('.group.active > a[data-target="footer-all"]');
        if (secondLink) {
            secondLink.click();
        }
    });


</script>



<script>

for(var i = 1; i <= 13 ; i++){
    ClassicEditor.create(document.querySelector('#email-templates-'+i+'-body')).catch(function (error) {
        console.error(error);
    });
}

ClassicEditor.create(document.querySelector('#cookie-agreement-text')).catch(function (error) {
    console.error(error);
});

$(document).ready(function(){
    $("#open-system-server-status").click(function(){
        $('[data-target="system-update"]').parent().removeClass("active");
        $('[data-target="system-server-status"]').parent().addClass("active");
        $('#system-update').addClass("hidden").removeClass("block");
        $('#system-server-status').removeClass("hidden").addClass("block");
    })

    $(".tr-expendable").on("click",function(){
        var btn = $(this);
        var siblings = $(this).parent().parent().nextAll();
        if(siblings.length){
            if(btn.html() == '-'){
                btn.html('+');
                $.each(siblings,function(i,e){
                    if($(this).hasClass('active')){
                        $(this).removeClass('hidden')
                    }else{
                        return false;
                    }
                })
            }else{
                btn.html('-');
                $.each(siblings,function(i,e){
                    if($(this).hasClass('active')){
                        $(this).addClass('hidden')
                    }else{
                        return false;
                    }
                })
            }

        }

    })
})


</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif
</script>

@endsection

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

#email-links-container{
    width:200px;
    padding:0.5rem;
}
#third-party-settings-links-container{
    width:200px;
    padding:0.5rem;
}
/* #gs-links-container li{
    height:20px;
} */

#system-serve-status-info-div{
    background-color: lightblue;
    border-radius: 5px;
}

#system-serve-status-info-div ul{
    list-style-type: disc;
    padding: 20px 50px 20px 50px;
}


#system-serve-status-info-div ul li{
    font-family: Poppins, Helvetica, sans-serif;
}

</style>




<script src="{{ asset('admin/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Iterate over all the templates and initialize CKEditor for each one
        @foreach($template as $key => $temp)
            ClassicEditor
                .create(document.querySelector('#email-template-{{ $key }}'))
                .catch(error => {
                    console.error(error);
                });
        @endforeach
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
            ClassicEditor
                .create(document.querySelector('#sendwink'))
                .catch(error => {
                    console.error(error);
                });
    });
</script>


<script>
    // Add new row dynamically
    function addNewRow() {
        const row = `<div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden filtering-row">
                        <div class="grow">
                            <input type="text" name="words[]" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                        </div>
                        <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                            <li class="text-lg text-red-500 relative before:font-remix ltr:before:-right-1 rtl:before:-left-1 before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                                <i class="ri-delete-bin-7-line delete-row" onclick="removeRow(this)"></i>
                            </li>
                        </ul>
                    </div>`;
        document.getElementById('abuseFilteringRows').insertAdjacentHTML('beforeend', row);
        updateDeleteButtons();
    }

    // Remove a row dynamically
    function removeRow(element) {
        const rows = document.querySelectorAll('.filtering-row');
        if (rows.length > 1) {
            element.closest('.filtering-row').remove();
        }
        updateDeleteButtons();
    }

    // Disable delete button if only one row exists
    function updateDeleteButtons() {
        const rows = document.querySelectorAll('.filtering-row');
        const deleteButtons = document.querySelectorAll('.delete-row');
        deleteButtons.forEach(btn => {
            if (rows.length === 1) {
                btn.style.pointerEvents = 'none';
                btn.style.color = '#ccc'; // disable appearance
            } else {
                btn.style.pointerEvents = 'auto';
                btn.style.color = 'red'; // enable appearance
            }
        });
    }

    // Initial call to disable delete button if only one row exists
    document.addEventListener('DOMContentLoaded', function() {
        updateDeleteButtons();
    });
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    function updateCurrencyRtl(currencyId, isChecked) {
        let rtlValue = isChecked ? 1 : 0;

        $.ajax({
            url: '{{ route("admin.currency.updateRtl") }}', // Your route here
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',  // Add CSRF token for security
                id: currencyId,
                rtl: rtlValue
            },
            success: function(response) {
                if(response.success) {
                    alert(response.message);
                    toastr.success(response.message);  // Display success message
                } else {
                    toastr.error('Failed to update RTL value');
                }
            },
            error: function(xhr) {
                toastr.error('Error occurred while updating RTL value');
            }
        });
    }
</script>

<script>
    function confirmDelete(url, id) {
        // Show confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the delete URL with the ID
                window.location.href = `${url}/${id}`;
            }
        });
    }
</script>

<script>
    function confirmDeletion(url, id) {

        // Show confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the delete URL with the ID
                window.location.href = `${url}`;
            }
        });
    }
</script>

<script>
    function confirmRoleDelete(url, id) {

        // Show confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to the delete URL with the ID
                window.location.href = `${url}`;
            }
        });
    }
</script>

<!-- Include the script to initialize Choices.js -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const sectionPageSelect = document.getElementById('section_page');
    new Choices(sectionPageSelect, {
        removeItemButton: true,
        searchEnabled: true,
        placeholder: true,
        placeholderValue: "{{ translate('Select') }}",
    });
});
</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sectionPageSelect = document.getElementById('user_section_page');
        new Choices(sectionPageSelect, {
            removeItemButton: true,
            searchEnabled: true,
            placeholder: true,
            placeholderValue: "{{ translate('Select') }}",
        });
    });
    </script>


<script>
    // Function to toggle sections
    function toggleSection(event, sectionId, link) {
        event.preventDefault();

        // Hide all sections first
        var sections = document.querySelectorAll('.toggle-section');
        sections.forEach(function(section) {
            section.style.display = 'none';
        });

        // Remove 'active' class and underline from all links
        var links = document.querySelectorAll('a');
        links.forEach(function(link) {
            link.classList.remove('active');
            link.style.setProperty('border-bottom', 'none'); // Reset underline
            link.style.setProperty('position', ''); // Reset position
        });

        // Show the clicked section
        var section = document.getElementById(sectionId);
        section.style.display = 'block';

        // Add 'active' class to the clicked link for styling
        link.classList.add('active');
        // Apply relative positioning and blue underline for the active tab
        link.style.setProperty('position', 'relative');
    }

    // Initialize first tab as active
    window.onload = function() {
        // Get the first tab and the first section
        var firstLink = document.querySelector('a');
        var firstSection = document.querySelector('.toggle-section');

        // Set the first link as active
        firstLink.classList.add('active');
        firstLink.style.setProperty('position', 'relative');

        // Show the first section
        if (firstSection) {
            firstSection.style.display = 'block';
        }
    }
</script>

<script>
   function toggleSection(event, sectionId, link) {
    event.preventDefault();

    // Hide all sections
    document.querySelectorAll('.toggle-section').forEach((section) => {
        section.style.display = 'none';
    });

    // Remove 'active' class from all tabs
    document.querySelectorAll('.tab-link').forEach((tab) => {
        tab.classList.remove('active');
    });

    // Show the selected section
    document.getElementById(sectionId).style.display = 'block';

    // Add 'active' class to the clicked tab
    link.classList.add('active');
    }

    // Initialize the first tab as active on page load
    window.onload = function () {
        const firstTab = document.querySelector('.tab-link');
        const firstSection = document.querySelector('.toggle-section');

        if (firstTab && firstSection) {
            firstTab.classList.add('active');
            firstSection.style.display = 'block';
        }
    };

</script>

<style>
    /* Base tab link styling */
.tab-link {
    text-base;
    color: #000; /* Default text color */
    border-bottom: 2px solid transparent; /* Transparent border */
    transition: all 0.3s ease-in-out;
    padding-bottom: 5px;
    text-decoration: none;
}

/* Hover effect */
.tab-link:hover {
    color: #007bff; /* Hover color */
}

/* Active tab styling */
.tab-link.active {
    color: #007bff; /* Active text color */
    border-bottom: 2px solid #007bff; /* Blue underline */
    font-weight: bold; /* Highlight font weight */
}

</style>

<script>
    function togglePermissions(masterCheckbox) {
        const row = masterCheckbox.closest('tr'); // Get the parent row of the clicked checkbox
        const checkboxes = row.querySelectorAll('input[type="checkbox"]'); // Find all checkboxes in the same row
        checkboxes.forEach(checkbox => checkbox.checked = masterCheckbox.checked); // Toggle their checked state
    }
</script>

{{-- <script>
    const baseUrl = "{{ url('/') }}";

    // Function to open the edit modal and populate it with data
    document.querySelectorAll('.edit-language-btn').forEach(button => {
        button.addEventListener('click', function() {
            const languageId = this.getAttribute('data-id');
            const languageName = this.getAttribute('data-name');
            const languageCode = this.getAttribute('data-code');
            const languageImage = this.getAttribute('data-image');

            // Populate the form fields
            document.getElementById('editLanguageId').value = languageId;
            document.getElementById('editLanguageName').value = languageName;
            document.getElementById('editLanguageCode').value = languageCode;

            // Update current image if available
            const currentImageDiv = document.getElementById('currentImage');
            if (languageImage) {
                currentImageDiv.innerHTML = `<img src="${baseUrl}/admin/assets/images/${languageImage}" alt="Current Image" class="rounded" width="100">`;
            } else {
                currentImageDiv.innerHTML = "<span>No image available</span>";
            }

            // Set the form action to the correct update URL
            const form = document.getElementById('editLanguageForm');
            form.action = `${baseUrl}/admin/language/${languageId}/update`;

            // Show the modal
            document.getElementById('editModal').classList.remove('hidden');
        });
    });

    // Function to close the modal
    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }
</script> --}}

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const baseUrl = "{{ url('/') }}";

    document.querySelectorAll('.edit-language-btn').forEach(button => {
        button.addEventListener('click', function () {
            console.log('Edit button clicked'); // Debugging log

            const languageId = this.getAttribute('data-id');
            const languageName = this.getAttribute('data-name');
            const languageCode = this.getAttribute('data-code');
            const languageImage = this.getAttribute('data-image');

            if (!languageId || !languageName || !languageCode) {
                console.error('Missing data attributes on the button');
                return;
            }

            // Populate the form fields
            document.getElementById('editLanguageId').value = languageId;
            document.getElementById('editLanguageName').value = languageName;
            document.getElementById('editLanguageCode').value = languageCode;

            // Update current image if available
            const currentImageDiv = document.getElementById('currentImage');
            if (languageImage) {
                currentImageDiv.innerHTML = `<img src="${baseUrl}/admin/assets/images/${languageImage}" alt="Current Image" class="rounded" width="100">`;
            } else {
                currentImageDiv.innerHTML = "<span>No image available</span>";
            }

            // Set the form action to the correct update URL
            const form = document.getElementById('editLanguageForm');
            form.action = `${baseUrl}/admin/language/${languageId}/update`;

            // Show the modal
            const modal = document.getElementById('editModal');
            modal.classList.remove('hidden');
            console.log('Modal opened'); // Debugging log
        });
    });
});

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    console.log('Modal closed'); // Debugging log
}

</script>

{{-- Edit Footer Section Modal --}}
<div id="editFooterModal" modal-center class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen">
        <div class="card">
            <div class="card-body">
                <h2 class="text-lg font-semibold mb-4">{{ translate('Edit Footer Section') }}</h2>

                <form id="editFooterSectionForm" method="POST" action="" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="editFooterSectionId" name="id">

                    <!-- Section Name -->
                    <div class="mb-3">
                        <label for="section_name" class="inline-block mb-2 text-base font-medium">{{ translate('Section Name') }}</label>
                        <input type="text" name="section_name" id="editFooterSectionName" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
                    </div>

                    <!-- Section Page -->
                    <div class="mb-3">
                        <label for="section_page" class="inline-block mb-2 text-base font-medium">{{ translate('Section Page') }}</label>
                        <select name="section_page[]" id="editFooterSectionPage" class="form-select form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 placeholder:text-slate-400 dark:placeholder:text-zink-200" multiple required>
                            @foreach ($pages as $page)
                                <option value="{{ $page->id }}">{{ $page->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex items-center justify-end">
                        <button type="button" class="text-red-500 bg-white btn hover:text-red-500 hover:bg-red-100" onclick="closeEditFooterModal()">{{ translate('Cancel') }}</button>
                        <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:bg-custom-600 focus:bg-custom-600">{{ translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>

document.addEventListener('DOMContentLoaded', function () {
    const baseUrl = "{{ url('/') }}";

    // Open Edit Modal
    document.querySelectorAll('.edit-footer-btn').forEach(button => {
        button.addEventListener('click', function () {
            const footerId = this.getAttribute('data-id');
            const footerSectionName = this.getAttribute('data-section-name');
            const footerSectionPage = this.getAttribute('data-section-page');
            
            console.log('Footer Section ID:', footerId); // Debugging
            console.log('Footer Section Name:', footerSectionName); // Debugging
            console.log('Footer Section Pages:', footerSectionPage); // Debugging

            // Populate the form fields
            document.getElementById('editFooterSectionId').value = footerId;
            document.getElementById('editFooterSectionName').value = footerSectionName;

            // Access the multi-select field
            const sectionPageField = document.getElementById('editFooterSectionPage');

            // Destroy any existing Choices.js instance
            if (sectionPageField.choicesInstance) {
                sectionPageField.choicesInstance.destroy();
            }

            // Clear previous selections
            Array.from(sectionPageField.options).forEach(option => {
                option.selected = false;
            });

            // Set selected values for the current section
            if (footerSectionPage) {
                const selectedPages = footerSectionPage.split(',').map(page => page.trim());
                Array.from(sectionPageField.options).forEach(option => {
                    if (selectedPages.includes(option.value)) {
                        option.selected = true;
                    }
                });
            }

            // Initialize Choices.js
            const choicesInstance = new Choices(sectionPageField, {
                removeItemButton: true,
                allowHTML: true,
            });

            // Save the Choices.js instance for future reference
            sectionPageField.choicesInstance = choicesInstance;

            // Set form action
            const form = document.getElementById('editFooterSectionForm');
            form.action = `${baseUrl}/admin/footer/section/${footerId}/update`;

            // Show modal
            document.getElementById('editFooterModal').classList.remove('hidden');
        });
    });

    // Close Edit Modal
    window.closeEditFooterModal = function () {
        document.getElementById('editFooterModal').classList.add('hidden');
    };
});


</script>
    
@endsection