@extends('layouts.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/scrollable.css') }}">
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const activeGatewaySelect = document.getElementById('sms_gateways_config[active_gateway]');
            const gatewaySettingsDivs = document.querySelectorAll('.gateway-settings');

            function toggleGatewaySettings() {
                const selectedGateway = activeGatewaySelect.value;

                gatewaySettingsDivs.forEach(div => {
                    if (div.id === selectedGateway + '_settings') {
                        div.style.display = 'block';
                    } else {
                        div.style.display = 'none';
                    }
                });
            }

            // Initial call to set the correct display based on the pre-selected value
            toggleGatewaySettings();

            // Add event listener for changes
            activeGatewaySelect.addEventListener('change', toggleGatewaySettings);
        });
    </script>
@endpush

@section('breadcrumb')
    <div class="header-logo-wrapper col-auto">
        <div class="logo-wrapper"><a href="{{ route('admin.dashboard') }}"><img class="img-fluid for-light"
                    src="{{ asset('assets/images/logo/logo.png') }}" alt="" /><img class="img-fluid for-dark"
                    src="{{ asset('assets/images/logo/logo_light.png') }}" alt="" /></a></div>
    </div>
    <div class="col-4 col-xl-4 page-title">
        <h4 class="f-w-700">Settings</h4>
        <nav>
            <ol class="breadcrumb justify-content-sm-start align-items-center mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <i data-feather="home"> </i></a></li>
                <li class="breadcrumb-item f-w-400">Settings
                </li>
                <li class="breadcrumb-item f-w-400 active">Settings</li>
            </ol>
        </nav>
    </div>
@endsection

