@extends('admin.layouts.app')

@section('title', 'Cài Đặt')
@section('page-title', 'Cài Đặt Hệ Thống')

@section('content')
<div class="max-w-6xl mx-auto px-4 md:px-6">
    <!-- Instructions -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">Hướng Dẫn Sử Dụng</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <ul class="list-disc pl-5 space-y-1">
                        <li><strong>Logo:</strong> Upload logo chính, logo trắng và logo đen cho website</li>
                        <li><strong>Favicon:</strong> Upload favicon các kích thước khác nhau để hiển thị trên browser</li>
                        <li><strong>Kích thước khuyến nghị:</strong> Logo 200x60px, Favicon 32x32px</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="border-b border-gray-200">
            <!-- Desktop Tabs -->
            <nav class="hidden md:flex -mb-px space-x-8 px-6" aria-label="Tabs">
                <button type="button" onclick="switchTab('general')" id="tab-general" class="tab-button active py-4 px-1 border-b-2 border-indigo-500 font-medium text-sm text-indigo-600">
                    <i class="fas fa-cog mr-2"></i>Cài Đặt Chung
                </button>
                <button type="button" onclick="switchTab('logo')" id="tab-logo" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-image mr-2"></i>Logo & Favicon
                </button>
                <button type="button" onclick="switchTab('seo')" id="tab-seo" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-search mr-2"></i>SEO
                </button>
                <button type="button" onclick="switchTab('email')" id="tab-email" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-envelope mr-2"></i>Email
                </button>
                <button type="button" onclick="switchTab('social')" id="tab-social" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-share-alt mr-2"></i>Mạng Xã Hội
                </button>
                <button type="button" onclick="switchTab('company')" id="tab-company" class="tab-button py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                    <i class="fas fa-building mr-2"></i>Thông Tin Công Ty
                </button>
            </nav>
            
            <!-- Mobile Dropdown -->
            <div class="md:hidden px-4 py-3">
                <select id="mobile-tab-selector" onchange="switchTabMobile(this.value)" class="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    <option value="general">⚙️ Cài Đặt Chung</option>
                    <option value="logo">🖼️ Logo & Favicon</option>
                    <option value="seo">🔍 SEO</option>
                    <option value="email">📧 Email</option>
                    <option value="social">🌐 Mạng Xã Hội</option>
                    <option value="company">🏢 Thông Tin Công Ty</option>
                </select>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
        @csrf
        
        <!-- General Settings Tab -->
        <div id="tab-content-general" class="tab-content">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt Chung</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <div>
                        <label for="site_name" class="block text-sm font-medium text-gray-700">Tên Website</label>
                        <input type="text" name="site_name" id="site_name" value="{{ old('site_name', $settings['site_name'] ?? 'Apero Mobile Apps') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="site_email" class="block text-sm font-medium text-gray-700">Email Website</label>
                        <input type="email" name="site_email" id="site_email" value="{{ old('site_email', $settings['site_email'] ?? 'admin@apero.vn') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="site_url" class="block text-sm font-medium text-gray-700">URL Website</label>
                        <input type="url" name="site_url" id="site_url" value="{{ old('site_url', $settings['site_url'] ?? url('/')) }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="timezone" class="block text-sm font-medium text-gray-700">Múi Giờ</label>
                        <select name="timezone" id="timezone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                            <option value="Asia/Ho_Chi_Minh" {{ old('timezone', $settings['timezone'] ?? 'Asia/Ho_Chi_Minh') == 'Asia/Ho_Chi_Minh' ? 'selected' : '' }}>Asia/Ho_Chi_Minh</option>
                            <option value="UTC" {{ old('timezone', $settings['timezone'] ?? '') == 'UTC' ? 'selected' : '' }}>UTC</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo Settings Tab -->
        <div id="tab-content-logo" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt Logo</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <div>
                        <label for="site_logo" class="block text-sm font-medium text-gray-700">Logo Chính</label>
                        <input type="file" name="site_logo" id="site_logo" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_logo']) && $settings['site_logo'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_logo']) }}" alt="Current Logo" class="h-16 w-auto">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_logo_white" class="block text-sm font-medium text-gray-700">Logo Trắng</label>
                        <input type="file" name="site_logo_white" id="site_logo_white" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_logo_white']) && $settings['site_logo_white'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_logo_white']) }}" alt="Current White Logo" class="h-16 w-auto">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_logo_black" class="block text-sm font-medium text-gray-700">Logo Đen</label>
                        <input type="file" name="site_logo_black" id="site_logo_black" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_logo_black']) && $settings['site_logo_black'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_logo_black']) }}" alt="Current Black Logo" class="h-16 w-auto">
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Favicon Settings -->
            <div class="bg-white rounded-lg shadow p-4 md:p-6 mt-4 md:mt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt Favicon</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <div>
                        <label for="site_favicon" class="block text-sm font-medium text-gray-700">Favicon Chính (32x32px)</label>
                        <input type="file" name="site_favicon" id="site_favicon" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_favicon']) && $settings['site_favicon'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_favicon']) }}" alt="Current Favicon" class="h-8 w-8">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_favicon_16" class="block text-sm font-medium text-gray-700">Favicon 16x16px</label>
                        <input type="file" name="site_favicon_16" id="site_favicon_16" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_favicon_16']) && $settings['site_favicon_16'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_favicon_16']) }}" alt="Current Favicon 16" class="h-4 w-4">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_favicon_32" class="block text-sm font-medium text-gray-700">Favicon 32x32px</label>
                        <input type="file" name="site_favicon_32" id="site_favicon_32" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_favicon_32']) && $settings['site_favicon_32'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_favicon_32']) }}" alt="Current Favicon 32" class="h-8 w-8">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_favicon_192" class="block text-sm font-medium text-gray-700">Favicon 192x192px</label>
                        <input type="file" name="site_favicon_192" id="site_favicon_192" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_favicon_192']) && $settings['site_favicon_192'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_favicon_192']) }}" alt="Current Favicon 192" class="h-12 w-12">
                            </div>
                        @endif
                    </div>
                    
                    <div>
                        <label for="site_favicon_512" class="block text-sm font-medium text-gray-700">Favicon 512x512px</label>
                        <input type="file" name="site_favicon_512" id="site_favicon_512" accept="image/*"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        @if(isset($settings['site_favicon_512']) && $settings['site_favicon_512'])
                            <div class="mt-2">
                                <img src="{{ asset('storage/' . $settings['site_favicon_512']) }}" alt="Current Favicon 512" class="h-16 w-16">
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- SEO Settings Tab -->
        <div id="tab-content-seo" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt SEO</h3>
                
                <div class="space-y-4">
                    <div>
                        <label for="meta_title" class="block text-sm font-medium text-gray-700">Tiêu Đề Meta Mặc Định</label>
                        <input type="text" name="meta_title" id="meta_title" value="{{ old('meta_title', $settings['meta_title'] ?? 'Apero Mobile Apps - Mobile Apps for Everyone') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="meta_description" class="block text-sm font-medium text-gray-700">Mô Tả Meta Mặc Định</label>
                        <textarea name="meta_description" id="meta_description" rows="3"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">{{ old('meta_description', $settings['meta_description'] ?? 'Discover amazing mobile apps developed by Apero Technologies Group. Download our apps and enjoy the best mobile experience.') }}</textarea>
                    </div>
                    
                    <div>
                        <label for="meta_keywords" class="block text-sm font-medium text-gray-700">Từ Khóa Meta Mặc Định</label>
                        <input type="text" name="meta_keywords" id="meta_keywords" value="{{ old('meta_keywords', $settings['meta_keywords'] ?? 'mobile apps, apero, technology, apps, mobile') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                </div>
            </div>
        </div>

        <!-- Email Settings Tab -->
        <div id="tab-content-email" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt Email</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <div>
                        <label for="mail_driver" class="block text-sm font-medium text-gray-700">Driver Email</label>
                        <select name="mail_driver" id="mail_driver" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                            <option value="smtp" {{ old('mail_driver', $settings['mail_driver'] ?? 'smtp') == 'smtp' ? 'selected' : '' }}>SMTP</option>
                            <option value="mailgun" {{ old('mail_driver', $settings['mail_driver'] ?? '') == 'mailgun' ? 'selected' : '' }}>Mailgun</option>
                            <option value="ses" {{ old('mail_driver', $settings['mail_driver'] ?? '') == 'ses' ? 'selected' : '' }}>Amazon SES</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="mail_host" class="block text-sm font-medium text-gray-700">Host Email</label>
                        <input type="text" name="mail_host" id="mail_host" value="{{ old('mail_host', $settings['mail_host'] ?? 'smtp.gmail.com') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="mail_port" class="block text-sm font-medium text-gray-700">Cổng Email</label>
                        <input type="number" name="mail_port" id="mail_port" value="{{ old('mail_port', $settings['mail_port'] ?? 587) }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="mail_username" class="block text-sm font-medium text-gray-700">Tên Đăng Nhập Email</label>
                        <input type="text" name="mail_username" id="mail_username" value="{{ old('mail_username', $settings['mail_username'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="mail_password" class="block text-sm font-medium text-gray-700">Mật Khẩu Email</label>
                        <input type="password" name="mail_password" id="mail_password" value="{{ old('mail_password', $settings['mail_password'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="mail_encryption" class="block text-sm font-medium text-gray-700">Mã Hóa Email</label>
                        <select name="mail_encryption" id="mail_encryption" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                            <option value="tls" {{ old('mail_encryption', $settings['mail_encryption'] ?? 'tls') == 'tls' ? 'selected' : '' }}>TLS</option>
                            <option value="ssl" {{ old('mail_encryption', $settings['mail_encryption'] ?? 'tls') == 'ssl' ? 'selected' : '' }}>SSL</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="mail_from_name" class="block text-sm font-medium text-gray-700">Tên Người Gửi</label>
                        <input type="text" name="mail_from_name" id="mail_from_name" value="{{ old('mail_from_name', $settings['mail_from_name'] ?? 'LVT Global') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                </div>

                <!-- Test Email Section -->
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <h4 class="text-md font-medium text-gray-900 mb-4">📧 Test Email Configuration</h4>
                    
                    <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 mb-4">
                        <h5 class="text-sm font-medium text-yellow-800 mb-2">⚠️ Lưu ý cấu hình email:</h5>
                        <ul class="text-sm text-yellow-700 space-y-1">
                            <li>• <strong>Mail Host:</strong> Phải là host SMTP (ví dụ: smtp.gmail.com, smtp.outlook.com)</li>
                            <li>• <strong>Tên Đăng Nhập Email:</strong> Phải là email address đầy đủ (ví dụ: your-email@gmail.com)</li>
                            <li>• <strong>Mail Password:</strong> Sử dụng App Password cho Gmail (không phải mật khẩu thường)</li>
                        </ul>
                    </div>
                    
                    <div id="test-email-form" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="test_email" class="block text-sm font-medium text-gray-700">Email Nhận Test</label>
                                <input type="email" name="test_email" id="test_email" value="{{ old('test_email') }}" 
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"
                                    placeholder="test@example.com">
                            </div>
                            
                            <div>
                                <label for="test_subject" class="block text-sm font-medium text-gray-700">Tiêu Đề Email</label>
                                <input type="text" name="test_subject" id="test_subject" value="{{ old('test_subject', 'Test Email Configuration') }}" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                            </div>
                        </div>
                        
                        <div>
                            <label for="test_message" class="block text-sm font-medium text-gray-700">Nội Dung Test</label>
                            <textarea name="test_message" id="test_message" rows="3" required
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"
                                placeholder="Nhập nội dung test email...">{{ old('test_message', 'Đây là email test để kiểm tra cấu hình email của hệ thống.') }}</textarea>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <p>📌 <strong>Lưu ý:</strong> Đảm bảo đã cấu hình đầy đủ thông tin email ở trên trước khi test.</p>
                            </div>
                            <button type="button" id="send-test-email-btn"
                                class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                <i class="fas fa-paper-plane mr-2"></i>
                                <span id="btn-text">Gửi Test Email</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Social Media Settings Tab -->
        <div id="tab-content-social" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cài Đặt Mạng Xã Hội</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    <div>
                        <label for="facebook_url" class="block text-sm font-medium text-gray-700">Link Facebook</label>
                        <input type="url" name="facebook_url" id="facebook_url" value="{{ old('facebook_url', $settings['facebook_url'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="twitter_url" class="block text-sm font-medium text-gray-700">Link Twitter</label>
                        <input type="url" name="twitter_url" id="twitter_url" value="{{ old('twitter_url', $settings['twitter_url'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="linkedin_url" class="block text-sm font-medium text-gray-700">Link LinkedIn</label>
                        <input type="url" name="linkedin_url" id="linkedin_url" value="{{ old('linkedin_url', $settings['linkedin_url'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                    
                    <div>
                        <label for="youtube_url" class="block text-sm font-medium text-gray-700">Link YouTube</label>
                        <input type="url" name="youtube_url" id="youtube_url" value="{{ old('youtube_url', $settings['youtube_url'] ?? '') }}"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    </div>
                </div>
            </div>
        </div>

        <!-- Company Information Settings Tab -->
        <div id="tab-content-company" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow p-4 md:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Thông Tin Công Ty</h3>
                
                <div class="space-y-4">
                    <div>
                        <label for="company_address" class="block text-sm font-medium text-gray-700">Địa Chỉ Công Ty</label>
                        <textarea name="company_address" id="company_address" rows="3"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">{{ old('company_address', $settings['company_address'] ?? '') }}</textarea>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                        <div>
                            <label for="company_tax" class="block text-sm font-medium text-gray-700">Mã Số Thuế</label>
                            <input type="text" name="company_tax" id="company_tax" value="{{ old('company_tax', $settings['company_tax'] ?? '') }}"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        </div>
                        
                        <div>
                            <label for="company_phone" class="block text-sm font-medium text-gray-700">Số Điện Thoại</label>
                            <input type="text" name="company_phone" id="company_phone" value="{{ old('company_phone', $settings['company_phone'] ?? '') }}"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end mt-6">
            <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-save mr-2"></i> Lưu
            </button>
        </div>
    </form>
