@extends('company-admin-dashboard')

@section('title', $data['title'])
<style>
    
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
         color: var(--primary-color) !important;
         background-color: rgba(var(--primary-color-rgb), 0.1) !important;
    }
    .nav-pills>a {
        color: #6b7280 !important;
    }
    .nav-link:focus, .nav-link:hover {
        color: #000 !important;
        background-color: #6b72800a !important;
    }
    .otp-input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    .otp-input:focus {
        border-color: #4542c4;
        box-shadow: 0 0 0 2px rgba(69, 66, 196, 0.15);
        outline: none;
    }
    .small-text{
        font-size: 14px !important;
    }
    .float-label-group 
    #order_printer + .select2-container .select2-selection__rendered,
    .float-label-group 
    #kot_printer + .select2-container .select2-selection__rendered 
    {
            line-height: 30px !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
         margin-top: 7px !important;
    }
    .select2-results__options {
        margin: 10px 10px 10px !important;
    }
</style>
@section('dashboard-content')
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                         <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp;
                        <h5 class="mb-0"><b>Setting</b></h5>
                    </div>
                    {{-- <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                        <button type="button" id="saveSettingsBtn" class="btn-custom"> Save Changes </button>
                    </div> --}}
                </div>
                <div class="card-body p-0">
                    <div class="d-block d-md-flex">
                        <div id="settingOptionsTab" class="nav mb-md-0 flex-column col-md-2 nav-pills p-3 left-bg" role="tablist">
                            @if (in_array('account_setting', $data['settingPermissions']))
                            <a href="#account" class="nav-link active" id="account-tab" role="tab" data-bs-toggle="pill"
                                aria-selected="1" title="Account">
                                <svg class="icon me-2 svg-icon-ti-ti-home" xmlns="http://www.w3.org/2000/svg" width="20"
                                    height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
                                    <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
                                    <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
                                </svg>
                                <span class="text-truncate"> Account</span>
                            </a>
                            @endif

                            @if (in_array('appearance_setting', $data['settingPermissions']))
                            <a class="nav-link" id="appearance-tab" data-bs-toggle="pill" href="#appearance" role="tab">
                                <svg class="icon me-2 svg-icon-ti-ti-brush" xmlns="http://www.w3.org/2000/svg"
                                    width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
                                    <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
                                    <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
                                    <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
                                </svg>
                                <span class="text-truncate"> Appearance</span>
                            </a>
                            @endif

                            @if (in_array('security_setting', $data['settingPermissions']))
                            <a class="nav-link" id="security-tab" data-bs-toggle="pill" href="#security" role="tab">
                                <svg class="icon me-2 svg-icon-ti-ti-user-shield" xmlns="http://www.w3.org/2000/svg"
                                    width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M6 21v-2a4 4 0 0 1 4 -4h2"></path>
                                    <path
                                        d="M22 16c0 4 -2.5 6 -3.5 6s-3.5 -2 -3.5 -6c1 0 2.5 -.5 3.5 -1.5c1 1 2.5 1.5 3.5 1.5z">
                                    </path>
                                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                                </svg>
                                <span class="text-truncate"> Security</span>
                            </a>
                            @endif

                            @if (in_array('email_setting', $data['settingPermissions']))
                            <a class="nav-link" id="email-tab" data-bs-toggle="pill" href="#email" role="tab">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope icon me-2" viewBox="0 0 16 16">
                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
                                </svg>
                                <span class="text-truncate">Email</span>
                            </a>
                            @endif

                            @if (in_array('whatsapp_api_setting', $data['settingPermissions']))
                            <a class="nav-link" id="whatsapp-api-tab" data-bs-toggle="pill" href="#whatsapp-api" role="tab">
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp me-2" viewBox="0 0 16 16">
                                <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
                                </svg>
                                <span class="text-truncate">Whatsapp Api</span>
                            </a>
                            @endif

                            @if (in_array('ip_restriction_setting', $data['settingPermissions']))
                             <a class="nav-link" id="ip-restriction-tab" data-bs-toggle="pill" href="#ip-restriction" role="tab">
                               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-x me-2" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708"/>
                                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
                                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
                                </svg>
                                <span class="text-truncate">Ip Restriction</span>
                            </a>
                            @endif

                            @if (in_array('printer_setting', $data['settingPermissions']))
                             <a class="nav-link" id="printer-setting-tab" data-bs-toggle="pill" href="#printer-setting" role="tab">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-printer me-2" viewBox="0 0 16 16">
                                    <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/>
                                    <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1"/>
                                </svg>
                                <span class="text-truncate">Printer</span>
                            </a>
                            @endif

                        </div>
                        <div class="tab-content col-md-10 p-3">
                            @if (in_array('account_setting', $data['settingPermissions']))
                            <div class="tab-pane fade show active" id="account" role="tabpanel">
                                @include('setting.account')
                            </div>
                            @endif

                            @if (in_array('appearance_setting', $data['settingPermissions']))
                            <div class="tab-pane fade" id="appearance" role="tabpanel">
                                @include('setting.appearance')
                            </div>
                            @endif

                            @if (in_array('security_setting', $data['settingPermissions']))
                            <div class="tab-pane fade" id="security" role="tabpanel">
                                @include('setting.security')
                            </div>
                            @endif

                            @if (in_array('email_setting', $data['settingPermissions']))
                            <div class="tab-pane fade" id="email" role="tabpanel">
                                @include('setting.email')
                            </div>
                            @endif

                            @if (in_array('whatsapp_api_setting', $data['settingPermissions']))
                            <div class="tab-pane fade" id="whatsapp-api" role="tabpanel">
                                @include('setting.whatsapp-api')
                            </div>
                            @endif

                            @if (in_array('ip_restriction_setting', $data['settingPermissions']))
                             <div class="tab-pane fade" id="ip-restriction" role="tabpanel">
                                @include('setting.ip-restriction')
                            </div>
                            @endif

                            @if (in_array('printer_setting', $data['settingPermissions']))
                             <div class="tab-pane fade" id="printer-setting" role="tabpanel">
                                @include('setting.printer-setting')
                            </div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="twoFactorModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content rounded-3 shadow">

                <div class="modal-header border-0" style="padding: 22px 30px 0px 30px;">
                    <h5 class="modal-title fw-bold">Setup Authenticator App</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pt-2 pb-0" id="twoFactorModalBody">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary"></div>
                    </div>
                </div>

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

