@extends('admin.layout')

@section('content')
<div class="flex items-center justify-between mb-12 text-gray-900 uppercase tracking-tighter">
    <h1 class="text-4xl font-black">Site <span class="text-[#CC2128]">Settings</span></h1>
</div>

<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <!-- Sidebar Tabs -->
        <div class="lg:col-span-3 space-y-2" id="settings-tabs">
            <button type="button" onclick="showTab('general')" class="tab-btn w-full text-left px-6 py-4 font-black uppercase tracking-widest text-[10px] border-l-4 transition-all bg-gray-900 text-white border-[#CC2128]" data-tab="general">General & Branding</button>
            <button type="button" onclick="showTab('contact')" class="tab-btn w-full text-left px-6 py-4 font-black uppercase tracking-widest text-[10px] border-l-4 transition-all bg-white text-gray-400 border-transparent hover:bg-gray-50" data-tab="contact">Contact Information</button>
            <button type="button" onclick="showTab('social')" class="tab-btn w-full text-left px-6 py-4 font-black uppercase tracking-widest text-[10px] border-l-4 transition-all bg-white text-gray-400 border-transparent hover:bg-gray-50" data-tab="social">Social Media Links</button>
            <button type="button" onclick="showTab('extra')" class="tab-btn w-full text-left px-6 py-4 font-black uppercase tracking-widest text-[10px] border-l-4 transition-all bg-white text-gray-400 border-transparent hover:bg-gray-50" data-tab="extra">Footer & Global Content</button>
            <button type="button" onclick="showTab('seo')" class="tab-btn w-full text-left px-6 py-4 font-black uppercase tracking-widest text-[10px] border-l-4 transition-all bg-white text-gray-400 border-transparent hover:bg-gray-50" data-tab="seo">SEO & Metadata</button>
        </div>

        <!-- Tab Contents -->
        <div class="lg:col-span-9 bg-white shadow-3xl p-10 border border-gray-100 min-h-[600px]">
            
            <!-- General Tab -->
            <div id="general-content" class="tab-content space-y-10 animate-fade-in">
                <div class="flex items-center space-x-4 mb-8">
                    <div class="w-1.5 h-8 bg-[#CC2128]"></div>
                    <h3 class="text-xl font-black uppercase tracking-tight">General Branding</h3>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Site Name</label>
                        <input type="text" name="site_name" value="{{ old('site_name', $setting->site_name) }}" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div></div>

                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Site Logo</label>
                        <div class="flex items-center space-x-6">
                            @if($setting->logo)
                                <div class="w-24 h-24 bg-gray-900 flex items-center justify-center p-2 border border-gray-100">
                                    <img src="{{ asset('storage/' . $setting->logo) }}" class="max-w-full max-h-full object-contain">
                                </div>
                            @endif
                            <input type="file" name="logo" class="text-xs font-bold text-gray-400 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-[10px] file:font-black file:uppercase file:tracking-widest file:bg-gray-900 file:text-white hover:file:bg-[#CC2128] cursor-pointer">
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Favicon</label>
                        <div class="flex items-center space-x-6">
                            @if($setting->favicon)
                                <div class="w-12 h-12 bg-white flex items-center justify-center p-2 border border-gray-100">
                                    <img src="{{ asset('storage/' . $setting->favicon) }}" class="max-w-full max-h-full object-contain">
                                </div>
                            @endif
                            <input type="file" name="favicon" class="text-xs font-bold text-gray-400 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-[10px] file:font-black file:uppercase file:tracking-widest file:bg-gray-900 file:text-white hover:file:bg-[#CC2128] cursor-pointer">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Tab -->
            <div id="contact-content" class="tab-content hidden space-y-10 animate-fade-in">
                <div class="flex items-center space-x-4 mb-8">
                    <div class="w-1.5 h-8 bg-[#CC2128]"></div>
                    <h3 class="text-xl font-black uppercase tracking-tight">Contact Information</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Primary Email</label>
                        <input type="email" name="email" value="{{ old('email', $setting->email) }}" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Working Hours</label>
                        <input type="text" name="working_hours" value="{{ old('working_hours', $setting->working_hours) }}" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Primary Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $setting->phone) }}" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Secondary Phone</label>
                        <input type="text" name="phone_secondary" value="{{ old('phone_secondary', $setting->phone_secondary) }}" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4 md:col-span-2">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Primary Office Address</label>
                        <textarea name="address" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('address', $setting->address) }}</textarea>
                    </div>
                    <div class="space-y-4 md:col-span-2">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Secondary Office Address (Optional)</label>
                        <textarea name="address_secondary" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('address_secondary', $setting->address_secondary) }}</textarea>
                    </div>
                    <div class="space-y-4 md:col-span-2 border-t border-gray-100 pt-8">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-500 italic decoration-[#CC2128] underline">Google Map Iframe / URL</label>
                        <textarea name="map_iframe" rows="3" placeholder="Paste <iframe ...> here" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-mono text-[10px] resize-none">{{ old('map_iframe', $setting->map_iframe) }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Social Tab -->
            <div id="social-content" class="tab-content hidden space-y-10 animate-fade-in">
                <div class="flex items-center space-x-4 mb-8">
                    <div class="w-1.5 h-8 bg-[#CC2128]"></div>
                    <h3 class="text-xl font-black uppercase tracking-tight">Social Networks</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 flex items-center space-x-2">
                            <i class="fa-brands fa-facebook-f text-[#CC2128]"></i>
                            <span>Facebook URL</span>
                        </label>
                        <input type="url" name="facebook" value="{{ old('facebook', $setting->facebook) }}" placeholder="https://facebook.com/..." class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 flex items-center space-x-2">
                            <i class="fa-brands fa-x-twitter text-[#CC2128]"></i>
                            <span>Twitter / X URL</span>
                        </label>
                        <input type="url" name="twitter" value="{{ old('twitter', $setting->twitter) }}" placeholder="https://x.com/..." class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 flex items-center space-x-2">
                            <i class="fa-brands fa-linkedin-in text-[#CC2128]"></i>
                            <span>LinkedIn URL</span>
                        </label>
                        <input type="url" name="linkedin" value="{{ old('linkedin', $setting->linkedin) }}" placeholder="https://linkedin.com/in/..." class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 flex items-center space-x-2">
                            <i class="fa-brands fa-instagram text-[#CC2128]"></i>
                            <span>Instagram URL</span>
                        </label>
                        <input type="url" name="instagram" value="{{ old('instagram', $setting->instagram) }}" placeholder="https://instagram.com/..." class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 flex items-center space-x-2">
                            <i class="fa-brands fa-youtube text-[#CC2128]"></i>
                            <span>YouTube URL</span>
                        </label>
                        <input type="url" name="youtube" value="{{ old('youtube', $setting->youtube) }}" placeholder="https://youtube.com/..." class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm">
                    </div>
                </div>
            </div>

            <!-- SEO Tab -->
            <div id="seo-content" class="tab-content hidden space-y-10 animate-fade-in">
...
            </div>

            <!-- Global Content Tab -->
            <div id="extra-content" class="tab-content hidden space-y-10 animate-fade-in">
                <div class="flex items-center space-x-4 mb-8">
                    <div class="w-1.5 h-8 bg-[#CC2128]"></div>
                    <h3 class="text-xl font-black uppercase tracking-tight">Footer & Global Content</h3>
                </div>

                <div class="space-y-8">
                    <div class="space-y-4">
                        <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 underline decoration-[#CC2128]">Footer About Text (Translatable)</label>
                        <div class="grid grid-cols-1 gap-6">
                            <div class="space-y-2">
                                <span class="text-[8px] font-black uppercase text-gray-400 tracking-tighter italic">English</span>
                                <textarea name="footer_about_en" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('footer_about_en', $setting->footer_about_en) }}</textarea>
                            </div>
                            <div class="space-y-2">
                                <span class="text-[8px] font-black uppercase text-gray-400 tracking-tighter italic">Bangla</span>
                                <textarea name="footer_about_bn" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('footer_about_bn', $setting->footer_about_bn) }}</textarea>
                            </div>
                            <div class="space-y-2">
                                <span class="text-[8px] font-black uppercase text-gray-400 tracking-tighter italic">Chinese</span>
                                <textarea name="footer_about_cn" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('footer_about_cn', $setting->footer_about_cn) }}</textarea>
                            </div>
                            <div class="space-y-2">
                                <span class="text-[8px] font-black uppercase text-gray-400 tracking-tighter italic">Korean</span>
                                <textarea name="footer_about_korean" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('footer_about_korean', $setting->footer_about_korean) }}</textarea>
                            </div>
                            <div class="space-y-2">
                                <span class="text-[8px] font-black uppercase text-gray-400 tracking-tighter italic">Japanese</span>
                                <textarea name="footer_about_japan" rows="3" class="w-full px-6 py-4 bg-gray-50 border-0 focus:ring-2 focus:ring-[#CC2128] font-bold text-sm resize-none">{{ old('footer_about_japan', $setting->footer_about_japan) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="mt-16 pt-10 border-t border-gray-100">
                <button type="submit" class="px-16 py-5 bg-[#CC2128] text-white font-black uppercase tracking-[0.2em] text-[10px] hover:scale-105 transition-transform shadow-2xl shadow-red-500/20 active:scale-95">
                    Update Site Settings »
                </button>
            </div>
        </div>
    </div>
</form>

<script>
function showTab(tabId) {
    // Hide all contents
    document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
    // Show selected
    document.getElementById(tabId + '-content').classList.remove('hidden');
    
    // Update tab buttons
    document.querySelectorAll('.tab-btn').forEach(b => {
        if(b.getAttribute('data-tab') === tabId) {
            b.classList.remove('bg-white', 'text-gray-400', 'border-transparent');
            b.classList.add('bg-gray-900', 'text-white', 'border-[#CC2128]');
        } else {
            b.classList.add('bg-white', 'text-gray-400', 'border-transparent');
            b.classList.remove('bg-gray-900', 'text-white', 'border-[#CC2128]');
        }
    });
}
</script>

<style>
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>
@endsection