@extends('layouts.web')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <!-- Header -->
            <div class="px-6 py-4 border-b border-gray-200" style="background: linear-gradient(135deg, {{ \App\Models\Setting::get('color_navbar_start', '#7c3aed') ?? '#7c3aed' }} 0%, {{ \App\Models\Setting::get('color_navbar_end', '#3b82f6') ?? '#3b82f6' }} 100%);">
                <h1 class="text-2xl font-bold text-white">
                    <i class="fas fa-cog mr-2"></i>Pengaturan Website
                </h1>
                <p class="text-white opacity-90 mt-1">Atur nama aplikasi, logo, favicon, dan warna standar</p>
            </div>

            <!-- Content -->
            <div class="p-6">
                <form action="{{ route('settings.update') }}" method="POST" id="colorSettingsForm" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <!-- Application Settings Section -->
                    <div class="mb-8 pb-6 border-b border-gray-300">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                            <i class="fas fa-cog mr-2"></i>Pengaturan Aplikasi
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- App Name -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Nama Aplikasi
                                </label>
                                <input 
                                    type="text" 
                                    name="app_name" 
                                    value="{{ $appName ?? 'ADZKIATEKNO' }}"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Masukkan nama aplikasi">
                            </div>
                            
                            <!-- Logo Upload -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Logo Aplikasi
                                </label>
                                <div class="flex items-center space-x-4">
                                    <div class="flex-shrink-0">
                                        @php
                                            $logoPath = $appLogo ?? 'assets/images/logo.png';
                                            $fallbackLogo = file_exists(public_path('assets/images/logo_1762164536.png'))
                                                ? asset('assets/images/logo_1762164536.png')
                                                : 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22%3E%3Crect fill=%22%23f0f0f0%22 width=%2280%22 height=%2280%22/%3E%3C/svg%3E';
                                            if (file_exists(public_path($logoPath))) {
                                                $logoUrl = asset($logoPath);
                                            } elseif (file_exists(public_path('assets/images/logo_1762164536.png'))) {
                                                $logoUrl = asset('assets/images/logo_1762164536.png');
                                            } else {
                                                // Hindari request 404: langsung gunakan placeholder
                                                $logoUrl = $fallbackLogo;
                                            }
                                            $defaultLogoUrl = $fallbackLogo;
                                        @endphp
                                        <img src="{{ $logoUrl }}" 
                                             alt="Logo" 
                                             id="logoPreview"
                                             class="h-16 w-16 object-cover rounded-lg border-2 border-gray-300"
                                             onerror="this.src='{{ $defaultLogoUrl }}';">
                                    </div>
                                    <div class="flex-1">
                                        <input 
                                            type="file" 
                                            name="logo" 
                                            accept="image/*"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            onchange="previewImage(this, 'logoPreview')">
                                        <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, GIF, SVG (Max: 2MB)</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Favicon Upload -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Favicon Aplikasi
                                </label>
                                <div class="flex items-center space-x-4">
                                    <div class="flex-shrink-0">
                                        @php
                                            $faviconPath = $appFavicon ?? 'assets/images/logo.png';
                                            $fallbackFavicon = file_exists(public_path('assets/images/logo_1762164536.png'))
                                                ? asset('assets/images/logo_1762164536.png')
                                                : 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22%3E%3Crect fill=%22%23f0f0f0%22 width=%2248%22 height=%2248%22/%3E%3C/svg%3E';
                                            if (file_exists(public_path($faviconPath))) {
                                                $faviconUrl = asset($faviconPath);
                                            } elseif (file_exists(public_path('assets/images/logo_1762164536.png'))) {
                                                $faviconUrl = asset('assets/images/logo_1762164536.png');
                                            } else {
                                                // Hindari request 404: langsung gunakan placeholder
                                                $faviconUrl = $fallbackFavicon;
                                            }
                                            $defaultFaviconUrl = $fallbackFavicon;
                                        @endphp
                                        <img src="{{ $faviconUrl }}" 
                                             alt="Favicon" 
                                             id="faviconPreview"
                                             class="h-12 w-12 object-cover rounded border-2 border-gray-300"
                                             onerror="this.src='{{ $defaultFaviconUrl }}';">
                                    </div>
                                    <div class="flex-1">
                                        <input 
                                            type="file" 
                                            name="favicon" 
                                            accept="image/*,.ico"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            onchange="previewImage(this, 'faviconPreview')">
                                        <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG, GIF, SVG, ICO (Max: 1MB)</p>
                                    </div>
                                </div>
                            </div>

                    <!-- Hero Background Uploads (3 images for slider) -->
                    <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Background Hero Beranda (3 Gambar Slider)
                                </label>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        @php
                                            $heroPath1 = \App\Models\Setting::get('home_hero_background_1') ?? \App\Models\Setting::get('home_hero_background', 'assets/images/hero/defoult.webp');
                                            $heroUrl1 = asset($heroPath1 ?? 'assets/images/hero/defoult.webp');
                                        @endphp
                                        <img src="{{ $heroUrl1 }}" alt="Hero 1" id="heroPreview1" class="h-20 w-full object-cover rounded-lg border-2 border-gray-300 mb-2">
                                        <input type="file" name="hero_background_1" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="previewImage(this, 'heroPreview1')">
                                        <p class="text-xs text-gray-500 mt-1">Gambar 1. Disarankan rasio 16:9, minimal 1200x675.</p>
                                    </div>
                                    <div>
                                        @php
                                            $heroPath2 = \App\Models\Setting::get('home_hero_background_2');
                                            $heroUrl2 = asset($heroPath2 ?? 'assets/images/hero/defoult.webp');
                                        @endphp
                                        <img src="{{ $heroUrl2 }}" alt="Hero 2" id="heroPreview2" class="h-20 w-full object-cover rounded-lg border-2 border-gray-300 mb-2">
                                        <input type="file" name="hero_background_2" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="previewImage(this, 'heroPreview2')">
                                        <p class="text-xs text-gray-500 mt-1">Gambar 2. Disarankan rasio 16:9, minimal 1200x675.</p>
                                    </div>
                                    <div>
                                        @php
                                            $heroPath3 = \App\Models\Setting::get('home_hero_background_3');
                                            $heroUrl3 = asset($heroPath3 ?? 'assets/images/hero/defoult.webp');
                                        @endphp
                                        <img src="{{ $heroUrl3 }}" alt="Hero 3" id="heroPreview3" class="h-20 w-full object-cover rounded-lg border-2 border-gray-300 mb-2">
                                        <input type="file" name="hero_background_3" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="previewImage(this, 'heroPreview3')">
                                        <p class="text-xs text-gray-500 mt-1">Gambar 3. Disarankan rasio 16:9, minimal 1200x675.</p>
                                    </div>
                                </div>
                        <p class="text-xs text-gray-500 mt-2">Format: JPG, PNG, WEBP (Max: 4MB per gambar). Jika tidak diunggah, sistem akan menggunakan gambar default.</p>
                    </div>

                    <!-- Hero Visual Right Image -->
                    <div class="md:col-span-2 mt-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Gambar Visual Hero (Kolom Kanan)
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="md:col-span-1">
                                @php
                                    $heroVisualPath = \App\Models\Setting::get('home_hero_visual');
                                    $heroVisualUrl = $heroVisualPath && file_exists(public_path($heroVisualPath))
                                        ? asset($heroVisualPath)
                                        : asset('assets/images/hero/defoult.webp');
                                @endphp
                                <img src="{{ $heroVisualUrl }}" alt="Hero Visual" id="heroVisualPreview" class="h-24 w-full object-cover rounded-lg border-2 border-gray-300 mb-2">
                                <input type="file" name="hero_visual" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="previewImage(this, 'heroVisualPreview')">
                                <p class="text-xs text-gray-500 mt-1">Gambar kolom kanan hero. Disarankan rasio 16:9, minimal 1200x675.</p>
                            </div>
                        </div>
                    </div>

                        </div>
                    </div>

                    <!-- Colors Section -->
                    <div class="mb-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                            <i class="fas fa-palette mr-2"></i>Pengaturan Warna
                        </h2>
                    </div>

                    @foreach($colorGroups as $groupName => $groupColors)
                        <div class="mb-8">
                            <div class="flex items-center justify-between mb-3">
                                <h2 class="text-lg font-semibold text-gray-800">
                                    {{ $groupName }}
                                </h2>
                                @if(strtolower($groupName) === 'navbar')
                                    <div class="hidden md:flex items-center gap-2">
                                        <span class="text-xs text-gray-500">Preview</span>
                                        <span class="inline-block h-6 w-32 rounded-full border border-gray-200" style="background: linear-gradient(135deg, {{ \App\Models\Setting::get('color_navbar_start', '#7c3aed') ?? '#7c3aed' }} 0%, {{ \App\Models\Setting::get('color_navbar_end', '#3b82f6') ?? '#3b82f6' }} 100%);"></span>
                                    </div>
                                @endif
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                @foreach($groupColors as $setting)
                                    <div class="border border-gray-200 rounded-xl p-3 hover:shadow-sm transition-shadow bg-white/70">
                                        <div class="flex items-center justify-between">
                                            <div class="min-w-0">
                                                <label class="block text-sm font-medium text-gray-700 truncate">
                                                    {{ ucwords(str_replace(['color_', '_'], ['', ' '], $setting->key)) }}
                                                </label>
                                                @if($setting->description)
                                                    <p class="text-[11px] text-gray-500 truncate">{{ $setting->description }}</p>
                                                @endif
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <input 
                                                    type="text" 
                                                    name="colors_text[{{ $setting->key }}]" 
                                                    value="{{ $setting->value }}"
                                                    class="w-24 h-9 px-2 border border-gray-300 rounded-lg text-xs font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                    pattern="^#[0-9A-Fa-f]{6}$"
                                                    onchange="updateColorInput(this, '{{ $setting->key }}')">
                                                <input 
                                                    type="color" 
                                                    name="colors[{{ $setting->key }}]" 
                                                    value="{{ $setting->value }}"
                                                    class="w-9 h-9 border border-gray-300 rounded-lg cursor-pointer p-0"
                                                    onchange="updateColorPreview(this, '{{ $setting->key }}')">
                                                <span 
                                                    id="preview-{{ $setting->key }}" 
                                                    class="inline-block w-9 h-9 rounded-lg border border-gray-200"
                                                    style="background-color: {{ $setting->value }}">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach

                    <div class="flex justify-end space-x-4 mt-8 pt-6 border-t border-gray-200">
                        <a href="{{ route('dashboard.user') }}" 
                           class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                            Batal
                        </a>
                        <button type="submit" 
                                class="px-6 py-2 rounded-lg text-white font-medium transition-colors"
                                style="background-color: {{ \App\Models\Setting::get('color_primary', '#3b82f6') ?? '#3b82f6' }};"
                                onmouseover="this.style.opacity='0.9'"
                                onmouseout="this.style.opacity='1'">
                            <i class="fas fa-save mr-2"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Preview Section -->
        <div class="mt-8 bg-white rounded-lg shadow-md overflow-hidden">
            <div class="px-6 py-3 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-eye mr-2"></i>Preview Warna
                </h2>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-3">
                    <span class="px-3 py-2 rounded-lg text-white text-sm" id="preview-primary" style="background-color: {{ \App\Models\Setting::get('color_primary', '#3b82f6') ?? '#3b82f6' }};">Primary</span>
                    <span class="px-3 py-2 rounded-lg text-white text-sm" id="preview-success" style="background-color: {{ \App\Models\Setting::get('color_success', '#10b981') ?? '#10b981' }};">Success</span>
                    <span class="px-3 py-2 rounded-lg text-white text-sm" id="preview-danger" style="background-color: {{ \App\Models\Setting::get('color_danger', '#ef4444') ?? '#ef4444' }};">Danger</span>
                    <span class="px-3 py-2 rounded-lg text-white text-sm" id="preview-warning" style="background-color: {{ \App\Models\Setting::get('color_warning', '#f59e0b') ?? '#f59e0b' }};">Warning</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- APK Upload Bottom Section -->
