@extends('layouts.staff')

@section('title', 'System Preferences › Koha Administration')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>System Preferences</span>
@endsection

@section('content')
<div style="width: 100%; display: flex; flex-direction: column;">
    <div style="background: #fff; border: 1px solid #d0d0d0; padding: 20px; border-radius: 3px;">
        <h2 style="margin: 0 0 15px 0; color: #1b4880; font-size: 16px; border-bottom: 2px solid #1b4880; padding-bottom: 8px;">
            ⚙️ Global System Preferences
        </h2>

        <div style="margin-bottom: 15px; padding: 10px; background: #e8eef5; border: 1px solid #c0d5f0; border-radius: 3px; font-size: 12px; font-weight: bold; color: #1b4880;">
            Prototype Mode: Preferences toggles are simulation configurations.
        </div>

        <table class="items-table">
            <thead>
                <tr style="background:#e8eef5;">
                    <th style="width: 250px;">Preference Name</th>
                    <th>Setting Options / Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight: bold;">opacLibraryName</td>
                    <td>
                        <input type="text" value="MTU Library Services" class="form-input" style="width: 250px;">
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold;">OPACUserSummary</td>
                    <td>
                        <select class="form-input" style="width: 150px; height: 26px;">
                            <option value="1">Enabled</option>
                            <option value="0">Disabled</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold;">CirculationRulesOverride</td>
                    <td>
                        <select class="form-input" style="width: 150px; height: 26px;">
                            <option value="1">Librarian Discretion</option>
                            <option value="0">Hard Block</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold;">CurrencyFormat</td>
                    <td>
                        <span style="font-weight: bold; font-size: 13px;">Nigerian Naira (₦)</span>
                    </td>
                </tr>
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            <button class="form-btn primary" onclick="alert('System preferences updated successfully.');">Save Settings</button>
            <a href="{{ route('staff.administration') }}" class="form-btn" style="text-decoration:none;">Cancel</a>
        </div>
    </div>
</div>
@endsection