<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-2xl text-gray-800 dark:text-gray-100 leading-tight">
            {{ __('Branding App') }}
        </h2>
    </x-slot>

    <div class="w-full">
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
            <form action="{{ route('admin.settings.branding.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <div class="p-8 space-y-6">
                    <div>
                        <label for="app_name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Aplikasi</label>
                        <input type="text" name="app_name" id="app_name" value="{{ old('app_name', $settings['app_name'] ?? 'DigiShop') }}"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="DigiShop">
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Nama utama yang akan ditampilkan pada Sidebar dan Header Login.</p>
                        @error('app_name') <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="app_description" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Pendek Aplikasi</label>
                        <textarea name="app_description" id="app_description" rows="3"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="Premium Digital Products Marketplace">{{ old('app_description', $settings['app_description'] ?? 'Premium Digital Products Marketplace') }}</textarea>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Slogan atau deskripsi pendek yang akan tampil di bawah nama aplikasi pada form login dan sidebar jika sedang dilebarkan.</p>
                        @error('app_description') <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="app_logo" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Logo Aplikasi / Icon Sidebar</label>
                        
                        @if(isset($settings['app_logo']) && $settings['app_logo'])
                        <div class="mb-4 p-3 border border-gray-200 dark:border-slate-700 rounded-lg inline-flex bg-slate-50 dark:bg-slate-700/50 items-center justify-center">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($settings['app_logo']) }}" alt="App Logo" class="h-12 w-auto object-contain">
                        </div>
                        @else
                        <div class="mb-4 p-2 rounded-lg bg-slate-700 flex items-center justify-center inline-flex w-12 h-12">
                             <x-heroicon-o-book-open class="w-6 h-6 text-white" stroke-width="2" />
                        </div>
                        @endif
                        
                        <input type="file" name="app_logo" id="app_logo" accept="image/*"
                            class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:bg-indigo-900/30 file:text-indigo-700 dark:file:text-indigo-400 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900/50 border border-gray-200 dark:border-slate-700 rounded-lg dark:bg-slate-700 dark:text-white">
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Direkomendasikan rasio persegi (1:1) misal 200x200px. Maksimal ukuran 2MB. Format PNG, JPG, WEBP. Biarkan kosong jika tidak ingin mengubah logo.</p>
                        @error('app_logo') <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="px-8 py-4 bg-gray-50 dark:bg-slate-700/50 border-t border-gray-100 dark:border-slate-700 flex justify-end gap-3">
                    <button type="submit" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 border border-transparent rounded-lg shadow-sm font-medium text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>
