@extends('layouts.dashboard')

@section('title', 'Pengaturan Sistem')

@section('content')
<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="flex items-start gap-3">
        <span class="grid h-10 w-10 place-items-center rounded-md bg-slate-100 text-slate-700">
            <i data-lucide="settings" class="h-5 w-5"></i>
        </span>
        <div>
            <h2 class="font-black text-slate-950">Konfigurasi website</h2>
            <p class="mt-1 text-sm leading-6 text-slate-600">Ubah teks rekening, QRIS, kontak, dan informasi yang dipakai sistem.</p>
        </div>
    </div>

    <form method="POST" action="{{ route(auth()->user()->role.'.settings.update') }}" class="mt-6 grid gap-4">
        @csrf
        @forelse($settings as $setting)
            <label class="grid gap-2 text-sm font-bold text-slate-700">
                {{ str($setting->key)->replace('_', ' ')->title() }}
                <textarea name="settings[{{ $setting->key }}]" rows="3" class="rounded-md border border-slate-300 px-3 py-3">{{ $setting->value }}</textarea>
            </label>
        @empty
            <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Belum ada pengaturan.</p>
        @endforelse
        <button class="inline-flex items-center justify-center gap-2 rounded-md bg-slate-950 px-4 py-3 font-black text-white hover:bg-sky-700 sm:w-max">
            <i data-lucide="save" class="h-4 w-4"></i>
            Simpan Pengaturan
        </button>
    </form>
</section>
@endsection