{{-- settings/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Pengaturan')
@section('page-title', 'Pengaturan Toko')

@section('content')
<div class="max-w-xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200">
            <h2 class="font-bold text-slate-800">⚙️ Pengaturan Aplikasi</h2>
        </div>
        <form method="POST" action="{{ route('settings.update') }}" class="p-6 space-y-5" enctype="multipart/form-data">
            @csrf

            <fieldset class="space-y-4">
                <legend class="font-bold text-slate-700 text-sm mb-3 pb-2 border-b border-slate-100 w-full">🏪 Informasi Toko</legend>
                
                <div class="flex items-center gap-5 mb-4">
                    <div class="w-20 h-20 bg-slate-100 rounded-2xl border-2 border-dashed border-slate-300 flex items-center justify-center overflow-hidden relative group">
                        @if($settings->get('store_logo'))
                            <img src="{{ asset($settings->get('store_logo')->value) }}" class="w-full h-full object-cover">
                        @else
                            <span class="text-3xl">🖼️</span>
                        @endif
                        <label class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center cursor-pointer">
                            <span class="text-white text-[10px] font-bold uppercase">Ganti</span>
                            <input type="file" name="store_logo" class="hidden" onchange="this.form.submit()">
                        </label>
                    </div>
                    <div class="flex-1">
                        <label class="text-xs font-semibold text-slate-600 block mb-1">Logo Toko</label>
                        <p class="text-[10px] text-slate-400">Gunakan file JPG/PNG transparan (Maks. 2MB)</p>
                    </div>
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600 block mb-1">Nama Toko</label>
                    <input type="text" name="store_name" value="{{ $settings->get('store_name')?->value ?? '' }}"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400" required>
                </div>
                <div>
                    <label class="text-xs font-semibold text-slate-600 block mb-1">Alamat</label>
                    <textarea name="store_address" rows="2"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none">{{ $settings->get('store_address')?->value ?? '' }}</textarea>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-600 block mb-1">No. Telepon</label>
                        <input type="text" name="store_phone" value="{{ $settings->get('store_phone')?->value ?? '' }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-600 block mb-1">Email</label>
                        <input type="email" name="store_email" value="{{ $settings->get('store_email')?->value ?? '' }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                    </div>
                </div>
            </fieldset>

            <fieldset class="space-y-4">
                <legend class="font-bold text-slate-700 text-sm mb-3 pb-2 border-b border-slate-100 w-full">💰 Pajak (PPN)</legend>
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="tax_enabled" value="1" id="taxEnabled"
                        {{ $settings->get('tax_enabled')?->value ? 'checked' : '' }} class="rounded w-4 h-4">
                    <span class="text-sm font-medium text-slate-700">Aktifkan PPN pada transaksi</span>
                </label>
                <div id="taxPercentField" class="{{ $settings->get('tax_enabled')?->value ? '' : 'hidden' }}">
                    <label class="text-xs font-semibold text-slate-600 block mb-1">Persen PPN (%)</label>
                    <input type="number" name="tax_percent" value="{{ $settings->get('tax_percent')?->value ?? 11 }}"
                        min="0" max="100" step="0.5"
                        class="w-32 px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                </div>
            </fieldset>

            <fieldset class="space-y-4">
                <legend class="font-bold text-slate-700 text-sm mb-3 pb-2 border-b border-slate-100 w-full">🖨️ Pengaturan Printer & Struk</legend>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-600 block mb-1">Ukuran Kertas</label>
                        <select name="printer_width" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                            <option value="58" {{ $settings->get('printer_width')?->value == '58' ? 'selected' : '' }}>Thermal 58mm</option>
                            <option value="80" {{ $settings->get('printer_width')?->value == '80' ? 'selected' : ($settings->get('printer_width')?->value ? '' : 'selected') }}>Thermal 80mm</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-600 block mb-1">Pesan Footer Struk</label>
                        <input type="text" name="receipt_footer" value="{{ $settings->get('receipt_footer')?->value ?? '' }}"
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                            placeholder="Terima kasih!">
                    </div>
                </div>
                <div class="flex flex-col gap-3 pt-2">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="printer_auto_print" value="1" 
                            {{ $settings->get('printer_auto_print')?->value ? 'checked' : '' }} class="rounded w-4 h-4">
                        <span class="text-sm font-medium text-slate-700">Cetak otomatis setelah bayar</span>
                    </label>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="printer_show_logo" value="1" 
                            {{ $settings->get('printer_show_logo')?->value ? 'checked' : '' }} class="rounded w-4 h-4">
                        <span class="text-sm font-medium text-slate-700">Tampilkan Logo di Struk</span>
                    </label>
                </div>
            </fieldset>

            <fieldset class="space-y-4">
                <legend class="font-bold text-slate-700 text-sm mb-3 pb-2 border-b border-slate-100 w-full">🛡️ Keamanan & Otoritas</legend>
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="void_feature_enabled" value="1" 
                        {{ $settings->get('void_feature_enabled')?->value ? 'checked' : '' }} class="rounded w-4 h-4">
                    <span class="text-sm font-medium text-slate-700">Aktifkan Fitur Void (Pembatalan Transaksi)</span>
                </label>
                <p class="text-[10px] text-slate-400 mt-1 pl-7">Jika aktif, kasir dapat membatalkan transaksi yang sudah selesai melalui menu Riwayat dengan memasukkan password Admin/Manajer.</p>
            </fieldset>

            <button type="submit" class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl transition">
                💾 Simpan Pengaturan
            </button>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('taxEnabled').addEventListener('change', function() {
    document.getElementById('taxPercentField').classList.toggle('hidden', !this.checked);
});
</script>
@endpush
@endsection