<div class="mt-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800">Upload APK Android</h2>
            </div>
            <div class="p-6">
                @php
                    $apkPath = \App\Models\Setting::get('app_apk_path');
                    $apkExists = $apkPath && file_exists(public_path($apkPath));
                @endphp
                <div class="flex items-center space-x-4">
                    <div class="flex-1">
                        <input id="apkInput" type="file" name="app_apk" accept=".apk" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Format: APK (Max: 200MB)</p>
                    </div>
                    <div class="flex-shrink-0">
                        @if($apkExists)
                            @php
                                $sizeBytes = @filesize(public_path($apkPath));
                                $sizeMB = $sizeBytes ? number_format($sizeBytes / 1048576, 2) : null;
                                $uploadedTs = @filemtime(public_path($apkPath));
                                $uploadedAt = $uploadedTs ? \Carbon\Carbon::createFromTimestamp($uploadedTs)->format('d M Y H:i') : null;
                            @endphp
                            <div class="flex flex-col items-end space-y-2">
                                <span class="text-xs text-gray-600">APK saat ini: {{ basename($apkPath) }}</span>
                                <span class="text-xs text-gray-500">Ukuran: {{ $sizeMB ? ($sizeMB.' MB') : '—' }} • Diunggah: {{ $uploadedAt ?? '—' }}</span>
                                <a href="{{ route('app.download-apk') }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700">
                                    <i class="fas fa-download"></i>
                                    Download APK Saat Ini
                                </a>
                            </div>
                        @else
                            <span class="text-xs text-gray-500">Belum ada APK diunggah</span>
                        @endif
                        <div class="mt-2">
                            <button type="button" onclick="uploadApkNow(this)" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
                                <i class="fas fa-save"></i>
                                Simpan APK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function previewImage(input, previewId) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById(previewId).src = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    function updateColorPreview(input, key) {
        const textInput = document.querySelector(`input[name="colors_text[${key}]"]`);
        const preview = document.getElementById(`preview-${key}`);
        
        if (textInput) {
            textInput.value = input.value;
        }
        if (preview) {
            preview.style.backgroundColor = input.value;
        }
        
        // Update preview boxes if they match
        if (key === 'color_primary') {
            document.getElementById('preview-primary').style.backgroundColor = input.value;
        } else if (key === 'color_success') {
            document.getElementById('preview-success').style.backgroundColor = input.value;
        } else if (key === 'color_danger') {
            document.getElementById('preview-danger').style.backgroundColor = input.value;
        } else if (key === 'color_warning') {
            document.getElementById('preview-warning').style.backgroundColor = input.value;
        }
    }
    
    function updateColorInput(input, key) {
        const colorInput = document.querySelector(`input[name="colors[${key}]"]`);
        const preview = document.getElementById(`preview-${key}`);
        
        if (/^#[0-9A-Fa-f]{6}$/.test(input.value)) {
            if (colorInput) {
                colorInput.value = input.value;
            }
            if (preview) {
                preview.style.backgroundColor = input.value;
            }
        }
    }
    async function uploadApkNow(btn){
        const input = document.getElementById('apkInput');
        if(!input || !input.files || !input.files[0]){
            alert('Pilih file APK terlebih dahulu.');
            return;
        }
        btn.disabled = true;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengunggah...';
        try{
            const fd = new FormData();
            fd.append('app_apk', input.files[0]);
            const resp = await fetch('{{ route('settings.upload-apk') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: fd
            });
            if(!resp.ok){
                const text = await resp.text();
                throw new Error(text || 'Gagal mengunggah APK');
            }
            const data = await resp.json().catch(()=>({success:true}));
            alert((data && data.message) ? data.message : 'APK berhasil diunggah');
            location.reload();
        }catch(e){
            alert('Gagal mengunggah APK: ' + (e.message || e));
        }finally{
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }
</script>
@endpush
@endsection