@endsection('dashboard-content')

@section('custom-scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>

    <!-- Bootstrap 5 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables Bootstrap 5 -->
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
  
    <script>
        var UserCountry = '{{ route('user.searchcountry') }}';
        var userstate = '{{ route('user.searchstate') }}';
        var usercity = '{{ route('user.searchcity') }}';
        var saveIpRestrictionPermission ='{{ route('company.ip.restriction.update') }}';
        var ipRestrictionListUrl        = '{{ route('company.ip.list') }}';
        var storeIpRestrictionUrl       = '{{ route('company.ip.store') }}';
        var updateIpRestrictionUrl      = '{{ route('company.ip.update', ':id') }}';
        var deleteIpRestrictionUrl      = '{{ route('company.ip.delete', ':id') }}';
        var switchIpRestrictionUrl      = '{{ route('company.ip.switch') }}';
        var editmodeldataload           = '{{ route('company.ip-restriction.edit', ':id') }}';
        var updateIpRestrictionStatusUrl = '{{ route('company.ip-restriction.update-status', ':id') }}';
        var selectCounterPrinter = '{{ route('counter.select-printer') }}';

        // Dynamic form submission based on active tab
        // $('#saveSettingsBtn').on('click', function() {
        //     const activeTab = $('.nav-link.active').attr('id');

        //     if (activeTab === 'account-tab') {
        //         submitForm('#company-master');
        //     } else if (activeTab === 'appearance-tab') {
        //         submitForm('#appearance-form');
        //     } else if (activeTab === 'security-tab') {
        //         submitForm('#security-form');
        //     }
        // });

        function submitForm(formId) {
            const form = $(formId)[0];
            const formData = new FormData(form);

            $.ajax({
                url: $(formId).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status == 1) {
                        flasher['success'](response.msg, {
                            timeout: 2500
                        });
                        // Clear form fields after successful password change
                        if (formId === '#security-form') {
                            $(formId)[0].reset();
                            $(formId + ' .float-label-group').removeClass('has-value');
                        }
                        // Update appearance content after successful save
                        if (formId === '#appearance-form') {
                            // Update images if uploaded
                            if (response.logo_path) {
                                updateImagePreview('logo', response.logo_path);
                                // Update logo in header in real-time
                                updateHeaderLogo(response.logo_path);
                            }
                            if (response.favicon_path) {
                                updateImagePreview('favicon', response.favicon_path);
                                // Update favicon in real-time
                                updateFavicon(response.favicon_path);
                            }
                            // Update colors in real-time
                            if (response.primary_color) {
                                updatePrimaryColor(response.primary_color);
                            }
                            if (response.secondary_color) {
                                updateSecondaryColor(response.secondary_color);
                            }
                      
                        }
                    } else {
                        flasher['error'](response.msg, {
                            timeout: 2500
                        });
                    }
                },
                error: function(xhr) {
                    flasher['error']('An error occurred. Please try again.', { timeout: 2500});
                }
            });
        }

        $(document).ready(function() {
            updateColorSelections();
        });

        function updateImagePreview(type, imagePath) {
            const imageUrl = '{{ asset("storage") }}/' + imagePath;
            const inputSelector = type === 'logo' ? '#logo-input' : '#favicon-input';
            const previewArea = $(inputSelector).siblings('.image-upload-area');
            
            if (previewArea.length) {
                previewArea.html(`<img src="${imageUrl}" alt="${type}" style="max-width: ${type === 'favicon' ? '32' : '100'}px; height: auto;">`);
            }
        }

        
        // Real-time update functions
        function updateHeaderLogo(logoPath) {
            const logoUrl = '{{ asset("storage") }}/' + logoPath;
            // const headerLogo = $('#company-logo');
            // if (headerLogo.length) {
            //     headerLogo.attr('src', logoUrl);
            // }
            $('.company-logo').each(function () {
                $(this).attr('src', logoUrl);
            });
        }

        function updateFavicon(faviconPath) {
            const faviconUrl = '{{ asset("storage") }}/' + faviconPath;
            // Update existing favicon links
            // const existingFavicon = $('#favican-logo');
            // if (existingFavicon.length) {
            //     existingFavicon.attr('src', faviconUrl);
            // } 
             $('.favicon-logo').each(function () {
                $(this).attr('src', faviconUrl);
            });
        }

        function hexToRgb(hex) {
            // Remove leading # if present
            hex = hex.replace(/^#/, '');
            if (hex.length === 3) {
                hex = hex.split('').map(c => c + c).join('');
            }
            const bigint = parseInt(hex, 16);
            const r = (bigint >> 16) & 255;
            const g = (bigint >> 8) & 255;
            const b = bigint & 255;
            return r + ',' + g + ',' + b;
        }

        function updatePrimaryColor(color) {
            document.documentElement.style.setProperty('--primary-color', color);
            $(':root').css('--primary-color', color);
            
            const rgb = hexToRgb(color);
            document.documentElement.style.setProperty('--primary-color-rgb', rgb);
            $(':root').css('--primary-color-rgb', rgb);
        }

        function updateSecondaryColor(color) {
            document.documentElement.style.setProperty('--secondary-color', color);
            $(':root').css('--secondary-color', color);
        }

        function updateColorSelections() {
            const primaryColor = $('#primary_color').val();
            const secondaryColor = $('#secondary_color').val();
            
            $('.primary-colors .custom-option').removeClass('active').removeAttr('style');
            $('.secondary-colors .custom-option').removeClass('active').removeAttr('style');
            
            // Set active for primary color
            if (primaryColor) {
                const primaryStaticColor = $(`.primary-colors .static-color[data-color="${primaryColor}"]`);
                if (primaryStaticColor.length) {
                    const option = primaryStaticColor.closest('.custom-option');
                    option.addClass('active').css('--selected-color', primaryColor);
                } else {
                    // If it's a custom color, mark the last primary option (picker) as active
                    const option = $('.primary-colors .custom-option').last();
                    option.addClass('active').css('--selected-color', primaryColor);
                }
            }
            
            // Set active for secondary color
            if (secondaryColor) {
                const secondaryStaticColor = $(`.secondary-colors .static-color[data-color="${secondaryColor}"]`);
                if (secondaryStaticColor.length) {
                    const option = secondaryStaticColor.closest('.custom-option');
                    option.addClass('active').css('--selected-color', secondaryColor);
                } else {
                    // If it's a custom color, mark the last secondary option (picker) as active
                    const option = $('.secondary-colors .custom-option').last();
                    option.addClass('active').css('--selected-color', secondaryColor);
                }
            }
        }

        // Image upload preview
        $('#logo-input').on('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(this).siblings('.image-upload-area').html(`<img src="${e.target.result}" alt="Logo" style="max-width: 100px; height: auto;">`);
                }.bind(this);
                reader.readAsDataURL(file);
            }
        });
        
        $('#favicon-input').on('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(this).siblings('.image-upload-area').html(`<img src="${e.target.result}" alt="Favicon" style="max-width: 32px; height: auto;">`);
                }.bind(this);
                reader.readAsDataURL(file);
            }
        });

        function twoFactorVerificationSubmit(formId){
            const otp = $('#one_time_password').val();
            if (!otp || otp.length !== 6) {
                flasher['error']('Please enter a valid 6-digit code', { timeout: 2500 });
                return false;
            }
            const form = $(formId)[0];
            const formData = new FormData(form);
            $.ajax({
                url: '{{ route('2fa.verify') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status == 1) {
                        flasher['success'](response.msg, { timeout: 2500 });
                        $('#twoFactorModal').modal('hide');

                        $('#twoFactorModal').data('setup-complete', true);

                        $('#two_factor').prop('checked', true);
                        $('#setup-authenticator-section').show();
                        $('#authenticator-content').html(`
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle me-2"></i>
                                Two-Factor Authentication is configured
                            </div>
                        `);
                    } else {
                        flasher['error'](response.msg, { timeout: 2500 });
                    }
                },
                error: function(xhr) { 
                    flasher['error']('An error occurred. Please try again.', {
                        timeout: 2500
                    });
                }
            });

        }
        $('#twoFactorModal').on('hidden.bs.modal', function () {
            const setupComplete = $(this).data('setup-complete');
            // If user cancelled before completing setup
            if (!setupComplete) {
                $('#two_factor').prop('checked', false);
            }
        });
        $('#twoFactorModal').on('shown.bs.modal', function () {
            $('.otp-input').val('');
            $('#one_time_password').val('');
            setTimeout(() => {
                $('#twoFactorModalBody .otp-input').first().focus();
            }, 300);
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && document.getElementById('twoFactorModal').classList.contains('show')) {
                e.preventDefault();
                twoFactorVerificationSubmit('#twoFactorVerifyForm');
            }
        });

        function copySecret(btn, text) {
            navigator.clipboard.writeText(text).then(() => {
                const label = btn.querySelector('.copy-text');
                const original = label.innerText;

                label.innerText = 'Copied!';
                btn.classList.add('text-success');

                setTimeout(() => {
                    label.innerText = original;
                    btn.classList.remove('text-success');
                }, 2000);
            });
        }

        function handleOtpInput(el, index) {
            el.value = el.value.replace(/[^0-9]/g, '');

            const inputs = document.querySelectorAll('.otp-input');

            if (el.value && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }

            updateOtpValue();
        }

        function handleOtpBackspace(e, index) {
            const inputs = document.querySelectorAll('.otp-input');

            if (e.key === 'Backspace' && !inputs[index].value && index > 0) {
                inputs[index - 1].focus();
            }
        }

        function updateOtpValue() {
            const inputs = document.querySelectorAll('.otp-input');
            let otp = '';

            inputs.forEach(input => otp += input.value);

            document.getElementById('one_time_password').value = otp;
        }

        /* Paste support */
        document.addEventListener('paste', function (e) {
            if (!e.target.classList.contains('otp-input')) return;

            const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0,6);
            const inputs = document.querySelectorAll('.otp-input');

            pasted.split('').forEach((digit, i) => {
                if (inputs[i]) inputs[i].value = digit;
            });

            inputs[Math.min(pasted.length, 5)].focus();
            updateOtpValue();
        });

        function updateFloatLabel(selectId, groupId) {
            const $group = $('#' + groupId);
            const $select = $('#' + selectId);
            if ($select.val() && $select.val() !== '') {
                $group.addClass('has-value');
            } else {
                $group.removeClass('has-value');
            }
        }
        function toggleTwoFactor(checkbox) {
            const isEnabled = checkbox.checked;
            const setupSection = document.getElementById('setup-authenticator-section');
            
            if (isEnabled) {
                $('#twoFactorModal').data('setup-complete', false);
                $('#twoFactorModal').modal('show');
                $('#twoFactorModalBody').html(`
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary"></div>
                    </div>
                `);

                $.get("{{ route('2fa.index') }}", function (response) {
                    $('#twoFactorModalBody').html(response);
                }).fail(function () {
                    $('#twoFactorModalBody').html(
                        '<div class="alert alert-danger">Failed to load 2FA setup</div>'
                    );
                });
            } else {
                // Disable 2FA for user
                $.ajax({
                    url: '{{ route('setting.disable.2fa') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status == 1) {
                            setupSection.style.display = 'none';
                            flasher['success'](response.msg, { timeout: 2500 });
                        } else {
                            checkbox.checked = true;
                            flasher['error'](response.msg, { timeout: 2500 });
                        }
                    },
                    error: function() {
                        checkbox.checked = true;
                        flasher['error']('Error disabling 2FA', { timeout: 2500 });
                    }
                });
            }
        }

        const primaryInput = document.getElementById('primary_color');
        const SecondaryInput = document.getElementById('secondary_color');


        // Primary colors click
        document.querySelectorAll('.primary-colors .static-color').forEach(el => {
            el.addEventListener('click', function() {
                const color = this.dataset.color;
                
                // Remove active from primary colors only
                document.querySelectorAll('.primary-colors .custom-option')
                    .forEach(opt => {
                        opt.classList.remove('active');
                        opt.style.removeProperty('--selected-color');
                    });
                
                // Set active on clicked primary color
                this.closest('.custom-option').classList.add('active');
                this.closest('.custom-option').style.setProperty('--selected-color', color);
                
                // Save primary color value
                primaryInput.value = color;
            });
        });
        
        // Secondary colors click
        document.querySelectorAll('.secondary-colors .static-color').forEach(el => {
            el.addEventListener('click', function() {
                const color = this.dataset.color;
                
                // Remove active from secondary colors only
                document.querySelectorAll('.secondary-colors .custom-option')
                    .forEach(opt => {
                        opt.classList.remove('active');
                        opt.style.removeProperty('--selected-color');
                    });
                
                // Set active on clicked secondary color
                this.closest('.custom-option').classList.add('active');
                this.closest('.custom-option').style.setProperty('--selected-color', color);
                
                // Save secondary color value
                SecondaryInput.value = color;
            });
        });

        // Pickr (custom color)
        const primaryPickr = Pickr.create({
            el: '#primary-pickr',
            theme: 'classic',
            default: primaryInput.value || '#7367f0',
            useAsButton: false,
            components: {
                preview: true,
                opacity: false,
                hue: true,
                interaction: {
                    hex: false,
                    input: true,
                    save: true
                }
            }
        });
        const SecondaryPickr = Pickr.create({
            el: '#secondary-picker',
            theme: 'classic',
            default: SecondaryInput.value || '#7367f0',
            useAsButton: false,
            components: {
                preview: true,
                opacity: false,
                hue: true,
                interaction: {
                    hex: false,
                    input: true,
                    save: true
                }
            }
        });

        primaryPickr.on('save', (color) => {
            const hex = color.toHEXA().toString();
            $('#primary_color').val(hex);
            
            // Target the last .custom-option in primary-colors (where the picker is)
            $('.primary-colors .custom-option').removeClass('active').removeAttr('style');
            const activeOption = $('.primary-colors .custom-option').last();
            activeOption.addClass('active').css('--selected-color', hex);
                        
            primaryPickr.hide();
        });
        
        SecondaryPickr.on('save', (color) => {
            const hex = color.toHEXA().toString();
            $('#secondary_color').val(hex);
            
            // Target the last .custom-option in secondary-colors (where the picker is)
            $('.secondary-colors .custom-option').removeClass('active').removeAttr('style');
            const activeOption = $('.secondary-colors .custom-option').last();
            activeOption.addClass('active').css('--selected-color', hex);
                        
            SecondaryPickr.hide();
        });
        $('#profile-pic').on('click', function(e) {
            e.stopPropagation();
            $('#dropdown-menu').toggle();
        });
        $('#country').select2({
            ajax: {
                url: UserCountry,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(country) {
                        return {
                            id: country.id,
                            text: country.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $(".tab-content"),
        }).on('change', function() {
            updateFloatLabel('country', 'country_group');
            $('#state').val(null).trigger('change').prop('disabled', !$(this).val());
            $('#city').val(null).trigger('change').prop('disabled', true);
        }).on('select2:open', function() {
            $('#country_group').addClass('has-value');
        });

        $('#state').select2({
            ajax: {
                url: userstate,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function() {
                            return $('#country').val();
                        }
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $(".tab-content"),
        }).on('change', function() {
            updateFloatLabel('state', 'state_group');
            $('#city').val(null).trigger('change').prop('disabled', !$(this).val());
        }).on('select2:open', function() {
            $('#state_group').addClass('has-value');
        });

        $('#city').select2({
            ajax: {
                url: usercity,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function() {
                            return $('#country').val();
                        },
                        "state_id": function() {
                            return $('#state').val();
                        }
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'please select',
            dropdownParent: $(".tab-content"),
        }).on('select2:select select2:clear change', function() {
            updateFloatLabel('city', 'city_group');
        }).on('select2:open', function() {
            $('#city_group').addClass('has-value');
        });
        $('#email_encryption').select2({
            placeholder: 'Select Encryption',
            dropdownParent: $(".tab-content")
        });

        let isProcessing = false;

        function updateIpRestriction(el) {

            if (isProcessing) {
                return;
            }
            isProcessing = true;
            let status = el.checked ? 1 : 0;
            let previousState = !el.checked; 
            
            $.ajax({
                url: saveIpRestrictionPermission,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    value: status
                },
                success: function (res) {
                    flasher.success(res.message, { timeout: 3000 });
                },
                 error: function (xhr) {
                    // ⛔ Validation / custom error
                    el.checked = previousState;
                    if (xhr.status === 422 && xhr.responseJSON?.message) {
                        flasher.error(xhr.responseJSON.message, { timeout: 3000 });
                    } else {
                        flasher.error("Something went wrong", { timeout: 3000 });
                    }

                },
                complete: function () {
                    isProcessing = false;
                }
            });
        }

    

        $(document).ready(function () {

            var table = $('#ipRestrictionTable').DataTable({
                pagingType: "full_numbers",
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                pageLength: 10,

                aoColumnDefs: [
                    { bSortable: false, aTargets: [3, 4] }
                ],

                ajax: {
                    url: ipRestrictionListUrl,
                    type: "GET",
                    
                },

                aoColumns: [
                    { mData: "id" },
                    { mData: "ip_address" },
                    { mData: "remarks" },
                    { mData: "status", orderable: false, searchable: false },
                    { mData: "action", orderable: false, searchable: false }
                ],

                language: {
                    search: "",
                    searchPlaceholder: "Search IP Address..", 
                    paginate: {
                        first: '<i class="bx bx-skip-previous"></i>',
                        previous: '<i class="bx bx-chevron-left"></i>',
                        next: '<i class="bx bx-chevron-right"></i>',
                        last: '<i class="bx bx-skip-next"></i>'
                    }
                }
            });

            /* ===== Clone header for column search ===== */
            // var thead = document.querySelector("#ipRestrictionTable thead");
            // var cloneRow = thead.querySelector("tr").cloneNode(true);
            // thead.appendChild(cloneRow);

            // let searchRowTh = thead.querySelectorAll("tr:nth-child(2) th");

            // searchRowTh.forEach(th => {
            //     th.classList.remove("sorting", "sorting_asc", "sorting_desc");
            //     th.removeAttribute("aria-sort");
            // });
            // let placeholders = ["", "Search IP Address ",  "", ""];

            // searchRowTh.forEach((th, index) => {

            //     // Skip: #, Status, Action
            //     let skipColumns = [0, 3, 4];

            //     if (skipColumns.includes(index)) {
            //         th.innerHTML = "";
            //         return;
            //     }

            //     let title = th.textContent.trim();
            //     let input = document.createElement("input");

            //     input.type = "text";
            //     input.className = "form-control form-control-sm";
            //     input.placeholder =  placeholders[index] || "Search";

            //     th.innerHTML = "";
            //     th.appendChild(input);

            //     input.addEventListener("keyup", function () {
            //         if (table.column(index).search() !== this.value) {
            //             table.column(index).search(this.value).draw();
            //         }
            //     });

            //     input.addEventListener("change", function () {
            //         if (table.column(index).search() !== this.value) {
            //             table.column(index).search(this.value).draw();
            //         }
            //     });
            // });

        });


        function openAddIpModal() {
            $('#ipModalTitle').text('Add IP');
            $('#ip_id').val('');
            $('#ip_address').val('');
            $('#remarks').val('');
            $('#ipRestrictionModal').modal('show');
        }

       function openEditIpModal(id) {
            var url = editmodeldataload.replace(':id', id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(res) {
                $('#ipModalTitle').text('Edit IP');
                $('#ip_id').val(res.id);
                $('#ip_address').val(res.ip_address);
                $('#remarks').val(res.remarks);
                 $('#ipstatus').val(res.status).trigger('change');  

                // Show Bootstrap 5 modal
                const modal = new bootstrap.Modal(document.getElementById('ipRestrictionModal'));
                modal.show();
            },
            error: function(err) {
                flasher.error('Unable to load IP data!');
                console.error(err);
            }
        });
    }

    function saveIpRestriction() {
        let id = $('#ip_id').val();
        let url = id
            ? updateIpRestrictionUrl.replace(':id', id)
            : storeIpRestrictionUrl;

        $.ajax({
            url: url,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                ip_address: $('#ip_address').val(),
                remarks: $('#remarks').val(),   
                ip_status: $('#ipstatus').val() 
            },
            success: function (res) {
                $('#ipRestrictionModal').modal('hide');
                $('#ipRestrictionTable').DataTable().ajax.reload();
                flasher.success(res.message || 'IP saved successfully');
            },
            error: function (xhr) {
            // Handle Laravel validation errors
            if (xhr.status === 422) {
                if (xhr.responseJSON.errors) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessages = [];
                    for (let field in errors) {
                        errorMessages.push(errors[field].join(', '));
                    }
                    flasher.error(errorMessages.join('<br>'));
                } else if (xhr.responseJSON.message) {
                    // Handle custom error messages (like duplicate IP)
                    flasher.error(xhr.responseJSON.message);
                } else {
                    flasher.error("Validation failed. Please check your input.");
                }
            } else {
                flasher.error("Something went wrong. Please try again.");
            }
        }
        });
    }

    function deleteIp(id) {
        Swal.fire({
            title: "Are You Sure To Delete This IP Reatriction?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: window.PRIMARY_COLOR,
            cancelButtonColor: window.SECONDARY_COLOR,
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "get",
                    url: deleteIpRestrictionUrl.replace(':id', id),
                    success: function(res) {
                            $('#ipRestrictionTable').DataTable().ajax.reload();
                            flasher.success(res.message || 'IP deleted successfully');

                            if (res.ip_disabled === true) {
                                $('#ip_restriction')
                                    .prop('checked', false)
                                    .trigger('change'); // optional
                            }
                        },
                        error: function() {
                            flasher.error('Error deleting IP');
                        }
                });
            }
        });
    }

    function updateIpRestrictionStatus(el) {
        var id = $(el).data('id');           // data-id in your checkbox/select
        var status = $(el).is(':checked') ? 1 : 0; // for checkbox
        // If using select: var status = $(el).val();

        $.ajax({
            url: updateIpRestrictionStatusUrl.replace(':id', id),
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                status: status
            },
            success: function(res) {
                flasher.success(res.message || 'IP status updated successfully');
            },
            error: function(err) {
                flasher.error('Failed to update IP status');
                console.error(err);
            }
        });
    }

   $(document).on('change', '#order_printer, #kot_printer', function () {
        const wrapper = $(this).closest('.float-label-group');
        if ($(this).val() && $(this).val().length > 0) {
            wrapper.addClass('has-value');
        } else {
            wrapper.removeClass('has-value');
        }
    });

    function initPrinterSelect(selector, selectedIds = [], selectedTexts = []) {

        const staticOptions = [
            { id: 'ask', text: 'Ask Everytime' },
            { id: 'none', text: 'No Print' }
        ];

        $(selector).select2({
            // placeholder: 'Select Printer',
            //  allowClear: true,     
            width: '100%',
            multiple: true,
            minimumResultsForSearch: 0,
            ajax: {
                url: selectCounterPrinter,
                dataType: 'json',
                delay: 250,
                data: params => ({
                    q: params.term || '',
                    page: params.page || 1
                }),
                processResults: data => ({
                    results: [
                        ...staticOptions,
                        ...data.results
                    ]
                }),
                cache: true
            }
        });

        /* MUTUAL EXCLUSIVE LOGIC */
        $(selector).on('select2:select', function (e) {
            const selectedId = e.params.data.id;
            let currentValues = $(this).val() || [];

            if (selectedId === 'ask' || selectedId === 'none') {
                // If ask/none selected → remove all others
                $(this).val([selectedId]).trigger('change');
            } else {
                // If printer selected → remove ask/none
                currentValues = currentValues.filter(v => v !== 'ask' && v !== 'none');
                $(this).val(currentValues).trigger('change');
            }
        });

        /*  RESTORE SAVED VALUES */
        if (selectedIds && selectedIds.length > 0) {
            selectedIds.forEach((id, index) => {
                const text =
                    id === 'ask' ? 'Ask Everytime' :
                    id === 'none' ? 'No Print' :
                    selectedTexts[index] || 'Selected Printer';

                $(selector).append(new Option(text, id, true, true));
            });
            $(selector).trigger('change');
        } else {
            // no selection → keep placeholder
            $(selector).val(null).trigger('change');
        }
    }


    $(document).ready(function () {
      initPrinterSelect('#order_printer',@json($data['settings']['order_printer_ids']),@json($data['settings']['order_printer_names']));
      initPrinterSelect('#kot_printer',@json($data['settings']['kot_printer_ids']),@json($data['settings']['kot_printer_names']));
    });
    

    // $(document).ready(function () {
    //     setTimeout(toggleKotPrinter, 100);
    //     $kotSelect.val(null).trigger('change');
    //     $('#kot_counter_wise').on('change', toggleKotPrinter);
    // });



    </script>
@endsection