@extends('layouts.app')
@section('title', 'Pengaturan Aplikasi - Admin')
@section('content')
<div class="max-w-3xl mx-auto">
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem">
    <div>
        <h1 class="page-title">Pengaturan Aplikasi</h1>
        <p class="page-subtitle">Konfigurasi global platform FIN-ANALYSIS PRO</p>
    </div>
    <form action="{{ route('admin.settings.reset') }}" method="POST" onsubmit="return confirm('Reset semua pengaturan ke default?')">
        @csrf
        <button type="submit" class="btn btn-danger btn-sm">Reset ke Default</button>
    </form>
</div>

<form action="{{ route('admin.settings.update') }}" method="POST">
    @csrf @method('PUT')

    @foreach($settings as $group => $items)
    <div class="card" style="margin-bottom:1.25rem">
        <div style="font-size:.8rem;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid #E2E8F0">
            {{ ucfirst($group) }}
        </div>

        @foreach($items as $setting)
        <div class="form-group" style="margin-bottom:1.25rem">
            <label class="form-label">{{ $setting->label ?? $setting->key }}</label>
            @if($setting->description)
            <div class="form-hint" style="margin-bottom:6px">{{ $setting->description }}</div>
            @endif

            @if($setting->type === 'boolean')
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer">
                <div style="position:relative;width:44px;height:24px">
                    <input type="checkbox" name="{{ $setting->key }}" value="1"
                           {{ $setting->value ? 'checked' : '' }}
                           style="width:0;height:0;opacity:0;position:absolute"
                           id="toggle-{{ $setting->key }}"
                           onchange="updateToggle(this)">
                    <div id="track-{{ $setting->key }}"
                         style="width:44px;height:24px;border-radius:12px;transition:background .2s;background:{{ $setting->value?'#1A56DB':'#CBD5E1' }};cursor:pointer"
                         onclick="document.getElementById('toggle-{{ $setting->key }}').click()"></div>
                    <div id="thumb-{{ $setting->key }}"
                         style="position:absolute;top:3px;width:18px;height:18px;background:white;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;transform:translateX({{ $setting->value?'22':'3' }}px);pointer-events:none"></div>
                </div>
                <span style="font-size:.875rem;color:#64748B">{{ $setting->value ? 'Aktif' : 'Nonaktif' }}</span>
            </label>

            @elseif($setting->type === 'integer')
            <input type="number" name="{{ $setting->key }}" value="{{ $setting->value }}" class="form-control" style="max-width:160px">

            @else
            <input type="text" name="{{ $setting->key }}" value="{{ $setting->value }}" class="form-control">
            @endif
        </div>
        @endforeach
    </div>
    @endforeach

    <div style="display:flex;justify-content:flex-end;gap:.75rem">
        <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">Batal</a>
        <button type="submit" class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Simpan Pengaturan
        </button>
    </div>
</form>
</div>

@push('scripts')
<script>
function updateToggle(checkbox) {
    const key = checkbox.name;
    const track = document.getElementById('track-' + key);
    const thumb = document.getElementById('thumb-' + key);
    if (checkbox.checked) {
        track.style.background = '#1A56DB';
        thumb.style.transform  = 'translateX(22px)';
    } else {
        track.style.background = '#CBD5E1';
        thumb.style.transform  = 'translateX(3px)';
    }
}
</script>
@endpush
@endsection