@extends('layouts.admin')

@section('title', 'Store Settings & API Keys - Admin Control')

@section('content')
<div class="max-w-5xl mx-auto space-y-8">
    
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">System Settings & Integrations</h1>
            <p class="text-xs text-slate-500 font-medium">Manage shop identity, custom logo, Razorpay payment gateway & Brevo Email API</p>
        </div>
    </div>

    @if(session('success'))
        <div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-2xl text-emerald-800 text-xs font-bold flex items-center gap-2">
            <i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

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

        <!-- 1. Store Identity & Logo Upload -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-amber-50 text-amber-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-store"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">Store Identity & Branding</h2>
                    <p class="text-xs text-slate-500 font-medium">Update shop name, contact information, address, and uploaded logo</p>
                </div>
            </div>

            <!-- Logo Upload Row -->
            <div class="flex flex-col sm:flex-row items-center gap-6 p-4 bg-slate-50 rounded-2xl border border-slate-200/80">
                <div class="w-24 h-24 rounded-2xl border-2 border-dashed border-slate-300 bg-white flex items-center justify-center overflow-hidden shrink-0 shadow-sm relative group">
                    @if(!empty($settings['shop_logo'] ?? ''))
                        <img id="logoPreview" src="{{ $settings['shop_logo'] }}" class="w-full h-full object-contain p-2">
                    @else
                        <div id="logoPlaceholder" class="text-center p-2">
                            <i class="fa-solid fa-basket-shopping text-3xl text-orange-500"></i>
                            <span class="block text-[9px] text-slate-400 font-bold mt-1">Default Logo</span>
                        </div>
                        <img id="logoPreview" src="" class="w-full h-full object-contain p-2 hidden">
                    @endif
                </div>

                <div class="flex-1 space-y-2 text-center sm:text-left">
                    <label class="block text-xs font-extrabold text-slate-800">Upload Shop Logo (Image File)</label>
                    <p class="text-[11px] text-slate-500">Allowed formats: PNG, JPG, WEBP, SVG (Max 2MB). Uploaded logo will display across the header, footer, checkout, and invoices.</p>
                    <input type="file" name="shop_logo" id="logoInput" accept="image/*" onchange="previewImage(this)" class="block w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Shop Name *</label>
                    <input type="text" name="shop_name" value="{{ old('shop_name', $settings['shop_name'] ?? 'Orange Groceries') }}" required class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Contact Phone Number</label>
                    <input type="text" name="shop_phone" value="{{ old('shop_phone', $settings['shop_phone'] ?? '+91 9876543210') }}" placeholder="+91 9876543210" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Support Email</label>
                    <input type="email" name="shop_email" value="{{ old('shop_email', $settings['shop_email'] ?? 'support@orangegroceries.com') }}" placeholder="support@orangegroceries.com" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Store Address</label>
                    <input type="text" name="shop_address" value="{{ old('shop_address', $settings['shop_address'] ?? 'Plot 102, Jaydev Vihar, Bhubaneswar, Odisha - 751013') }}" placeholder="Store full address" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
            </div>
        </div>

        <!-- 2. Footer Tagline & Social Media Links -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-purple-50 text-purple-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-align-left"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">Footer Content & Social Links</h2>
                    <p class="text-xs text-slate-500 font-medium">Manage footer about tagline and social media page links</p>
                </div>
            </div>

            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Footer Tagline / About Text</label>
                    <textarea name="footer_about_text" rows="2" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-medium focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="Your trusted neighbourhood online grocery store...">{{ old('footer_about_text', $settings['footer_about_text'] ?? 'Your trusted neighbourhood online grocery store. Delivering farm-fresh vegetables, dairy, bakery, snacks, and daily essentials directly to your doorstep.') }}</textarea>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-xs font-extrabold text-slate-700 mb-1">WhatsApp Number / Link</label>
                        <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $settings['whatsapp_number'] ?? '') }}" placeholder="e.g. 918686401036 or https://wa.me/..." class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                    </div>
                    <div>
                        <label class="block text-xs font-extrabold text-slate-700 mb-1">Facebook URL</label>
                        <input type="text" name="facebook_url" value="{{ old('facebook_url', $settings['facebook_url'] ?? '#') }}" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                    </div>
                    <div>
                        <label class="block text-xs font-extrabold text-slate-700 mb-1">Instagram URL</label>
                        <input type="text" name="instagram_url" value="{{ old('instagram_url', $settings['instagram_url'] ?? '#') }}" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                    </div>
                    <div>
                        <label class="block text-xs font-extrabold text-slate-700 mb-1">Twitter / X URL</label>
                        <input type="text" name="twitter_url" value="{{ old('twitter_url', $settings['twitter_url'] ?? '#') }}" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs">
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Global SEO & Meta Optimization Configuration -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-magnifying-glass-chart"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">SEO & Dynamic Meta Configuration</h2>
                    <p class="text-xs text-slate-500 font-medium">Control default Meta Title, Meta Description, and Meta Keywords for Google & Social Media</p>
                </div>
            </div>

            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Default Meta Title</label>
                    <input type="text" name="meta_title" value="{{ old('meta_title', $settings['meta_title'] ?? 'Orange Groceries - Online Grocery Store & 30-Min Delivery') }}" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="Orange Groceries - Online Grocery Store & 30-Min Delivery">
                    <p class="text-[11px] text-slate-400 mt-1">Recommended length: 50–60 characters. Product and Category pages will dynamically prepend their names.</p>
                </div>

                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Default Meta Description</label>
                    <textarea name="meta_description" rows="3" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-medium focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="Order quality groceries, daily staples, snacks and essentials online from Orange Groceries. Enjoy lowest prices and fast 30-minute delivery.">{{ old('meta_description', $settings['meta_description'] ?? 'Order quality groceries, daily staples, snacks and essentials online from Orange Groceries. Enjoy lowest prices and fast 30-minute delivery.') }}</textarea>
                    <p class="text-[11px] text-slate-400 mt-1">Recommended length: 140–160 characters. Product and Category pages will generate dynamic descriptions automatically.</p>
                </div>

                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Default Meta Keywords</label>
                    <input type="text" name="meta_keywords" value="{{ old('meta_keywords', $settings['meta_keywords'] ?? 'online grocery, grocery shopping, daily essentials, staples, beverages, snacks, spices, fast delivery, Orange Groceries') }}" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-medium focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="e.g. online grocery, daily essentials, staples, fast delivery">
                    <p class="text-[11px] text-slate-400 mt-1">Comma-separated keywords for search engines.</p>
                </div>
            </div>
        </div>

        <!-- 4. Legal & Customer Support Pages (Privacy Policy, Terms & Conditions, Delivery Info) -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-teal-50 text-teal-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-file-contract"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">Privacy Policy, Terms & Conditions & Delivery Info</h2>
                    <p class="text-xs text-slate-500 font-medium">Manage content for Customer Support legal pages (HTML allowed)</p>
                </div>
            </div>

            <div class="space-y-6">
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Privacy Policy Page Content</label>
                    <textarea name="privacy_policy" rows="6" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="HTML content for Privacy Policy...">{{ old('privacy_policy', $settings['privacy_policy'] ?? '<h2>Privacy Policy</h2><p>Your privacy is important to us at Orange Groceries. We collect and manage user data only to provide fast grocery delivery and smooth service.</p>') }}</textarea>
                </div>

                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Terms & Conditions Page Content</label>
                    <textarea name="terms_conditions" rows="6" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="HTML content for Terms & Conditions...">{{ old('terms_conditions', $settings['terms_conditions'] ?? '<h2>Terms & Conditions</h2><p>Welcome to Orange Groceries. By using our website and services, you agree to comply with our terms of service and delivery guidelines.</p>') }}</textarea>
                </div>

                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Delivery Information Page Content</label>
                    <textarea name="delivery_info" rows="5" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono focus:ring-2 focus:ring-brand-500 focus:outline-none" placeholder="HTML content for Delivery Info...">{{ old('delivery_info', $settings['delivery_info'] ?? '<h2>Delivery Information</h2><p>We deliver fresh groceries, fruits, vegetables, and daily essentials within 30 minutes in serviceable pincodes.</p>') }}</textarea>
                </div>
            </div>
        </div>

        <!-- 4. Razorpay API Gateway Credentials -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-blue-50 text-blue-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-credit-card"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">Razorpay Payment Gateway API Keys</h2>
                    <p class="text-xs text-slate-500 font-medium">Configure Razorpay credentials for online UPI, Card & NetBanking payments</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Razorpay Key ID (rzp_test_... / rzp_live_...)</label>
                    <input type="text" name="razorpay_key" value="{{ old('razorpay_key', $settings['razorpay_key'] ?? '') }}" placeholder="rzp_test_xxxxxxxxxxxxxx" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Razorpay Key Secret</label>
                    <input type="password" name="razorpay_secret" value="{{ old('razorpay_secret', $settings['razorpay_secret'] ?? '') }}" placeholder="••••••••••••••••••••" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
            </div>
        </div>

        <!-- 5. Brevo Email API Credentials -->
        <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-600 font-bold flex items-center justify-center text-lg">
                    <i class="fa-solid fa-paper-plane"></i>
                </div>
                <div>
                    <h2 class="font-extrabold text-slate-900 text-lg">Brevo Transactional Email API</h2>
                    <p class="text-xs text-slate-500 font-medium">Automated emails for Registration, Delivery Partner welcome credentials, Order status, and Forgot Password OTPs</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                <div class="sm:col-span-3">
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Brevo API Key (xkeysib-...)</label>
                    <input type="text" name="brevo_api_key" value="{{ old('brevo_api_key', $settings['brevo_api_key'] ?? '') }}" placeholder="xkeysib-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-mono font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Sender Email</label>
                    <input type="email" name="brevo_sender_email" value="{{ old('brevo_sender_email', $settings['brevo_sender_email'] ?? '') }}" placeholder="noreply@orangegroceries.com" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-extrabold text-slate-700 mb-1">Sender Name</label>
                    <input type="text" name="brevo_sender_name" value="{{ old('brevo_sender_name', $settings['brevo_sender_name'] ?? '') }}" placeholder="Orange Groceries" class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs font-semibold focus:ring-2 focus:ring-brand-500 focus:outline-none">
                </div>
            </div>
        </div>

        <div class="flex justify-end pt-4">
            <button type="submit" class="px-8 py-4 bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-sm rounded-2xl shadow-lg shadow-brand-600/30 transition flex items-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i>
                <span>Save All Settings</span>
            </button>
        </div>

    </form>
</div>

<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('logoPreview');
            const placeholder = document.getElementById('logoPlaceholder');
            preview.src = e.target.result;
            preview.classList.remove('hidden');
            if (placeholder) placeholder.classList.add('hidden');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection