@extends('admin.layout.app')
@section('content')
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">General Settings</h3>
                <p class="text-sm text-gray-500 mt-1">Configure application settings and parameters</p>
            </div>
        </div>

        <form id="update_settings" method="post">
            <input type="hidden" name="id" value="{{ $settings->id ?? '' }}">
            <div class="space-y-6">
                
                <!-- Contact Numbers -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">Contact Numbers</h6>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                <input type="number" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="phone1" value="{{ $settings->phone1 ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                                <input type="email" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="email1" value="{{ $settings->email1 ?? '' }}">
                            </div>
                            
                            <!-- Logos -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Primary Logo</label>
                                <div class="flex items-center gap-4">
                                    <div class="w-20 h-20 border border-gray-200 rounded-lg flex items-center justify-center p-2 bg-gray-50">
                                        <img id="image_preview" src="" alt="logo" class="max-w-full max-h-full" />
                                    </div>
                                    <input type="file" name="image" class="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all cursor-pointer" onchange="document.querySelector('#image_preview').src=window.URL.createObjectURL(this.files[0])" />
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Sticky Logo</label>
                                <div class="flex items-center gap-4">
                                    <div class="w-20 h-20 border border-gray-200 rounded-lg flex items-center justify-center p-2 bg-gray-50">
                                        <img id="sticky_logo_preview" src="" alt="sticky logo" class="max-w-full max-h-full" />
                                    </div>
                                    <input type="file" name="sticky_logo" class="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all cursor-pointer" onchange="document.querySelector('#sticky_logo_preview').src=window.URL.createObjectURL(this.files[0])" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- App Links -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">App Download Links</h6>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Android Link</label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_link" value="{{ $settings->android_link ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">iOS Link</label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_link" value="{{ $settings->ios_link ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Desktop Link</label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="desktop_link" value="{{ $settings->desktop_link ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Mac OS Link</label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="mac_os_link" value="{{ $settings->mac_os_link ?? '' }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Office Addresses -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">Office Addresses</h6>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Office Address</label>
                                <textarea class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="address1" rows="4">{{ $settings->address1 ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ads / Admob / Revenue Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Admob ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Admob ID</h6>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Admob Id</label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="admob_id" value="{{ $settings->admob_id ?? '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- Reward ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4 flex justify-between">
                                <h6 class="text-lg font-semibold text-gray-800">Reward ID</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Reward Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_reward_id" value="{{ $settings->android_reward_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Apple Reward Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="apple_reward_id" value="{{ $settings->apple_reward_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Open Unit ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Open Unit ID</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Open Ad Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_open_unit_id" value="{{ $settings->android_open_unit_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ios Open Ad Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_open_unit_id" value="{{ $settings->ios_open_unit_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Native Unit ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Native Unit ID</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Native Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_native_unit_id" value="{{ $settings->android_native_unit_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ios Native Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_native_unit_id" value="{{ $settings->ios_native_unit_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Interstitial Unit ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Interstitial Unit ID</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Interstitial Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_interstitial_unit_id" value="{{ $settings->android_interstitial_unit_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ios Interstitial Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_interstitial_unit_id" value="{{ $settings->ios_interstitial_unit_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Banner Unit ID -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Banner Unit ID</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Banner Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_banner_unit_id" value="{{ $settings->android_banner_unit_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ios Banner Unit Id</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_banner_unit_id" value="{{ $settings->ios_banner_unit_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Revenuecat Subscription -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6">
                            <div class="border-b border-gray-100 pb-3 mb-4">
                                <h6 class="text-lg font-semibold text-gray-800">Revenuecat Subscription</h6>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Android Revenuecat Subscription</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="android_revenuecat_unit_id" value="{{ $settings->android_revenuecat_unit_id ?? '' }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ios Revenuecat Subscription</label>
                                    <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="ios_revenuecat_unit_id" value="{{ $settings->ios_revenuecat_unit_id ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Share -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">Share App Message</h6>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Share Message Content</label>
                                <textarea class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="share" rows="4">{{ $settings->share ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recharge -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="md:col-span-2 lg:col-span-4 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">Recharge Limits & Timers</h6>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Free Time (min)</label>
                                <input type="text" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="free_time" value="{{ $settings->free_time ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Recharge Time (min)</label>
                                <input type="text" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="recharge_time" value="{{ $settings->recharge_time ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Notification Time (min)</label>
                                <input type="text" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="notification_time" value="{{ $settings->notification_time ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Allowed Devices</label>
                                <input type="text" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="allow_device" value="{{ $settings->allow_device ?? '' }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media Links -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2 border-b border-gray-100 pb-3">
                                <h6 class="text-lg font-semibold text-gray-800">Social Media Links</h6>
                            </div>
                            
                            <!-- WhatsApp -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #46c254;"><i class="mdi mdi-whatsapp text-sm"></i></div> <span>WhatsApp</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="whatsapp" value="{{ $settings->whatsapp ?? '' }}">
                            </div>
                            
                            <!-- Facebook -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #0070f5;"><i class="mdi mdi-facebook text-sm"></i></div> <span>Facebook</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="facebook" value="{{ $settings->facebook ?? '' }}">
                            </div>
                            
                            <!-- Instagram -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #f60660;"><i class="mdi mdi-instagram text-sm"></i></div> <span>Instagram</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="instagram" value="{{ $settings->instagram ?? '' }}">
                            </div>
                            
                            <!-- Linkedin -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #038bc6;"><i class="mdi mdi-linkedin text-sm"></i></div> <span>Linkedin</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="linkedin" value="{{ $settings->linkedin ?? '' }}">
                            </div>
                            
                            <!-- Twitter -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #1c9cea;"><i class="mdi mdi-twitter text-sm"></i></div> <span>Twitter</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="twitter" value="{{ $settings->twitter ?? '' }}">
                            </div>
                            
                            <!-- Youtube -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #f70000;"><i class="mdi mdi-youtube text-sm"></i></div> <span>Youtube</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="youtube" value="{{ $settings->youtube ?? '' }}">
                            </div>
                            
                            <!-- Pinterest -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #b7081b;"><i class="mdi mdi-pinterest text-sm"></i></div> <span>Pinterest</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="pinterest" value="{{ $settings->pinterest ?? '' }}">
                            </div>
                            
                            <!-- Reddit -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #f73d17;"><i class="mdi mdi-reddit text-sm"></i></div> <span>Reddit</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="reddit" value="{{ $settings->reddit ?? '' }}">
                            </div>
                            
                            <!-- Vimeo -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #19b1e3;"><i class="mdi mdi-vimeo text-sm"></i></div> <span>Vimeo</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="vimeo" value="{{ $settings->vimeo ?? '' }}">
                            </div>
                            
                            <!-- Github -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #1a1e22;"><i class="mdi mdi-github text-sm"></i></div> <span>Github</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="github" value="{{ $settings->github ?? '' }}">
                            </div>
                            
                            <!-- Telegram -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #24a3e5;"><i class="mdi mdi-telegram text-sm"></i></div> <span>Telegram</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="telegram" value="{{ $settings->telegram ?? '' }}">
                            </div>
                            
                            <!-- Behance -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white" style="background-color: #567feb;"><i class="mdi mdi-behence text-sm"></i></div> <span>Behance</span>
                                </label>
                                <input type="text" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" name="behence" value="{{ $settings->behence ?? '' }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Actions -->
                <div class="flex items-center justify-end gap-3 pb-8">
                    <a href="{{ route('admin_setting') }}" class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 font-medium py-3 px-8 rounded-lg shadow-sm transition-colors focus:outline-none">
                        Cancel
                    </a>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Update Settings
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('customJs')
    <script type="text/javascript">
        $(document).on('submit', '#update_settings', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin_setting_add') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        location.reload();
                    }
                }
            });
        });
        $(document).ready(function() {
            var logo = "{{ $settings->logo ?? '' }}";
            if (logo) $("#image_preview").attr("src", "{{ asset('manual_storage/') }}/" + logo);
            
            var sticky = "{{ $settings->sticky_logo ?? '' }}";
            if (sticky) $("#sticky_logo_preview").attr("src", "{{ asset('manual_storage/') }}/" + sticky);
        })
    </script>
@endsection