@extends('template.layouts.template-base')
@section('title', 'Edit 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;
        }
    </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">Edit
                                    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>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid">
            <form 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 <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="company_name"
                                                value="{{ Arr::get($settings, 'company_name') }}"
                                                placeholder="Enter Company Name" />
                                        </div>
                                        <div class="lang-field lang-ta" style="display:none;">
                                            <label class="form-label">Company Name (Tamil) <span
                                                    class="required">*</span></label>
                                            <input type="text" class="form-control" name="company_name_tamil"
                                                value="{{ Arr::get($settings, 'company_name_tamil') }}"
                                                placeholder="நிறுவனத்தின் பெயர்" />
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Pan Number <span class="required">*</span></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 <span class="required">*</span></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">
                                        <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 (Arr::has($settings, 'company_logo') && $settings['company_logo'])
                                            <div class="mt-2">
                                                <img src="{{ asset($settings['company_logo']) }}" alt="Company Logo"
                                                    style="max-height:60px; border-radius:4px;">
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Phone Number <span class="required">*</span></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>
                                    <div class="col-lg-4">
                                        <label>Landline <span class="required">*</span></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 <span class="required">*</span></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 <span class="required">*</span></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 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-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">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-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::get($settings, '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="city_tamil"
                                                value="{{ Arr::get($settings, '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="state"
                                                value="{{ Arr::get($settings, '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="state_tamil"
                                                value="{{ Arr::get($settings, '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="country"
                                                value="{{ Arr::get($settings, 'country') }}" 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::get($settings, 'country_tamil') }}"
                                                placeholder="இந்தியா" />
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <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="building_address"
                                                value="{{ Arr::get($settings, '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="building_address_tamil"
                                                value="{{ Arr::get($settings, '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" 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>
                            </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' => 'billing'])];
                                    @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>
                                                @if ($index > 0)
                                                    <button type="button"
                                                        class="btn btn-danger btn-sm remove-address">Remove</button>
                                                @endif
                                            </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 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 class="content-card rounded-12 px-3">
                                <h4 class="text-black mt-2">Invoice Data</h4>
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="form-label mt-0">Signature Image <span class="required">*</span>
                                            <span class="small-txt">(180px*56px)</span></label>
                                        <div class="upload-wrapper signature-upload">

                                            <!-- Hidden File Input -->
                                            <input type="file" id="signatureImageInput" class="file-input"
                                                name="signature_image" accept="image/png,image/jpeg" hidden>

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

                                            <!-- Upload Button -->
                                            <button type="button" class="btn upload-btn">
                                                Upload
                                            </button>
                                        </div>
                                        @if (Arr::has($settings, 'signature_image') && $settings['signature_image'])
                                            <div class="mt-2">
                                                <img src="{{ asset($settings['signature_image']) }}" alt="Signature"
                                                    style="max-height:56px; border-radius:4px;">
                                            </div>
                                        @endif
                                    </div>


                                    <div class="col-md-4">
                                        @php
                                            $savedBank = Arr::has($settings, 'invoice_bank_id')
                                                ? (int) $settings['invoice_bank_id']
                                                : null;
                                            $defaultBank = $banks->firstWhere('is_default', true);
                                            $selectedBankId = $savedBank ?? optional($defaultBank)->id;
                                        @endphp
                                        <label>Bank Account <span class="required">*</span></label>
                                        <select class="form-select w-100" name="invoice_bank_id">
                                            @forelse($banks as $bank)
                                                <option value="{{ $bank->id }}"
                                                    {{ $selectedBankId == $bank->id ? 'selected' : '' }}>
                                                    {{ $bank->bank_name }}
                                                    @if ($bank->branch_name)
                                                        – {{ $bank->branch_name }}
                                                    @endif
                                                    @if ($bank->is_default)
                                                        (Default)
                                                    @endif
                                                </option>
                                            @empty
                                                <option value="">No active banks found</option>
                                            @endforelse
                                        </select>
                                    </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"
                                            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::get($settings, 'terms_of_instructions') }}</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::get($settings, 'terms_of_instructions_tamil') }}</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::get($settings, 'delivery_notes') }}</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::get($settings, 'delivery_notes_tamil') }}</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"
                                                    id="razorpay-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"
                                                    id="razorpay-disable" />
                                                <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 "
                                                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"
                                            placeholder="Enter your Razorpay Secret Key" />
                                    </div>
                                </div>

                            </div>

                            <div class="action-buttons">
                                <button type="button" 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" placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Mail From Name</label>
                                        <input type="text" class="form-control" 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">
                                            <input type="file" class="file-input" hidden>

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

                                            <button type="button" class="btn upload-btn">Upload</button>
                                        </div> --}}

                                        <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 class="input-group d-flex">
                                                                                                                                      <input
                                                                                                                                        type="text"
                                                                                                                                        class="form-control upload-input"
                                                                                                                                        id="fileInput"
                                                                                                                                        placeholder="No File Chosen"

                                                                                                                                      />
                                                                                                                                      <button class="btn upload-btn">Upload</button>
                                                                                                                                    </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">
                                            <option selected>SMTP</option>
                                            <option selected>Mailgun</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mail Host</label>
                                        <input type="text" name="whatsapp" placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mail Port</label>
                                        <input type="text" name="email" placeholder="Enter Here" />
                                    </div>
                                </div>
                                <div class="row mb-0">
                                    <div class="col-lg-4">
                                        <label>Email Encryption</label>
                                        <select class="form-select">
                                            <option selected>Select</option>
                                            <option value="tls">TLS</option>
                                            <option value="ssl">SSL</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>SMTP Server Username</label>
                                        <input type="text" placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>SMTP Server Password</label>
                                        <input type="text" name="smtp-server-pswd" 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">
                                            <option selected>SMTP</option>
                                            <option selected>Mailgun</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mailgun Domain</label>
                                        <input type="text" name="mailgun-domain" placeholder="Enter Here" />
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Mailgun Secret</label>
                                        <input type="text" name="mailgun-secret" placeholder="Enter Here" />
                                    </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="button" 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"
                                                    id="captcha-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"
                                                    id="captcha-disable" />
                                                <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">
                                            <option selected>reCAPTCHA v2 - Checkbox</option>
                                            <option>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" 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" placeholder="Enter Here" />
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="button" 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"
                                                    id="tax-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"
                                                    id="tax-disable" />
                                                <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="taxType"
                                                    id="tax-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="taxType"
                                                    id="tax-exclusive" />
                                                <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" placeholder="Enter Here" />
                                    </div>
                                </div>
                            </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"
                                                    id="sms-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"
                                                    id="sms-disable" />
                                                <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" placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Nettyfish Client ID</label>
                                        <input type="text" class="form-control" placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Nettyfish Sender ID</label>
                                        <input type="text" class="form-control" placeholder="Enter Here" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">SMS Type</label>
                                        <select class="form-select">
                                            <option selected>Transactional</option>
                                            <option>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="button" 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"
                                                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" placeholder="Enter Here" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="button" class="btn btn-primary px-5 show-toast"
                                    data-toast-target="#shippingToast">Save</button>
                            </div>
                        </div>

                    </div>

            </form>
        </div>
    </section>
    <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>
    <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>
