@extends('layouts.app')

@section('title', 'Settings')
@section('heading', 'Settings')

@section('content')
    <div class="mb-6 flex flex-wrap gap-4 border-b border-slate-200 pb-4">
        <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg px-4 py-2 text-sm font-medium {{ request()->routeIs('superadmin.settings.index') && !request()->routeIs('superadmin.settings.email') && !request()->routeIs('superadmin.settings.sms') && !request()->routeIs('superadmin.settings.whatsapp') && !request()->routeIs('superadmin.settings.profile') ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">Platform</a>
        <a href="{{ route('superadmin.settings.email') }}" class="rounded-lg px-4 py-2 text-sm font-medium {{ request()->routeIs('superadmin.settings.email*') ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">Email Settings</a>
        <a href="{{ route('superadmin.settings.sms') }}" class="rounded-lg px-4 py-2 text-sm font-medium {{ request()->routeIs('superadmin.settings.sms*') ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">SMS Settings</a>
        <a href="{{ route('superadmin.settings.whatsapp') }}" class="rounded-lg px-4 py-2 text-sm font-medium {{ request()->routeIs('superadmin.settings.whatsapp*') ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">WhatsApp Settings</a>
        <a href="{{ route('superadmin.settings.profile') }}" class="rounded-lg px-4 py-2 text-sm font-medium {{ request()->routeIs('superadmin.settings.profile*') ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">Profile</a>
    </div>

    <x-card>
        <h3 class="mb-4 text-sm font-semibold text-slate-700">Current platform configuration</h3>
        <dl class="grid gap-3 sm:grid-cols-2">
            <div>
                <dt class="text-xs font-medium uppercase text-slate-500">Platform name</dt>
                <dd class="mt-0.5 text-sm font-medium text-slate-900">{{ $settings['platform_name'] ?? config('app.name') }}</dd>
            </div>
            <div>
                <dt class="text-xs font-medium uppercase text-slate-500">Support email</dt>
                <dd class="mt-0.5 text-sm font-medium text-slate-900">{{ $settings['support_email'] ?: '—' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-medium uppercase text-slate-500">Timezone</dt>
                <dd class="mt-0.5 text-sm font-medium text-slate-900">{{ $settings['timezone'] ?? config('app.timezone') }}</dd>
            </div>
            <div>
                <dt class="text-xs font-medium uppercase text-slate-500">Version</dt>
                <dd class="mt-0.5 text-sm font-medium text-slate-900">{{ $settings['version'] ?? config('app.version', '1.0.0') }}</dd>
            </div>
        </dl>
        <p class="mt-4 text-sm text-slate-500">To change app name, timezone or mail, update your <code class="rounded bg-slate-100 px-1 py-0.5 text-xs">.env</code> and <code class="rounded bg-slate-100 px-1 py-0.5 text-xs">config/app.php</code>.</p>
    </x-card>

    <x-card class="mt-6">
        <h3 class="mb-4 text-sm font-semibold text-slate-700">Custom key-value settings</h3>
        <p class="mb-4 text-sm text-slate-500">Store optional platform key-value pairs (e.g. feature flags, notices). Saved to <code class="rounded bg-slate-100 px-1 py-0.5 text-xs">storage/app/superadmin_settings.json</code>.</p>
        <form action="{{ route('superadmin.settings.store') }}" method="post" class="max-w-md space-y-4">
            @csrf
            <div>
                <label for="key" class="block text-sm font-medium text-slate-700">Key</label>
                <input type="text" name="key" id="key" value="{{ old('key') }}" required
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('key') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="value" class="block text-sm font-medium text-slate-700">Value</label>
                <input type="text" name="value" id="value" value="{{ old('value') }}"
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Save setting</button>
        </form>
    </x-card>
@endsection