@section('main_content')
    <div class="container-fluid basic_table setting-page">
        <div class="card">
            <div class="card-header">
                <h4>Settings</h4>
            </div>
            <div class="card-body">
                <div class="row setting-page-con">
                    <div class="col-xxl-3 box-col-12 pe-0 left-sidebar">
                        <div class="md-sidebar sticky-sidebar">
                            <div class="job-left-aside custom-scrollbar">
                                <div class="file-sidebar">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                                <ul class="custom-scrollbar">
                                                    <li>
                                                        <a class="nav-link btn main active" id="General_tab" data-bs-toggle="pill"
                                                            href="#General" role="tab" aria-controls="v-pills-settings"
                                                            aria-selected="false"><i data-feather="settings"></i>
                                                            General
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="nav-link main btn" id="Google_Recaptcha_tab" data-bs-toggle="pill"
                                                            href="#Google_Recaptcha" role="tab" aria-controls="v-pills-settings"
                                                            aria-selected="false"><img src="{{ asset('assets/svg/captcha.svg') }}" alt="">
                                                            Google reCAPTCHA
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="nav-link main btn" id="Social_Login_tab" data-bs-toggle="pill"
                                                            href="#Social_Login" role="tab" aria-controls="v-pills-settings"
                                                            aria-selected="false"><img src="{{ asset('assets/svg/social-login.svg') }}"
                                                                                alt="">
                                                            Social Login
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="nav-link main btn" id="SMS_Gateways_tab" data-bs-toggle="pill"
                                                            href="#SMS_Gateways" role="tab" aria-controls="v-pills-settings"
                                                            aria-selected="false"><i data-feather="message-square"></i>
                                                            SMS Gateways
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="col-xxl-9 col-md-12 box-col-12">
                    <form method="POST" class="needs-validation user-add" id="settingsForm"
                        action="{{ route('admin.update.settings', $settingsId) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="tab-content w-100" id="v-pills-tabContent">

                            <div class="tab-pane main fade show active" id="General" role="tabpanel"
                                aria-labelledby="v-pills-settings-tab" tabindex="1">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="form-group row">
                                            <label for="image" class="col-md-2" for="general[light_logo]">Light Logo <span
                                                    class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="file" id="general[light_logo]"
                                                    name="general[light_logo]">
                                                @error('general[light_logo]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                 <span class="help-text">*Upload image size 133×47px
                                                    recommended</span>
                                            </div>
                                        </div>
                                        @isset($settings['general']['light_logo'])
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-10 mb-3">
                                                        <div class="image-list d-inline-block">
                                                            <div class="image-list-detail">
                                                                <div class="position-relative">
                                                                    <img src="{{ asset($settings['general']['light_logo']) }}"
                                                                        height="40px"
                                                                        id="{{ $settings['general']['light_logo'] }}"
                                                                        alt="Light Logo" class="image-list-item">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endisset
                                        <div class="form-group row">
                                            <label for="image" class="col-md-2" for="general[dark_logo]">Dark Logo <span
                                                    class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="file" id="general[dark_logo]"
                                                    name="general[dark_logo]">
                                                @error('general[dark_logo]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                 <span class="help-text">*Upload image size 100×35px
                                                    recommended</span>
                                            </div>
                                        </div>
                                        @isset($settings['general']['dark_logo'])
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-10 mb-3">
                                                        <div class="image-list">
                                                            <div class="image-list-detail">
                                                                <div class="position-relative">
                                                                    <img src="{{ asset($settings['general']['dark_logo']) }}"
                                                                        height="40px"
                                                                        id="{{ $settings['general']['dark_logo'] }}"
                                                                        alt="Dark Logo" class="image-list-item">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endisset
                                        <div class="form-group row">
                                            <label for="image" class="col-md-2" for="general[favicon]">Favicon <span
                                                    class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="file" id="general[favicon]"
                                                    name="general[favicon]">
                                                @error('general[favicon]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                 <span class="help-text">*Upload image size 32×32px
                                                    recommended</span>
                                            </div>
                                        </div>
                                        @isset($settings['general']['favicon'])
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-10 mb-3">
                                                        <div class="image-list">
                                                            <div class="image-list-detail">
                                                                <div class="position-relative">
                                                                    <img src="{{ asset($settings['general']['favicon']) }}"
                                                                        height="50px"
                                                                        id="{{ $settings['general']['favicon'] }}"
                                                                        alt="favicon" class="image-list-item">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endisset
                                        <div class="form-group row">
                                            <label class="col-md-2" for="general[site_name]">Site Name <span
                                                    class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="text" id="general[site_name]"
                                                    name="general[site_name]"
                                                    value="{{ $settings['general']['site_name'] ?? old('site_name') }}"
                                                    placeholder="Enter Site Name">
                                                @error('general[site_name]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-2" for="general[copyright_text]">Copyright Text <span
                                                    class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="text"
                                                    id="general[copyright_text]" name="general[copyright_text]"
                                                    value="{{ $settings['general']['copyright_text'] ?? old('copyright_text') }}"
                                                    placeholder="Enter Text">
                                                @error('general[copyright_text]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-2" for="general[right_side_footer]">Right Side Footer
                                                Text <span class="txt-danger">*</span></label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="text"
                                                    id="general[right_side_footer]" name="general[right_side_footer]"
                                                    value="{{ $settings['general']['right_side_footer'] ?? old('right_side_footer') }}"
                                                    placeholder="Enter Text">
                                                @error('general[right_side_footer]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                            <div class="form-group row">
                                                <label for="image" class="col-md-2" for="general[footer_icon]">Footer Icon <span
                                                        class="txt-danger">*</span></label>
                                                <div class="col-md-10 mb-3">
                                                    <input class="form-control" type="file" id="general[footer_icon]"
                                                        name="general[footer_icon]">
                                                    @error('general[footer_icon]')
                                                         <span class="invalid-feedback d-block" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                     <span class="help-text">*Upload image size 24×24px
                                                        recommended</span>
                                                </div>
                                            </div>
                                            @isset($settings['general']['footer_icon'])
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-2"></div>
                                                        <div class="col-md-10 mb-3">
                                                            <div class="image-list">
                                                                <div class="image-list-detail">
                                                                    <div class="position-relative">
                                                                        <img src="{{ asset($settings['general']['footer_icon']) }}"
                                                                            height="40px"
                                                                            id="{{ $settings['general']['footer_icon'] }}"
                                                                            alt="Dark Logo" class="image-list-item">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endisset
                                        <div class="text-end">
                                            <button class="btn btn-primary spinner-btn" type="submit">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane main fade" id="Google_Recaptcha" role="tabpanel"
                                aria-labelledby="v-pills-settings-tab" tabindex="2">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="form-group row">
                                            <label class="col-md-2" for="google_reCaptcha[secret]">Secret Key</label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="password"
                                                    id="google_reCaptcha[secret]" name="google_reCaptcha[secret]"
                                                    value="{{ $settings['google_reCaptcha']['secret'] ?? old('secret') }}"
                                                    placeholder="Enter Secret Key">
                                                @error('google_reCaptcha[secret]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-2" for="google_reCaptcha[site_key]">Site
                                                Key</label>
                                            <div class="col-md-10 mb-3">
                                                <input class="form-control" type="password"
                                                    id="google_reCaptcha[site_key]" name="google_reCaptcha[site_key]"
                                                    value="{{ $settings['google_reCaptcha']['site_key'] ?? old('site_key') }}"
                                                    placeholder="Enter Site Key">
                                                @error('google_reCaptcha[site_key]')
                                                     <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-md-2" for="google_reCaptcha[status]">Status</label>
                                            <div class="col-md-10 mb-3">
                                                <div class="editor-space">
                                                    <label class="switch">
                                                        @if (isset($settings['google_reCaptcha']['status']))
                                                            <input class="form-control" type="hidden"
                                                                name="google_reCaptcha[status]" value="0">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="google_reCaptcha[status]" value="1"
                                                                {{ $settings['google_reCaptcha']['status'] ? 'checked' : '' }}>
                                                        @else
                                                            <input class="form-control" type="hidden"
                                                                name="google_reCaptcha[status]" value="0">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="google_reCaptcha[status]" value="1">
                                                        @endif
                                                         <span class="switch-state"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button class="btn btn-primary spinner-btn" type="submit">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane main fade" id="Social_Login" role="tabpanel"
                                aria-labelledby="v-pills-settings-tab" tabindex="3">
                                <div class="card">
                                    <div class="card-body">
                                        <ul class="simple-wrapper nav nav-tabs border-tab border-1 nav-primary mb-5 custom-scrollbar"
                                            id="pills-tab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="google_tab" data-bs-toggle="pill"
                                                    href="#google" role="tab" aria-controls="google"
                                                    aria-selected="true">Google</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="facebook_tab" data-bs-toggle="pill"
                                                    href="#facebook" role="tab" aria-controls="facebook"
                                                    aria-selected="false">Facebook</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane fade show active" id="google" role="tabpanel"
                                                aria-labelledby="google_tab">
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[google][google_client_id]">
                                                        Client
                                                        Id</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[google][google_client_id]"
                                                            name="social_login[google][google_client_id]"
                                                            value="{{ $settings['social_login']['google']['google_client_id'] ?? old('social_login[google][google_client_id]') }}"
                                                            placeholder="Enter Client Id">
                                                        @error('social_login[google][google_client_id]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[google][google_client_secret]">
                                                        Client
                                                        Secret</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[google][google_client_secret]"
                                                            name="social_login[google][google_client_secret]"
                                                            value="{{ $settings['social_login']['google']['google_client_secret'] ?? old('social_login[google][google_client_secret]') }}"
                                                            placeholder="Enter Client Secret">
                                                        @error('social_login[google][google_client_secret]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[google][google_redirect_url]">
                                                        Redirect
                                                        Url</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[google][google_redirect_url]"
                                                            name="social_login[google][google_redirect_url]"
                                                            value="{{ $settings['social_login']['google']['google_redirect_url'] ?? old('social_login[google][google_redirect_url]') }}"
                                                            placeholder="Enter Redirect Url">
                                                        @error('social_login[google][google_redirect_url]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[google][google_login_status]">Status</label>
                                                    <div class="col-md-10 mb-3">
                                                        <div class="editor-space">
                                                            <label class="switch">
                                                                @if (isset($settings['social_login']['google']['google_login_status']))
                                                                    <input class="form-control" type="hidden"
                                                                        name="social_login[google][google_login_status]"
                                                                        value="0">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="social_login[google][google_login_status]"
                                                                        value="1"
                                                                        {{ $settings['social_login']['google']['google_login_status'] ? 'checked' : '' }}>
                                                                @else
                                                                    <input class="form-control" type="hidden"
                                                                        name="social_login[google][google_login_status]"
                                                                        value="0">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="social_login[google][google_login_status]"
                                                                        value="1">
                                                                @endif
                                                                 <span class="switch-state"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="tab-pane fade" id="facebook" role="tabpanel"
                                                aria-labelledby="facebook_tab">
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[facebook][facebook_client_id]">
                                                        App
                                                        Id</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[facebook][facebook_client_id]"
                                                            name="social_login[facebook][facebook_client_id]"
                                                            value="{{ $settings['social_login']['facebook']['facebook_client_id'] ?? old('social_login[facebook][facebook_client_id]') }}"
                                                            placeholder="Enter App Id">
                                                        @error('social_login[facebook][facebook_client_id]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[facebook][facebook_client_secret]">
                                                        App Secret</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[facebook][facebook_client_secret]"
                                                            name="social_login[facebook][facebook_client_secret]"
                                                            value="{{ $settings['social_login']['facebook']['facebook_client_secret'] ?? old('social_login[facebook][facebook_client_secret]') }}"
                                                            placeholder="Enter App Secret">
                                                        @error('social_login[facebook][facebook_client_secret]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[facebook][facebook_redirect_url]">
                                                        Redirect Url</label>
                                                    <div class="col-md-10 mb-3">
                                                        <input class="form-control" type="password"
                                                            id="social_login[facebook][facebook_redirect_url]"
                                                            name="social_login[facebook][facebook_redirect_url]"
                                                            value="{{ $settings['social_login']['facebook']['facebook_redirect_url'] ?? old('social_login[facebook][facebook_redirect_url]') }}"
                                                            placeholder="Enter Redirect Url">
                                                        @error('social_login[facebook][facebook_redirect_url]')
                                                             <span class="invalid-feedback d-block" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-md-2"
                                                        for="social_login[facebook][facebook_login_status]">Status</label>
                                                    <div class="col-md-10 mb-3">
                                                        <div class="editor-space">
                                                            <label class="switch">
                                                                @if (isset($settings['social_login']['facebook']['facebook_login_status']))
                                                                    <input class="form-control" type="hidden"
                                                                        name="social_login[facebook][facebook_login_status]"
                                                                        value="0">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="social_login[facebook][facebook_login_status]"
                                                                        value="1"
                                                                        {{ $settings['social_login']['facebook']['facebook_login_status'] ? 'checked' : '' }}>
                                                                @else
                                                                    <input class="form-control" type="hidden"
                                                                        name="social_login[facebook][facebook_login_status]"
                                                                        value="0">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="social_login[facebook][facebook_login_status]"
                                                                        value="1">
                                                                @endif
                                                                 <span class="switch-state"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button class="btn btn-primary spinner-btn" type="submit">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane main fade" id="SMS_Gateways" role="tabpanel"
                                aria-labelledby="v-pills-settings-tab" tabindex="4">
                                <div class="card">
                                    <div class="card-body">
                                        <h5>SMS Gateway Settings</h5>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[active_gateway]">Active SMS Gateway</label>
                                            <div class="col-md-10">
                                                <select class="form-control" id="sms_gateways_config[active_gateway]" name="sms_gateways_config[active_gateway]">
                                                    <option value="">-- Select Gateway --</option>
                                                    <option value="twilio" {{ (isset($smsGatewaysConfig['active_gateway']) && $smsGatewaysConfig['active_gateway'] == 'twilio') ? 'selected' : '' }}>Twilio</option>
                                                    <option value="plivo" {{ (isset($smsGatewaysConfig['active_gateway']) && $smsGatewaysConfig['active_gateway'] == 'plivo') ? 'selected' : '' }}>Plivo</option>
                                                    <option value="clicksends" {{ (isset($smsGatewaysConfig['active_gateway']) && $smsGatewaysConfig['active_gateway'] == 'clicksends') ? 'selected' : '' }}>ClickSend</option>
                                                    <option value="infobip" {{ (isset($smsGatewaysConfig['active_gateway']) && $smsGatewaysConfig['active_gateway'] == 'infobip') ? 'selected' : '' }}>Infobip</option>
                                                    <option value="slicktext" {{ (isset($smsGatewaysConfig['active_gateway']) && $smsGatewaysConfig['active_gateway'] == 'slicktext') ? 'selected' : '' }}>SlickText</option>
                                                </select>
                                            </div>
                                        </div>

                                        <hr>

                                        <h6>Twilio Configuration</h6>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[twilio][sid]">Account SID</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[twilio][sid]"
                                                    name="sms_gateways_config[twilio][sid]"
                                                    value="{{ $smsGatewaysConfig['twilio']['sid'] ?? '' }}"
                                                    placeholder="Enter Twilio Account SID">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[twilio][token]">Auth Token</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[twilio][token]"
                                                    name="sms_gateways_config[twilio][token]"
                                                    value="{{ $smsGatewaysConfig['twilio']['token'] ?? '' }}"
                                                    placeholder="Enter Twilio Auth Token">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[twilio][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[twilio][from]"
                                                    name="sms_gateways_config[twilio][from]"
                                                    value="{{ $smsGatewaysConfig['twilio']['from'] ?? '' }}"
                                                    placeholder="Enter Twilio From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <hr>

                                        <h6>Plivo Configuration</h6>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[plivo][auth_id]">Auth ID</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[plivo][auth_id]"
                                                    name="sms_gateways_config[plivo][auth_id]"
                                                    value="{{ $smsGatewaysConfig['plivo']['auth_id'] ?? '' }}"
                                                    placeholder="Enter Plivo Auth ID">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[plivo][auth_token]">Auth Token</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[plivo][auth_token]"
                                                    name="sms_gateways_config[plivo][auth_token]"
                                                    value="{{ $smsGatewaysConfig['plivo']['auth_token'] ?? '' }}"
                                                    placeholder="Enter Plivo Auth Token">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[plivo][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[plivo][from]"
                                                    name="sms_gateways_config[plivo][from]"
                                                    value="{{ $smsGatewaysConfig['plivo']['from'] ?? '' }}"
                                                    placeholder="Enter Plivo From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[plivo][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[plivo][from]"
                                                    name="sms_gateways_config[plivo][from]"
                                                    value="{{ $smsGatewaysConfig['plivo']['from'] ?? '' }}"
                                                    placeholder="Enter Plivo From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <hr>

                                        <h6>ClickSend Configuration</h6>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[clicksends][username]">Username</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[clicksends][username]"
                                                    name="sms_gateways_config[clicksends][username]"
                                                    value="{{ $smsGatewaysConfig['clicksends']['username'] ?? '' }}"
                                                    placeholder="Enter ClickSend Username">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[clicksends][api_key]">API Key</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[clicksends][api_key]"
                                                    name="sms_gateways_config[clicksends][api_key]"
                                                    value="{{ $smsGatewaysConfig['clicksends']['api_key'] ?? '' }}"
                                                    placeholder="Enter ClickSend API Key">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[clicksends][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[clicksends][from]"
                                                    name="sms_gateways_config[clicksends][from]"
                                                    value="{{ $smsGatewaysConfig['clicksends']['from'] ?? '' }}"
                                                    placeholder="Enter ClickSend From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <hr>

                                        <h6>Infobip Configuration</h6>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[infobip][api_key]">API Key</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[infobip][api_key]"
                                                    name="sms_gateways_config[infobip][api_key]"
                                                    value="{{ $smsGatewaysConfig['infobip']['api_key'] ?? '' }}"
                                                    placeholder="Enter Infobip API Key">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[infobip][base_url]">Base URL</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[infobip][base_url]"
                                                    name="sms_gateways_config[infobip][base_url]"
                                                    value="{{ $smsGatewaysConfig['infobip']['base_url'] ?? '' }}"
                                                    placeholder="Enter Infobip Base URL (e.g., https://xyz.api.infobip.com)">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[infobip][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[infobip][from]"
                                                    name="sms_gateways_config[infobip][from]"
                                                    value="{{ $smsGatewaysConfig['infobip']['from'] ?? '' }}"
                                                    placeholder="Enter Infobip From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[infobip][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[infobip][from]"
                                                    name="sms_gateways_config[infobip][from]"
                                                    value="{{ $smsGatewaysConfig['infobip']['from'] ?? '' }}"
                                                    placeholder="Enter Infobip From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        <hr>

                                        <h6>SlickText Configuration</h6>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[slicktext][api_user]">API User</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[slicktext][api_user]"
                                                    name="sms_gateways_config[slicktext][api_user]"
                                                    value="{{ $smsGatewaysConfig['slicktext']['api_user'] ?? '' }}"
                                                    placeholder="Enter SlickText API User">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[slicktext][api_pass]">API Pass</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[slicktext][api_pass]"
                                                    name="sms_gateways_config[slicktext][api_pass]"
                                                    value="{{ $smsGatewaysConfig['slicktext']['api_pass'] ?? '' }}"
                                                    placeholder="Enter SlickText API Pass">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label class="col-md-2" for="sms_gateways_config[slicktext][from]">From Number</label>
                                            <div class="col-md-10">
                                                <input class="form-control" type="text" id="sms_gateways_config[slicktext][from]"
                                                    name="sms_gateways_config[slicktext][from]"
                                                    value="{{ $smsGatewaysConfig['slicktext']['from'] ?? '' }}"
                                                    placeholder="Enter SlickText From Number (e.g., +15017122661)">
                                            </div>
                                        </div>

                                        {{-- Add sections for other gateways here --}}

                                        <div class="text-end">
                                            <button class="btn btn-primary spinner-btn" type="submit">Save SMS Gateway Settings</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            "use strict";

            function addImageMimeValidation(methodName, mimeTypes, errorMessage) {
                $.validator.addMethod(methodName, function(value, element) {
                    const file = element.files && element.files[0];
                    if (file) {
                        const mime = file.type;
                        return mimeTypes.includes(mime);
                    }
                    return true;
                }, errorMessage);
            }

            addImageMimeValidation("imageMime", ["image/png", "image/jpeg", "image/jpg"],
                "Please enter a value with a valid MIME type. (JPG, PNG, JPEG).");

            addImageMimeValidation("svgImageMime", ["image/svg+xml"],
                "Please enter a value with a valid mimetype. (SVG).");

            $('#settingsForm').validate({
                ignore: [],
                rules: {
                    'general[dark_logo]': {
                        required: isDarkLogo,
                        imageMime: true
                    },
                    'general[light_logo]': {
                        required: isLightLogo,
                        imageMime: true
                    },
                    'general[favicon]': {
                        required: isFavicon,
                        imageMime: true
                    },
                    'general[footer_icon]': {
                        required: isFooterIcon,
                        svgImageMime: true
                    },
                    'general[site_name]': "required",
                    'general[copyright_text]': "required",
                    'general[right_side_footer]': "required",
                },
                invalidHandler: function(event, validator) {
                    let invalidMainTabs = [];
                    let invalidSubTabs = new Map(); // Store invalid sub-tabs per main tab

                    // Collect all invalid tabs
                    $.each(validator.errorList, function(index, error) {
                        const subTabId = $(error.element).closest('.tab-pane').attr('id');
                        const mainTabId = $("#" + subTabId).closest('.main').attr('id');

                        if (mainTabId && !invalidMainTabs.includes(mainTabId)) {
                            invalidMainTabs.push(mainTabId);
                        }

                        if (subTabId) {
                            if (!invalidSubTabs.has(mainTabId)) {
                                invalidSubTabs.set(mainTabId, []);
                            }
                            if (!invalidSubTabs.get(mainTabId).includes(subTabId)) {
                                invalidSubTabs.get(mainTabId).push(subTabId);
                            }
                        }
                    });

                    if (invalidMainTabs.length > 0) {
                        let firstMainTab = invalidMainTabs[0];
                        let firstSubTab = invalidSubTabs.get(firstMainTab)?.[0];

                        // If no invalid sub-tabs exist, activate the first available sub-tab inside this main tab
                        if (!firstSubTab) {
                            firstSubTab = $("#" + firstMainTab).find(".tab-pane").first().attr('id');
                        }

                        activateTab(firstMainTab, firstSubTab);
                    }

                    function activateTab(mainTabId, subTabId) {
                        // Reset only main tabs, sub-tabs are handled separately
                        $(".nav-link.main.active").removeClass("active");
                        $(".tab-pane.main.show").removeClass("show active");

                        // Activate the first invalid main tab
                        if (mainTabId) {
                            $("#" + mainTabId + "_tab").addClass("active");
                            $("#" + mainTabId).addClass("show active");
                        }

                        // Activate the first invalid sub-tab OR the first available sub-tab
                        if (subTabId) {
                            $("#" + subTabId + "_tab").tab("show"); // Bootstrap handles proper switching
                        }
                    }
                }
            });

            function isDarkLogo() {
                @if (isset($settings['general']['dark_logo']))
                    return false;
                @else
                    return true;
                @endif
            }

            function isLightLogo() {
                @if (isset($settings['general']['light_logo']))
                    return false;
                @else
                    return true;
                @endif
            }

            function isFavicon() {
                @if (isset($settings['general']['favicon']))
                    return false;
                @else
                    return true;
                @endif
            }

            function isFooterIcon(){
                @if (isset($settings['general']['footer_icon']))
                    return false;
                @else
                    return true;
                @endif
            }
        });
    </script>
@endsection