@endsection



@section('scripts')
    <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
    <script src="https://unpkg.com/@yaireo/tagify"></script>
    <script>
        const editorConfig = {
            height: 150,
            toolbar: [{
                    name: "styles",
                    items: ["Format"]
                },
                {
                    name: "basicstyles",
                    items: ["Bold", "Italic", "Underline"]
                },
                {
                    name: "paragraph",
                    items: ["JustifyLeft", "JustifyCenter", "JustifyRight"],
                },
                {
                    name: "insert",
                    items: ["NumberedList", "BulletedList"]
                },
            ],
        };

        CKEDITOR.replace("product-description", editorConfig);
        CKEDITOR.replace("product-benefits", editorConfig);
        CKEDITOR.replace("product-description-ta", editorConfig);
        CKEDITOR.replace("product-benefits-ta", editorConfig);

        $('#selectAllCategories').on('change', function() {
            $('.category-checkbox').prop('checked', $(this).is(':checked'));
        });

        $('.category-checkbox, #selectAllCategories').on('change', function() {
            let selected = [];

            $('.category-checkbox:checked').each(function() {
                selected.push($(this).closest('label').text().trim());
            });

            if (selected.length === 0) {
                $('#categoryDropdown').text('Select Category');
            } else if (selected.length > 2) {
                $('#categoryDropdown').text(selected.length + ' Categories Selected');
            } else {
                $('#categoryDropdown').text(selected.join(', '));
            }
        });

        $('#selectAllAnimals').on('change', function() {
            $('.animal-checkbox').prop('checked', $(this).is(':checked'));
        });

        $('.animal-checkbox, #selectAllAnimals').on('change', function() {
            let selected = [];

            $('.animal-checkbox:checked').each(function() {
                selected.push($(this).closest('label').text().trim());
            });

            if (selected.length === 0) {
                $('#animalDropdown').text('Select Animal Type');
            } else if (selected.length > 2) {
                $('#animalDropdown').text(selected.length + ' Animal Type Selected');
            } else {
                $('#animalDropdown').text(selected.join(', '));
            }
        });

        // Toggle collapsible section
        function toggleCollapse(button) {
            const chevron = button.querySelector(".chevron");
            chevron.classList.toggle("open");
        }

        document.addEventListener('DOMContentLoaded', function() {

            var input = document.querySelector('#product-tags');
            //console.log(input);

            var tagify = new Tagify(input, {
                delimiters: ",",
                maxTags: 10,
                dropdown: {
                    enabled: 1,
                    maxItems: 20,
                    closeOnSelect: false
                }
            });

            fetch('/tags/list')
                .then(res => res.json())
                .then(tags => {
                    tagify.settings.whitelist = tags;
                });

        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Open filter modal
        function openFilterModal() {
            document.getElementById("filterModalOverlay").classList.add("active");
        }

        // Close filter modal
        function closeFilterModal() {
            document
                .getElementById("filterModalOverlay")
                .classList.remove("active");
        }

        // Close modal when clicking on overlay
        function closeFilterOnOverlay(event) {
            if (event.target === document.getElementById("filterModalOverlay")) {
                closeFilterModal();
            }
        }

        // Switch tabs
        function switchTab(event, tabName) {
            const tabs = document.querySelectorAll(".tab");
            const contents = document.querySelectorAll(".tab-content");

            tabs.forEach((tab) => tab.classList.remove("active"));
            contents.forEach((content) => content.classList.remove("active"));

            event.target.classList.add("active");
            document.getElementById(tabName).classList.add("active");
        }

        // Initialize Flatpickr for date inputs
        flatpickr("#from-date", {
            dateFormat: "d M, Y",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("From Date selected:", dateStr);
            },
        });

        flatpickr("#to-date", {
            dateFormat: "d M, Y",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("To Date selected:", dateStr);
            },
        });

        // Clear all filters
        function clearFilters() {
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach((cb) => (cb.checked = false));

            const radios = document.querySelectorAll('input[type="radio"]');
            radios.forEach((radio) => (radio.checked = false));

            document.getElementById("from-date").value = "";
            document.getElementById("to-date").value = "";

            console.log("Filters cleared");
        }

        // Submit filters
        function submitFilters() {
            const filters = {
                stockStatus: Array.from(
                    document.querySelectorAll("#stock-status input:checked"),
                ).map((cb) => cb.id),
                productStatus: Array.from(
                    document.querySelectorAll("#product-status input:checked"),
                ).map((cb) => cb.id),
                weight: Array.from(
                    document.querySelectorAll("#weight input:checked"),
                ).map((cb) => cb.id),
                price: document.querySelector('input[name="price"]:checked')?.id || null,
                soldStatus: Array.from(
                    document.querySelectorAll("#sold-status input:checked"),
                ).map((cb) => cb.id),
                fromDate: document.getElementById("from-date").value,
                toDate: document.getElementById("to-date").value,
            };

            console.log("Filters submitted:", filters);
            closeFilterModal();
        }
    </script>
    <script>
        (() => {
            const btn = document.getElementById("categoryMsBtn");
            const menu = document.getElementById("categoryMsMenu");
            const selectedBox = document.getElementById("categoryMsSelected");
            const checkboxes = menu.querySelectorAll("input[type='checkbox']");

            // Toggle dropdown
            btn.addEventListener("click", (e) => {
                e.stopPropagation();
                menu.classList.toggle("show");
            });

            // Render selected items
            function renderCategorySelected() {
                selectedBox.innerHTML = "";

                const selected = [...checkboxes].filter(cb => cb.checked);

                if (selected.length === 0) {
                    selectedBox.innerHTML =
                        `<span class="category-ms-placeholder">Select Category</span>`;
                    return;
                }

                selected.forEach(cb => {
                    const tag = document.createElement("div");
                    tag.className = "category-ms-tag";
                    tag.innerHTML = `${cb.value} <span>&times;</span>`;

                    tag.querySelector("span").addEventListener("click", (e) => {
                        e.stopPropagation();
                        cb.checked = false;
                        renderCategorySelected();
                    });

                    selectedBox.appendChild(tag);
                });
            }

            // Checkbox change
            checkboxes.forEach(cb => {
                cb.addEventListener("change", renderCategorySelected);
            });

            // Close on outside click
            document.addEventListener("click", () => {
                menu.classList.remove("show");
            });
        })();
    </script>

    <script>
        (() => {
            const btn = document.getElementById("animalMsBtn");
            const menu = document.getElementById("animalMsMenu");
            const selectedBox = document.getElementById("animalMsSelected");
            const checkboxes = menu.querySelectorAll("input[type='checkbox']");

            // Toggle dropdown
            btn.addEventListener("click", (e) => {
                e.stopPropagation();
                menu.classList.toggle("show");
            });

            // Update selected tags
            function renderSelected() {
                selectedBox.innerHTML = "";

                const selected = [...checkboxes].filter(cb => cb.checked);

                if (selected.length === 0) {
                    selectedBox.innerHTML =
                        `<span class="animal-ms-placeholder">Select Animal</span>`;
                    return;
                }

                selected.forEach(cb => {
                    const tag = document.createElement("div");
                    tag.className = "animal-ms-tag";
                    tag.innerHTML = `${cb.value} <span>&times;</span>`;

                    tag.querySelector("span").addEventListener("click", (e) => {
                        e.stopPropagation();
                        cb.checked = false;
                        renderSelected();
                    });

                    selectedBox.appendChild(tag);
                });
            }

            // Checkbox change
            checkboxes.forEach(cb => {
                cb.addEventListener("change", renderSelected);
            });

            // Close on outside click
            document.addEventListener("click", () => {
                menu.classList.remove("show");
            });
        })();
    </script>

    <script>
        // Add active class toggle for custom tabs
        document.querySelectorAll(".custom-tab-btn").forEach((button) => {
            button.addEventListener("click", function() {
                document.querySelectorAll(".custom-tab-btn").forEach((btn) => btn.classList.remove(
                    "active"));
                this.classList.add("active");
            });
        });
    </script>
    <script>
        document.getElementById("toggleKey").addEventListener("click", function() {
            const input = document.getElementById("razorpayKey");
            const icon = this.querySelector("i");

            if (input.type === "password") {
                input.type = "text";
                icon.classList.remove("ri-eye-off-fill");
                icon.classList.add("ri-eye-fill");
            } else {
                input.type = "password";
                icon.classList.remove("ri-eye-fill");
                icon.classList.add("ri-eye-off-fill");
            }
        });
    </script>
    <script></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 lookup would require a Tamil version of the lookup API
                        } 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();

                // 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');

                // Toggle fields
                if (lang === 'ta') {
                    $('.lang-en').hide();
                    $('.lang-ta').show();
                } else {
                    $('.lang-ta').hide();
                    $('.lang-en').show();
                }
            });

            // ── 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>
                            <button type="button" class="btn btn-danger btn-sm remove-address">Remove</button>
                        </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);
            });

            $(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
                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)})`;
        }

        $(document).on('click', '.upload-wrapper .upload-btn[type="button"]', function() {
            $(this).closest('.upload-wrapper').find('.file-input').trigger('click');
        });

        $(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).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