@extends('template.layouts.template-base')
@section('title', 'General Setting')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        .map-picker-wrapper {
            position: relative;
        }

        .map-search-card {
            width: min(360px, calc(100% - 24px));
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            padding: 6px;
            margin: 10px;
        }

        .map-search-input {
            border: 0;
            box-shadow: none !important;
        }

        #mapPickerCanvas {
            height: 420px;
            border-radius: 12px;
        }

        .pac-container {
            z-index: 20000 !important;
        }
    </style>
@endsection

@section('content')
    <section class="product-page add-service">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.blog-list.index') }}"> Setting / <span class="breadcrumb-link">General
                                    Setting</span></a>
                        </div>
                    </div>
                    <div class="col-auto cate-top-btns setting-page">
                        <div class="position-relative">
                            <div class="custom-dropdown product-lang">
                                <button class="dropdown-btn  langu-drpdwn" type="button">
                                    English
                                    <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                                </button>
                                <ul class="dropdown-menu-custom">
                                    <li class="active" data-lang="en">English</li>
                                    <li data-lang="ta">Tamil</li>
                                </ul>
                            </div>
                        </div>
                        {{-- <a class="btn-add-category" href="{{ route('backend.setting-management.edit-general-setting') }}">
                            Edit Setting
                        </a> --}}
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid">
            <form id="generalSettingsForm" method="POST"
                action="{{ route('backend.setting-management.update', 'general') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="active_tab" id="active_tab" value="{{ request('tab', 'company') }}">
                <div class="settings-container">
                    <!-- Tab Navigation -->
                    <div class="custom-tabs" role="tablist">
                        <button class="custom-tab-btn active" id="company-tab" data-bs-toggle="tab"
                            data-bs-target="#company" type="button" role="tab">
                            Company Settings
                        </button>
                        <button class="custom-tab-btn" id="payment-tab" data-bs-toggle="tab" data-bs-target="#payment"
                            type="button" role="tab">
                            Payment Gateway
                        </button>
                        <button class="custom-tab-btn " id="email-tab" data-bs-toggle="tab" data-bs-target="#email"
                            type="button" role="tab">
                            Email Settings
                        </button>
                        <button class="custom-tab-btn" id="captcha-tab" data-bs-toggle="tab" data-bs-target="#captcha"
                            type="button" role="tab">
                            Google Keys
                        </button>
                        <button class="custom-tab-btn" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax"
                            type="button" role="tab">
                            Tax Settings
                        </button>
                        <button class="custom-tab-btn" id="sms-tab" data-bs-toggle="tab" data-bs-target="#sms"
                            type="button" role="tab">
                            SMS Settings
                        </button>
                        <button class="custom-tab-btn" id="shipping-tab" data-bs-toggle="tab" data-bs-target="#shipping"
                            type="button" role="tab">
                            Shipping Settings
                        </button>
                    </div>

                    <!-- Tab Content -->
                    <div class="tab-content">

                        <!-- Company Settings Tab -->
                        <div class="tab-pane fade show active" id="company" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>Basic Information</h4>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">Company Name</label>
                                            <input type="text" class="form-control" name="company_name"
                                                value="{{ Arr::has($settings, 'company_name') ? $settings['company_name'] : null }}"
                                                placeholder="Enter Company Name" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">Company Name (Tamil)</label>
                                            <input type="text" class="form-control" name="company_name_tamil"
                                                value="{{ Arr::has($settings, 'company_name_tamil') ? $settings['company_name_tamil'] : null }}"
                                                placeholder="நிறுவனத்தின் பெயரை உள்ளிடவும்" />
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Pan Number</label>
                                        <input type="text" class="form-control" name="pan_number"
                                            value="{{ Arr::has($settings, 'pan_number') ? $settings['pan_number'] : null }}"
                                            placeholder="Enter Pan Number" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">GST No</label>
                                        <input type="text" class="form-control" name="gst_number"
                                            value="{{ Arr::has($settings, 'gst_number') ? $settings['gst_number'] : null }}"
                                            placeholder="Enter GST No" />
                                    </div>
                                    <div class="col-md-12">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">Company Logo</span></label>
                                            <div class="drop-zone">
                                                <div class="drop-zone__content">
                                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                        alt="Add Image" class="drop-zone__icon">
                                                    <div class="drop-zone__title">
                                                        Choose a file or drag and drop it here
                                                    </div>
                                                    <div class="drop-zone__info">
                                                        JPG, PNG or JPEG (Max 1 MB)
                                                    </div>
                                                </div>

                                                <input type="file" class="drop-zone__input" name="company_logo"
                                                    accept="image/png,image/jpeg" />
                                            </div>

                                            @if (!empty($settings['company_logo']))
                                                <a href="javascript:void(0)"
                                                    class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                                    data-url="{{ asset($settings['company_logo']) }}"
                                                    data-title="Company Logo">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            @endif
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">Company Logo (Tamil)</span></label>
                                            <div class="drop-zone">
                                                <div class="drop-zone__content">
                                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                                        alt="Add Image" class="drop-zone__icon">
                                                    <div class="drop-zone__title">
                                                        Choose a file or drag and drop it here
                                                    </div>
                                                    <div class="drop-zone__info">
                                                        JPG, PNG or JPEG (Max 1 MB)
                                                    </div>
                                                </div>

                                                <input type="file" class="drop-zone__input" name="company_logo_tamil"
                                                    accept="image/png,image/jpeg" />
                                            </div>

                                            @if (!empty($settings['company_logo_tamil']))
                                                <a href="javascript:void(0)"
                                                    class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                                    data-url="{{ asset($settings['company_logo_tamil']) }}"
                                                    data-title="Company Logo (Tamil)">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Phone Number</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">+91</span>
                                            <input type="text" name="phone_number"
                                                value="{{ Arr::has($settings, 'phone_number') ? $settings['phone_number'] : null }}"
                                                placeholder="Enter Phone Number" />
                                        </div>
                                        <div class="whatsapp-check mt-1">
                                            <input type="checkbox" id="sameWhatsapp" name="same_whatsapp" value="1"
                                                {{ (Arr::has($settings, 'same_whatsapp') ? $settings['same_whatsapp'] : '0') === '1' ? 'checked' : '' }}>
                                            <label class="sameWhatsapp mb-0" for="sameWhatsapp"
                                                style="font-size: 12px; cursor: pointer;">Use the same number for
                                                WhatsApp</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Landline</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">+91</span>
                                            <input type="text" name="landline_number"
                                                value="{{ Arr::has($settings, 'landline_number') ? $settings['landline_number'] : null }}"
                                                placeholder="Enter Landline Number" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Alternative Phone Number</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">+91</span>
                                            <input type="text" name="alternate_phone_number"
                                                value="{{ Arr::has($settings, 'alternate_phone_number') ? $settings['alternate_phone_number'] : null }}"
                                                placeholder="Enter Alternative Phone Number" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>WhatsApp Number</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">+91</span>
                                            <input type="text" name="whatsapp_number" id="whatsappNumber"
                                                value="{{ Arr::has($settings, 'whatsapp_number') ? $settings['whatsapp_number'] : null }}"
                                                placeholder="Enter WhatsApp Number" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Email</label>
                                        <input type="text" class="form-control" name="company_email"
                                            value="{{ Arr::has($settings, 'company_email') ? $settings['company_email'] : null }}"
                                            placeholder="Enter Your Email" />
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Pincode <span class="required">*</span></label>
                                        <input type="text" class="form-control pincode-lookup" name="pincode"
                                            value="{{ Arr::has($settings, 'pincode') ? $settings['pincode'] : null }}"
                                            placeholder="Enter Pincode" maxlength="6" pattern="[0-9]{6}"
                                            inputmode="numeric" />
                                    </div>

                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">City</label>
                                            <input type="text" class="form-control city-field" name="city"
                                                value="{{ Arr::has($settings, 'city') ? $settings['city'] : null }}"
                                                placeholder="Auto Fetch" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">City (Tamil)</label>
                                            <input type="text" class="form-control city-field" name="city_tamil"
                                                value="{{ Arr::has($settings, 'city_tamil') ? $settings['city_tamil'] : null }}"
                                                placeholder="நகரம் (தானாகப் பெறுதல்)" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">State</label>
                                            <input type="text" class="form-control state-field" name="state"
                                                value="{{ Arr::has($settings, 'state') ? $settings['state'] : null }}"
                                                placeholder="Auto Fetch" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">State (Tamil)</label>
                                            <input type="text" class="form-control state-field" name="state_tamil"
                                                value="{{ Arr::has($settings, 'state_tamil') ? $settings['state_tamil'] : null }}"
                                                placeholder="மாநிலம் (தானாகப் பெறுதல்)" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">Country</label>
                                            <input type="text" class="form-control country-field" name="country"
                                                value="{{ Arr::has($settings, 'country') ? $settings['country'] : null }}"
                                                placeholder="Auto Fetch" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">Country (Tamil)</label>
                                            <input type="text" class="form-control country-field" name="country_tamil"
                                                value="{{ Arr::has($settings, 'country_tamil') ? $settings['country_tamil'] : null }}"
                                                placeholder="நாடு (தானாகப் பெறுதல்)" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label">Building No / Colony / Area / Street <span
                                                    class="required">*</span></label>
                                            <input type="text" class="form-control building-address-field"
                                                name="building_address"
                                                value="{{ Arr::has($settings, 'building_address') ? $settings['building_address'] : null }}"
                                                placeholder="Enter Building  No" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label">Building / Street (Tamil) <span
                                                    class="required">*</span></label>
                                            <input type="text" class="form-control building-address-field"
                                                name="building_address_tamil"
                                                value="{{ Arr::has($settings, 'building_address_tamil') ? $settings['building_address_tamil'] : null }}"
                                                placeholder="கட்டிட எண் / தெரு உள்ளிடவும்" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class=" d-flex flex-column">
                                            <label class="form-label">Google Map</label>
                                            <button type="button" class="map-btn fw-semibold" id="openMapPickerBtn"
                                                data-bs-toggle="modal" data-bs-target="#mapPickerModal">
                                                Select Location on Map
                                                <img src="{{ asset('assets/template/images/map-light.png') }}"
                                                    alt="" class="map-icon">
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Latitude</label>
                                        <input type="text" class="form-control latitude-field" name="latitude"
                                            id="latitudeInput"
                                            value="{{ Arr::has($settings, 'latitude') ? $settings['latitude'] : null }}"
                                            placeholder="Enter Latitude" />
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Longitude</label>
                                        <input type="text" class="form-control longitude-field" name="longitude"
                                            id="longitudeInput"
                                            value="{{ Arr::has($settings, 'longitude') ? $settings['longitude'] : null }}"
                                            placeholder="Enter Longitude" />
                                    </div>


                                    <div class="col-md-4">
                                        <label class="form-label">Website Link</label>
                                        <input type="text" class="form-control" name="website_link"
                                            value="{{ Arr::has($settings, 'website_link') ? $settings['website_link'] : null }}"
                                            placeholder="Enter Website Link" />
                                    </div>

                                    <div class="col-md-12">
                                        <div class="same-address-checkbox d-flex align-items-center gap-2">
                                            <input type="checkbox" id="sameAddress" name="same_shipping_address"
                                                value="1"
                                                {{ (Arr::has($settings, 'same_shipping_address') ? $settings['same_shipping_address'] : '0') === '1' ? 'checked' : '' }}>
                                            <label for="sameAddress" class="checkbox-label mb-0 ">
                                                Use the same address for shipping
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="content-card rounded-12 px-3">
                                <h4 class="text-black mt-2">Addresses</h4>
                                <div id="address-repeater-container">
                                    @php
                                        $displayAddresses =
                                            count($addresses) > 0
                                                ? $addresses
                                                : [new \App\Models\Address(['address_type' => 'shipping'])];
                                    @endphp
                                    @foreach ($displayAddresses as $index => $address)
                                        <div class="address-item border-bottom mb-4 pb-3"
                                            data-index="{{ $index }}">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h5 class="mb-0">Address #{{ $index + 1 }}</h5>
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <input type="hidden"
                                                            name="addresses[{{ $index }}][is_default]"
                                                            value="0">
                                                        <input type="checkbox"
                                                            class="form-check-input is-default-checkbox"
                                                            id="is_default_{{ $index }}"
                                                            name="addresses[{{ $index }}][is_default]"
                                                            value="1"
                                                            {{ !empty($address->is_default) ? 'checked' : ($index === 0 && $addresses->where('is_default', true)->count() === 0 ? 'checked' : '') }}>
                                                        <label class="form-check-label fw-semibold text-success mb-0"
                                                            for="is_default_{{ $index }}"
                                                            style="cursor:pointer; font-size:13px;">
                                                            <i class="ri-map-pin-2-fill me-1"></i>Set as Default
                                                        </label>
                                                    </div>
                                                    @if ($index > 0)
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm remove-address">Remove</button>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="row g-3">
                                                <div class="col-md-8">
                                                    <div class="lang-field lang-en">
                                                        <label class="form-label">Address Name (e.g. Head Office)</label>
                                                        <input type="text" class="form-control"
                                                            name="addresses[{{ $index }}][address_name]"
                                                            value="{{ $address->address_name }}"
                                                            placeholder="Enter Address Name" />
                                                    </div>
                                                    <div class="lang-field lang-ta" style="display:none">
                                                        <label class="form-label">Address Name (Tamil)</label>
                                                        <input type="text" class="form-control"
                                                            name="addresses[{{ $index }}][address_name_tamil]"
                                                            value="{{ $address->address_name_tamil }}"
                                                            placeholder="முகவரி பெயரை உள்ளிடவும்" />
                                                    </div>
                                                    <input type="hidden"
                                                        name="addresses[{{ $index }}][address_type]"
                                                        value="{{ $address->address_type }}">
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="form-label">Pincode <span
                                                            class="required">*</span></label>
                                                    <input type="text" class="form-control pincode-lookup"
                                                        name="addresses[{{ $index }}][pincode]"
                                                        value="{{ $address->pincode }}" placeholder="Enter Pincode"
                                                        maxlength="6" pattern="[0-9]{6}" inputmode="numeric" />
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="lang-field lang-en">
                                                        <label class="form-label">City</label>
                                                        <input type="text" class="form-control city-field"
                                                            name="addresses[{{ $index }}][city]"
                                                            value="{{ $address->city }}" placeholder="Auto Fetch" />
                                                    </div>
                                                    <div class="lang-field lang-ta" style="display:none">
                                                        <label class="form-label">City (Tamil)</label>
                                                        <input type="text" class="form-control city-field"
                                                            name="addresses[{{ $index }}][city_tamil]"
                                                            value="{{ $address->city_tamil }}" placeholder="நகரம்" />
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="lang-field lang-en">
                                                        <label class="form-label">State</label>
                                                        <input type="text" class="form-control state-field"
                                                            name="addresses[{{ $index }}][state]"
                                                            value="{{ $address->state }}" placeholder="Auto Fetch" />
                                                    </div>
                                                    <div class="lang-field lang-ta" style="display:none">
                                                        <label class="form-label">State (Tamil)</label>
                                                        <input type="text" class="form-control state-field"
                                                            name="addresses[{{ $index }}][state_tamil]"
                                                            value="{{ $address->state_tamil }}" placeholder="மாநிலம்" />
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="lang-field lang-en">
                                                        <label class="form-label">Country</label>
                                                        <input type="text" class="form-control country-field"
                                                            name="addresses[{{ $index }}][country]"
                                                            value="{{ $address->country ?? 'India' }}"
                                                            placeholder="Auto Fetch" />
                                                    </div>
                                                    <div class="lang-field lang-ta" style="display:none">
                                                        <label class="form-label">Country (Tamil)</label>
                                                        <input type="text" class="form-control country-field"
                                                            name="addresses[{{ $index }}][country_tamil]"
                                                            value="{{ $address->country_tamil }}" placeholder="நாடு" />
                                                    </div>
                                                </div>

                                                <div class="col-md-8">
                                                    <div class="lang-field lang-en">
                                                        <label class="form-label">Building / Street <span
                                                                class="required">*</span></label>
                                                        <input type="text" class="form-control building-address-field"
                                                            name="addresses[{{ $index }}][building_address]"
                                                            value="{{ $address->building_address }}"
                                                            placeholder="Enter Building No" />
                                                    </div>
                                                    <div class="lang-field lang-ta" style="display:none">
                                                        <label class="form-label">Building / Street (Tamil) <span
                                                                class="required">*</span></label>
                                                        <input type="text" class="form-control building-address-field"
                                                            name="addresses[{{ $index }}][building_address_tamil]"
                                                            value="{{ $address->building_address_tamil }}"
                                                            placeholder="கட்டிடம் / தெரு" />
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class=" d-flex flex-column">
                                                        <label class="form-label">Google Map</label>
                                                        <button type="button"
                                                            class="map-btn fw-semibold open-map-picker">
                                                            Select Location on Map
                                                            <img src="{{ asset('assets/template/images/map-light.png') }}"
                                                                alt="" class="map-icon">
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="form-label">Longitude</label>
                                                    <input type="text" class="form-control longitude-field"
                                                        name="addresses[{{ $index }}][longitude]"
                                                        value="{{ $address->longitude }}" placeholder="Enter Longitude"
                                                        readonly />
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="form-label">Latitude</label>
                                                    <input type="text" class="form-control latitude-field"
                                                        name="addresses[{{ $index }}][latitude]"
                                                        value="{{ $address->latitude }}" placeholder="Enter Latitude"
                                                        readonly />
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="mt-2 mb-3">
                                    <button type="button" class="btn btn-primary btn-sm" id="add-more-address">
                                        Add More +
                                    </button>
                                </div>
                            </div>

                            <div class="content-card rounded-12 px-3">
                                <h4 class="text-black mt-2">Invoice Data</h4>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="lang-field lang-en">
                                            <label class="form-label mt-0">Signature Image <span class="required">*</span>
                                                <span class="small-txt">(180px*56px)</span></label>

                                            <div class="upload-wrapper">
                                                <input type="file" id="signatureImageInput" class="file-input"
                                                    name="signature_image" accept="image/png,image/jpeg" hidden>
                                                <input type="text" class="form-control upload-display"
                                                    placeholder="No File Chosen" readonly>

                                                <label for="signatureImageInput"
                                                    class="btn upload-btn d-flex align-items-center mb-0">
                                                    Upload
                                                </label>
                                            </div>

                                            @if (!empty($settings['signature_image']))
                                                <a href="javascript:void(0)"
                                                    class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                                    data-url="{{ asset($settings['signature_image']) }}"
                                                    data-title="Signature">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            @endif
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none">
                                            <label class="form-label mt-0">Signature Image (Tamil) <span
                                                    class="required">*</span>
                                                <span class="small-txt">(180px*56px)</span></label>

                                            <div class="upload-wrapper">
                                                <input type="file" id="signatureImageTamilInput" class="file-input"
                                                    name="signature_image_tamil" accept="image/png,image/jpeg" hidden>
                                                <input type="text" class="form-control upload-display"
                                                    placeholder="No File Chosen" readonly>

                                                <label for="signatureImageTamilInput"
                                                    class="btn upload-btn d-flex align-items-center mb-0">
                                                    Upload
                                                </label>
                                            </div>

                                            @if (!empty($settings['signature_image_tamil']))
                                                <a href="javascript:void(0)"
                                                    class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                                    data-url="{{ asset($settings['signature_image_tamil']) }}"
                                                    data-title="Signature (Tamil)">
                                                    <i class="fa fa-eye"></i> View
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Invoice Prefix <span class="required">*</span></label>
                                        <input type="text" class="form-control" name="invoice_prefix"
                                            value="{{ Arr::has($settings, 'invoice_prefix') ? $settings['invoice_prefix'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>

                                    <div class="col-md-2">
                                        <label class="form-label">Invoice Suffix</label>
                                        <input type="text" class="form-control" name="invoice_suffix"
                                            autocomplete="off"
                                            value="{{ Arr::has($settings, 'invoice_suffix') ? $settings['invoice_suffix'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>

                                    <div class="col-md-12">
                                        <div class="d-flex flex-column mt-3">
                                            <div class="lang-field lang-en">
                                                <label class="form-label">Terms of Instructions</label>
                                                <textarea name="terms_of_instructions" class="w-100" placeholder="Enter Here" id="Terms" rows="5">{{ Arr::has($settings, 'terms_of_instructions') ? $settings['terms_of_instructions'] : null }}</textarea>
                                            </div>
                                            <div class="lang-field lang-ta" style="display:none">
                                                <label class="form-label">Terms of Instructions (Tamil)</label>
                                                <textarea name="terms_of_instructions_tamil" class="w-100" placeholder="இங்கே உள்ளிடவும்" id="TermsTamil"
                                                    rows="5">{{ Arr::has($settings, 'terms_of_instructions_tamil') ? $settings['terms_of_instructions_tamil'] : null }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="d-flex flex-column mt-3">
                                            <div class="lang-field lang-en">
                                                <label class="form-label">Delivery Notes</label>
                                                <textarea name="delivery_notes" class="w-100" placeholder="Enter Here" id="delivery-note" rows="5">{{ Arr::has($settings, 'delivery_notes') ? $settings['delivery_notes'] : null }}</textarea>
                                            </div>
                                            <div class="lang-field lang-ta" style="display:none">
                                                <label class="form-label">Delivery Notes (Tamil)</label>
                                                <textarea name="delivery_notes_tamil" class="w-100" placeholder="இங்கே உள்ளிடவும்" id="delivery-note-tamil"
                                                    rows="5">{{ Arr::has($settings, 'delivery_notes_tamil') ? $settings['delivery_notes_tamil'] : null }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#companyToast">Save</button>
                            </div>
                        </div>
                        <!-- Payment Gateway Tab -->
                        <div class="tab-pane fade" id="payment" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>Payment Gateway</h4>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Razorpay Payment <span class="required">*</span></label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="razorpay_status"
                                                    id="razorpay-enable" value="enable"
                                                    {{ (Arr::has($settings, 'razorpay_status') ? $settings['razorpay_status'] : 'enable') === 'enable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="razorpay-enable">Enable</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="razorpay_status"
                                                    id="razorpay-disable" value="disable"
                                                    {{ (Arr::has($settings, 'razorpay_status') ? $settings['razorpay_status'] : 'enable') === 'disable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="razorpay-disable">Disable</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="key-input-wrapper">
                                            <label class="form-label">Razorpay Key</label>
                                            <input type="password" id="razorpayKey" class="key-input "
                                                autocomplete="current-password" name="razorpay_key"
                                                value="{{ Arr::has($settings, 'razorpay_key') ? $settings['razorpay_key'] : null }}"
                                                placeholder="Enter your Razorpay Key ID" />
                                            <span class="eye-toggle" id="toggleKey">
                                                <i class="ri-eye-off-fill"></i>
                                            </span>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Razorpay Secret</label>
                                        <input type="text" class="form-control" name="razorpay_secret"
                                            value="{{ Arr::has($settings, 'razorpay_secret') ? $settings['razorpay_secret'] : null }}"
                                            placeholder="Enter your Razorpay Secret Key" />
                                    </div>
                                </div>

                            </div>

                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#paymentToast">Save</button>
                            </div>

                        </div>

                        <!-- Email Settings Tab -->
                        <div class="tab-pane fade" id="email" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>Email Settings</h4>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Mail From <span class="required">*</span></label>
                                        <input type="text" class="form-control" name="mail_from_address"
                                            value="{{ Arr::has($settings, 'mail_from_address') ? $settings['mail_from_address'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Mail From Name</label>
                                        <input type="text" class="form-control" name="mail_from_name"
                                            value="{{ Arr::has($settings, 'mail_from_name') ? $settings['mail_from_name'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Mail Logo
                                            <span class="small-txt">(200px*200px)</span></label>


                                        <div class="upload-wrapper">
                                            <!-- hidden file input -->
                                            <input type="file" id="fileInput1" class="file-input" hidden>

                                            <!-- display filename -->
                                            <input type="text" class="form-control upload-display"
                                                placeholder="No File Chosen" readonly>

                                            <!-- label triggers file input -->
                                            <label for="fileInput1" class="btn upload-btn d-flex align-items-center mb-0">
                                                Upload
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="add-product-section inventory-sec px-3">
                                <h2 class="section-title">Email Configuration</h2>

                                <div class="row mb-0">
                                    <div class="col-lg-4">
                                        <label>Email Provider</label>
                                        <select class="form-select" name="email_provider">
                                            <option value="smtp"
                                                {{ (Arr::has($settings, 'email_provider') ? $settings['email_provider'] : 'smtp') === 'smtp' ? 'selected' : '' }}>
                                                SMTP
                                            </option>
                                            <option value="mailgun"
                                                {{ (Arr::has($settings, 'email_provider') ? $settings['email_provider'] : 'smtp') === 'mailgun' ? 'selected' : '' }}>
                                                Mailgun
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mail Host</label>
                                        <input type="text" name="mail_host"
                                            value="{{ Arr::has($settings, 'mail_host') ? $settings['mail_host'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mail Port</label>
                                        <input type="text" name="mail_port"
                                            value="{{ Arr::has($settings, 'mail_port') ? $settings['mail_port'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                </div>
                                <div class="row mb-0">
                                    <div class="col-lg-4">
                                        <label>Email Encryption</label>
                                        <select class="form-select" name="mail_encryption">
                                            <option value=""
                                                {{ (Arr::has($settings, 'mail_encryption') ? $settings['mail_encryption'] : '') === '' ? 'selected' : '' }}>
                                                Select
                                            </option>
                                            <option value="tls"
                                                {{ (Arr::has($settings, 'mail_encryption') ? $settings['mail_encryption'] : '') === 'tls' ? 'selected' : '' }}>
                                                TLS
                                            </option>
                                            <option value="ssl"
                                                {{ (Arr::has($settings, 'mail_encryption') ? $settings['mail_encryption'] : '') === 'ssl' ? 'selected' : '' }}>
                                                SSL
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>SMTP Server Username</label>
                                        <input type="text" name="smtp_server_username"
                                            value="{{ Arr::has($settings, 'smtp_server_username') ? $settings['smtp_server_username'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>SMTP Server Password</label>
                                        <input type="text" name="smtp_server_password"
                                            value="{{ Arr::has($settings, 'smtp_server_password') ? $settings['smtp_server_password'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                </div>

                            </div>
                            <div class="add-product-section inventory-sec px-3">
                                <h2 class="section-title">Email Configuration</h2>

                                <div class="row mb-0">
                                    <div class="col-lg-4">
                                        <label>Email Provider</label>
                                        <select class="form-select" name="mailgun_email_provider">
                                            <option value="smtp"
                                                {{ (Arr::has($settings, 'mailgun_email_provider') ? $settings['mailgun_email_provider'] : 'mailgun') === 'smtp' ? 'selected' : '' }}>
                                                SMTP
                                            </option>
                                            <option value="mailgun"
                                                {{ (Arr::has($settings, 'mailgun_email_provider') ? $settings['mailgun_email_provider'] : 'mailgun') === 'mailgun' ? 'selected' : '' }}>
                                                Mailgun
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mailgun Domain</label>
                                        <input type="text" name="mailgun_domain"
                                            value="{{ Arr::has($settings, 'mailgun_domain') ? $settings['mailgun_domain'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mailgun Secret</label>
                                        <input type="text" name="mailgun_secret"
                                            value="{{ Arr::has($settings, 'mailgun_secret') ? $settings['mailgun_secret'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                </div>

                            </div>
                            <div class="add-product-section inventory-sec px-3">
                                <h2 class="section-title">Login Geolocation</h2>

                                <div class="row mb-0">
                                    <div class="col-lg-4">
                                        <label>IP Geolocation</label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="ip_geolocation_enabled"
                                                    id="ip-geolocation-enable" value="enable"
                                                    {{ (Arr::has($settings, 'ip_geolocation_enabled') ? $settings['ip_geolocation_enabled'] : 'enable') === 'enable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="ip-geolocation-enable">Enable</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="ip_geolocation_enabled"
                                                    id="ip-geolocation-disable" value="disable"
                                                    {{ (Arr::has($settings, 'ip_geolocation_enabled') ? $settings['ip_geolocation_enabled'] : 'enable') === 'disable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="ip-geolocation-disable">Disable</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <label>Provider Endpoint</label>
                                        <input type="text" name="ip_geolocation_endpoint"
                                            value="{{ Arr::has($settings, 'ip_geolocation_endpoint') ? $settings['ip_geolocation_endpoint'] : 'https://ipapi.co/{ip}/json/' }}"
                                            placeholder="https://ipapi.co/{ip}/json/" />
                                    </div>

                                    <div class="col-lg-3">
                                        <label>Timeout (seconds)</label>
                                        <input type="number" min="1" name="ip_geolocation_timeout"
                                            value="{{ Arr::has($settings, 'ip_geolocation_timeout') ? $settings['ip_geolocation_timeout'] : 5 }}"
                                            placeholder="5" />
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="button" class="btn btn-secondary px-4" data-bs-toggle="modal"
                                    data-bs-target=".testEmailPopup">
                                    Email Test
                                </button>
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#emailToast">Save</button>
                            </div>
                        </div>

                        <!-- Google Captcha Tab -->
                        <div class="tab-pane fade" id="captcha" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>Google Captcha</h4>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Google Captcha <span class="required">*</span></label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="captcha_status"
                                                    id="captcha-enable" value="enable"
                                                    {{ (Arr::has($settings, 'captcha_status') ? $settings['captcha_status'] : 'enable') === 'enable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="captcha-enable">Enable</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="captcha_status"
                                                    id="captcha-disable" value="disable"
                                                    {{ (Arr::has($settings, 'captcha_status') ? $settings['captcha_status'] : 'enable') === 'disable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="captcha-disable">Disable</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Google CAPTCHA Types</label>
                                        <select class="form-select" name="captcha_type">
                                            <option value="recaptcha_v2_checkbox"
                                                {{ (Arr::has($settings, 'captcha_type') ? $settings['captcha_type'] : 'recaptcha_v2_checkbox') === 'recaptcha_v2_checkbox' ? 'selected' : '' }}>
                                                reCAPTCHA v2 - Checkbox
                                            </option>
                                            <option value="recaptcha_v2_invisible"
                                                {{ (Arr::has($settings, 'captcha_type') ? $settings['captcha_type'] : 'recaptcha_v2_checkbox') === 'recaptcha_v2_invisible' ? 'selected' : '' }}>
                                                reCAPTCHA v2 - Invisible
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Public Key or Site Key</label>
                                        <input type="text" class="form-control" name="captcha_site_key"
                                            value="{{ Arr::has($settings, 'captcha_site_key') ? $settings['captcha_site_key'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Private Key or Secret Key</label>
                                        <input type="text" class="form-control" name="captcha_secret_key"
                                            value="{{ Arr::has($settings, 'captcha_secret_key') ? $settings['captcha_secret_key'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Google Maps API Key</label>
                                        <input type="text" class="form-control" name="google_maps_api_key"
                                            value="{{ Arr::has($settings, 'google_maps_api_key') ? $settings['google_maps_api_key'] : null }}"
                                            placeholder="Enter Google Maps API Key" />
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#captchaToast">Save</button>
                            </div>
                        </div>

                        <!-- Tax Settings Tab -->
                        <div class="tab-pane fade" id="tax" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>Tax Settings</h4>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Tax <span class="required">*</span></label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="tax_status"
                                                    id="tax-enable" value="enable"
                                                    {{ (Arr::has($settings, 'tax_status') ? $settings['tax_status'] : 'enable') === 'enable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="tax-enable">Enable</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="tax_status"
                                                    id="tax-disable" value="disable"
                                                    {{ (Arr::has($settings, 'tax_status') ? $settings['tax_status'] : 'enable') === 'disable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="tax-disable">Disable</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tax Calculation Type</label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio"
                                                    name="tax_calculation_type" id="tax-inclusive" value="inclusive"
                                                    {{ (Arr::has($settings, 'tax_calculation_type') ? $settings['tax_calculation_type'] : 'inclusive') === 'inclusive' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="tax-inclusive">Inclusive</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio"
                                                    name="tax_calculation_type" id="tax-exclusive" value="exclusive"
                                                    {{ (Arr::has($settings, 'tax_calculation_type') ? $settings['tax_calculation_type'] : 'inclusive') === 'exclusive' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="tax-exclusive">Exclusive</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tax Rate (in %)</label>
                                        <input type="number" class="form-control" name="tax_rate"
                                            value="{{ Arr::has($settings, 'tax_rate') ? $settings['tax_rate'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#companyToast">Save</button>
                            </div>
                        </div>

                        <!-- SMS Settings Tab -->
                        <div class="tab-pane fade" id="sms" role="tabpanel">
                            <div class="content-card px-3">
                                <h4>SMS Settings</h4>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">SMS <span class="required">*</span></label>
                                        <div class="d-flex gap-3 mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="sms_status"
                                                    id="sms-enable" value="enable"
                                                    {{ (Arr::has($settings, 'sms_status') ? $settings['sms_status'] : 'enable') === 'enable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="sms-enable">Enable</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="sms_status"
                                                    id="sms-disable" value="disable"
                                                    {{ (Arr::has($settings, 'sms_status') ? $settings['sms_status'] : 'enable') === 'disable' ? 'checked' : '' }} />
                                                <label class="form-check-label" for="sms-disable">Disable</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Nettyfish API Key</label>
                                        <input type="text" class="form-control" name="nettyfish_api_key"
                                            value="{{ Arr::has($settings, 'nettyfish_api_key') ? $settings['nettyfish_api_key'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Nettyfish Client ID</label>
                                        <input type="text" class="form-control" name="nettyfish_client_id"
                                            value="{{ Arr::has($settings, 'nettyfish_client_id') ? $settings['nettyfish_client_id'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Nettyfish Sender ID</label>
                                        <input type="text" class="form-control" name="nettyfish_sender_id"
                                            value="{{ Arr::has($settings, 'nettyfish_sender_id') ? $settings['nettyfish_sender_id'] : null }}"
                                            placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">SMS Type</label>
                                        <select class="form-select" name="sms_type">
                                            <option value="transactional"
                                                {{ (Arr::has($settings, 'sms_type') ? $settings['sms_type'] : 'transactional') === 'transactional' ? 'selected' : '' }}>
                                                Transactional
                                            </option>
                                            <option value="promotional"
                                                {{ (Arr::has($settings, 'sms_type') ? $settings['sms_type'] : 'transactional') === 'promotional' ? 'selected' : '' }}>
                                                Promotional
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="button" class="btn btn-secondary px-4" data-bs-toggle="modal"
                                    data-bs-target=".testSmsPopup">
                                    SMS Test
                                </button>
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#smsToast">Save</button>
                            </div>
                        </div>

                        <!-- Shipping Settings Tab -->
                        <div class="tab-pane fade" id="shipping" role="tabpanel">
                            <div class="content-card">
                                <h4>Shipping Settings</h4>
                                <div class="row g-3">
                                    <div class="col-lg-4">
                                        <label>Shipping Cost applies below price</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">₹</span>
                                            <input type="text" name="shipping_cost_applies_below_price"
                                                value="{{ Arr::has($settings, 'shipping_cost_applies_below_price') ? $settings['shipping_cost_applies_below_price'] : null }}"
                                                placeholder="Enter Here" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Shipping Cost</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">₹</span>
                                            <input type="text" name="shipping_cost"
                                                value="{{ Arr::has($settings, 'shipping_cost') ? $settings['shipping_cost'] : null }}"
                                                placeholder="Enter Here" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#shippingToast">Save</button>
                            </div>
                        </div>

                    </div>

            </form>
        </div>
    </section>
    <div class="modal fade" id="mapPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5>Select Location</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-3">
                    <div class="map-picker-wrapper">
                        <div id="pac-card" class="map-search-card">
                            <input type="text" id="pac-input" class="form-control map-search-input"
                                placeholder="Search a location">
                        </div>
                        <div id="mapPickerCanvas"></div>
                    </div>
                    <small class="d-block mt-2 text-muted">Click on map or drag marker to set coordinates.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmMapLocationBtn" disabled>Use this
                        location</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade testEmailPopup forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <h5>Test Email</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper">


                        <div class="stock-row">
                            <div class="stock-field">
                                <label>Receiver's Email Address</label>
                                <input type="text" id="test_receiver_email" placeholder="Enter Here">
                            </div>
                        </div>
                        <div class="stock-row my-3">

                            <div class="stock-field">
                                <label>Enter Your Message</label>
                                <textarea id="test_email_message" rows="3" class="form-control" placeholder="Enter Here">Testing email configuration</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn" id="sendTestEmailBtn">
                            Send Email
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade testSmsPopup forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <h5>Test SMS</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper">


                        <div class="stock-row">
                            <div class="stock-field">
                                <label>Receiver's Phone Number</label>
                                <div class="input-with-prefix d-flex">
                                    <span class="input-prefix">+91</span>
                                    <input type="text" name="Phone Number" placeholder="Enter Phone Number" />
                                </div>
                            </div>
                        </div>
                        <div class="stock-row my-3">

                            <div class="stock-field">
                                <label>Enter Your Message</label>
                                <textarea name="" rows="3" class="form-control" placeholder="Enter Here"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#addStockToast">
                            Send SMS
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="companyToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The company settings has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="paymentToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The payment gateway has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="emailToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The email settings has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="captchaToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The google captcha has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="smsToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The SMS settings has been saved successfully.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="shippingToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Saved Successfully</h6>
                    <p>The shipping settings has been saved successfully.</p>
                </div>

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


@section('scripts')
    <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
    <script src="https://unpkg.com/@yaireo/tagify"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tabButtons = document.querySelectorAll(".custom-tab-btn[data-bs-target]");
            const activeTabInput = document.getElementById("active_tab");

            const setActiveTab = (tabId) => {
                if (activeTabInput && tabId) {
                    activeTabInput.value = tabId;
                }
            };

            const syncActiveButtonState = (activeButton) => {
                tabButtons.forEach((btn) => btn.classList.remove("active"));
                if (activeButton) {
                    activeButton.classList.add("active");
                }
            };

            tabButtons.forEach((button) => {
                button.addEventListener("shown.bs.tab", function() {
                    const tabId = (this.getAttribute("data-bs-target") || "").replace("#", "");
                    setActiveTab(tabId);
                    syncActiveButtonState(this);
                });
            });

            const requestedTab = new URLSearchParams(window.location.search).get("tab");
            if (requestedTab) {
                const requestedButton = document.querySelector(
                    `.custom-tab-btn[data-bs-target="#${requestedTab}"]`,
                );
                if (requestedButton) {
                    if (window.bootstrap?.Tab) {
                        window.bootstrap.Tab.getOrCreateInstance(requestedButton).show();
                    } else {
                        requestedButton.click();
                    }
                }
            }

            const currentActiveButton = document.querySelector(".custom-tab-btn.active");
            if (currentActiveButton) {
                const tabId = (currentActiveButton.getAttribute("data-bs-target") || "").replace("#", "");
                setActiveTab(tabId);
            }

            const generalForm = document.querySelector('form[action*="setting-management/update/general"]');
            if (generalForm) {
                generalForm.addEventListener("submit", function() {
                    const activePane = document.querySelector(".tab-pane.show.active");
                    if (activePane) {
                        setActiveTab(activePane.id);
                    }
                });
            }
        });
    </script>

    <script>
        $(document).on('change', '.is-default-checkbox', function() {
            if ($(this).is(':checked')) {
                $('.is-default-checkbox').not(this).prop('checked', false);
            } else {
                if ($('.is-default-checkbox:checked').length === 0) {
                    $(this).prop('checked', true);
                }
            }
        });
        $(document).on('click', '#add-more-address', function() {});
    </script>

    <script>
        $(document).ready(function() {
            const mapApiKey = @json(Arr::has($settings, 'google_maps_api_key') ? $settings['google_maps_api_key'] : null);
            const $mapModalEl = $("#mapPickerModal");
            const $confirmBtn = $("#confirmMapLocationBtn");
            const $mapSearchInput = $("#pac-input");
            const pacCard = document.getElementById("pac-card");
            const mapCanvas = document.getElementById("mapPickerCanvas");

            if (!$mapModalEl.length || !$confirmBtn.length || !mapCanvas || !pacCard) return;

            let mapInstance = null;
            let marker = null;
            let pickedLatLng = null;
            let markerUsesAdvanced = false;
            let placeAutocomplete = null;
            let googleMapsLoadPromise = null;
            let geocoder = null;

            // Global/shared context variables
            window.mapPickerContext = 'main'; // 'main' or the row jQuery object
            window.pickedLatLng = null;

            const getTargetFields = () => {
                if (window.mapPickerContext === 'main') {
                    return {
                        lat: $('#latitudeInput'),
                        lng: $('#longitudeInput'),
                        pincode: $('input[name="pincode"]'),
                        city: $('input[name="city"]'),
                        state: $('input[name="state"]'),
                        country: $('input[name="country"]'),
                        building: $('input[name="building_address"]')
                    };
                } else {
                    const $item = $(window.mapPickerContext);
                    return {
                        lat: $item.find('.latitude-field'),
                        lng: $item.find('.longitude-field'),
                        pincode: $item.find('.pincode-lookup'),
                        city: $item.find('.city-field'),
                        state: $item.find('.state-field'),
                        country: $item.find('.country-field'),
                        building: $item.find('input[name*="[building_address]"]')
                    };
                }
            };

            const parsePoint = () => {
                const target = getTargetFields();
                const lat = parseFloat(target.lat.val());
                const lng = parseFloat(target.lng.val());
                return (Number.isFinite(lat) && Number.isFinite(lng)) ? {
                    lat,
                    lng
                } : {
                    lat: 11.0168,
                    lng: 76.9558
                };
            };

            const setPickedLocation = (latLngLike) => {
                const lat = typeof latLngLike.lat === "function" ? latLngLike.lat() : latLngLike.lat;
                const lng = typeof latLngLike.lng === "function" ? latLngLike.lng() : latLngLike.lng;
                window.pickedLatLng = {
                    lat,
                    lng
                };

                if (markerUsesAdvanced) marker.position = window.pickedLatLng;
                else marker.setPosition(window.pickedLatLng);

                $confirmBtn.prop("disabled", false);
            };

            const getAddressComponent = (components, type) => {
                const found = components.find(c => c.types.includes(type));
                return found ? found.long_name : "";
            };

            const reverseGeocode = () => {
                if (!geocoder || !window.pickedLatLng) return;
                geocoder.geocode({
                    location: window.pickedLatLng
                }, (results, status) => {
                    if (status !== "OK" || !results[0]) return;
                    const comps = results[0].address_components;
                    const target = getTargetFields();

                    const pincodeRaw = getAddressComponent(comps, "postal_code");
                    const pincode = String(pincodeRaw || "").replace(/\D/g, "").slice(0, 6);
                    if (pincode.length === 6) {
                        target.pincode.val(pincode).trigger('input');
                    }

                    const city = getAddressComponent(comps, "locality") || getAddressComponent(comps,
                        "administrative_area_level_2");
                    const state = getAddressComponent(comps, "administrative_area_level_1");
                    const country = getAddressComponent(comps, "country");

                    if (city) target.city.val(city);
                    if (state) target.state.val(state);
                    if (country) target.country.val(country);

                    if (!target.building.val()) {
                        const streetNum = getAddressComponent(comps, "street_number");
                        const route = getAddressComponent(comps, "route");
                        const sublocality = getAddressComponent(comps, "sublocality_level_1");
                        const addr = [streetNum, route, sublocality].filter(Boolean).join(", ");
                        if (addr) target.building.val(addr);
                    }
                });
            };

            const loadGoogleMapsApi = (apiKey) => {
                if (window.google && window.google.maps) return $.Deferred().resolve().promise();
                if (googleMapsLoadPromise) return googleMapsLoadPromise;
                const deferred = $.Deferred();
                googleMapsLoadPromise = deferred.promise();
                window.__initMapPickerCallback = () => deferred.resolve();
                const script = document.createElement("script");
                script.src =
                    `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(apiKey)}&libraries=marker,places&v=weekly&loading=async&callback=__initMapPickerCallback`;
                script.async = true;
                script.defer = true;
                script.onerror = () => deferred.reject();
                document.head.appendChild(script);
                return googleMapsLoadPromise;
            };

            const initMap = () => {
                if (mapInstance) return;
                const center = parsePoint();
                mapInstance = new google.maps.Map(mapCanvas, {
                    center,
                    zoom: 14,
                    mapId: "DEMO_MAP_ID",
                    mapTypeControl: false,
                    streetViewControl: false,
                    fullscreenControl: false
                });
                geocoder = new google.maps.Geocoder();
                mapInstance.controls[google.maps.ControlPosition.TOP_LEFT].push(pacCard);

                if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
                    markerUsesAdvanced = true;
                    marker = new google.maps.marker.AdvancedMarkerElement({
                        position: center,
                        map: mapInstance,
                        gmpDraggable: true
                    });
                } else {
                    markerUsesAdvanced = false;
                    marker = new google.maps.Marker({
                        position: center,
                        map: mapInstance,
                        draggable: true
                    });
                }

                mapInstance.addListener("click", (e) => setPickedLocation(e.latLng));
                marker.addListener("dragend", (e) => setPickedLocation(e.latLng || marker.position));

                if (google.maps.places && google.maps.places.Autocomplete) {
                    placeAutocomplete = new google.maps.places.Autocomplete($mapSearchInput[0], {
                        fields: ["geometry", "formatted_address", "name"],
                        strictBounds: false
                    });
                    placeAutocomplete.bindTo("bounds", mapInstance);
                    placeAutocomplete.addListener("place_changed", () => {
                        const place = placeAutocomplete.getPlace();
                        if (!place?.geometry?.location) return;
                        mapInstance.panTo(place.geometry.location);
                        mapInstance.setZoom(15);
                        setPickedLocation(place.geometry.location);
                    });
                }
            };

            $mapModalEl.on("shown.bs.modal", () => {
                if (!mapApiKey) {
                    (typeof toastr !== 'undefined') ? toastr.error("API Key missing"): alert(
                        "API Key missing");
                    $mapModalEl.modal("hide");
                    return;
                }
                loadGoogleMapsApi(mapApiKey).done(() => {
                    initMap();
                    const center = parsePoint();
                    if (markerUsesAdvanced) marker.position = center;
                    else marker.setPosition(center);
                    mapInstance.setCenter(center);
                    window.pickedLatLng = center;
                    $confirmBtn.prop("disabled", false);
                    google.maps.event.trigger(mapInstance, "resize");
                });
            });

            $confirmBtn.on("click", () => {
                if (!window.pickedLatLng) return;
                const target = getTargetFields();
                target.lat.val(Number(window.pickedLatLng.lat).toFixed(6)).attr('readonly', 'readonly');
                target.lng.val(Number(window.pickedLatLng.lng).toFixed(6)).attr('readonly', 'readonly');
                reverseGeocode();
                $mapModalEl.modal("hide");
            });

            // ── Pincode Lookup (Unified) ──────────────────────────────────────────
            $(document).on('input', '.pincode-lookup', function() {
                const $input = $(this);
                const $item = $input.closest('.address-item');
                const isMain = ($input.attr('name') === 'pincode');
                const pincode = $input.val().replace(/\D/g, '').slice(0, 6);
                $input.val(pincode);

                if (pincode.length !== 6) {
                    if (isMain) {
                        $('input[name="city"], input[name="state"], input[name="country"]').val('');
                    } else {
                        $item.find('.city-field, .state-field, .country-field').val('');
                    }
                    return;
                }

                $.get('{{ route('backend.master.lookup-pincode') }}', {
                        pincode
                    })
                    .done(function(res) {
                        if (isMain) {
                            $('input[name="city"]').val(res?.data?.city || '');
                            $('input[name="state"]').val(res?.data?.state || '');
                            $('input[name="country"]').val(res?.data?.country || 'India');
                            // Note: Tamil city/state/country lookup would require a Tamil version of the lookup API
                            // For now, we only sync the English values.
                        } else {
                            $item.find('.city-field').val(res?.data?.city || '');
                            $item.find('.state-field').val(res?.data?.state || '');
                            $item.find('.country-field').val(res?.data?.country || 'India');
                        }
                    });
            });

            // ── Language Switching Logic ─────────────────────────────────────────
            $(document).on('click', '.product-lang .dropdown-menu-custom li', function() {
                const lang = $(this).data('lang');
                const text = $(this).text();
                console.log(lang, text);

                // Update dropdown button text
                $('.langu-drpdwn').html(
                    `${text} <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>`);

                // Update active class
                $('.product-lang .dropdown-menu-custom li').removeClass('active');
                $(this).addClass('active');

                const $loader = $('#loading-image');
                $loader.removeClass('d-none').show();

                setTimeout(() => {
                    if (lang === 'ta') {
                        $('.lang-en').hide();
                        $('.lang-ta').show();
                    } else {
                        $('.lang-ta').hide();
                        $('.lang-en').show();
                    }
                    $loader.hide().addClass('d-none');
                }, 500); // 500ms delay for smooth transition feedback
            });

            // ── Repeater Logic ───────────────────────────────────────────────────
            let addressIndex = {{ count($addresses) > 0 ? count($addresses) : 1 }};
            $('#add-more-address').on('click', function() {
                const newIndex = addressIndex++;
                const html = `
                    <div class="address-item border-bottom mb-4 pb-3" data-index="${newIndex}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="mb-0">Address #${newIndex + 1}</h5>
                            <div class="d-flex align-items-center gap-3">
                                <div class="d-flex align-items-center gap-2">
                                    <input type="hidden" name="addresses[${newIndex}][is_default]" value="0">
                                    <input type="checkbox" class="form-check-input is-default-checkbox"
                                        id="is_default_${newIndex}"
                                        name="addresses[${newIndex}][is_default]"
                                        value="1">
                                    <label class="form-check-label fw-semibold text-success mb-0"
                                        for="is_default_${newIndex}"
                                        style="cursor:pointer; font-size:13px;">
                                        <i class="ri-map-pin-2-fill me-1"></i>Set as Default
                                    </label>
                                </div>
                                <button type="button" class="btn btn-danger btn-sm remove-address">Remove</button>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-8">
                                <div class="lang-field lang-en">
                                    <label class="form-label">Address Name</label>
                                    <input type="text" class="form-control" name="addresses[${newIndex}][address_name]" placeholder="Enter Address Name" />
                                </div>
                                <div class="lang-field lang-ta" style="${$('.product-lang li.active').data('lang') === 'ta' ? '' : 'display:none'}">
                                    <label class="form-label">Address Name (Tamil)</label>
                                    <input type="text" class="form-control" name="addresses[${newIndex}][address_name_tamil]" placeholder="முகவரி பெயர்" />
                                </div>
                                <input type="hidden" name="addresses[${newIndex}][address_type]" value="shipping" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Pincode <span class="required">*</span></label>
                                <input type="text" class="form-control pincode-lookup" name="addresses[${newIndex}][pincode]" placeholder="Enter Pincode" maxlength="6" inputmode="numeric" />
                            </div>
                            <div class="col-md-4">
                                <div class="lang-field lang-en">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control city-field" name="addresses[${newIndex}][city]" placeholder="Auto Fetch" />
                                </div>
                                <div class="lang-field lang-ta" style="${$('.product-lang li.active').data('lang') === 'ta' ? '' : 'display:none'}">
                                    <label class="form-label">City (Tamil)</label>
                                    <input type="text" class="form-control city-field" name="addresses[${newIndex}][city_tamil]" placeholder="நகரம்" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="lang-field lang-en">
                                    <label class="form-label">State</label>
                                    <input type="text" class="form-control state-field" name="addresses[${newIndex}][state]" placeholder="Auto Fetch" />
                                </div>
                                <div class="lang-field lang-ta" style="${$('.product-lang li.active').data('lang') === 'ta' ? '' : 'display:none'}">
                                    <label class="form-label">State (Tamil)</label>
                                    <input type="text" class="form-control state-field" name="addresses[${newIndex}][state_tamil]" placeholder="மாநிலம்" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="lang-field lang-en">
                                    <label class="form-label">Country</label>
                                    <input type="text" class="form-control country-field" name="addresses[${newIndex}][country]" value="India" />
                                </div>
                                <div class="lang-field lang-ta" style="${$('.product-lang li.active').data('lang') === 'ta' ? '' : 'display:none'}">
                                    <label class="form-label">Country (Tamil)</label>
                                    <input type="text" class="form-control country-field" name="addresses[${newIndex}][country_tamil]" value="இந்தியா" />
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="lang-field lang-en">
                                    <label class="form-label">Building / Street <span class="required">*</span></label>
                                    <input type="text" class="form-control building-address-field" name="addresses[${newIndex}][building_address]" placeholder="Enter Building No" />
                                </div>
                                <div class="lang-field lang-ta" style="${$('.product-lang li.active').data('lang') === 'ta' ? '' : 'display:none'}">
                                    <label class="form-label">Building / Street (Tamil) <span class="required">*</span></label>
                                    <input type="text" class="form-control building-address-field" name="addresses[${newIndex}][building_address_tamil]" placeholder="கட்டிடம் / தெரு" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex flex-column">
                                    <label class="form-label">Google Map</label>
                                    <button type="button" class="map-btn fw-semibold open-map-picker">
                                        Select Location on Map
                                        <img src="{{ asset('assets/template/images/map-light.png') }}" class="map-icon">
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Longitude</label>
                                <input type="text" class="form-control longitude-field" name="addresses[${newIndex}][longitude]" readonly />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Latitude</label>
                                <input type="text" class="form-control latitude-field" name="addresses[${newIndex}][latitude]" readonly />
                            </div>
                        </div>
                    </div>`;
                $('#address-repeater-container').append(html);
                applyRepeaterRules();
            });

            $(document).on('click', '.remove-address', function() {
                $(this).closest('.address-item').remove();
            });

            $(document).on('click', '#openMapPickerBtn', function() {
                window.mapPickerContext = 'main';
                $mapModalEl.modal('show');
            });

            $(document).on('click', '.open-map-picker', function() {
                window.mapPickerContext = $(this).closest('.address-item');
                $mapModalEl.modal('show');
            });

            // ── Same Address Logic ─────────────────────────────────────────────
            function syncFirstAddress() {
                if (!$('#sameAddress').is(':checked')) return;
                const first = $('#address-repeater-container .address-item').first();
                if (!first.length) return;

                first.find('.pincode-lookup').val($('input[name="pincode"]').val()).trigger('input');
                first.find('.city-field').val($('input[name="city"]').val());
                first.find('.state-field').val($('input[name="state"]').val());
                first.find('.country-field').val($('input[name="country"]').val());
                first.find('.building-address-field').val($('input[name="building_address"]').val());
                // Sync Tamil fields too
                first.find('input[name*="[city_tamil]"]').val($('input[name="city_tamil"]').val());
                first.find('input[name*="[state_tamil]"]').val($('input[name="state_tamil"]').val());
                first.find('input[name*="[country_tamil]"]').val($('input[name="country_tamil"]').val());
                first.find('input[name*="[building_address_tamil]"]').val($('input[name="building_address_tamil"]')
                    .val());

                first.find('.latitude-field').val($('#latitudeInput').val());
                first.find('.longitude-field').val($('#longitudeInput').val());
            }

            $(document).on('change', '#sameAddress', syncFirstAddress);
            $(document).on('input',
                'input[name="pincode"], input[name="city"], input[name="state"], input[name="country"], input[name="building_address"], #latitudeInput, #longitudeInput, input[name="city_tamil"], input[name="state_tamil"], input[name="country_tamil"], input[name="building_address_tamil"]',
                function() {
                    if ($('#sameAddress').is(':checked')) syncFirstAddress();
                });

            // ── Same WhatsApp Logic ─────────────────────────────────────────────
            function syncWhatsApp() {
                if ($('#sameWhatsapp').is(':checked')) {
                    const phone = $('input[name="phone_number"]').val();
                    $('#whatsappNumber').val(phone).attr('readonly', 'readonly');
                } else {
                    $('#whatsappNumber').removeAttr('readonly');
                }
            }
            $(document).on('change', '#sameWhatsapp', syncWhatsApp);
            $(document).on('input', 'input[name="phone_number"]', function() {
                if ($('#sameWhatsapp').is(':checked')) syncWhatsApp();
            });
            // Initial sync on page load if checked
            syncWhatsApp();
        });
    </script>

    <script>
        document.querySelectorAll(".drop-zone").forEach(zone => {
            const input = zone.querySelector(".drop-zone__input");
            if (!input) return;

            input.addEventListener("change", () => {
                if (!input.files.length) return;
                handleFile(zone, input.files[0]);
            });

            zone.addEventListener("dragover", e => {
                e.preventDefault();
                zone.classList.add("drop-zone--over");
            });

            zone.addEventListener("dragleave", () =>
                zone.classList.remove("drop-zone--over")
            );

            zone.addEventListener("drop", e => {
                e.preventDefault();
                zone.classList.remove("drop-zone--over");

                const file = e.dataTransfer.files?.[0];
                if (!file || !file.type.startsWith("image/")) return;

                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                input.files = dataTransfer.files;
                handleFile(zone, file);
            });
        });

        function handleFile(zone, file) {
            if (!file.type.startsWith("image/")) return;

            zone.querySelector(".drop-zone__prompt")?.remove();
            zone.querySelector(".drop-zone__content")?.remove();

            let thumb = zone.querySelector(".drop-zone__thumb");
            if (!thumb) {
                thumb = document.createElement("div");
                thumb.className = "drop-zone__thumb";
                zone.appendChild(thumb);
            }
            thumb.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
        }

        // ── Image Preview for General Settings ─────────────────────────────────────
        $(document).on('change', '.file-input', function() {
            const input = this;
            const $wrapper = $(input).closest('.upload-wrapper');
            const fileName = input.files && input.files[0] ? input.files[0].name : '';

            $wrapper.find('.upload-display').val(fileName || 'No File Chosen');

            if (input.files && input.files[0] && input.files[0].type.startsWith("image/")) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = $wrapper.find('.image-preview');
                    if (!preview.length) {
                        preview = $(
                            '<div class="image-preview mt-2" style="width:100px;height:60px;background-size:contain;background-repeat:no-repeat;background-position:center;"></div>'
                        );
                        $wrapper.append(preview);
                    }
                    preview.css('background-image', 'url(' + e.target.result + ')');
                }
                reader.readAsDataURL(input.files[0]);
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            $.validator.addMethod("pan", function(value, element) {
                return this.optional(element) || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(value.toUpperCase());
            }, "Please enter a valid PAN number (e.g., ABCDE1234F)");

            $.validator.addMethod("gst", function(value, element) {
                return this.optional(element) ||
                    /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(value.toUpperCase());
            }, "Please enter a valid GST number");

            $.validator.addMethod("phone", function(value, element) {
                return this.optional(element) || /^[6-9]\d{9}$/.test(value);
            }, "Please enter a valid 10-digit phone number");

            $.validator.addMethod("pincode", function(value, element) {
                return this.optional(element) || /^\d{6}$/.test(value);
            }, "Please enter a valid 6-digit pincode");

            $("#generalSettingsForm").validate({
                rules: {
                    company_name: {
                        required: false
                    },
                    pan_number: {
                        required: false,
                        pan: true
                    },
                    gst_number: {
                        required: false,
                        gst: true
                    },
                    phone_number: {
                        required: false,
                        phone: true
                    },
                    landline_number: {
                        required: false,
                        minlength: 6
                    },
                    alternate_phone_number: {
                        required: false,
                        phone: true
                    },
                    whatsapp_number: {
                        required: false,
                        phone: true
                    },
                    company_email: {
                        required: false,
                        email: true
                    },
                    pincode: {
                        required: false,
                        pincode: true
                    },
                    city: {
                        required: false
                    },
                    state: {
                        required: false
                    },
                    country: {
                        required: false
                    },
                    invoice_prefix: {
                        required: false
                    },
                    mail_from_address: {
                        required: false,
                        email: true
                    },
                    tax_rate: {
                        required: false,
                        number: true
                    },
                    shipping_cost: {
                        required: false,
                        number: true
                    },
                    razorpay_key: {
                        required: function() {
                            return $('#razorpay-enable').is(':checked');
                        }
                    },
                    razorpay_secret: {
                        required: function() {
                            return $('#razorpay-enable').is(':checked');
                        }
                    },
                    captcha_site_key: {
                        required: function() {
                            return $('#captcha-enable').is(':checked');
                        }
                    },
                    captcha_secret_key: {
                        required: function() {
                            return $('#captcha-enable').is(':checked');
                        }
                    }
                },
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    if (element.parent('.input-with-prefix').length || element.parent('.input-group')
                        .length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).addClass('form-group').removeClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).removeClass('form-group').addClass('has-error');
                }
            });

            function applyRepeaterRules() {
                $('.pincode-lookup').each(function() {
                    $(this).rules('add', {
                        required: false,
                        pincode: true
                    });
                });
                $('.building-address-field').each(function() {
                    $(this).rules('add', {
                        required: false
                    });
                });
            }

        });
    </script>
    <script>
        $(document).on('click', '#sendTestEmailBtn', function() {
            const email = $('#test_receiver_email').val();
            const message = $('#test_email_message').val();
            const btn = $(this);

            if (!email) {
                alert('Please enter a receiver email address.');
                return;
            }

            btn.prop('disabled', true).text('Sending...');

            $.ajax({
                url: "{{ route('backend.setting-management.send-test-email') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    email: email,
                    message: message
                },
                success: function(response) {
                    btn.prop('disabled', false).text('Send Email');
                    if (response.status) {
                        $('.testEmailPopup').modal('hide');
                        alert(response.message);
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false).text('Send Email');
                    const error = xhr.responseJSON ? xhr.responseJSON.message : 'Something went wrong';
                    alert('Error: ' + error);
                }
            });
        });
    </script>
@endsection