<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>Admin Dashboard - {{ config('app.name') }}</title>
    <style>
        /* iOS Style Toggle */
        .toggle-checkbox:checked { right: 0; border-color: #2563eb; }
        .toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
        input, select, .card-container { border-radius: 0.375rem !important; }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-900">

    <nav class="bg-white border-b border-gray-200 sticky top-0 z-50 px-6 py-3 flex justify-between items-center">
        <div class="flex items-center gap-2">
            <div>
                @if(File::exists(public_path('favicon.ico')))
                    <img width="30px" src="{{ asset('favicon.ico') }}" alt="Logo" class="brand-logo">
                @else
                     <img width="30px" src="{{ config('app.favicon') }}" alt="Logo" class="brand-logo">
                @endif
            </div>
            <h1 class="font-bold text-lg tracking-tight uppercase">{{ config('app.name') }}</h1>
        </div>
        <div class="flex items-center gap-4">
            <a href="/" target="_blank" class="text-xs font-semibold text-gray-500 hover:text-blue-600 transition-all"><i class="fas fa-external-link-alt mr-1"></i> VIEW</a>
            <a href="{{ route('admin.logout') }}" class="text-xs font-bold px-4 py-2 bg-red-50 text-red-600 rounded-md hover:bg-red-600 hover:text-white transition-all uppercase">Logout</a>
        </div>
    </nav>

    <main class="max-w-[1400px] mx-auto p-6">
        @if(session('success'))
            <div class="mb-6 p-3 bg-emerald-50 border border-emerald-100 text-emerald-700 rounded-md flex items-center shadow-sm text-sm">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-12 gap-6">
                
                <div class="col-span-12 lg:col-span-7 space-y-6">
                    
                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden card-container">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 flex items-center justify-between">
                            <h2 class="text-sm font-bold uppercase text-gray-600"><i class="fas fa-cog mr-2 text-blue-600"></i> System Configuration</h2>
                            <div class="flex items-center gap-2">
                                <span class="text-[12px] font-bold text-gray-400">DEBUG</span>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="APP_DEBUG" value="true" class="sr-only peer" {{ env('APP_DEBUG') == 'true' ? 'checked' : '' }}>
                                    <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                            </div>
                        </div>
                        <div class="p-5 grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">App Name</label>
                                <input type="text" name="APP_NAME" value="{{ env('APP_NAME') }}" class="w-full px-3 py-2 bg-white border border-gray-200 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">App URL</label>
                                <input type="text" name="APP_URL" value="{{ env('APP_URL') }}" class="w-full px-3 py-2 bg-white border border-gray-200 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Environment</label>
                                <select name="APP_ENV" class="w-full px-3 py-2 bg-white border border-gray-200 text-sm outline-none">
                                    <option value="production" {{ env('APP_ENV') == 'production' ? 'selected' : '' }}>Production (Stable)</option>
                                    <option value="local" {{ env('APP_ENV') == 'local' ? 'selected' : '' }}>Local (Debug)</option>
                                </select>
                            </div>
                        </div>
                    </section>

                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden card-container">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                            <h2 class="text-sm font-bold uppercase text-gray-600"><i class="fas fa-palette mr-2 text-blue-600"></i> Branding Assets</h2>
                        </div>
                        <div class="p-5 grid grid-cols-2 gap-6">
                            @foreach(['LOGO_BIG_URL' => 'Logo Big', 'LOGO_SM_URL' => 'Logo Small', 'FAVICON_URL' => 'Favicon', 'OG_IMAGE' => 'OG Image'] as $key => $label)
                            <div class="col-span-2 md:col-span-1 flex gap-3 p-3 border border-gray-100 bg-gray-50 rounded-md">
                                <div class="w-12 h-12 bg-white rounded border border-gray-200 flex-shrink-0 flex items-center justify-center p-1 shadow-sm">
                                    <img src="{{ env($key) }}" class="max-w-full max-h-full object-contain">
                                </div>
                                <div class="flex-grow">
                                    <label class="block text-[12px] font-bold text-gray-400 uppercase mb-1">{{ $label }} URL</label>
                                    <input type="text" name="{{ $key }}" value="{{ env($key) }}" class="w-full px-2 py-1 bg-white border border-gray-200 text-[12px] mb-1 outline-none">
                                    <input type="file" name="{{ $key }}_FILE" class="block w-full text-[12px] text-gray-400 file:mr-2 file:py-0.5 file:px-2 file:rounded file:border-0 file:text-[12px] file:bg-blue-50 file:text-blue-700 cursor-pointer">
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </section>

                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden rounded-lg">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 flex items-center justify-between">
                            <h2 class="text-sm font-bold uppercase text-gray-600"><i class="fas fa-mobile-alt mr-2 text-blue-600"></i> PWA Configuration</h2>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="SHOW_BANNER" value="true" class="sr-only peer" {{ env('SHOW_BANNER') == 'true' ? 'checked' : '' }}>
                                <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                        </div>
                        <div class="p-5 space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">App Name</label>
                                    <input type="text" name="PWA_NAME" value="{{ env('PWA_NAME') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Short Name</label>
                                    <input type="text" name="PWA_SHORT_NAME" value="{{ env('PWA_SHORT_NAME') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                                <div class="col-span-2">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Description</label>
                                    <input type="text" name="PWA_DESCRIPTION" value="{{ env('PWA_DESCRIPTION') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Theme Color</label>
                                    <input type="text" name="PWA_THEME_COLOR" value="{{ env('PWA_THEME_COLOR', '#000000') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Background Color</label>
                                    <input type="text" name="PWA_BG_COLOR" value="{{ env('PWA_BG_COLOR', '#000000') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                                <div class="col-span-2">
                                    <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Install Text</label>
                                    <input type="text" name="TEXT_BANNER" value="{{ env('TEXT_BANNER') }}" class="w-full px-3 py-2 border border-gray-200 text-sm outline-none rounded">
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden card-container">
                        <div class="bg-white p-6 rounded-lg shadow-sm mb-6 border border-gray-100">
                            <div class="flex items-center mb-4">
                                <div class="p-2 bg-blue-50 rounded-md mr-3">
                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                                    </svg>
                                </div>
                                <h3 class="text-sm font-bold text-gray-800 uppercase">Advertising & Footer Script</h3>
                            </div>
                        
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-500 uppercase mb-2">
                                        Footer Script (Adsterra, Analytics, etc.)
                                    </label>
                                    <textarea 
                                        name="footer_script" 
                                        rows="8" 
                                        class="w-full px-4 py-3 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 font-mono"
                                        placeholder="Paste your <script>...</script> here..."
                                    >{{ env('FOOTER_SCRIPT') ? base64_decode(env('FOOTER_SCRIPT')) : '' }}</textarea>
                                    
                                    <div class="mt-3 flex items-start p-3 bg-blue-50 rounded-md border border-blue-100">
                                        <svg class="w-4 h-4 text-blue-500 mt-0.5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                                        </svg>
                                        <p class="text-[12px] text-blue-700 leading-relaxed">
                                            You can insert popup ads from adsterra or other ads script in here. Insert code from <strong>&lt;script&gt;</strong> to <strong>&lt;/script&gt;</strong>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                <div class="col-span-12 lg:col-span-5 space-y-6">
                    
                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden rounded-lg">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                            <h2 class="text-sm font-bold uppercase text-gray-600">
                                <i class="fas fa-ad mr-2 text-blue-600"></i> Ads Management
                            </h2>
                        </div>
                    
                        <div class="p-5 space-y-6">
                            <div class="p-4 border border-gray-100 bg-gray-50 rounded-md">
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-[12px] font-bold uppercase text-gray-500">Iklan Banner</span>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="ADS_HOME" value="true" class="sr-only peer" {{ env('ADS_HOME') == 'true' ? 'checked' : '' }}>
                                        <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                    
                                <div class="space-y-4">
                                    <div class="space-y-2">
                                        <label class="text-[10px] font-bold text-gray-400 uppercase">Slot 1: Full Banner (800x70)</label>
                                        <input type="text" name="ADS_HOME_IMAGE_URL_FULL" value="{{ env('ADS_HOME_IMAGE_URL_FULL') }}" placeholder="Banner Image URL" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                        <input type="text" name="ADS_HOME_TARGET_URL_FULL" value="{{ env('ADS_HOME_TARGET_URL_FULL') }}" placeholder="Target Link (#)" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                    </div>
                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="space-y-2">
                                            <label class="text-[10px] font-bold text-gray-400 uppercase">Slot 2: Half L (600x90)</label>
                                            <input type="text" name="ADS_HOME_IMAGE_URL_HALF1" value="{{ env('ADS_HOME_IMAGE_URL_HALF1') }}" placeholder="Image URL" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                            <input type="text" name="ADS_HOME_TARGET_URL_HALF1" value="{{ env('ADS_HOME_TARGET_URL_HALF1') }}" placeholder="Target Link" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="text-[10px] font-bold text-gray-400 uppercase">Slot 3: Half R (600x90)</label>
                                            <input type="text" name="ADS_HOME_IMAGE_URL_HALF2" value="{{ env('ADS_HOME_IMAGE_URL_HALF2') }}" placeholder="Image URL" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                            <input type="text" name="ADS_HOME_TARGET_URL_HALF1" value="{{ env('ADS_HOME_TARGET_URL_HALF2') }}" placeholder="Target Link" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-4 border border-gray-100 bg-gray-50 rounded-md">
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-[12px] font-bold uppercase text-gray-500">Video Direct Link</span>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="VIDEO_ADS" value="true" class="sr-only peer" {{ env('VIDEO_ADS') == 'true' ? 'checked' : '' }}>
                                        <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                    
                                <div class="space-y-4">
                                    <div class="space-y-2">
                                        <label class="text-[10px] font-bold text-gray-400 uppercase">Direct Link</label>
                                        <input type="text" name="VIDEO_AD_LINK" value="{{ env('VIDEO_AD_LINK') }}" placeholder="URL Ads Directlink" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                        <label class="text-[10px] font-bold text-gray-400 uppercase">Cooldown Ads (Dalam Menit)</label>
                                        <input type="number" name="VIDEO_AD_COOLDOWN" value="{{ env('VIDEO_AD_COOLDOWN') }}" class="w-full px-3 py-2 bg-white border border-gray-200 text-xs outline-none focus:border-blue-500 rounded">
                                    </div>
                                </div>
                            </div>
                    
                            <div class="p-4 border border-gray-100 bg-gray-50 rounded-md">
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-[12px] font-bold uppercase text-gray-500">Floating Ads (Samping)</span>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="FLOATING_ADS" value="true" class="sr-only peer" {{ env('FLOATING_ADS') == 'true' ? 'checked' : '' }}>
                                        <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="space-y-2">
                                        <label class="text-[10px] font-bold text-gray-400 uppercase">Sisi Kiri (120x600)</label>
                                        <input type="text" name="FLOATING_IMAGE_URL_LEFT" value="{{ env('FLOATING_IMAGE_URL_LEFT') }}" placeholder="Image URL" class="w-full px-2 py-2 bg-white border border-gray-200 text-[12px] outline-none focus:border-blue-500 rounded">
                                        <input type="text" name="FLOATING_TARGET_LINK_LEFT" value="{{ env('FLOATING_TARGET_LINK_LEFT') }}" placeholder="Target Link" class="w-full px-2 py-2 bg-white border border-gray-200 text-[12px] outline-none focus:border-blue-500 rounded">
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-[10px] font-bold text-gray-400 uppercase">Sisi Kanan (120x600)</label>
                                        <input type="text" name="FLOATING_IMAGE_URL_RIGHT" value="{{ env('FLOATING_IMAGE_URL_RIGHT') }}" placeholder="Image URL" class="w-full px-2 py-2 bg-white border border-gray-200 text-[12px] outline-none focus:border-blue-500 rounded">
                                        <input type="text" name="FLOATING_TARGET_LINK_RIGHT" value="{{ env('FLOATING_TARGET_LINK_RIGHT') }}" placeholder="Target Link" class="w-full px-2 py-2 bg-white border border-gray-200 text-[12px] outline-none focus:border-blue-500 rounded">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden card-container">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                            <h2 class="text-sm font-bold uppercase text-gray-600"><i class="fas fa-bolt mr-2 text-blue-600"></i> Additional</h2>
                        </div>
                        <div class="p-5 space-y-4">
                            <div>
                                <label class="block text-[12px] font-bold text-gray-500 uppercase mb-1">Custom Player URL</label>
                                <input type="text" name="CUSTOM_PLAYER" value="{{ env('CUSTOM_PLAYER') }}" class="w-full px-3 py-2 bg-white border border-gray-200 text-sm outline-none">
                            </div>
                            <div class="grid grid-cols-1 gap-3">
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-md border border-gray-100">
                                    <span class="text-[12px] font-bold text-gray-500 uppercase">Minify HTML</span>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="MINIFY_HTML" value="true" class="sr-only peer" {{ env('MINIFY_HTML') == 'true' ? 'checked' : '' }}>
                                        <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="bg-white border border-gray-200 shadow-sm overflow-hidden card-container">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                            <h2 class="text-sm font-bold uppercase text-gray-600"><i class="fas fa-search mr-2 text-blue-600"></i> SEO & Tracking</h2>
                        </div>
                        <div class="p-5 grid grid-cols-1 gap-3">
                            <input type="text" name="GOOGLE_WEBMASTER" value="{{ env('GOOGLE_WEBMASTER') }}" placeholder="Google Webmaster" class="w-full px-3 py-2 bg-white border border-gray-300 text-[12px] outline-none">
                            <input type="text" name="BING_WEBMASTER" value="{{ env('BING_WEBMASTER') }}" placeholder="Bing Webmaster" class="w-full px-3 py-2 bg-white border border-gray-300 text-[12px] outline-none">
                            <input type="text" name="YANDEX_WEBMASTER" value="{{ env('YANDEX_WEBMASTER') }}" placeholder="Yandex Webmaster" class="w-full px-3 py-2 bg-white border border-gray-300 text-[12px] outline-none">
                            <input type="text" name="GOOGLE_ANALYTICS" value="{{ env('GOOGLE_ANALYTICS') }}" placeholder="GA4 ID" class="w-full px-3 py-2 bg-white border border-gray-300 text-[12px] outline-none">
                            <input type="text" name="HISTATS_SID" value="{{ env('HISTATS_SID') }}" placeholder="Histats SID" class="w-full px-3 py-2 bg-white border border-gray-300 text-[12px] outline-none">
                        </div>
                    </section>

                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-md shadow-lg shadow-blue-200 transition-all flex items-center justify-center uppercase tracking-widest text-sm">
                        <i class="fas fa-save mr-2"></i> Simpan Konfigurasi
                    </button>
                </div>
            </div>
        </form>
    </main>
</body>
</html>
