@extends('layouts.admin')

@section('header')
    Style & Konfigurasi Web
@endsection

@section('content')
<div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-bold mb-4 border-b pb-2">Pengaturan Tampilan & Mata Uang</h3>
    
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif

    <form action="{{ route('admin.style.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- Store Name -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Nama Toko</label>
            <input type="text" name="store_name" value="{{ $store_name }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500" required>
            <p class="text-xs text-gray-500 mt-1">Nama ini akan muncul di judul halaman dan footer.</p>
        </div>

        <!-- Footer Text -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Teks Footer</label>
            <input type="text" name="footer_text" value="{{ $footer_text }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
            <p class="text-xs text-gray-500 mt-1">Teks yang akan muncul di bagian bawah halaman.</p>
        </div>

        <!-- Primary Color -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Warna Utama Website</label>
                <div class="flex items-center gap-4">
                    <input type="color" name="primary_color" value="{{ $primary_color }}" class="h-12 w-24 border border-gray-300 rounded cursor-pointer">
                    <span class="text-gray-600 font-mono">{{ $primary_color }}</span>
                </div>
                <p class="text-xs text-gray-500 mt-1">Warna untuk tombol, header, dan aksen.</p>
            </div>
            
            <!-- Background Color 1 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Warna Background (Atas)</label>
                <div class="flex items-center gap-4">
                    <input type="color" name="background_color" value="{{ $background_color ?? '#f3f4f6' }}" class="h-12 w-24 border border-gray-300 rounded cursor-pointer">
                    <span class="text-gray-600 font-mono">{{ $background_color ?? '#f3f4f6' }}</span>
                </div>
                <p class="text-xs text-gray-500 mt-1">Warna latar utama.</p>
            </div>

            <!-- Background Color 2 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Warna Background (Bawah)</label>
                <div class="flex items-center gap-4">
                    <input type="color" name="background_color_2" value="{{ $background_color_2 ?? $background_color ?? '#f3f4f6' }}" class="h-12 w-24 border border-gray-300 rounded cursor-pointer">
                    <span class="text-gray-600 font-mono">{{ $background_color_2 ?? $background_color ?? '#f3f4f6' }}</span>
                </div>
                <p class="text-xs text-gray-500 mt-1">Pilih warna berbeda untuk efek <strong>Gradien</strong>.</p>
            </div>
        </div>

        <!-- Currency Symbol -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Mata Uang</label>
            <select name="currency_symbol" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                <option value="Rp" {{ $currency_symbol == 'Rp' ? 'selected' : '' }}>Rupiah (Rp)</option>
                <option value="RM" {{ $currency_symbol == 'RM' ? 'selected' : '' }}>Ringgit Malaysia (RM)</option>
                <option value="$" {{ $currency_symbol == '$' ? 'selected' : '' }}>US Dollar ($)</option>
                <option value="SGD" {{ $currency_symbol == 'SGD' ? 'selected' : '' }}>Singapore Dollar (SGD)</option>
                <option value="¥" {{ $currency_symbol == '¥' ? 'selected' : '' }}>Japanese Yen (¥)</option>
                <option value="€" {{ $currency_symbol == '€' ? 'selected' : '' }}>Euro (€)</option>
            </select>
            <p class="text-xs text-gray-500 mt-1">Simbol mata uang yang akan ditampilkan di seluruh harga produk.</p>
        </div>

        <!-- Animation Selection -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Animasi Website</label>
            <select name="site_animation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                <option value="none" {{ ($site_animation ?? 'none') == 'none' ? 'selected' : '' }}>Tidak Ada Animasi</option>
                <option value="meteor" {{ ($site_animation ?? '') == 'meteor' ? 'selected' : '' }}>Meteor Jatuh</option>
                <option value="gold_dust" {{ ($site_animation ?? '') == 'gold_dust' ? 'selected' : '' }}>Serbuk Emas (Gold Dust)</option>
                <option value="ecommerce" {{ ($site_animation ?? '') == 'ecommerce' ? 'selected' : '' }}>E-commerce (Belanja)</option>
                <option value="muslimah" {{ ($site_animation ?? '') == 'muslimah' ? 'selected' : '' }}>Fashion Muslimah (Hijab & Dress)</option>
                <option value="sports" {{ ($site_animation ?? '') == 'sports' ? 'selected' : '' }}>Sepatu Olahraga (Sports)</option>
            </select>
            <p class="text-xs text-gray-500 mt-1">Pilih efek animasi yang akan ditampilkan di background website.</p>
        </div>

        <div class="flex justify-end pt-4 border-t">
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 font-bold transition duration-200">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>

<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mt-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fas fa-info-circle text-blue-500"></i>
        </div>
        <div class="ml-3">
            <p class="text-sm text-blue-700">
                Fitur ini eksklusif untuk <strong>Super Admin</strong>. Perubahan yang Anda buat di sini akan langsung diterapkan ke seluruh halaman website.
            </p>
        </div>
    </div>
</div>
@endsection