</div>

<script>
function switchTab(tabName) {
    // Hide all tab contents
    const tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(content => {
        content.classList.add('hidden');
    });
    
    // Remove active class from all tab buttons
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach(button => {
        button.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
        button.classList.add('border-transparent', 'text-gray-500');
    });
    
    // Show selected tab content
    const selectedContent = document.getElementById('tab-content-' + tabName);
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
    }
    
    // Add active class to selected tab button
    const selectedButton = document.getElementById('tab-' + tabName);
    if (selectedButton) {
        selectedButton.classList.add('active', 'border-indigo-500', 'text-indigo-600');
        selectedButton.classList.remove('border-transparent', 'text-gray-500');
    }
    
    // Update mobile selector
    const mobileSelector = document.getElementById('mobile-tab-selector');
    if (mobileSelector) {
        mobileSelector.value = tabName;
    }
}

function switchTabMobile(tabName) {
    switchTab(tabName);
}

// Test Email Function
function sendTestEmail() {
    const btn = document.getElementById('send-test-email-btn');
    const btnText = document.getElementById('btn-text');
    const testEmail = document.getElementById('test_email').value;
    const testSubject = document.getElementById('test_subject').value;
    const testMessage = document.getElementById('test_message').value;
    
    // Validation
    if (!testEmail || !testSubject || !testMessage) {
        alert('Vui lòng điền đầy đủ thông tin test email!');
        return;
    }
    
    // Show loading state
    btn.disabled = true;
    btnText.textContent = 'Đang gửi...';
    btn.classList.add('opacity-50', 'cursor-not-allowed');
    
    // Create form data
    const formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    formData.append('test_email', testEmail);
    formData.append('test_subject', testSubject);
    formData.append('test_message', testMessage);
    
    // Send AJAX request
    fetch('{{ route("admin.settings.test-email") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ Email test đã được gửi thành công đến ' + testEmail);
        } else {
            alert('❌ Lỗi: ' + (data.message || 'Có lỗi xảy ra khi gửi email'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('❌ Lỗi kết nối: ' + error.message);
    })
    .finally(() => {
        // Reset button state
        btn.disabled = false;
        btnText.textContent = 'Gửi Test Email';
        btn.classList.remove('opacity-50', 'cursor-not-allowed');
    });
}

// Initialize first tab as active
document.addEventListener('DOMContentLoaded', function() {
    switchTab('general');
    
    // Add event listener for test email button
    const testEmailBtn = document.getElementById('send-test-email-btn');
    if (testEmailBtn) {
        testEmailBtn.addEventListener('click', sendTestEmail);
    }
});
</script>
@endsection