@extends('dev.layout')
@php $showNav = true; @endphp
@section('title', 'Settings')

@section('content')
<div class="page">
    <div class="page-header">
        <h1>⚙ Settings</h1>
        <p>Raw key-value store from the <code style="color:#79c0ff">settings</code> table. Sensitive values are masked.</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif
    @if(session('warning'))
        <div class="alert alert-warning">{{ session('warning') }}</div>
    @endif

    {{-- Add new setting --}}
    <div class="card">
        <div class="card-title">Add New Setting</div>
        <form method="POST" action="{{ route('dev.settings.create') }}">
            @csrf
            <div class="form-row">
                <div class="form-group">
                    <label>Key</label>
                    <input type="text" name="key" placeholder="e.g. yoco.public_key" value="{{ old('key') }}" required>
                </div>
                <div class="form-group">
                    <label>Value</label>
                    <input type="text" name="value" value="{{ old('value') }}">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
            </div>
        </form>
    </div>

    {{-- All settings --}}
    <div class="card">
        <div class="card-title">All Settings ({{ $settings->count() }})</div>

        @if($settings->isEmpty())
            <p style="font-size:.78rem;color:#8b949e;">No settings in the database yet.</p>
        @else
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:35%">Key</th>
                    <th>Value</th>
                    <th style="width:220px;"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($settings as $setting)
                @php
                    $isSensitive = in_array($setting->key, $sensitive);
                    $display     = $isSensitive ? str_repeat('•', 24) : $setting->value;
                @endphp
                <tr>
                    <td style="font-size:.78rem;color:#79c0ff;">{{ $setting->key }}</td>
                    <td>
                        <form method="POST" action="{{ route('dev.settings.update') }}" style="display:flex;gap:.5rem;align-items:center;">
                            @csrf
                            <input type="hidden" name="key" value="{{ $setting->key }}">
                            <input type="text"
                                name="value"
                                value="{{ $isSensitive ? '' : $setting->value }}"
                                placeholder="{{ $isSensitive ? $display : '' }}"
                                style="flex:1;font-size:.78rem;"
                                {{ $isSensitive ? 'autocomplete=off' : '' }}>
                            <button type="submit" class="btn btn-outline" style="font-size:.72rem;padding:3px 10px;">Save</button>
                        </form>
                    </td>
                    <td style="text-align:right;">
                        <form method="POST" action="{{ route('dev.settings.delete', $setting->key) }}"
                            onsubmit="return confirm('Delete setting {{ $setting->key }}?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline" style="font-size:.72rem;padding:3px 10px;border-color:#da3633;color:#ff7b72;">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>
@endsection